@primeui/chart-core 0.0.1-alpha.1 → 1.0.0-rc.1

package/dist/{chunk-O2X6FF45.mjs → chunks/chunk-BDCNBS6W.mjs}

@@ -1,4 +1,195 @@
-import { hexToRgba, createSvgRadialGradient, createSvgLinearGradient, createCanvasRadialGradient, createCanvasLinearGradient, parseColorToRGB } from './chunk-SSLTFJ3U.mjs';
+import { hexToRgba, createSvgRadialGradient, createSvgLinearGradient, createCanvasRadialGradient, createCanvasLinearGradient, parseColorToRGB } from './chunk-BF7RP4A3.mjs';
+
+// src/themes/default.ts
+var defaultLightTheme = {
+  // Series — 14-color premium pastel palette, rotated for adjacent categorical contrast.
+  // Lively enough for default demos, softer than utility-palette primaries.
+  series: [
+    "#5daeea",
+    // Azure
+    "#ffad5a",
+    // Apricot
+    "#ffd166",
+    // Gold
+    "#4ecdc4",
+    // Aqua
+    "#7c8cff",
+    // Periwinkle
+    "#c084fc",
+    // Lavender
+    "#ff6fae",
+    // Rose
+    "#9ccc3c",
+    // Lime
+    "#ff7a66",
+    // Coral
+    "#36b7d6",
+    // Cyan
+    "#a78bfa",
+    // Lilac
+    "#5ccf9f",
+    // Mint
+    "#fda4af",
+    // Salmon
+    "#94a3b8"
+    // Slate
+  ],
+  // Chrome — drives axes, grid, labels, title, caption.
+  // All 4 axis slots default to the same neutral; override individual entries for multi-axis charts.
+  axes: ["#666666", "#666666", "#666666", "#666666"],
+  grid: "#e2e8f0",
+  gridMinor: "#cbd5e1",
+  tickLabel: "#666666",
+  dataLabel: "#334155",
+  dataLabelBackground: "#00000000",
+  // transparent by default
+  dataLabelBorder: "#00000000",
+  annotation: "#334155",
+  annotationBackground: "#00000000",
+  // transparent by default
+  annotationBorder: "#00000000",
+  titleColor: "#0f172a",
+  captionColor: "#64748b",
+  bandFill: "#f1f5f9",
+  // Direction signals — independent of series ramp so candlestick charts
+  // don't collide with series-colored overlays.
+  positive: "#1eb854",
+  negative: "#dc2828",
+  candleNeutral: "#6b7280",
+  // Effect coefficients — mirror state class CSS defaults.
+  hoverBrightness: 1.1,
+  dimOpacity: 1,
+  barStrokeWidth: 0,
+  // Tick halo — opposite-luma from text fill so labels pop against
+  // series-colored backgrounds. `#ffffffd9` = rgba(255,255,255,0.85).
+  tickHalo: "#ffffffd9",
+  // Heatmap defaults — mirror `--p-chart-heat-min/max/empty/null`.
+  heatColorMin: "#fde68a",
+  heatColorMax: "#ee1c1c",
+  heatEmpty: "#e5e7eb",
+  heatNull: "#f3f4f6",
+  // Tooltip — semi-transparent surface with subtle border. `f2` ≈ 0.95 alpha,
+  // `1a` ≈ 0.10 alpha. Hex w/ alpha keeps parity-test regex simple.
+  tooltipBackground: "#ffffffd9",
+  tooltipBorder: "#0000001a",
+  tooltipColor: "#374151",
+  tooltipRadius: "8px",
+  tooltipBlur: "12px",
+  tooltipShadow: "0 8px 24px #0000001f",
+  tooltipPadding: "10px 14px",
+  legendColor: "#374151",
+  legendBackground: "#00000000",
+  // transparent by default
+  legendBorder: "#00000000",
+  // Reference lines/bands — neutral-40 stroke, 10% opacity fill.
+  referenceLineColor: "#94a3b8",
+  referenceBandFill: "#0000001a",
+  // rgba(0,0,0,0.10)
+  // Navigator chrome — series line/area, dim mask outside the selection window,
+  // and the selection border + interior. Hex-with-alpha keeps the parity-test regex
+  // happy: `#3b82f6b3` ≈ rgba(59,130,246,0.70), `#3b82f614` ≈ rgba(59,130,246,0.08),
+  // `#0000001f` ≈ rgba(0,0,0,0.12).
+  navigatorSeries: "#94a3b8",
+  navigatorMask: "#0000001f",
+  navigatorSelectionColor: "#3b82f6b3",
+  navigatorSelectionFill: "#3b82f614",
+  // Treemap defaults — mirror existing `--p-chart-treemap-*` vars.
+  treemapCell: "#5daeea",
+  treemapCellBorder: "#00000026",
+  // rgba(0,0,0,0.15)
+  treemapHeaderBg: "#ffffffe6",
+  // near-white header band in light mode
+  treemapHeaderText: "#1f2937",
+  // dark slate text on the light band
+  // Content background — the surface the chart sits on (white in light mode).
+  // Used by canvas custom markers that need a fill matching the page background.
+  background: "#ffffff",
+  // Generic fallback border (final fallback in pie/bar canvas paths).
+  borderColor: "#000000",
+  // Crosshair line color — falls back to axes[0] by default.
+  crosshairColor: "#666666",
+  // Base typography — chart-level `fontFamily`/`fontSize` props still win.
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  fontSize: 12
+};
+var defaultDarkTheme = {
+  // Dark keeps the same hue story with a modest lift for small marks on dark surfaces.
+  series: ["#6bbbed", "#ffb76d", "#ffdc7a", "#61d8cf", "#909dff", "#cc99fd", "#ff82ba", "#aad64c", "#ff8b76", "#4fc7df", "#b79dfb", "#6fdaad", "#fdb1bb", "#a8b5c6"],
+  axes: ["#a1a1aa", "#a1a1aa", "#a1a1aa", "#a1a1aa"],
+  grid: "#3f3f46",
+  gridMinor: "#52525b",
+  tickLabel: "#a1a1aa",
+  dataLabel: "#e4e4e7",
+  dataLabelBackground: "#00000000",
+  dataLabelBorder: "#00000000",
+  annotation: "#e4e4e7",
+  annotationBackground: "#00000000",
+  annotationBorder: "#00000000",
+  titleColor: "#fafafa",
+  captionColor: "#a1a1aa",
+  bandFill: "#27272a",
+  positive: "#22d96a",
+  negative: "#ff4d4d",
+  candleNeutral: "#a1a1a1",
+  hoverBrightness: 1.1,
+  dimOpacity: 1,
+  barStrokeWidth: 0,
+  // `#000000d9` = rgba(0,0,0,0.85) — dark halo for light text in dark mode.
+  tickHalo: "#000000d9",
+  heatColorMin: "#fde68a",
+  heatColorMax: "#ee1c1c",
+  heatEmpty: "#3f3f46",
+  heatNull: "#27272a",
+  // Tooltip — dark surface, subtle light border for separation against dark page bg.
+  tooltipBackground: "#0a0a0acc",
+  // near-black + 0.80 (frosted glass)
+  tooltipBorder: "#ffffff1a",
+  // 0.10 alpha
+  tooltipColor: "#e4e4e7",
+  tooltipRadius: "8px",
+  tooltipBlur: "12px",
+  tooltipShadow: "0 8px 24px #00000066",
+  tooltipPadding: "10px 14px",
+  legendColor: "#e4e4e7",
+  legendBackground: "#00000000",
+  legendBorder: "#00000000",
+  referenceLineColor: "#71717a",
+  referenceBandFill: "#ffffff14",
+  // rgba(255,255,255,0.08)
+  // Navigator chrome — Highcharts-style: light overlay dims dark bg so selection stands out;
+  // brighter blue (blue-400) for selection so it pops on dark surfaces.
+  // `#ffffff14` ≈ rgba(255,255,255,0.08), `#60a5fab3` ≈ rgba(96,165,250,0.70),
+  // `#60a5fa1f` ≈ rgba(96,165,250,0.12).
+  navigatorSeries: "#a1a1aa",
+  navigatorMask: "#ffffff14",
+  navigatorSelectionColor: "#60a5fab3",
+  navigatorSelectionFill: "#60a5fa1f",
+  // Treemap defaults — same Azure family for cell, mirrored borders/headers.
+  treemapCell: "#6bbbed",
+  // theme.series[0] dark
+  treemapCellBorder: "#ffffff26",
+  // rgba(255,255,255,0.15)
+  treemapHeaderBg: "#00000099",
+  // rgba(0,0,0,0.6) — dark header band in dark mode
+  treemapHeaderText: "#ffffff",
+  background: "#0a0a0a",
+  borderColor: "#ffffff",
+  crosshairColor: "#a1a1aa",
+  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+  fontSize: 12
+};
+
+// src/utils/color/colorIndex.ts
+var _cache = /* @__PURE__ */ new WeakMap();
+function buildColorIndexMap(datasets) {
+  const cached = _cache.get(datasets);
+  if (cached) return cached;
+  const sorted = Array.from(datasets.entries()).sort(([, a], [, b]) => a.order - b.order);
+  const map = /* @__PURE__ */ new Map();
+  sorted.forEach(([id], i) => map.set(id, i));
+  _cache.set(datasets, map);
+  return map;
+}
 
 // src/utils/color/gradient.ts
 function isGradientColor(color) {
@@ -147,171 +338,6 @@ function sampleGradientAt(color, point, center, radius, chartArea, defaultDirect
   return sorted[sorted.length - 1].color;
 }
 
-// src/themes/default.ts
-var defaultLightTheme = {
-  // Series — 10-hue Studio palette, hand-tuned for white backgrounds.
-  series: [
-    "#3563e9",
-    // cobalt
-    "#e8722d",
-    // persimmon
-    "#1fbe8b",
-    // jade
-    "#dc2f4f",
-    // crimson
-    "#6852d9",
-    // lavender
-    "#1dafd9",
-    // cerulean
-    "#d63384",
-    // magenta
-    "#88b83f",
-    // olive
-    "#a855cc",
-    // plum
-    "#d9a422"
-    // saffron
-  ],
-  // Chrome — drives axes, grid, labels, title, caption.
-  // All 4 axis slots default to the same neutral; override individual entries for multi-axis charts.
-  axes: ["#666666", "#666666", "#666666", "#666666"],
-  grid: "#e2e8f0",
-  gridMinor: "#cbd5e1",
-  tickLabel: "#666666",
-  dataLabel: "#334155",
-  dataLabelBackground: "#00000000",
-  // transparent by default
-  dataLabelBorder: "#00000000",
-  annotation: "#334155",
-  annotationBackground: "#00000000",
-  // transparent by default
-  annotationBorder: "#00000000",
-  titleColor: "#0f172a",
-  captionColor: "#64748b",
-  bandFill: "#f1f5f9",
-  // Direction signals — independent of series ramp so candlestick charts
-  // don't collide with series-colored overlays.
-  positive: "#1eb854",
-  negative: "#dc2828",
-  candleNeutral: "#6b7280",
-  // Effect coefficients — mirror state class CSS defaults.
-  hoverBrightness: 1.1,
-  dimOpacity: 0.6,
-  barStrokeWidth: 0,
-  // Tick halo — opposite-luma from text fill so labels pop against
-  // series-colored backgrounds. `#ffffffd9` = rgba(255,255,255,0.85).
-  tickHalo: "#ffffffd9",
-  // Heatmap defaults — mirror `--p-chart-heat-min/max/empty/null`.
-  heatColorMin: "#fde68a",
-  heatColorMax: "#ee1c1c",
-  heatEmpty: "#e5e7eb",
-  heatNull: "#f3f4f6",
-  // Tooltip — semi-transparent surface with subtle border. `f2` ≈ 0.95 alpha,
-  // `1a` ≈ 0.10 alpha. Hex w/ alpha keeps parity-test regex simple.
-  tooltipBackground: "#ffffffd9",
-  tooltipBorder: "#0000001a",
-  tooltipColor: "#374151",
-  tooltipRadius: "8px",
-  tooltipBlur: "12px",
-  tooltipShadow: "0 8px 24px #0000001f",
-  tooltipPadding: "10px 14px",
-  legendColor: "#374151",
-  legendBackground: "#00000000",
-  // transparent by default
-  legendBorder: "#00000000",
-  // Reference lines/bands — neutral-40 stroke, 10% opacity fill.
-  referenceLineColor: "#94a3b8",
-  referenceBandFill: "#0000001a",
-  // rgba(0,0,0,0.10)
-  // Navigator chrome — series line/area, dim mask outside the selection window,
-  // and the selection border + interior. Hex-with-alpha keeps the parity-test regex
-  // happy: `#3b82f6b3` ≈ rgba(59,130,246,0.70), `#3b82f614` ≈ rgba(59,130,246,0.08),
-  // `#0000001f` ≈ rgba(0,0,0,0.12).
-  navigatorSeries: "#94a3b8",
-  navigatorMask: "#0000001f",
-  navigatorSelectionColor: "#3b82f6b3",
-  navigatorSelectionFill: "#3b82f614",
-  // Treemap defaults — mirror existing `--p-chart-treemap-*` vars.
-  treemapCell: "#3563e9",
-  treemapCellBorder: "#00000026",
-  // rgba(0,0,0,0.15)
-  treemapHeaderBg: "#ffffffe6",
-  // near-white header band in light mode
-  treemapHeaderText: "#1f2937",
-  // dark slate text on the light band
-  // Generic fallback border (final fallback in pie/bar canvas paths).
-  borderColor: "#000000",
-  // Crosshair line color — falls back to axes[0] by default.
-  crosshairColor: "#666666",
-  // Base typography — chart-level `fontFamily`/`fontSize` props still win.
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
-  fontSize: 12
-};
-var defaultDarkTheme = {
-  series: ["#5790ff", "#ff8838", "#14e5a4", "#ff4d6d", "#8270ff", "#33cdff", "#ff4da0", "#b8e92f", "#c766ff", "#ffc633"],
-  axes: ["#a1a1aa", "#a1a1aa", "#a1a1aa", "#a1a1aa"],
-  grid: "#3f3f46",
-  gridMinor: "#52525b",
-  tickLabel: "#a1a1aa",
-  dataLabel: "#e4e4e7",
-  dataLabelBackground: "#00000000",
-  dataLabelBorder: "#00000000",
-  annotation: "#e4e4e7",
-  annotationBackground: "#00000000",
-  annotationBorder: "#00000000",
-  titleColor: "#fafafa",
-  captionColor: "#a1a1aa",
-  bandFill: "#27272a",
-  positive: "#22d96a",
-  negative: "#ff4d4d",
-  candleNeutral: "#a1a1a1",
-  hoverBrightness: 1.1,
-  dimOpacity: 0.6,
-  barStrokeWidth: 0,
-  // `#000000d9` = rgba(0,0,0,0.85) — dark halo for light text in dark mode.
-  tickHalo: "#000000d9",
-  heatColorMin: "#fde68a",
-  heatColorMax: "#ee1c1c",
-  heatEmpty: "#3f3f46",
-  heatNull: "#27272a",
-  // Tooltip — dark surface, subtle light border for separation against dark page bg.
-  tooltipBackground: "#0a0a0acc",
-  // near-black + 0.80 (frosted glass)
-  tooltipBorder: "#ffffff1a",
-  // 0.10 alpha
-  tooltipColor: "#e4e4e7",
-  tooltipRadius: "8px",
-  tooltipBlur: "12px",
-  tooltipShadow: "0 8px 24px #00000066",
-  tooltipPadding: "10px 14px",
-  legendColor: "#e4e4e7",
-  legendBackground: "#00000000",
-  legendBorder: "#00000000",
-  referenceLineColor: "#71717a",
-  referenceBandFill: "#ffffff14",
-  // rgba(255,255,255,0.08)
-  // Navigator chrome — Highcharts-style: light overlay dims dark bg so selection stands out;
-  // brighter blue (blue-400) for selection so it pops on dark surfaces.
-  // `#ffffff14` ≈ rgba(255,255,255,0.08), `#60a5fab3` ≈ rgba(96,165,250,0.70),
-  // `#60a5fa1f` ≈ rgba(96,165,250,0.12).
-  navigatorSeries: "#a1a1aa",
-  navigatorMask: "#ffffff14",
-  navigatorSelectionColor: "#60a5fab3",
-  navigatorSelectionFill: "#60a5fa1f",
-  // Treemap defaults — same Studio cobalt for cell, mirrored borders/headers.
-  treemapCell: "#5790ff",
-  // theme.series[0] dark
-  treemapCellBorder: "#ffffff26",
-  // rgba(255,255,255,0.15)
-  treemapHeaderBg: "#00000099",
-  // rgba(0,0,0,0.6) — dark header band in dark mode
-  treemapHeaderText: "#ffffff",
-  borderColor: "#ffffff",
-  crosshairColor: "#a1a1aa",
-  fontFamily: 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
-  fontSize: 12
-};
-
 // src/utils/accessor.utils.ts
 function isAccessorFunction(accessor) {
   return typeof accessor === "function";
@@ -493,7 +519,7 @@ function resolveSwatchColor(props, index, item, theme, extras) {
   if (props.color != null) {
     return getColor(props, index, item, theme, extras);
   }
-  return `var(--p-chart-color-${index % 10}, ${getDefaultColor(index, theme)})`;
+  return `var(--p-chart-color-${index % 14}, ${getDefaultColor(index, theme)})`;
 }
 
-export { FIELD_DEFAULTS, asGradient, batchResolveAccessor, batchResolveRequired, createCanvasGradientFromColor, createSvgGradientFromColor, defaultDarkTheme, defaultLightTheme, getColor, getColorValue, getDefaultColor, getPrimaryColor, gradientToCssBackground, isAccessorArray, isAccessorFunction, isAccessorString, isGradientColor, isNestedPath, makeItemContext, normalizeGradient, remapStopsForDonut, resolveAccessor, resolveColor, resolveDash, resolveNestedPath, resolveRequired, resolveSwatchColor, resolveSwatchGradientStops, sampleGradientAt };
+export { FIELD_DEFAULTS, asGradient, batchResolveAccessor, batchResolveRequired, buildColorIndexMap, createCanvasGradientFromColor, createSvgGradientFromColor, defaultDarkTheme, defaultLightTheme, getColor, getColorValue, getDefaultColor, getPrimaryColor, gradientToCssBackground, isAccessorArray, isAccessorFunction, isAccessorString, isGradientColor, isNestedPath, makeItemContext, normalizeGradient, remapStopsForDonut, resolveAccessor, resolveColor, resolveDash, resolveNestedPath, resolveRequired, resolveSwatchColor, resolveSwatchGradientStops, sampleGradientAt };

package/dist/{chunk-55Y3WI6S.mjs → chunks/chunk-BR4PSSPU.mjs}

@@ -1,9 +1,9 @@
-import { getCellLabelInfo, buildCellExtras } from './chunk-VVI3OBPJ.mjs';
-import { createDrawImage } from './chunk-7CMVDIOU.mjs';
-import { resolveFontFamily, DEFAULT_TREEMAP_CELL_BORDER_COLOR, DEFAULT_TREEMAP_HEADER_TEXT_COLOR, 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';
+import { getCellLabelInfo, buildCellExtras } from './chunk-KCSMOAZO.mjs';
+import { createDrawImage } from './chunk-HXDLOOCS.mjs';
+import { resolveFontFamily, DEFAULT_TREEMAP_CELL_BORDER_COLOR, DEFAULT_TREEMAP_HEADER_TEXT_COLOR, DEFAULT_HOVER_DIM_OPACITY, DEFAULT_HOVER_BRIGHTNESS } from './chunk-6LUIVTNV.mjs';
+import { getContrastColor } from './chunk-RI32WIDX.mjs';
+import { resolveAccessor, makeItemContext, resolveDash } from './chunk-BDCNBS6W.mjs';
+import { withCanvasState, adjustBrightness } from './chunk-BF7RP4A3.mjs';
 
 // src/series/treemap/canvas/index.ts
 function renderTreemapCanvas(props, layout, ctx, context) {

package/dist/{chunk-TA4MVAEX.mjs → chunks/chunk-CFA2SUBF.mjs}

@@ -1,10 +1,11 @@
-import { toRad, generateNiceTicks } from './chunk-RQ3CKQOX.mjs';
+import { toRad, generateNiceTicks } from './chunk-K7AGQTVK.mjs';
 
 // src/renderers/radial-grid.geometry.ts
-function valueToRadius(value, domain, outerRadius) {
+function valueToRadius(value, domain, outerRadius, innerRadius = 0) {
   const [min, max] = domain;
-  if (max === min) return 0;
-  return Math.max(0, Math.min(outerRadius, (value - min) / (max - min) * outerRadius));
+  if (max === min) return innerRadius;
+  const available = outerRadius - innerRadius;
+  return Math.max(innerRadius, Math.min(outerRadius, innerRadius + (value - min) / (max - min) * available));
 }
 function buildCircleSvgPath(cx, cy, r) {
   return `M ${cx},${cy - r} A ${r},${r} 0 1 1 ${cx},${cy + r} A ${r},${r} 0 1 1 ${cx},${cy - r} Z`;
@@ -40,12 +41,14 @@ function buildWedgePath(center, rInner, rOuter, angleStartDeg, angleEndDeg) {
 }
 function resolveBandGeometry(band, layout, yAxis) {
   const outer = layout.radius;
+  const inner = layout.innerRadius ?? 0;
+  const frac = (f) => Math.max(inner, Math.min(outer, inner + f * (outer - inner)));
   if (band.r1 != null || band.r2 != null) {
     const f1 = band.r1 ?? 0;
     const f2 = band.r2 ?? 1;
-    const rInner = Math.max(0, Math.min(outer, Math.min(f1, f2) * outer));
-    const rOuter = Math.max(0, Math.min(outer, Math.max(f1, f2) * outer));
-    return rOuter > 0 ? { rInner, rOuter, mode: "annulus" } : null;
+    const rInner = frac(Math.min(f1, f2));
+    const rOuter = frac(Math.max(f1, f2));
+    return rOuter > inner ? { rInner, rOuter, mode: "annulus" } : null;
   }
   if (band.category != null) {
     if (!yAxis || yAxis.mode !== "perSpoke") return null;
@@ -53,11 +56,11 @@ function resolveBandGeometry(band, layout, yAxis) {
     if (ci < 0) return null;
     const spokeDomain = yAxis.spokes[ci]?.domain;
     if (!spokeDomain) return null;
-    const r1 = band.y1 != null ? valueToRadius(band.y1, spokeDomain, outer) : 0;
-    const r2 = band.y2 != null ? valueToRadius(band.y2, spokeDomain, outer) : outer;
+    const r1 = band.y1 != null ? valueToRadius(band.y1, spokeDomain, outer, inner) : inner;
+    const r2 = band.y2 != null ? valueToRadius(band.y2, spokeDomain, outer, inner) : outer;
     const rInner = Math.min(r1, r2);
     const rOuter = Math.max(r1, r2);
-    if (rOuter <= 0) return null;
+    if (rOuter <= inner) return null;
     const halfStep = layout.angleStep / 2;
     const centerAngle = -90 + ci * layout.angleStep;
     return {
@@ -69,19 +72,20 @@ function resolveBandGeometry(band, layout, yAxis) {
     };
   }
   if ((band.y1 != null || band.y2 != null) && layout.domain && yAxis?.mode === "shared") {
-    const r1 = band.y1 != null ? valueToRadius(band.y1, layout.domain, outer) : 0;
-    const r2 = band.y2 != null ? valueToRadius(band.y2, layout.domain, outer) : outer;
+    const r1 = band.y1 != null ? valueToRadius(band.y1, layout.domain, outer, inner) : inner;
+    const r2 = band.y2 != null ? valueToRadius(band.y2, layout.domain, outer, inner) : outer;
     const rInner = Math.min(r1, r2);
     const rOuter = Math.max(r1, r2);
-    return rOuter > 0 ? { rInner, rOuter, mode: "annulus" } : null;
+    return rOuter > inner ? { rInner, rOuter, mode: "annulus" } : null;
   }
   return null;
 }
 function resolveLineGeometry(line, layout, yAxis) {
   const outer = layout.radius;
+  const inner = layout.innerRadius ?? 0;
   if (line.r != null) {
-    const r = Math.max(0, Math.min(outer, line.r * outer));
-    return r > 0 ? { mode: "ring", r } : null;
+    const r = Math.max(inner, Math.min(outer, inner + line.r * (outer - inner)));
+    return r > inner ? { mode: "ring", r } : null;
   }
   if (line.category != null) {
     if (line.y == null) return null;
@@ -90,8 +94,8 @@ function resolveLineGeometry(line, layout, yAxis) {
     if (ci < 0) return null;
     const spokeDomain = yAxis.spokes[ci]?.domain;
     if (!spokeDomain) return null;
-    const r = valueToRadius(line.y, spokeDomain, outer);
-    if (r <= 0) return null;
+    const r = valueToRadius(line.y, spokeDomain, outer, inner);
+    if (r <= inner) return null;
     const angleDeg = -90 + ci * layout.angleStep;
     const angleRad = toRad(angleDeg);
     const dx = Math.cos(angleRad);
@@ -110,16 +114,17 @@ function resolveLineGeometry(line, layout, yAxis) {
     };
   }
   if (line.y != null && layout.domain && yAxis?.mode === "shared") {
-    const r = valueToRadius(line.y, layout.domain, outer);
-    return r > 0 ? { mode: "ring", r } : null;
+    const r = valueToRadius(line.y, layout.domain, outer, inner);
+    return r > inner ? { mode: "ring", r } : null;
   }
   return null;
 }
-function resolveSharedRadialGrid(grid, domain, rawDataMax, radius, tickCount) {
+function resolveSharedRadialGrid(grid, domain, rawDataMax, radius, tickCount, innerRadius = 0) {
   let levelValues = grid.levelValues.slice();
   let levelRadii = grid.levelRadii.slice();
   let outDomain = [domain[0], domain[1]];
-  const place = (vals, d) => vals.map((v) => d[1] === d[0] ? 0 : (v - d[0]) / (d[1] - d[0]) * radius);
+  const available = radius - innerRadius;
+  const place = (vals, d) => vals.map((v) => d[1] === d[0] ? innerRadius : innerRadius + (v - d[0]) / (d[1] - d[0]) * available);
   if (tickCount != null && tickCount >= 2) {
     const rawMax = rawDataMax ?? domain[1];
     levelValues = generateNiceTicks(domain[0], rawMax, tickCount, true);
@@ -152,6 +157,8 @@ function buildRadialGridLayout(base, xAxisProps, yAxisProps, yAxesByCategory, ch
   let domain = base.domain;
   let yAxis = null;
   const isPerSpokeMode = !!base.perSpokeDomains && base.perSpokeDomains.size > 0;
+  const innerRadius = base.innerRadius ?? 0;
+  const available = base.radius - innerRadius;
   if (isPerSpokeMode && (yAxisProps || yAxesByCategory && yAxesByCategory.size > 0)) {
     const spokes = [];
     for (let ci = 0; ci < base.categories.length; ci++) {
@@ -165,7 +172,7 @@ function buildRadialGridLayout(base, xAxisProps, yAxisProps, yAxesByCategory, ch
       const hi = ticks[ticks.length - 1] ?? spokeDomain[1];
       const aligned = [Math.min(spokeDomain[0], lo), Math.max(spokeDomain[1], hi)];
       const span = aligned[1] - aligned[0];
-      const radii = ticks.map((v) => span === 0 ? 0 : (v - aligned[0]) / span * base.radius);
+      const radii = ticks.map((v) => span === 0 ? innerRadius : innerRadius + (v - aligned[0]) / span * available);
       const uniformTickStyle = declared?.tickStyle && typeof declared.tickStyle !== "function" ? declared.tickStyle : void 0;
       const rawTickFormat = declared?.tickFormat;
       spokes.push({
@@ -179,7 +186,7 @@ function buildRadialGridLayout(base, xAxisProps, yAxisProps, yAxesByCategory, ch
         showLabels: propsForSpoke?.showLabels ?? true
       });
     }
-    const referenceRingRadii = [0.2, 0.4, 0.6, 0.8].map((f) => f * base.radius);
+    const referenceRingRadii = [0.2, 0.4, 0.6, 0.8].map((f) => innerRadius + f * available);
     const defaultUniformTickStyle = yAxisProps?.tickStyle && typeof yAxisProps.tickStyle !== "function" ? yAxisProps.tickStyle : void 0;
     yAxis = {
       mode: "perSpoke",
@@ -202,7 +209,7 @@ function buildRadialGridLayout(base, xAxisProps, yAxisProps, yAxesByCategory, ch
       levelValues = base.grid.levelValues.slice();
       levelRadii = base.grid.levelRadii.slice();
     } else {
-      const resolved = resolveSharedRadialGrid(base.grid, domain, base.rawDataMax, base.radius, yAxisProps.tickCount);
+      const resolved = resolveSharedRadialGrid(base.grid, domain, base.rawDataMax, base.radius, yAxisProps.tickCount, innerRadius);
       levelValues = resolved.levelValues;
       levelRadii = resolved.levelRadii;
       domain = resolved.domain;
@@ -230,6 +237,7 @@ function buildRadialGridLayout(base, xAxisProps, yAxisProps, yAxesByCategory, ch
   return {
     center: base.center,
     radius: base.radius,
+    innerRadius,
     categories: base.categories,
     angleStep: base.angleStep,
     spokeEndpoints: base.spokeEndpoints,

package/dist/{chunk-WH3C3Y7P.mjs → chunks/chunk-CKQ4DNNJ.mjs}

@@ -1,5 +1,4 @@
-import { parseColorToRGB } from './chunk-SSLTFJ3U.mjs';
-import { clamp } from './chunk-RQ3CKQOX.mjs';
+import { clamp } from './chunk-K7AGQTVK.mjs';
 
 // src/animations/interpolation.ts
 function lerp(start, end, t) {
@@ -15,24 +14,14 @@ function lerpValues(start, target, progress) {
   }
   return result;
 }
-function lerpColor(startColor, endColor, t) {
-  const start = parseColorToRGB(startColor);
-  const end = parseColorToRGB(endColor);
-  if (!start || !end) {
-    return t < 0.5 ? startColor : endColor;
-  }
-  const r = Math.round(clamp(lerp(start.r, end.r, t), 0, 255));
-  const g = Math.round(clamp(lerp(start.g, end.g, t), 0, 255));
-  const b = Math.round(clamp(lerp(start.b, end.b, t), 0, 255));
-  return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
-}
-function interpolateRadialGrid(prevDomain, targetDomain, target, radius, progress) {
+function interpolateRadialGrid(prevDomain, targetDomain, target, radius, progress, innerRadius = 0) {
   const interpMin = prevDomain[0] + (targetDomain[0] - prevDomain[0]) * progress;
   const interpMax = prevDomain[1] + (targetDomain[1] - prevDomain[1]) * progress;
   const domainSpan = interpMax - interpMin;
+  const available = radius - innerRadius;
   const levelRadii = target.levelValues.map((v) => {
-    if (domainSpan === 0) return 0;
-    return clamp((v - interpMin) / domainSpan * radius, 0, radius);
+    if (domainSpan === 0) return innerRadius;
+    return clamp(innerRadius + (v - interpMin) / domainSpan * available, innerRadius, radius);
   });
   return { ...target, levelRadii };
 }
@@ -133,7 +122,7 @@ function interpolatePolarLayout(prev, target, progress) {
   }
   return {
     ...target,
-    grid: interpolateRadialGrid(prev.domain, target.domain, target.grid, target.maxRadius, progress),
+    grid: interpolateRadialGrid(prev.domain, target.domain, target.grid, target.maxRadius, progress, target.innerRadiusRatio * target.maxRadius),
     bars
   };
 }
@@ -146,4 +135,4 @@ function createPolarEntranceLayout(target) {
   return { ...target, bars };
 }
 
-export { createPolarEntranceLayout, createRadarEntranceLayout, interpolateCartesianAxisLayout, interpolatePolarLayout, interpolateRadialGrid, lerp, lerpColor, lerpValues };
+export { createPolarEntranceLayout, createRadarEntranceLayout, interpolateCartesianAxisLayout, interpolatePolarLayout, interpolateRadialGrid, lerp, lerpValues };

package/dist/chunks/chunk-DIJFKY6H.mjs

@@ -0,0 +1,21 @@
+import { warnChartDevOnce } from './chunk-K7AGQTVK.mjs';
+
+// src/utils/safeRender.utils.ts
+function safeRenderProp(render, label) {
+  try {
+    return render();
+  } catch (err) {
+    warnChartDevOnce(`render:${label}`, `A custom "${label}" render function threw and was skipped. ${err instanceof Error ? err.message : String(err)}`);
+    return void 0;
+  }
+}
+function safeFormat(format, fallback, label) {
+  try {
+    return format();
+  } catch (err) {
+    warnChartDevOnce(`format:${label}`, `A custom "${label}" format function threw; falling back to the default. ${err instanceof Error ? err.message : String(err)}`);
+    return fallback();
+  }
+}
+
+export { safeFormat, safeRenderProp };