@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog-chunks/chunk-3QX6CASP.js

@@ -0,0 +1,93 @@
+import {
+  useCanvasSetup
+} from "./chunk-GDCQNKP7.js";
+
+// .generated/catalog/components/dither-charts/DitherFunnelChart.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var STAGES_DATA = [
+  { name: "Q1 Funnel", stages: [{ label: "Visitors", val: 100, color: "#FFFFFF" }, { label: "Leads", val: 62, color: "#E2E8F0" }, { label: "Deals", val: 38, color: "#CBD5E1" }, { label: "Won", val: 18, color: "#94A3B8" }] },
+  { name: "Q2 Funnel", stages: [{ label: "Visitors", val: 100, color: "#FFFFFF" }, { label: "Leads", val: 74, color: "#E2E8F0" }, { label: "Deals", val: 45, color: "#CBD5E1" }, { label: "Won", val: 24, color: "#94A3B8" }] }
+];
+var smoothstep = (min, max, value) => {
+  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  return x * x * (3 - 2 * x);
+};
+var hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+function DitherFunnelChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(0);
+  const period = STAGES_DATA[periodIndex];
+  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
+  const targetDataRef = useRef(period.stages);
+  const fromDataRef = useRef(period.stages);
+  const morphStartTimeRef = useRef(0);
+  useEffect(() => {
+    fromDataRef.current = targetDataRef.current;
+    targetDataRef.current = period.stages;
+    morphStartTimeRef.current = performance.now();
+  }, [period]);
+  useEffect(() => {
+    let req;
+    let lastFrame = 0;
+    let time = 0;
+    const draw = (now) => {
+      req = requestAnimationFrame(draw);
+      if (!isVisible.current) return;
+      if (now - lastFrame < 33) return;
+      lastFrame = now;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { width: w, height: h } = rect.current;
+      if (w === 0 || h === 0) return;
+      time += reducedMotion ? 0 : 0.02;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, w, h);
+      const prog = reducedMotion ? 1 : Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
+      const e = 1 - Math.pow(2, -10 * prog);
+      const count = period.stages.length;
+      const rowH = (h - (count - 1) * 6) / count;
+      const cell = Math.max(2, Math.round(w / 200));
+      const t2 = time;
+      for (let i = 0; i < count; i++) {
+        const target = targetDataRef.current[i];
+        const from = fromDataRef.current[i];
+        const val = from.val + (target.val - from.val) * e;
+        const stageW = val / 100 * w;
+        const yTop = i * (rowH + 6);
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, yTop, stageW, rowH);
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = target.color;
+        for (let bx = 0; bx <= Math.ceil(stageW); bx += cell) {
+          for (let by = Math.floor(yTop); by <= Math.ceil(yTop + rowH); by += cell) {
+            const jx = bx + cell / 2;
+            const jy = by + cell / 2;
+            const jit = hash(jx, jy);
+            const waveRaw = reducedMotion ? 0 : Math.sin(jx * 0.05 + t2) + Math.sin(jy * 0.05 + t2 * 0.7);
+            const mod = smoothstep(-1.5, 1.5, waveRaw);
+            const sz = cell * (0.35 + 0.35 * mod) * (0.8 + 0.4 * jit);
+            ctx.fillRect(bx + (cell - sz) / 2, by + (cell - sz) / 2, sz, sz);
+          }
+        }
+        ctx.restore();
+      }
+      ctx.restore();
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [period, reducedMotion]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex flex-col items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-[140px] flex items-center justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full pointer-events-none" }) }) });
+}
+
+export {
+  DitherFunnelChart
+};

package/dist/catalog-chunks/chunk-3TYA5TCG.js

@@ -0,0 +1,34 @@
+// .generated/catalog/components/IconSwap.tsx
+import { AnimatePresence, motion } from "framer-motion";
+import { jsx } from "react/jsx-runtime";
+function IconSwap({ children }) {
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children });
+}
+function IconSwapItem({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      initial: { opacity: 0, scale: 0.25, filter: "blur(4px)" },
+      animate: { opacity: 1, scale: 1, filter: "blur(0px)" },
+      exit: { opacity: 0, scale: 0.25, filter: "blur(4px)" },
+      transition: {
+        type: "spring",
+        duration: 0.3,
+        bounce: 0
+      },
+      style: { display: "inline-flex", alignItems: "center", justifyContent: "center" },
+      className,
+      ...props,
+      children
+    }
+  );
+}
+
+export {
+  IconSwap,
+  IconSwapItem
+};

