@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog-chunks/chunk-I4BVACNZ.js

@@ -0,0 +1,349 @@
+import {
+  cn
+} from "./chunk-F47LIDB6.js";
+
+// .generated/catalog/components/simple-comp/ChartCard.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, AnimatePresence, 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})`;
+};
+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 });
+}
+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 ChartCard() {
+  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);
+    };
+  }, []);
+  const handleCanvasMove = (e) => {
+    const rect = canvasRef.current?.getBoundingClientRect();
+    if (!rect) return;
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const lx = x / rect.width * 200 - 100;
+    const ly = y / rect.height * 200 - 100;
+    const dist = Math.sqrt(lx * lx + ly * ly);
+    if (dist < 55 || dist > 86) {
+      if (hoverIndex !== null) setHoverIndex(null);
+      return;
+    }
+    let angle = Math.atan2(ly, lx);
+    let startAngle = -Math.PI / 2;
+    const gap = 0.07;
+    let found = null;
+    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;
+      let normalizedA = angle - aStart;
+      while (normalizedA < 0) normalizedA += Math.PI * 2;
+      while (normalizedA >= Math.PI * 2) normalizedA -= Math.PI * 2;
+      if (normalizedA <= aEnd - aStart) {
+        found = i;
+        break;
+      }
+      startAngle += sweep;
+    }
+    if (found !== hoverIndex) setHoverIndex(found);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full max-w-[400px] flex flex-col items-center gap-[14px]", style: { zoom: 0.86 }, children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full bg-[#FAFAFB] rounded-[14px] p-1.5 flex flex-col gap-1.5 shadow-sm border border-black/5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[10px] p-[14px_20px] flex flex-col gap-1.5 shadow-[0_0_1.76px_rgba(0,0,0,0.08),0_1px_1.76px_rgba(25,28,33,0.06),0_0_0_1px_rgba(25,28,33,0.04)]", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium tracking-tight text-[#171717]", children: "Members by plan" }),
+            /* @__PURE__ */ jsx(Users, { size: 14, className: "text-[#B6B8BF]" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "relative h-4 overflow-hidden w-20 flex justify-end", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+            motion.span,
+            {
+              initial: { opacity: 0, y: -10, filter: "blur(4px)" },
+              animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+              exit: { opacity: 0, y: 10, filter: "blur(4px)" },
+              transition: { duration: 0.18, ease: [0.19, 1, 0.22, 1] },
+              className: "absolute right-0 text-[12px] text-[#8A90A0] whitespace-nowrap",
+              children: [
+                period.name,
+                " to date"
+              ]
+            },
+            period.name
+          ) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[7px]", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[31px] font-semibold tracking-[-0.015em] text-[#171717] leading-[1.15]", children: /* @__PURE__ */ jsx(AnimatedNumber, { value: total }) }),
+          /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-[#8A90A0]", children: "total members" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-[10px] p-[18px] flex items-center gap-[18px] shadow-[0_0_1.76px_rgba(0,0,0,0.08),0_1px_1.76px_rgba(25,28,33,0.06),0_0_0_1px_rgba(25,28,33,0.04)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative w-[min(190px,44%)] aspect-square shrink-0", children: /* @__PURE__ */ jsx(
+          "canvas",
+          {
+            ref: canvasRef,
+            className: "absolute inset-0 w-full h-full cursor-pointer touch-none",
+            onMouseMove: handleCanvasMove,
+            onMouseLeave: () => setHoverIndex(null)
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 flex flex-col gap-0.5", children: PLANS.map((plan, i) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onMouseEnter: () => setHoverIndex(i),
+            onMouseLeave: () => setHoverIndex(null),
+            className: cn(
+              "flex items-center gap-[9px] p-[6px_8px] rounded-[7px] cursor-pointer transition-all duration-150",
+              hoverIndex === i ? "bg-blue-50/50" : "bg-transparent",
+              hoverIndex !== null && hoverIndex !== i ? "opacity-50" : "opacity-100"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "w-[9px] h-[9px] rounded-[3px] shrink-0", style: { backgroundColor: plan.color } }),
+              /* @__PURE__ */ jsx("span", { className: cn(
+                "flex-1 text-[12.5px] truncate transition-colors duration-150",
+                hoverIndex === i ? "text-[#171717] font-medium" : "text-[#5F5F6F] font-normal"
+              ), children: plan.name }),
+              /* @__PURE__ */ jsx("span", { className: "text-[12.5px] font-medium text-[#171717]", children: /* @__PURE__ */ jsx(AnimatedNumber, { value: values[i] }) })
+            ]
+          },
+          plan.name
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "inline-flex bg-[#F3F4F6] rounded-[9px] p-[3px] gap-[2px]", children: PERIODS.map((p, i) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => {
+          setPeriodIndex(i);
+          setHoverIndex(null);
+        },
+        className: cn(
+          "relative px-[14px] py-[5px] rounded-[7px] text-[12px] font-medium transition-colors outline-none",
+          period.name === p.name ? "text-[#171717] font-semibold" : "text-[#8A90A0] hover:text-[#5F5F6F]"
+        ),
+        children: [
+          period.name === p.name && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              layoutId: "activePeriod",
+              className: "absolute inset-0 bg-white rounded-[7px] shadow-[0_0_0_1px_rgba(25,28,33,0.05),0_1px_2px_rgba(25,28,33,0.08)] z-0",
+              transition: { duration: 0.32, bounce: 0.2, type: "spring" }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10", children: p.name })
+        ]
+      },
+      p.name
+    )) })
+  ] });
+}
+
+export {
+  ChartCard
+};

