@epoch32/visage 1.1.3 → 1.1.4

package/dist/index-dyvgtp43.js

@@ -0,0 +1,1094 @@
+import {
+  untrack2,
+  computed2,
+  resolveValue2,
+  onCleanup2,
+  createContext2,
+  useContext2,
+  signal2
+} from "./index-6kfe1nr4.js";
+import {
+  jsx2,
+  jsxs2
+} from "./index-9fvarkrx.js";
+
+// src/charts/context.ts
+var ChartContext2 = createContext2(undefined);
+function useChartContext2() {
+  const ctx = useContext2(ChartContext2);
+  if (!ctx) {
+    throw new Error("Visage Chart child component must be rendered within a <Chart> container.");
+  }
+  return ctx;
+}
+
+// src/charts/path.ts
+function pathLine2(points, options = {}) {
+  if (points.length === 0)
+    return "";
+  if (points.length === 1) {
+    const p = points[0];
+    return `M ${p.x.toFixed(2)},${p.y.toFixed(2)}`;
+  }
+  const curve = options.curve ?? "linear";
+  if (curve === "smooth" && points.length >= 2) {
+    if (points.length === 2) {
+      const p0 = points[0];
+      const p1 = points[1];
+      return `M ${p0.x.toFixed(2)},${p0.y.toFixed(2)} L ${p1.x.toFixed(2)},${p1.y.toFixed(2)}`;
+    }
+    const n = points.length;
+    const dx = [];
+    const dy = [];
+    const slopes = [];
+    for (let i = 0;i < n - 1; i++) {
+      const pA = points[i];
+      const pB = points[i + 1];
+      const deltaX = pB.x - pA.x;
+      const deltaY = pB.y - pA.y;
+      dx.push(deltaX);
+      dy.push(deltaY);
+      slopes.push(deltaX === 0 ? 0 : deltaY / deltaX);
+    }
+    const m = new Array(n).fill(0);
+    m[0] = slopes[0];
+    m[n - 1] = slopes[n - 2];
+    for (let i = 1;i < n - 1; i++) {
+      const sPrev = slopes[i - 1];
+      const sNext = slopes[i];
+      if (sPrev * sNext <= 0) {
+        m[i] = 0;
+      } else {
+        const dxPrev = dx[i - 1];
+        const dxNext = dx[i];
+        const common = dxPrev + dxNext;
+        m[i] = common === 0 ? 0 : 3 * common / ((common + dxNext) / sPrev + (common + dxPrev) / sNext);
+      }
+    }
+    let d = `M ${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
+    for (let i = 0;i < n - 1; i++) {
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const deltaX = dx[i];
+      const cp1x = p1.x + deltaX / 3;
+      const cp1y = p1.y + m[i] * deltaX / 3;
+      const cp2x = p2.x - deltaX / 3;
+      const cp2y = p2.y - m[i + 1] * deltaX / 3;
+      d += ` C ${cp1x.toFixed(2)},${cp1y.toFixed(2)} ${cp2x.toFixed(2)},${cp2y.toFixed(2)} ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+    }
+    return d;
+  }
+  if (curve === "step") {
+    let d = `M ${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
+    for (let i = 0;i < points.length - 1; i++) {
+      const p1 = points[i];
+      const p2 = points[i + 1];
+      const midX = (p1.x + p2.x) / 2;
+      d += ` L ${midX.toFixed(2)},${p1.y.toFixed(2)} L ${midX.toFixed(2)},${p2.y.toFixed(2)} L ${p2.x.toFixed(2)},${p2.y.toFixed(2)}`;
+    }
+    return d;
+  }
+  let d = `M ${points[0].x.toFixed(2)},${points[0].y.toFixed(2)}`;
+  for (let i = 1;i < points.length; i++) {
+    d += ` L ${points[i].x.toFixed(2)},${points[i].y.toFixed(2)}`;
+  }
+  return d;
+}
+function pathArea2(points, baselineY, options = {}) {
+  if (points.length === 0)
+    return "";
+  const lineD = pathLine2(points, options);
+  if (!lineD)
+    return "";
+  const first = points[0];
+  const last = points[points.length - 1];
+  return `${lineD} L ${last.x.toFixed(2)},${baselineY.toFixed(2)} L ${first.x.toFixed(2)},${baselineY.toFixed(2)} Z`;
+}
+function pathArc2(options) {
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = options;
+  const cosStart = Math.cos(startAngle);
+  const sinStart = Math.sin(startAngle);
+  const cosEnd = Math.cos(endAngle);
+  const sinEnd = Math.sin(endAngle);
+  const x0 = cx + outerRadius * cosStart;
+  const y0 = cy + outerRadius * sinStart;
+  const x1 = cx + outerRadius * cosEnd;
+  const y1 = cy + outerRadius * sinEnd;
+  const largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1;
+  if (innerRadius <= 0) {
+    return `M ${cx.toFixed(2)},${cy.toFixed(2)} L ${x0.toFixed(2)},${y0.toFixed(2)} A ${outerRadius.toFixed(2)},${outerRadius.toFixed(2)} 0 ${largeArcFlag} 1 ${x1.toFixed(2)},${y1.toFixed(2)} Z`;
+  }
+  const x2 = cx + innerRadius * cosEnd;
+  const y2 = cy + innerRadius * sinEnd;
+  const x3 = cx + innerRadius * cosStart;
+  const y3 = cy + innerRadius * sinStart;
+  return `M ${x0.toFixed(2)},${y0.toFixed(2)} A ${outerRadius.toFixed(2)},${outerRadius.toFixed(2)} 0 ${largeArcFlag} 1 ${x1.toFixed(2)},${y1.toFixed(2)} L ${x2.toFixed(2)},${y2.toFixed(2)} A ${innerRadius.toFixed(2)},${innerRadius.toFixed(2)} 0 ${largeArcFlag} 0 ${x3.toFixed(2)},${y3.toFixed(2)} Z`;
+}
+
+// src/charts/Area.tsx
+function Area2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const stroke = props.stroke ?? "#a855f7";
+    const strokeWidth = props.strokeWidth ?? 2;
+    const fill = props.fill ?? "rgba(168, 85, 247, 0.15)";
+    const fillOpacity = props.fillOpacity ?? 1;
+    const curve = props.curve ?? "smooth";
+    const id = `area-${props.dataKey}-${Math.random().toString(36).slice(2, 7)}`;
+    ctx.registerSeries({
+      id,
+      dataKey: props.dataKey,
+      type: "area",
+      color: stroke,
+      name: props.name ?? props.dataKey
+    });
+    onCleanup2(() => {
+      ctx.unregisterSeries(id);
+    });
+    return /* @__PURE__ */ jsx2("g", {
+      class: `visage-area-${props.dataKey}`,
+      opacity: props.opacity ?? 1,
+      children: () => {
+        const dataArr = ctx.data();
+        if (dataArr.length === 0)
+          return null;
+        const xScale = ctx.xScale();
+        const yScale = ctx.yScale();
+        const baselineY = ctx.innerHeight();
+        const points = [];
+        for (let i = 0;i < dataArr.length; i++) {
+          const item = dataArr[i];
+          const val = item[props.dataKey];
+          if (typeof val !== "number" || Number.isNaN(val))
+            continue;
+          let x = 0;
+          if (xScale.type === "band") {
+            x = xScale(i) + xScale.bandwidth() / 2;
+          } else {
+            x = xScale(i);
+          }
+          const y = yScale(val);
+          points.push({ x, y });
+        }
+        const areaD = pathArea2(points, baselineY, { curve });
+        const lineD = pathLine2(points, { curve });
+        const dots = [];
+        if (props.dot && points.length > 0) {
+          const dotCfg = typeof props.dot === "object" ? props.dot : {};
+          const r = dotCfg.r ?? 3.5;
+          const dotFill = dotCfg.fill ?? "#ffffff";
+          const dotStroke = dotCfg.stroke ?? stroke;
+          for (let i = 0;i < points.length; i++) {
+            const p = points[i];
+            dots.push(/* @__PURE__ */ jsx2("circle", {
+              cx: p.x,
+              cy: p.y,
+              r,
+              fill: dotFill,
+              stroke: dotStroke,
+              "stroke-width": 2
+            }));
+          }
+        }
+        return [
+          /* @__PURE__ */ jsx2("path", {
+            d: areaD,
+            fill,
+            "fill-opacity": fillOpacity
+          }),
+          /* @__PURE__ */ jsx2("path", {
+            d: lineD,
+            fill: "none",
+            stroke,
+            "stroke-width": strokeWidth,
+            "stroke-linejoin": "round",
+            "stroke-linecap": "round"
+          }),
+          ...dots
+        ];
+      }
+    });
+  };
+}
+
+// src/charts/Axis.tsx
+function XAxis2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    if (props.dataKey) {
+      ctx.setXDataKey(props.dataKey);
+      onCleanup2(() => {
+        if (ctx.xDataKey() === props.dataKey) {
+          ctx.setXDataKey("");
+        }
+      });
+    }
+    const stroke = props.stroke ?? "#94a3b8";
+    const fontSize = props.fontSize ?? 11;
+    const hideLine = props.hideLine ?? false;
+    const w = ctx.innerWidth();
+    const h = ctx.innerHeight();
+    const xScale = ctx.xScale();
+    const dataArr = ctx.data();
+    const elements = [];
+    if (!hideLine) {
+      elements.push(/* @__PURE__ */ jsx2("line", {
+        x1: 0,
+        y1: h,
+        x2: w,
+        y2: h,
+        stroke,
+        "stroke-width": 1
+      }));
+    }
+    if (xScale.type === "band") {
+      const ticks = xScale.ticks();
+      const bw = xScale.bandwidth();
+      for (let i = 0;i < ticks.length; i++) {
+        const val = ticks[i];
+        const x = xScale(i) + bw / 2;
+        const text = props.tickFormat ? props.tickFormat(val, i) : String(val);
+        elements.push(/* @__PURE__ */ jsx2("text", {
+          x,
+          y: h + 16,
+          "text-anchor": "middle",
+          "font-size": fontSize,
+          fill: stroke,
+          children: text
+        }));
+      }
+    } else {
+      const count = props.tickCount ?? 5;
+      const ticks = xScale.ticks(count);
+      for (let i = 0;i < ticks.length; i++) {
+        const tickIdx = ticks[i];
+        const x = xScale(tickIdx);
+        const idx = Math.max(0, Math.min(dataArr.length - 1, Math.round(tickIdx)));
+        const rawItem = dataArr[idx];
+        const rawVal = props.dataKey && rawItem ? rawItem[props.dataKey] : idx;
+        const text = props.tickFormat ? props.tickFormat(rawVal, i) : String(rawVal ?? idx);
+        elements.push(/* @__PURE__ */ jsx2("text", {
+          x,
+          y: h + 16,
+          "text-anchor": "middle",
+          "font-size": fontSize,
+          fill: stroke,
+          children: text
+        }));
+      }
+    }
+    return /* @__PURE__ */ jsx2("g", {
+      class: "visage-x-axis",
+      children: elements
+    });
+  };
+}
+function YAxis2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const stroke = props.stroke ?? "#94a3b8";
+    const fontSize = props.fontSize ?? 11;
+    const hideLine = props.hideLine ?? true;
+    const unit = props.unit ?? "";
+    const h = ctx.innerHeight();
+    const yScale = ctx.yScale();
+    const ticks = yScale.ticks(props.tickCount ?? 5);
+    const elements = [];
+    if (!hideLine) {
+      elements.push(/* @__PURE__ */ jsx2("line", {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: h,
+        stroke,
+        "stroke-width": 1
+      }));
+    }
+    for (let i = 0;i < ticks.length; i++) {
+      const val = ticks[i];
+      const y = yScale(val);
+      const formatted = props.tickFormat ? props.tickFormat(val, i) : unit ? `${val}${unit}` : String(val);
+      elements.push(/* @__PURE__ */ jsx2("text", {
+        x: -8,
+        y: y + 4,
+        "text-anchor": "end",
+        "font-size": fontSize,
+        fill: stroke,
+        children: formatted
+      }));
+    }
+    return /* @__PURE__ */ jsx2("g", {
+      class: "visage-y-axis",
+      children: elements
+    });
+  };
+}
+
+// src/charts/Bar.tsx
+function Bar2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const fill = props.fill ?? "#6366f1";
+    const radius = props.radius ?? 4;
+    const id = `bar-${props.dataKey}-${Math.random().toString(36).slice(2, 7)}`;
+    ctx.registerSeries({
+      id,
+      dataKey: props.dataKey,
+      type: "bar",
+      color: fill,
+      name: props.name ?? props.dataKey
+    });
+    onCleanup2(() => {
+      ctx.unregisterSeries(id);
+    });
+    return /* @__PURE__ */ jsx2("g", {
+      class: `visage-bar-${props.dataKey}`,
+      opacity: props.opacity ?? 1,
+      children: () => {
+        const dataArr = ctx.data();
+        if (dataArr.length === 0)
+          return null;
+        const xScale = ctx.xScale();
+        const yScale = ctx.yScale();
+        const baselineY = ctx.innerHeight();
+        const allBars = ctx.series().filter((s) => s.type === "bar");
+        const barIndex = allBars.findIndex((s) => s.id === id);
+        const totalBars = Math.max(1, allBars.length);
+        const bars = [];
+        for (let i = 0;i < dataArr.length; i++) {
+          const item = dataArr[i];
+          const val = item[props.dataKey];
+          if (typeof val !== "number" || Number.isNaN(val))
+            continue;
+          let slotX = 0;
+          let slotW = 20;
+          if (xScale.type === "band") {
+            slotX = xScale(i);
+            slotW = xScale.bandwidth();
+          } else {
+            const stepW = ctx.innerWidth() / Math.max(1, dataArr.length);
+            slotX = xScale(i) - stepW / 2;
+            slotW = stepW * 0.8;
+          }
+          const subBarW = slotW / totalBars;
+          const barW = props.maxWidth ? Math.min(props.maxWidth, subBarW) : subBarW;
+          const barX = slotX + (barIndex >= 0 ? barIndex * subBarW : 0) + (subBarW - barW) / 2;
+          const y = yScale(val);
+          const h = Math.max(0, baselineY - y);
+          bars.push(/* @__PURE__ */ jsx2("rect", {
+            x: barX,
+            y,
+            width: barW,
+            height: h,
+            rx: radius,
+            ry: radius,
+            fill
+          }));
+        }
+        return bars;
+      }
+    });
+  };
+}
+
+// src/charts/CartesianGrid.tsx
+function CartesianGrid2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const horizontal = props.horizontal ?? true;
+    const vertical = props.vertical ?? false;
+    const stroke = props.stroke ?? "#e2e8f0";
+    const strokeWidth = props.strokeWidth ?? 1;
+    const strokeDasharray = props.strokeDasharray;
+    const opacity = props.opacity ?? 0.8;
+    const lines = [];
+    const w = ctx.innerWidth();
+    const h = ctx.innerHeight();
+    const yScale = ctx.yScale();
+    const xScale = ctx.xScale();
+    if (horizontal) {
+      const ticks = yScale.ticks(5);
+      for (const t of ticks) {
+        const y = yScale(t);
+        lines.push(/* @__PURE__ */ jsx2("line", {
+          x1: 0,
+          y1: y,
+          x2: w,
+          y2: y,
+          stroke,
+          "stroke-width": strokeWidth,
+          "stroke-dasharray": strokeDasharray
+        }));
+      }
+    }
+    if (vertical) {
+      const ticks = xScale.ticks(5);
+      for (const t of ticks) {
+        const x = xScale(t);
+        lines.push(/* @__PURE__ */ jsx2("line", {
+          x1: x,
+          y1: 0,
+          x2: x,
+          y2: h,
+          stroke,
+          "stroke-width": strokeWidth,
+          "stroke-dasharray": strokeDasharray
+        }));
+      }
+    }
+    return /* @__PURE__ */ jsx2("g", {
+      class: "visage-cartesian-grid",
+      opacity,
+      children: lines
+    });
+  };
+}
+
+// src/charts/scale.ts
+function generateNiceTicks2(min, max, count = 5) {
+  if (min === max)
+    return [min];
+  if (count <= 0)
+    return [];
+  const span = max - min;
+  const rawStep = span / count;
+  const magnitude = 10 ** Math.floor(Math.log10(rawStep));
+  const err = rawStep / magnitude;
+  let step;
+  if (err >= 7.5) {
+    step = 10 * magnitude;
+  } else if (err >= 3.5) {
+    step = 5 * magnitude;
+  } else if (err >= 1.5) {
+    step = 2 * magnitude;
+  } else {
+    step = 1 * magnitude;
+  }
+  const start = Math.floor(min / step) * step;
+  const end = Math.ceil(max / step) * step;
+  const ticks = [];
+  for (let current = start;current <= end + step * 0.5; current += step) {
+    const rounded = Number(current.toPrecision(12));
+    ticks.push(rounded);
+  }
+  return ticks;
+}
+function createLinearScale2(domain, range, options = {}) {
+  let [d0, d1] = domain;
+  const [r0, r1] = range;
+  if (options.nice && d0 !== d1) {
+    const ticks = generateNiceTicks2(d0, d1, 5);
+    if (ticks.length > 0) {
+      d0 = Math.min(d0, ticks[0]);
+      d1 = Math.max(d1, ticks[ticks.length - 1]);
+    }
+  }
+  const fn = (val) => {
+    let v = val;
+    if (options.clamp) {
+      const minD = Math.min(d0, d1);
+      const maxD = Math.max(d0, d1);
+      v = Math.max(minD, Math.min(maxD, v));
+    }
+    const ratio = d1 === d0 ? 0 : (v - d0) / (d1 - d0);
+    return r0 + ratio * (r1 - r0);
+  };
+  fn.type = "linear";
+  fn.domain = [d0, d1];
+  fn.range = [r0, r1];
+  fn.invert = (pixel) => {
+    const ratio = r1 === r0 ? 0 : (pixel - r0) / (r1 - r0);
+    return d0 + ratio * (d1 - d0);
+  };
+  fn.ticks = (count = 5) => {
+    return generateNiceTicks2(d0, d1, count);
+  };
+  return fn;
+}
+function createBandScale2(domain, range, options = {}) {
+  const paddingInner = options.paddingInner ?? 0.2;
+  const paddingOuter = options.paddingOuter ?? 0.1;
+  const n = domain.length;
+  const totalSteps = Math.max(1, n - paddingInner + 2 * paddingOuter);
+  const step = (range[1] - range[0]) / totalSteps;
+  const bandwidth = step * (1 - paddingInner);
+  const fn = (val) => {
+    let idx = -1;
+    if (typeof val === "number" && Number.isInteger(val) && val >= 0 && val < domain.length) {
+      idx = val;
+    } else {
+      idx = domain.indexOf(val);
+    }
+    if (idx === -1)
+      return range[0];
+    return range[0] + (idx + paddingOuter) * step;
+  };
+  fn.type = "band";
+  fn.domain = [...domain];
+  fn.range = [range[0], range[1]];
+  fn.bandwidth = () => bandwidth;
+  fn.step = () => step;
+  fn.ticks = () => [...domain];
+  return fn;
+}
+
+// src/charts/Chart.tsx
+var DEFAULT_MARGIN = {
+  top: 16,
+  right: 16,
+  bottom: 24,
+  left: 36
+};
+function Chart2(props) {
+  const margin = {
+    ...DEFAULT_MARGIN,
+    ...props.margin
+  };
+  const initialW = typeof props.width === "number" ? props.width : 500;
+  const initialH = typeof props.height === "number" ? props.height : 300;
+  const measuredWidth = signal2(initialW);
+  const measuredHeight = signal2(initialH);
+  let containerEl = null;
+  const handleRef = (el) => {
+    containerEl = el;
+    if (typeof ResizeObserver !== "undefined") {
+      const ro = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const cr = entry.contentRect;
+          if (cr.width > 0)
+            measuredWidth.set(cr.width);
+          if (cr.height > 0)
+            measuredHeight.set(cr.height);
+        }
+      });
+      ro.observe(el);
+      onCleanup2(() => ro.disconnect());
+    } else {
+      if (el.clientWidth > 0)
+        measuredWidth.set(el.clientWidth);
+      if (el.clientHeight > 0)
+        measuredHeight.set(el.clientHeight);
+    }
+  };
+  const innerWidth = computed2(() => Math.max(10, measuredWidth() - margin.left - margin.right));
+  const innerHeight = computed2(() => Math.max(10, measuredHeight() - margin.top - margin.bottom));
+  const rawData = () => resolveValue2(props.data) || [];
+  const seriesList = signal2([]);
+  const xDataKey = signal2(undefined);
+  const registerSeries = (meta) => {
+    untrack2(() => {
+      seriesList.update((prev) => {
+        if (prev.some((s) => s.id === meta.id))
+          return prev;
+        return [...prev, meta];
+      });
+    });
+  };
+  const unregisterSeries = (id) => {
+    untrack2(() => {
+      seriesList.update((prev) => prev.filter((s) => s.id !== id));
+    });
+  };
+  const hoverState = signal2({
+    active: false,
+    x: 0,
+    y: 0,
+    index: -1
+  });
+  const xScale = computed2(() => {
+    const dataArr = rawData();
+    const w = innerWidth();
+    const key = xDataKey();
+    const hasBarSeries = untrack2(() => seriesList().some((s) => s.type === "bar"));
+    if (hasBarSeries && key && dataArr.length > 0) {
+      const categories = dataArr.map((d) => String(d[key]));
+      return createBandScale2(categories, [0, w], {
+        paddingInner: 0.1,
+        paddingOuter: 0.05
+      });
+    }
+    const maxIdx = Math.max(1, dataArr.length - 1);
+    return createLinearScale2([0, maxIdx], [0, w]);
+  });
+  const yScale = computed2(() => {
+    const h = innerHeight();
+    const dataArr = rawData();
+    const currentSeries = seriesList();
+    let minY = 0;
+    let maxY = 10;
+    if (props.yDomain) {
+      minY = props.yDomain[0];
+      maxY = props.yDomain[1];
+    } else if (dataArr.length > 0 && currentSeries.length > 0) {
+      let foundMin = Infinity;
+      let foundMax = -Infinity;
+      for (const item of dataArr) {
+        for (const s of currentSeries) {
+          const val = item[s.dataKey];
+          if (typeof val === "number" && !Number.isNaN(val)) {
+            if (val < foundMin)
+              foundMin = val;
+            if (val > foundMax)
+              foundMax = val;
+          }
+        }
+      }
+      if (foundMax > -Infinity) {
+        minY = Math.min(0, foundMin);
+        maxY = foundMax === 0 ? 1 : foundMax * 1.1;
+      }
+    }
+    return createLinearScale2([minY, maxY], [h, 0], { nice: true });
+  });
+  const handlePointer = (clientX, clientY) => {
+    if (!containerEl)
+      return;
+    const rect = containerEl.getBoundingClientRect();
+    const relX = clientX - rect.left - margin.left;
+    const relY = clientY - rect.top - margin.top;
+    const w = innerWidth();
+    const h = innerHeight();
+    if (relX < 0 || relX > w || relY < 0 || relY > h) {
+      hoverState.set({ active: false, x: 0, y: 0, index: -1 });
+      return;
+    }
+    const dataArr = rawData();
+    if (dataArr.length === 0)
+      return;
+    const count = dataArr.length;
+    const stepW = w / Math.max(1, count - 1);
+    const rawIdx = Math.round(relX / stepW);
+    const clampedIdx = Math.max(0, Math.min(count - 1, rawIdx));
+    hoverState.set({
+      active: true,
+      x: relX + margin.left,
+      y: relY + margin.top,
+      index: clampedIdx,
+      datum: dataArr[clampedIdx]
+    });
+  };
+  const handleMouseMove = (e) => {
+    handlePointer(e.clientX, e.clientY);
+  };
+  const handleMouseLeave = () => {
+    hoverState.set({ active: false, x: 0, y: 0, index: -1 });
+  };
+  const handleTouchMove = (e) => {
+    const touch = e.touches[0];
+    if (touch)
+      handlePointer(touch.clientX, touch.clientY);
+  };
+  const handleTouchEnd = () => {
+    hoverState.set({ active: false, x: 0, y: 0, index: -1 });
+  };
+  const ctxValue = {
+    data: rawData,
+    width: () => measuredWidth(),
+    height: () => measuredHeight(),
+    margin,
+    innerWidth: () => innerWidth(),
+    innerHeight: () => innerHeight(),
+    xScale: () => xScale(),
+    yScale: () => yScale(),
+    hoverState: () => hoverState(),
+    setHoverState: (s) => hoverState.set(s),
+    xDataKey: () => xDataKey(),
+    setXDataKey: (k) => xDataKey.set(k),
+    series: () => seriesList(),
+    registerSeries,
+    unregisterSeries
+  };
+  const containerStyle = {
+    position: "relative",
+    width: typeof props.width === "number" ? `${props.width}px` : props.width ?? "100%",
+    height: typeof props.height === "number" ? `${props.height}px` : props.height ?? "300px",
+    touchAction: "none",
+    userSelect: "none",
+    ...props.style
+  };
+  const rawChildren = Array.isArray(props.children) ? props.children : [props.children];
+  const childrenList = [];
+  const stack = [...rawChildren];
+  while (stack.length > 0) {
+    const item = stack.shift();
+    if (Array.isArray(item)) {
+      stack.unshift(...item);
+    } else if (item !== null && item !== undefined && item !== false) {
+      childrenList.push(item);
+    }
+  }
+  const svgChildren = [];
+  const overlayChildren = [];
+  for (const child of childrenList) {
+    if (typeof child === "function" && child.__visage_overlay) {
+      overlayChildren.push(child);
+    } else {
+      svgChildren.push(child);
+    }
+  }
+  return ChartContext2.Provider({
+    value: ctxValue,
+    children: () => /* @__PURE__ */ jsxs2("div", {
+      ref: handleRef,
+      class: props.class || props.className,
+      style: containerStyle,
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd,
+      children: [
+        /* @__PURE__ */ jsxs2("svg", {
+          role: "img",
+          "aria-label": props["aria-label"] ?? "Data visualization chart",
+          viewBox: () => `0 0 ${measuredWidth()} ${measuredHeight()}`,
+          width: "100%",
+          height: "100%",
+          style: { overflow: "visible", display: "block" },
+          children: [
+            /* @__PURE__ */ jsx2("title", {
+              children: props.title ?? "Data Visualization Chart"
+            }),
+            /* @__PURE__ */ jsx2("g", {
+              transform: `translate(${margin.left}, ${margin.top})`,
+              children: svgChildren
+            })
+          ]
+        }),
+        overlayChildren
+      ]
+    })
+  });
+}
+
+// src/charts/Cursor.tsx
+function ChartCursor2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const stroke = props.stroke ?? "#94a3b8";
+    const strokeWidth = props.strokeWidth ?? 1;
+    const strokeDasharray = props.strokeDasharray ?? "4 4";
+    const opacity = props.opacity ?? 0.8;
+    const hover = ctx.hoverState();
+    if (!hover.active)
+      return null;
+    const h = ctx.innerHeight();
+    const x = hover.x - ctx.margin.left;
+    return /* @__PURE__ */ jsx2("g", {
+      class: "visage-chart-cursor",
+      children: /* @__PURE__ */ jsx2("line", {
+        x1: x,
+        y1: 0,
+        x2: x,
+        y2: h,
+        stroke,
+        "stroke-width": strokeWidth,
+        "stroke-dasharray": strokeDasharray,
+        opacity
+      })
+    });
+  };
+}
+
+// src/charts/Legend.tsx
+function ChartLegend2(props) {
+  const render = () => {
+    const ctx = useChartContext2();
+    const align = props.align ?? "center";
+    const justifyMap = {
+      left: "flex-start",
+      center: "center",
+      right: "flex-end"
+    };
+    const series = ctx.series();
+    return /* @__PURE__ */ jsx2("div", {
+      class: props.class || props.className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: justifyMap[align],
+        gap: "16px",
+        paddingTop: "8px",
+        fontSize: "12px",
+        color: "#475569"
+      },
+      children: series.map((s) => /* @__PURE__ */ jsxs2("div", {
+        style: { display: "flex", alignItems: "center", gap: "6px" },
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            style: {
+              width: "10px",
+              height: "10px",
+              borderRadius: "3px",
+              background: s.color ?? "#8b5cf6"
+            }
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            children: s.name ?? s.dataKey
+          })
+        ]
+      }))
+    });
+  };
+  render.__visage_overlay = true;
+  return render;
+}
+var Legend2 = ChartLegend2;
+
+// src/charts/Line.tsx
+function Line2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const stroke = props.stroke ?? "#8b5cf6";
+    const strokeWidth = props.strokeWidth ?? 2;
+    const curve = props.curve ?? "linear";
+    const id = `line-${props.dataKey}-${Math.random().toString(36).slice(2, 7)}`;
+    ctx.registerSeries({
+      id,
+      dataKey: props.dataKey,
+      type: "line",
+      color: stroke,
+      name: props.name ?? props.dataKey
+    });
+    onCleanup2(() => {
+      ctx.unregisterSeries(id);
+    });
+    return /* @__PURE__ */ jsx2("g", {
+      class: `visage-line-${props.dataKey}`,
+      opacity: props.opacity ?? 1,
+      children: () => {
+        const dataArr = ctx.data();
+        if (dataArr.length === 0)
+          return null;
+        const xScale = ctx.xScale();
+        const yScale = ctx.yScale();
+        const points = [];
+        for (let i = 0;i < dataArr.length; i++) {
+          const item = dataArr[i];
+          const val = item[props.dataKey];
+          if (typeof val !== "number" || Number.isNaN(val))
+            continue;
+          let x = 0;
+          if (xScale.type === "band") {
+            x = xScale(i) + xScale.bandwidth() / 2;
+          } else {
+            x = xScale(i);
+          }
+          const y = yScale(val);
+          points.push({ x, y });
+        }
+        const d = pathLine2(points, { curve });
+        const dots = [];
+        if (props.dot && points.length > 0) {
+          const dotCfg = typeof props.dot === "object" ? props.dot : {};
+          const r = dotCfg.r ?? 3.5;
+          const fill = dotCfg.fill ?? "#ffffff";
+          const dotStroke = dotCfg.stroke ?? stroke;
+          const dotSw = dotCfg.strokeWidth ?? 2;
+          for (let i = 0;i < points.length; i++) {
+            const p = points[i];
+            dots.push(/* @__PURE__ */ jsx2("circle", {
+              cx: p.x,
+              cy: p.y,
+              r,
+              fill,
+              stroke: dotStroke,
+              "stroke-width": dotSw
+            }));
+          }
+        }
+        return [
+          /* @__PURE__ */ jsx2("path", {
+            d,
+            fill: "none",
+            stroke,
+            "stroke-width": strokeWidth,
+            "stroke-dasharray": props.strokeDasharray,
+            "stroke-linejoin": "round",
+            "stroke-linecap": "round"
+          }),
+          ...dots
+        ];
+      }
+    });
+  };
+}
+
+// src/charts/Pie.tsx
+var DEFAULT_PALETTE = [
+  "#8b5cf6",
+  "#ec4899",
+  "#3b82f6",
+  "#10b981",
+  "#f59e0b",
+  "#6366f1",
+  "#14b8a6",
+  "#ef4444"
+];
+function Pie2(props) {
+  return () => {
+    const ctx = useChartContext2();
+    const innerRadius = props.innerRadius ?? 0;
+    const outerRadius = props.outerRadius ?? 80;
+    const colors = props.colors ?? DEFAULT_PALETTE;
+    const padAngle = props.padAngle ?? 0.02;
+    return /* @__PURE__ */ jsx2("g", {
+      class: "visage-pie",
+      children: () => {
+        const dataArr = ctx.data();
+        if (dataArr.length === 0)
+          return null;
+        const w = ctx.innerWidth();
+        const h = ctx.innerHeight();
+        const centerX = props.cx ?? w / 2;
+        const centerY = props.cy ?? h / 2;
+        let total = 0;
+        for (const item of dataArr) {
+          const val = Number(item[props.dataKey]) || 0;
+          total += val;
+        }
+        if (total === 0)
+          return null;
+        const slices = [];
+        let currentAngle = -Math.PI / 2;
+        for (let i = 0;i < dataArr.length; i++) {
+          const item = dataArr[i];
+          const val = Number(item[props.dataKey]) || 0;
+          const sliceAngle = val / total * (2 * Math.PI);
+          const startAngle = currentAngle + (val > 0 ? padAngle / 2 : 0);
+          const endAngle = currentAngle + sliceAngle - (val > 0 ? padAngle / 2 : 0);
+          currentAngle += sliceAngle;
+          if (val <= 0 || endAngle <= startAngle)
+            continue;
+          const d = pathArc2({
+            cx: centerX,
+            cy: centerY,
+            innerRadius,
+            outerRadius,
+            startAngle,
+            endAngle
+          });
+          const fill = colors[i % colors.length];
+          slices.push(/* @__PURE__ */ jsx2("path", {
+            d,
+            fill,
+            stroke: "#ffffff",
+            "stroke-width": 1.5
+          }));
+        }
+        return slices;
+      }
+    });
+  };
+}
+
+// src/charts/Tooltip.tsx
+function ChartTooltip2(props) {
+  const render = () => {
+    const ctx = useChartContext2();
+    const hover = ctx.hoverState();
+    if (!hover.active || !hover.datum)
+      return null;
+    const w = ctx.width();
+    const datum = hover.datum;
+    const series = ctx.series();
+    const xKey = ctx.xDataKey();
+    const cardWidth = 160;
+    let left = hover.x + 14;
+    if (left + cardWidth > w) {
+      left = Math.max(10, hover.x - cardWidth - 14);
+    }
+    const top = Math.max(10, hover.y - 30);
+    if (props.content) {
+      return /* @__PURE__ */ jsx2("div", {
+        style: {
+          position: "absolute",
+          left: `${left}px`,
+          top: `${top}px`,
+          pointerEvents: "none",
+          zIndex: 50
+        },
+        children: props.content(datum, series)
+      });
+    }
+    const label = xKey && datum[xKey] !== undefined ? datum[xKey] : `#${hover.index + 1}`;
+    const formattedLabel = props.labelFormat ? props.labelFormat(label) : String(label);
+    return /* @__PURE__ */ jsxs2("div", {
+      class: props.class || props.className,
+      style: {
+        position: "absolute",
+        left: `${left}px`,
+        top: `${top}px`,
+        pointerEvents: "none",
+        zIndex: 50,
+        minWidth: `${cardWidth}px`,
+        padding: "8px 12px",
+        borderRadius: "10px",
+        background: "rgba(255, 255, 255, 0.92)",
+        backdropFilter: "blur(12px)",
+        WebkitBackdropFilter: "blur(12px)",
+        border: "1px solid rgba(226, 232, 240, 0.8)",
+        boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05)",
+        fontSize: "12px",
+        color: "#1e293b",
+        lineHeight: "1.4"
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", {
+          style: {
+            fontWeight: "600",
+            color: "#475569",
+            marginBottom: "6px",
+            borderBottom: "1px solid #f1f5f9",
+            paddingBottom: "4px"
+          },
+          children: formattedLabel
+        }),
+        /* @__PURE__ */ jsx2("div", {
+          style: { display: "flex", flexDirection: "column", gap: "4px" },
+          children: series.map((s) => {
+            const rawVal = datum[s.dataKey];
+            if (rawVal === undefined || rawVal === null)
+              return null;
+            const valStr = props.format ? props.format(rawVal, s.name ?? s.dataKey) : String(rawVal);
+            return /* @__PURE__ */ jsxs2("div", {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs2("div", {
+                  style: { display: "flex", alignItems: "center", gap: "6px" },
+                  children: [
+                    /* @__PURE__ */ jsx2("span", {
+                      style: {
+                        width: "8px",
+                        height: "8px",
+                        borderRadius: "50%",
+                        background: s.color ?? "#8b5cf6"
+                      }
+                    }),
+                    /* @__PURE__ */ jsx2("span", {
+                      style: { color: "#64748b" },
+                      children: s.name ?? s.dataKey
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsx2("span", {
+                  style: { fontWeight: "600", color: "#0f172a" },
+                  children: valStr
+                })
+              ]
+            });
+          })
+        })
+      ]
+    });
+  };
+  render.__visage_overlay = true;
+  return render;
+}
+var Tooltip2 = ChartTooltip2;
+
+export { ChartContext2, useChartContext2, pathLine2, pathArea2, pathArc2, Area2, XAxis2, YAxis2, Bar2, CartesianGrid2, generateNiceTicks2, createLinearScale2, createBandScale2, Chart2, ChartCursor2, ChartLegend2, Legend2, Line2, Pie2, ChartTooltip2, Tooltip2 };