package/dist/catalog-chunks/chunk-4M7HZE4Z.js

@@ -0,0 +1,107 @@
+import {
+  useCanvasSetup
+} from "./chunk-GDCQNKP7.js";
+
+// .generated/catalog/components/dither-charts/RevenueLineChart.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var REVENUE_DATA = [
+  { name: "This Week", total: 12450, data: [1200, 1500, 1100, 1800, 2200, 2900, 1750] },
+  { name: "Last Week", total: 9800, data: [900, 1100, 800, 1300, 1600, 2100, 2e3] }
+];
+var smoothstep = (min, max, value) => {
+  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  return x * x * (3 - 2 * x);
+};
+var hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+function RevenueLineChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(0);
+  const period = REVENUE_DATA[periodIndex];
+  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
+  const targetDataRef = useRef(period.data);
+  const fromDataRef = useRef(period.data);
+  const morphStartTimeRef = useRef(0);
+  useEffect(() => {
+    fromDataRef.current = targetDataRef.current;
+    targetDataRef.current = period.data;
+    morphStartTimeRef.current = performance.now();
+  }, [period]);
+  useEffect(() => {
+    let req;
+    let time = 0;
+    const draw = () => {
+      if (!isVisible.current) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { width: w, height: h } = rect.current;
+      if (w === 0 || h === 0) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      time += reducedMotion ? 0 : 0.02;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, w, h);
+      const prog = reducedMotion ? 1 : Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
+      const e = 1 - Math.pow(2, -10 * prog);
+      const points = period.data.length;
+      const maxVal = Math.max(...period.data, ...fromDataRef.current) * 1.2;
+      const stepX = w / (points - 1);
+      const cell = Math.max(2, Math.round(w / 200));
+      ctx.beginPath();
+      for (let i = 0; i < points; i++) {
+        const target = targetDataRef.current[i];
+        const from = fromDataRef.current[i];
+        const val = from + (target - from) * e;
+        const x = i * stepX;
+        const y = h - val / maxVal * h;
+        if (i === 0) ctx.moveTo(x, y);
+        else ctx.lineTo(x, y);
+      }
+      ctx.lineWidth = 2.5;
+      ctx.strokeStyle = "#FFFFFF";
+      ctx.lineJoin = "round";
+      ctx.lineCap = "round";
+      ctx.stroke();
+      ctx.lineTo(w, h);
+      ctx.lineTo(0, h);
+      ctx.closePath();
+      ctx.save();
+      ctx.clip();
+      ctx.fillStyle = "#FFFFFF";
+      for (let x = 0; x <= w; x += cell) {
+        for (let y = 0; y <= h; y += cell) {
+          const jx = x + cell / 2;
+          const jy = y + cell / 2;
+          const jit = hash(jx, jy);
+          const gradientFalloff = Math.max(0, 1 - jy / h);
+          const waveRaw = reducedMotion ? 0 : Math.sin(jx * 0.05 + time) + Math.sin(jy * 0.05 + time * 0.7);
+          const mod = smoothstep(-1.5, 1.5, waveRaw);
+          const sz = cell * (0.3 * gradientFalloff + 0.3 * mod) * (0.8 + 0.4 * jit);
+          if (sz > 0) {
+            ctx.fillRect(x + (cell - sz) / 2, y + (cell - sz) / 2, sz, sz);
+          }
+        }
+      }
+      ctx.restore();
+      ctx.restore();
+      req = requestAnimationFrame(draw);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [period, reducedMotion]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex flex-col items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-[120px] flex items-center justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full" }) }) });
+}
+
+export {
+  RevenueLineChart
+};

package/dist/catalog-chunks/chunk-62CFYJEA.js

@@ -0,0 +1,141 @@
+import {
+  useCanvasSetup
+} from "./chunk-GDCQNKP7.js";
+
+// .generated/catalog/components/dither-charts/ActivityHeatmap.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PERIODS = [
+  { name: "Last 3 Months", weeks: 12 },
+  { name: "Last 6 Months", weeks: 24 }
+];
+var smoothstep = (min, max, value) => {
+  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  return x * x * (3 - 2 * x);
+};
+var hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+function AnimatedNumber({ value }) {
+  const prefersReducedMotion = useReducedMotion();
+  const spring = useSpring(value, { stiffness: 190, damping: 27, mass: 0.7 });
+  const display = useTransform(
+    spring,
+    (current) => Math.round(current).toLocaleString("en-US")
+  );
+  useEffect(() => {
+    if (prefersReducedMotion) spring.jump(value);
+    else spring.set(value);
+  }, [value, spring, prefersReducedMotion]);
+  return /* @__PURE__ */ jsx(motion.span, { className: "tabular-nums", children: display });
+}
+function ActivityHeatmap({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(0);
+  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
+  const period = PERIODS[periodIndex];
+  const { data, total } = useMemo(() => {
+    const weeks = period.weeks;
+    const newData = [];
+    let tot = 0;
+    for (let w = 0; w < weeks; w++) {
+      const col = [];
+      for (let d = 0; d < 7; d++) {
+        const val = Math.floor(Math.sin(w * 0.5 + d * 0.2) * 2 + Math.cos(w * 1.2) * 1.5 + 2);
+        const clamped = Math.max(0, Math.min(4, val));
+        col.push(clamped);
+        tot += clamped * 10;
+      }
+      newData.push(col);
+    }
+    return { data: newData, total: tot };
+  }, [periodIndex]);
+  const targetDataRef = useRef(data);
+  const fromDataRef = useRef(data);
+  const morphStartTimeRef = useRef(0);
+  const timeRef = useRef(0);
+  useEffect(() => {
+    fromDataRef.current = targetDataRef.current;
+    targetDataRef.current = data;
+    morphStartTimeRef.current = performance.now();
+  }, [data]);
+  useEffect(() => {
+    let req;
+    const draw = () => {
+      if (!isVisible.current) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const { width: w, height: h } = rect.current;
+      if (w === 0 || h === 0) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      timeRef.current += reducedMotion ? 0 : 0.02;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, w, h);
+      const prog = reducedMotion ? 1 : Math.min(1, (performance.now() - morphStartTimeRef.current) / 500);
+      const e = 1 - Math.pow(2, -10 * prog);
+      const weeks = Math.max(fromDataRef.current.length, targetDataRef.current.length);
+      const cellSize = 10;
+      const gap = 2.5;
+      const totalW = weeks * (cellSize + gap) - gap;
+      const totalH = 7 * (cellSize + gap) - gap;
+      const startX = (w - totalW) / 2;
+      const startY = (h - totalH) / 2;
+      const colors = ["rgba(255,255,255,0.15)", "rgba(255,255,255,0.35)", "rgba(255,255,255,0.55)", "rgba(255,255,255,0.75)", "#FFFFFF"];
+      const cell = Math.max(2, Math.round(w / 250));
+      const t2 = timeRef.current;
+      for (let wk = 0; wk < weeks; wk++) {
+        for (let d = 0; d < 7; d++) {
+          const targetVal = targetDataRef.current[wk]?.[d] || 0;
+          const fromVal = fromDataRef.current[wk]?.[d] || 0;
+          const val = fromVal + (targetVal - fromVal) * e;
+          const x = startX + wk * (cellSize + gap);
+          const y = startY + d * (cellSize + gap);
+          const colorIdx = Math.max(0, Math.min(4, Math.round(val)));
+          ctx.save();
+          ctx.beginPath();
+          ctx.rect(x, y, cellSize, cellSize);
+          ctx.clip();
+          ctx.globalAlpha = 0.85;
+          ctx.fillStyle = colors[colorIdx];
+          for (let tx = Math.floor(x); tx <= Math.ceil(x + cellSize); tx += cell) {
+            for (let ty = Math.floor(y); ty <= Math.ceil(y + cellSize); ty += cell) {
+              const jx = tx + cell / 2;
+              const jy = ty + cell / 2;
+              const jit = hash(jx, jy);
+              const waveRaw = reducedMotion ? 0 : Math.sin(jx * 0.05 + t2) + Math.sin(jy * 0.05 + t2 * 0.7);
+              const mod = smoothstep(-1.5, 1.5, waveRaw);
+              const sz = cell * (0.4 + 0.4 * mod) * (0.8 + 0.4 * jit);
+              ctx.fillRect(tx + (cell - sz) / 2, ty + (cell - sz) / 2, sz, sz);
+            }
+          }
+          ctx.restore();
+        }
+      }
+      ctx.restore();
+      req = requestAnimationFrame(draw);
+    };
+    req = requestAnimationFrame(draw);
+    return () => cancelAnimationFrame(req);
+  }, [reducedMotion]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full h-full flex flex-col items-center justify-center p-2", children: /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center gap-2", children: [
+    !compact && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between w-full px-2", children: /* @__PURE__ */ jsxs("span", { className: `text-xs font-semibold ${theme === "dark" ? "text-white" : "text-black"}`, children: [
+      /* @__PURE__ */ jsx(AnimatedNumber, { value: total }),
+      " contributions"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-[120px]" }) })
+  ] }) });
+}
+
+export {
+  ActivityHeatmap
+};