package/dist/catalog-chunks/chunk-I5MYV6VF.js

@@ -0,0 +1,248 @@
+import {
+  useCanvasSetup
+} from "./chunk-GDCQNKP7.js";
+
+// .generated/catalog/components/dither-charts/DitherStackedChart.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, useSpring, useTransform, useReducedMotion } from "framer-motion";
+import { CreditCard } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PERIODS = [
+  { name: "Week", mult: 1 },
+  { name: "Month", mult: 4 },
+  { name: "Quarter", mult: 13 },
+  { name: "Year", mult: 52 }
+];
+var BRANCHES = ["Bishkek", "Osh", "Jalal-Abad", "Karakol"];
+var BANDS = [
+  { name: "Cash", color: "#FFFFFF", share: 0.46 },
+  { name: "QR", color: "#CBD5E1", share: 0.31 },
+  { name: "Bank", color: "#94A3B8", share: 0.23 }
+];
+var BASE_TOTAL = 15e4;
+var BRANCH_WEIGHTS = [0.45, 0.25, 0.18, 0.12];
+var hash = (x, y) => {
+  let h = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  return h - Math.floor(h);
+};
+var clamp = (val, min, max) => Math.max(min, Math.min(max, val));
+function AnimatedDollar({ 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 });
+}
+var getAxisMax = (maxVal) => {
+  if (maxVal === 0) return 100;
+  const target = maxVal * 1.05;
+  const power = Math.pow(10, Math.floor(Math.log10(target)));
+  const normalized = target / power;
+  let multiplier = 10;
+  if (normalized <= 1) multiplier = 1;
+  else if (normalized <= 2) multiplier = 2;
+  else if (normalized <= 5) multiplier = 5;
+  return multiplier * power;
+};
+function drawRoundedRect(ctx, x, y, w, h, rTop, rBottom) {
+  ctx.beginPath();
+  ctx.moveTo(x + rTop, y);
+  ctx.lineTo(x + w - rTop, y);
+  ctx.arcTo(x + w, y, x + w, y + rTop, rTop);
+  ctx.lineTo(x + w, y + h - rBottom);
+  ctx.arcTo(x + w, y + h, x + w - rBottom, y + h, rBottom);
+  ctx.lineTo(x + rBottom, y + h);
+  ctx.arcTo(x, y + h, x, y + h - rBottom, rBottom);
+  ctx.lineTo(x, y + rTop);
+  ctx.arcTo(x, y, x + rTop, y, rTop);
+  ctx.closePath();
+}
+function DitherStackedChart({ theme = "dark", compact = false }) {
+  const [periodIndex, setPeriodIndex] = useState(1);
+  const [hoverBranch, setHoverBranch] = useState(null);
+  const [hoverBand, setHoverBand] = useState(null);
+  const { canvasRef, rect, isVisible, reducedMotion } = useCanvasSetup();
+  const period = PERIODS[periodIndex];
+  const { data, totalValue, axisMax } = useMemo(() => {
+    let tot = 0;
+    const branches = BRANCHES.map((b, bIdx) => {
+      const branchBase = BASE_TOTAL * BRANCH_WEIGHTS[bIdx];
+      let branchTotal = 0;
+      const bands = BANDS.map((band, bandIdx) => {
+        const wobble = 0.9 + 0.14 * Math.sin(bIdx * 3.1 + bandIdx * 1.7);
+        const val = Math.round(branchBase * period.mult * band.share * wobble);
+        branchTotal += Math.max(6, val);
+        return { value: Math.max(6, val) };
+      });
+      tot += branchTotal;
+      return { total: branchTotal, bands };
+    });
+    const maxBranchTotal = Math.max(...branches.map((b) => b.total));
+    const axMax = getAxisMax(maxBranchTotal);
+    return { data: branches, totalValue: tot, axisMax: axMax };
+  }, [periodIndex]);
+  const timeRef = useRef(0);
+  const requestRef = useRef(void 0);
+  const drawnRef = useRef(/* @__PURE__ */ new Map());
+  const morphStartTimeRef = useRef(0);
+  const fromStateRef = useRef(/* @__PURE__ */ new Map());
+  const hoverRef = useRef({ b: hoverBranch, band: hoverBand });
+  useEffect(() => {
+    hoverRef.current = { b: hoverBranch, band: hoverBand };
+  }, [hoverBranch, hoverBand]);
+  useEffect(() => {
+    fromStateRef.current = new Map(drawnRef.current);
+    morphStartTimeRef.current = performance.now();
+  }, [data]);
+  useEffect(() => {
+    const draw = () => {
+      if (!isVisible.current) {
+        requestRef.current = 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) {
+        requestRef.current = requestAnimationFrame(draw);
+        return;
+      }
+      timeRef.current += reducedMotion ? 0 : 0.02;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      ctx.save();
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      ctx.scale(dpr, dpr);
+      const colW = w / BRANCHES.length;
+      const barW = Math.min(colW * 0.62, 54);
+      const cell = Math.max(3, Math.round(w / 200));
+      const HIGHLIGHT = "#FFFFFF";
+      const t2 = timeRef.current;
+      let prog = 0;
+      if (reducedMotion) {
+        prog = 1;
+      } else if (morphStartTimeRef.current > 0) {
+        prog = (performance.now() - morphStartTimeRef.current) / 620;
+        if (prog > 1) prog = 1;
+      } else {
+        prog = 1;
+      }
+      const n = BRANCHES.length;
+      for (let i = 0; i < n; i++) {
+        const bp = 1 - Math.pow(1 - clamp((prog - i * 0.05) / (1 - (n - 1) * 0.05), 0, 1), 3);
+        const colX = i * colW;
+        const cx = colX + colW / 2;
+        const x0 = cx - barW / 2;
+        let currentY = h;
+        for (let j = 0; j < BANDS.length; j++) {
+          const key = `${i}-${j}`;
+          const targetH = data[i].bands[j].value / axisMax * h;
+          const fromH = fromStateRef.current.get(key) || 0;
+          const segH = Math.max(0.1, fromH + (targetH - fromH) * bp);
+          drawnRef.current.set(key, segH);
+          const yBottom = currentY;
+          const yTop = currentY - segH;
+          const rTop = j === BANDS.length - 1 ? 8 : 5;
+          const rBottom = j === 0 ? 7 : 5;
+          const hb = hoverRef.current.b;
+          const hband = hoverRef.current.band;
+          const isHot = hb === i && hband === j;
+          const isOtherBranch = hb !== null && hb !== i;
+          const isOtherBandInBranch = hb === i && hband !== null && hband !== j;
+          let alpha = 1;
+          if (isOtherBranch) alpha = 0.3;
+          else if (isOtherBandInBranch) alpha = 0.48;
+          const color = isHot ? HIGHLIGHT : BANDS[j].color;
+          ctx.save();
+          drawRoundedRect(ctx, x0, yTop, barW, segH, rTop, rBottom);
+          ctx.clip();
+          ctx.globalAlpha = alpha * 0.85;
+          ctx.fillStyle = color;
+          for (let bx = x0; bx < x0 + barW; bx += cell) {
+            for (let by = yTop; by < yBottom; by += cell) {
+              const dx = bx - (x0 + barW / 2);
+              const dy = by - (yTop + segH / 2);
+              const dist = Math.sqrt(dx * dx + dy * dy);
+              const jitter = hash(bx, by);
+              const wave = reducedMotion ? 0 : Math.sin(dist * 0.1 - t2 * 2) * 0.15;
+              const sz = cell * (0.68 + wave + jitter * 0.2);
+              ctx.fillRect(bx + (cell - sz) / 2, by + (cell - sz) / 2, sz, sz);
+            }
+          }
+          ctx.restore();
+          currentY = yTop;
+        }
+      }
+      ctx.restore();
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [data, axisMax, reducedMotion]);
+  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-full h-[120px]", 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 flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: `p-2.5 rounded-2xl ${theme === "dark" ? "bg-blue-500/10 text-blue-400" : "bg-blue-50 text-blue-600"}`, children: /* @__PURE__ */ jsx(CreditCard, { className: "w-5 h-5" }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xl font-bold tracking-tight", children: /* @__PURE__ */ jsx(AnimatedDollar, { value: totalValue }) }),
+            /* @__PURE__ */ jsx("span", { className: `text-xs ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: "total revenue" })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: `text-xs ${theme === "dark" ? "text-neutral-400" : "text-neutral-500"}`, children: "Stacked payment channels per regional branch" })
+        ] })
+      ] }),
+      /* @__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-3 py-1 rounded-full transition-all cursor-pointer ${periodIndex === idx ? "bg-blue-600 text-white shadow-sm" : theme === "dark" ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+          children: p.name
+        },
+        p.name
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 mb-4 text-xs font-medium", children: BANDS.map((band, idx) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onMouseEnter: () => setHoverBand(idx),
+        onMouseLeave: () => setHoverBand(null),
+        className: "flex items-center gap-1.5 cursor-pointer opacity-80 hover:opacity-100",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: band.color } }),
+          /* @__PURE__ */ jsx("span", { children: band.name })
+        ]
+      },
+      band.name
+    )) }),
+    /* @__PURE__ */ jsx("div", { className: "relative h-[200px] w-full rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full block" }) }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-2 mt-3 text-center text-xs font-semibold", children: BRANCHES.map((branch, idx) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        onMouseEnter: () => setHoverBranch(idx),
+        onMouseLeave: () => setHoverBranch(null),
+        className: `py-1.5 rounded-lg cursor-pointer transition-all ${hoverBranch === idx ? theme === "dark" ? "bg-white/10 text-white" : "bg-neutral-200 text-black" : theme === "dark" ? "text-neutral-400 hover:text-white" : "text-neutral-600 hover:text-black"}`,
+        children: branch
+      },
+      branch
+    )) })
+  ] });
+}
+
+export {
+  DitherStackedChart
+};

package/dist/catalog-chunks/chunk-JSEX6PVP.js

@@ -0,0 +1,84 @@
+// .generated/catalog/components/simple-comp/UptimeChart.tsx
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+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 UPTIME_DATA = Array.from({ length: 90 }, (_, i) => {
+  if (i === 12 || i === 45 || i === 78) return 0.8;
+  if (i === 22 || i === 60) return 0;
+  return 1;
+});
+function UptimeChart({ theme = "dark", compact = false }) {
+  const canvasRef = useRef(null);
+  useEffect(() => {
+    let req;
+    let time = 0;
+    const draw = () => {
+      time += 0.02;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        req = requestAnimationFrame(draw);
+        return;
+      }
+      if (canvas.width !== rect.width * dpr || canvas.height !== rect.height * dpr) {
+        canvas.width = rect.width * dpr;
+        canvas.height = rect.height * dpr;
+      }
+      ctx.save();
+      ctx.scale(dpr, dpr);
+      ctx.clearRect(0, 0, rect.width, rect.height);
+      const w = rect.width;
+      const days = UPTIME_DATA.length;
+      const barW = 6;
+      const gap = 2;
+      const perRow = Math.max(1, Math.floor(w / (barW + gap)));
+      const cell = 2;
+      for (let i = 0; i < days; i++) {
+        const row = Math.floor(i / perRow);
+        const col = i % perRow;
+        const x = col * (barW + gap);
+        const y = row * (26 + gap);
+        const val = UPTIME_DATA[i];
+        const color = val === 1 ? "#FFFFFF" : val === 0 ? "rgba(255,255,255,0.3)" : "rgba(255,255,255,0.6)";
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(x, y, barW, 26);
+        ctx.clip();
+        ctx.globalAlpha = 0.85;
+        ctx.fillStyle = color;
+        for (let tx = x; tx <= x + barW; tx += cell) {
+          for (let ty = y; ty <= y + 26; ty += cell) {
+            const jx = tx + cell / 2;
+            const jy = ty + cell / 2;
+            const jit = hash(jx, jy);
+            const waveRaw = 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 + 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);
+  }, []);
+  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-[60px] flex items-center justify-center px-2", children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full" }) }) });
+}
+
+export {
+  UptimeChart
+};