package/dist/catalog-chunks/chunk-7GU353UA.js

@@ -0,0 +1,261 @@
+// .generated/catalog/components/simple-comp/DitherDonutChart.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { Users } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PLANS = [
+  { name: "Unlimited", color: "#FFFFFF", base: 1240 },
+  { name: "30-day pass", color: "#E2E8F0", base: 980 },
+  { name: "10-class pack", color: "#CBD5E1", base: 620 },
+  { name: "Drop-in", color: "#94A3B8", base: 410 },
+  { name: "Student", color: "#64748B", base: 300 }
+];
+var PERIODS = [
+  { name: "Week", mult: 0.42 },
+  { name: "Month", mult: 1 },
+  { name: "Quarter", mult: 2.6 },
+  { name: "Year", mult: 8.4 }
+];
+var smoothstep = (min, max, value) => {
+  const x = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  return x * x * (3 - 2 * x);
+};
+var hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+var hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+var drawRoundedWedge = (ctx, cx, cy, rIn, rOut, aStart, aEnd, cr) => {
+  const sweep = aEnd - aStart;
+  const maxCr = Math.min(cr, (rOut - rIn) / 2, sweep * rIn / 2);
+  if (sweep <= 1e-3) return;
+  const crIn = maxCr;
+  const crOut = maxCr;
+  const aStartIn = aStart + crIn / rIn;
+  const aEndIn = aEnd - crIn / rIn;
+  const aStartOut = aStart + crOut / rOut;
+  const aEndOut = aEnd - crOut / rOut;
+  ctx.moveTo(cx + rIn * Math.cos(aStartIn), cy + rIn * Math.sin(aStartIn));
+  ctx.arc(cx, cy, rIn, aStartIn, aEndIn);
+  ctx.arcTo(
+    cx + rIn * Math.cos(aEnd),
+    cy + rIn * Math.sin(aEnd),
+    cx + rOut * Math.cos(aEnd),
+    cy + rOut * Math.sin(aEnd),
+    crIn
+  );
+  ctx.arcTo(
+    cx + rOut * Math.cos(aEnd),
+    cy + rOut * Math.sin(aEnd),
+    cx + rOut * Math.cos(aEndOut),
+    cy + rOut * Math.sin(aEndOut),
+    crOut
+  );
+  ctx.arc(cx, cy, rOut, aEndOut, aStartOut, true);
+  ctx.arcTo(
+    cx + rOut * Math.cos(aStart),
+    cy + rOut * Math.sin(aStart),
+    cx + rIn * Math.cos(aStart),
+    cy + rIn * Math.sin(aStart),
+    crOut
+  );
+  ctx.arcTo(
+    cx + rIn * Math.cos(aStart),
+    cy + rIn * Math.sin(aStart),
+    cx + rIn * Math.cos(aStartIn),
+    cy + rIn * Math.sin(aStartIn),
+    crIn
+  );
+};
+function DitherDonutChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(1);
+  const [hoverIndex, setHoverIndex] = useState(null);
+  const canvasRef = useRef(null);
+  const period = PERIODS[periodIndex];
+  const { values, shares, total } = useMemo(() => {
+    let newTotal = 0;
+    const newValues = PLANS.map((plan, i) => {
+      const w = 0.78 + 0.4 * (0.5 + 0.5 * Math.sin(i * 1.9 + periodIndex * 1.3));
+      const val = Math.round(plan.base * period.mult * w);
+      newTotal += val;
+      return val;
+    });
+    const newShares = newValues.map((v) => v / newTotal);
+    return { values: newValues, shares: newShares, total: newTotal };
+  }, [periodIndex]);
+  const timeRef = useRef(0);
+  const requestRef = useRef(void 0);
+  const morphStartTimeRef = useRef(0);
+  const fromSharesRef = useRef([]);
+  const targetSharesRef = useRef([]);
+  const dispSharesRef = useRef([]);
+  const hoverRef = useRef(hoverIndex);
+  useEffect(() => {
+    hoverRef.current = hoverIndex;
+  }, [hoverIndex]);
+  useEffect(() => {
+    if (dispSharesRef.current.length === 0) {
+      dispSharesRef.current = [...shares];
+      fromSharesRef.current = [...shares];
+      targetSharesRef.current = [...shares];
+    } else {
+      fromSharesRef.current = [...dispSharesRef.current];
+      targetSharesRef.current = [...shares];
+      morphStartTimeRef.current = performance.now();
+    }
+  }, [shares]);
+  useEffect(() => {
+    const draw = () => {
+      timeRef.current += 0.02;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const logicalSize = 200;
+      const rect = canvas.getBoundingClientRect();
+      if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) {
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+      }
+      ctx.save();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(rect.width * dpr / logicalSize, rect.height * dpr / logicalSize);
+      let t = 0;
+      if (morphStartTimeRef.current > 0) {
+        t = (performance.now() - morphStartTimeRef.current) / 500;
+        if (t > 1) t = 1;
+      } else {
+        t = 1;
+      }
+      const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reducedMotion) {
+        t = 1;
+        timeRef.current = 0;
+      }
+      const e = 1 - Math.pow(2, -10 * t);
+      for (let i = 0; i < targetSharesRef.current.length; i++) {
+        dispSharesRef.current[i] = fromSharesRef.current[i] + (targetSharesRef.current[i] - fromSharesRef.current[i]) * e;
+      }
+      let startAngle = -Math.PI / 2;
+      const gap = 0.07;
+      const currentHover = hoverRef.current;
+      for (let i = 0; i < dispSharesRef.current.length; i++) {
+        const share = dispSharesRef.current[i];
+        if (share === 0) continue;
+        let sweep = share * Math.PI * 2;
+        let aStart = startAngle + gap / 2;
+        let aEnd = startAngle + sweep - gap / 2;
+        if (aEnd < aStart) aEnd = aStart;
+        ctx.save();
+        const isHovered = currentHover === i;
+        const isAnyHovered = currentHover !== null;
+        if (isHovered) {
+          const mid = (aStart + aEnd) / 2;
+          ctx.translate(Math.cos(mid) * 6, Math.sin(mid) * 6);
+        }
+        ctx.beginPath();
+        drawRoundedWedge(ctx, 100, 100, 55, 86, aStart, aEnd, 6);
+        ctx.clip();
+        ctx.globalAlpha = isHovered ? 1 : isAnyHovered ? 0.3 * 0.72 : 0.72;
+        ctx.fillStyle = PLANS[i].color;
+        if (isHovered) {
+          ctx.shadowColor = hexToRgba(PLANS[i].color, 0.55);
+          ctx.shadowBlur = 5;
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = 0;
+        }
+        const cell = 4.6;
+        for (let x = 14; x <= 186; x += cell) {
+          for (let y = 14; y <= 186; y += cell) {
+            const dx = x - 100;
+            const dy = y - 100;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist < 55 - cell || dist > 86 + cell) continue;
+            let a = Math.atan2(dy, dx);
+            let normalizedA = a - aStart;
+            while (normalizedA < 0) normalizedA += Math.PI * 2;
+            while (normalizedA >= Math.PI * 2) normalizedA -= Math.PI * 2;
+            if (normalizedA > aEnd - aStart) continue;
+            const fullness = smoothstep(0.62, 1, (dist - 55) / (86 - 55));
+            const waveRaw = Math.sin(dist * 0.1 - timeRef.current) + Math.sin(a * 3 + timeRef.current * 1.5) + Math.sin(dx * 0.05 + dy * 0.05 + timeRef.current * 2);
+            const wave = smoothstep(-1.5, 1.5, waveRaw);
+            const jitter = hash(x, y);
+            const size = cell * ((isHovered ? 0.46 : 0.34) + 0.36 * fullness + 0.26 * wave) * (0.78 + 0.42 * jitter);
+            ctx.fillRect(x - size / 2, y - size / 2, size, size);
+          }
+        }
+        ctx.restore();
+        startAngle += sweep;
+      }
+      ctx.restore();
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, []);
+  if (compact) {
+    return /* @__PURE__ */ jsx("div", { className: "relative w-full h-full flex items-center justify-center p-2", children: /* @__PURE__ */ jsx("div", { className: "relative w-[130px] h-[130px]", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full block" }) }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `relative w-full rounded-3xl p-6 transition-colors border ${theme === "dark" ? "bg-[#181818] border-white/5 text-white" : "bg-white border-neutral-200 text-black shadow-lg"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: `p-2 rounded-xl ${theme === "dark" ? "bg-blue-500/10 text-blue-400" : "bg-blue-50 text-blue-600"}`, children: /* @__PURE__ */ jsx(Users, { className: "w-4 h-4" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h4", { className: "text-sm font-bold", children: "Plan Distribution" }),
+          /* @__PURE__ */ jsx("p", { className: `text-[11px] ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: "Dithered canvas chart with real-time spring physics" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: `flex items-center p-1 rounded-full border text-xs font-medium ${theme === "dark" ? "bg-[#131313] border-white/10" : "bg-neutral-100 border-neutral-200"}`, children: PERIODS.map((p, idx) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setPeriodIndex(idx),
+          className: `px-2.5 py-1 rounded-full transition-all cursor-pointer ${periodIndex === idx ? theme === "dark" ? "bg-blue-600 text-white" : "bg-blue-600 text-white" : theme === "dark" ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+          children: p.name
+        },
+        p.name
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-center gap-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "relative w-[180px] h-[180px] shrink-0", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full block" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 w-full space-y-2", children: PLANS.map((plan, idx) => {
+        const val = values[idx];
+        const pct = Math.round(shares[idx] * 100);
+        const isHovered = hoverIndex === idx;
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseEnter: () => setHoverIndex(idx),
+            onMouseLeave: () => setHoverIndex(null),
+            className: `flex items-center justify-between p-2 rounded-xl transition-all cursor-pointer border ${isHovered ? theme === "dark" ? "bg-white/10 border-white/20" : "bg-neutral-100 border-neutral-300" : "border-transparent hover:bg-white/5"}`,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: plan.color } }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: plan.name })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs", children: [
+                /* @__PURE__ */ jsx("span", { className: `font-semibold ${theme === "dark" ? "text-neutral-300" : "text-neutral-700"}`, children: val.toLocaleString() }),
+                /* @__PURE__ */ jsxs("span", { className: `text-[10px] w-8 text-right font-mono ${theme === "dark" ? "text-neutral-500" : "text-neutral-400"}`, children: [
+                  pct,
+                  "%"
+                ] })
+              ] })
+            ]
+          },
+          plan.name
+        );
+      }) })
+    ] })
+  ] });
+}
+
+export {
+  DitherDonutChart
+};