@mova-ui/react 0.1.0 → 0.4.1

package/dist/catalog/components/dither-charts/DitherBook.js

@@ -0,0 +1,352 @@
+"use client";
+
+// .generated/catalog/components/dither-charts/DitherBook.tsx
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Settings2, X, ChevronLeft, ChevronRight } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PAGES = [
+  { id: "1", title: "SKETCH 01", src: "https://i.pinimg.com/736x/9a/63/20/9a632012291e49436b7695f50d8aa20e.jpg" },
+  { id: "2", title: "SKETCH 02", src: "https://i.pinimg.com/736x/0c/e1/6e/0ce16e5cfb36927669b7421c670035e0.jpg" },
+  { id: "3", title: "SKETCH 03", src: "https://i.pinimg.com/736x/63/16/b2/6316b20446639cd7f923882cc0d5b0a5.jpg" },
+  { id: "4", title: "SKETCH 04", src: "https://i.pinimg.com/736x/8b/36/b9/8b36b9f128dd0a65dc260e323ac5e333.jpg" },
+  { id: "5", title: "SKETCH 05", src: "https://i.pinimg.com/736x/10/b6/bf/10b6bfda558137d1fd3fe5089c36ad9c.jpg" },
+  { id: "6", title: "SKETCH 06", src: "https://i.pinimg.com/736x/f9/a7/d1/f9a7d15098baeb3ea28d7232f4ac86ea.jpg" }
+];
+function Book({
+  pages = PAGES,
+  currentIndex,
+  isFlipping,
+  direction,
+  onFlipComplete,
+  settings,
+  isIntro,
+  onPrevPage,
+  onNextPage
+}) {
+  const [localIndex, setLocalIndex] = useState(currentIndex);
+  const [flipState, setFlipState] = useState({ active: false, from: 0, to: 0, dir: 1 });
+  const animDuration = isIntro ? 0.14 : 0.45;
+  const animEase = isIntro ? "linear" : [0.33, 1, 0.68, 1];
+  useEffect(() => {
+    if (currentIndex !== localIndex) {
+      setFlipState({
+        active: true,
+        from: localIndex,
+        to: currentIndex,
+        dir: direction
+      });
+    }
+  }, [currentIndex, localIndex, direction]);
+  const handleAnimationComplete = () => {
+    setLocalIndex(flipState.to);
+    setFlipState({ active: false, from: flipState.to, to: flipState.to, dir: 1 });
+    if (onFlipComplete) onFlipComplete();
+  };
+  const getIndex = (index) => (index % pages.length + pages.length) % pages.length;
+  const PaperTexture = () => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 pointer-events-none opacity-40 mix-blend-multiply",
+      style: { backgroundImage: 'url("https://www.transparenttextures.com/patterns/cream-paper.png")' }
+    }
+  );
+  const PageContent = ({ index }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0", style: { backgroundColor: settings.paperColor } }),
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", style: { padding: `${settings.padding}px` }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full h-full bg-cover bg-center bg-no-repeat shadow-inner",
+        style: {
+          backgroundImage: `url(${pages[getIndex(index)].src})`,
+          borderRadius: `${settings.imageRadius}px`,
+          boxShadow: `0 4px ${settings.shadowIntensity}px rgba(0,0,0,0.15)`
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PaperTexture, {})
+  ] });
+  const creaseLeft = "absolute inset-y-0 right-0 w-12 pointer-events-none mix-blend-multiply z-20";
+  const creaseRight = "absolute inset-y-0 left-0 w-12 pointer-events-none mix-blend-multiply z-20";
+  const creaseLeftStyle = {
+    background: `linear-gradient(to left, rgba(0,0,0,${settings.creaseOpacity / 100}), rgba(0,0,0,${settings.creaseOpacity / 400}), transparent)`,
+    boxShadow: `inset -4px 0 10px rgba(0,0,0,0.1)`
+  };
+  const creaseRightStyle = {
+    background: `linear-gradient(to right, rgba(0,0,0,${settings.creaseOpacity / 100}), rgba(0,0,0,${settings.creaseOpacity / 400}), transparent)`,
+    boxShadow: `inset 4px 0 10px rgba(0,0,0,0.1)`
+  };
+  const leftIndex = flipState.active ? flipState.dir === 1 ? flipState.from - 1 : flipState.to - 1 : localIndex - 1;
+  const rightIndex = flipState.active ? flipState.dir === 1 ? flipState.to : flipState.from : localIndex;
+  const frontIndex = flipState.dir === 1 ? flipState.from : flipState.to;
+  const backIndex = flipState.dir === 1 ? flipState.to - 1 : flipState.from - 1;
+  return /* @__PURE__ */ jsx("div", { className: "relative w-full max-w-lg aspect-[16/10] mx-auto perspective-[2400px] select-none", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "w-full h-full relative shadow-xl rounded-md",
+      initial: { rotateX: 12, rotateY: -10, rotateZ: -2, scale: 0.95 },
+      animate: { rotateX: 6, rotateY: -4, rotateZ: 0, scale: 1 },
+      transition: { duration: 1.2, ease: "easeOut" },
+      style: { transformStyle: "preserve-3d" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: onPrevPage,
+            className: "absolute top-0 left-0 w-1/2 h-full overflow-hidden rounded-l-md border-y border-l border-r border-black/10 shadow-[2px_0_15px_rgba(0,0,0,0.2)] cursor-pointer group",
+            title: "Click to turn page back",
+            children: [
+              /* @__PURE__ */ jsx(PageContent, { index: leftIndex }),
+              /* @__PURE__ */ jsx("div", { className: creaseLeft, style: creaseLeftStyle }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-start pl-3", children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5 text-black/50 opacity-0 group-hover:opacity-100 transition-opacity" }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            onClick: onNextPage,
+            className: "absolute top-0 right-0 w-1/2 h-full overflow-hidden rounded-r-md border-y border-r border-l border-black/10 shadow-[-2px_0_15px_rgba(0,0,0,0.2)] cursor-pointer group",
+            title: "Click to turn page forward",
+            children: [
+              /* @__PURE__ */ jsx(PageContent, { index: rightIndex }),
+              /* @__PURE__ */ jsx("div", { className: creaseRight, style: creaseRightStyle }),
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/5 transition-colors flex items-center justify-end pr-3", children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5 text-black/50 opacity-0 group-hover:opacity-100 transition-opacity" }) })
+            ]
+          }
+        ),
+        flipState.active && /* @__PURE__ */ jsxs(
+          motion.div,
+          {
+            className: "absolute top-0 w-1/2 h-full origin-left bg-[#fcfbf9] z-30",
+            style: {
+              left: "50%",
+              transformStyle: "preserve-3d"
+            },
+            initial: { rotateY: flipState.dir === 1 ? 0 : -180 },
+            animate: { rotateY: flipState.dir === 1 ? -180 : 0 },
+            transition: { duration: animDuration, ease: animEase },
+            onAnimationComplete: handleAnimationComplete,
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 backface-hidden overflow-hidden rounded-r-md border-y border-r border-l border-black/10", style: { backfaceVisibility: "hidden" }, children: [
+                /* @__PURE__ */ jsx(PageContent, { index: frontIndex }),
+                /* @__PURE__ */ jsx("div", { className: creaseRight, style: creaseRightStyle }),
+                /* @__PURE__ */ jsx(
+                  motion.div,
+                  {
+                    className: "absolute inset-0 bg-gradient-to-r from-transparent to-black",
+                    initial: { opacity: flipState.dir === 1 ? 0 : 0.4 },
+                    animate: { opacity: flipState.dir === 1 ? 0.4 : 0 },
+                    transition: { duration: animDuration, ease: animEase }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "absolute inset-0 backface-hidden overflow-hidden rounded-l-md border-y border-l border-r border-black/10",
+                  style: {
+                    transform: "rotateY(180deg)",
+                    backfaceVisibility: "hidden"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(PageContent, { index: backIndex }),
+                    /* @__PURE__ */ jsx("div", { className: creaseLeft, style: creaseLeftStyle }),
+                    /* @__PURE__ */ jsx(
+                      motion.div,
+                      {
+                        className: "absolute inset-0 bg-gradient-to-l from-transparent to-black",
+                        initial: { opacity: flipState.dir === 1 ? 0.4 : 0 },
+                        animate: { opacity: flipState.dir === 1 ? 0 : 0.4 },
+                        transition: { duration: animDuration, ease: animEase }
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+function DitherBook({ theme = "dark", compact = false }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [direction, setDirection] = useState(1);
+  const [isFlipping, setIsFlipping] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const [introFlips, setIntroFlips] = useState(10);
+  const isIntro = introFlips > 0;
+  useEffect(() => {
+    if (introFlips > 0 && !isFlipping) {
+      const timer = setTimeout(() => {
+        setDirection(1);
+        setIsFlipping(true);
+        setCurrentIndex((i) => (i + 1) % PAGES.length);
+        setIntroFlips((f) => f - 1);
+      }, introFlips === 10 ? 300 : 70);
+      return () => clearTimeout(timer);
+    }
+  }, [introFlips, isFlipping]);
+  const [settings, setSettings] = useState({
+    padding: compact ? 6 : 10,
+    imageRadius: compact ? 8 : 20,
+    creaseOpacity: 11,
+    paperColor: "#fcfbf9",
+    shadowIntensity: compact ? 10 : 24
+  });
+  const next = () => {
+    if (!isFlipping) {
+      setDirection(1);
+      setIsFlipping(true);
+      setCurrentIndex((i) => (i + 1) % PAGES.length);
+    }
+  };
+  const prev = () => {
+    if (!isFlipping) {
+      setDirection(-1);
+      setIsFlipping(true);
+      setCurrentIndex((i) => (i - 1 + PAGES.length) % PAGES.length);
+    }
+  };
+  const handleFlipComplete = () => {
+    setIsFlipping(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col items-center justify-center relative p-1 sm:p-2 font-sans", children: [
+    /* @__PURE__ */ jsx(
+      Book,
+      {
+        pages: PAGES,
+        currentIndex,
+        isFlipping,
+        direction,
+        onFlipComplete: handleFlipComplete,
+        settings,
+        isIntro,
+        onPrevPage: prev,
+        onNextPage: next
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full max-w-lg mt-3 px-1", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: prev,
+          disabled: isFlipping,
+          className: `flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${theme === "dark" ? "bg-white/10 hover:bg-white/20 text-white" : "bg-neutral-200 hover:bg-neutral-300 text-black"}`,
+          children: [
+            /* @__PURE__ */ jsx(ChevronLeft, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { children: "Prev" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: `text-[11px] font-semibold tracking-widest uppercase ${theme === "dark" ? "text-neutral-400" : "text-neutral-600"}`, children: PAGES[currentIndex].title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setShowSettings(!showSettings),
+            className: `p-1.5 rounded-full transition-all cursor-pointer ${theme === "dark" ? "bg-white/10 hover:bg-white/20 text-white" : "bg-neutral-200 hover:bg-neutral-300 text-black"}`,
+            title: "Book Settings",
+            children: /* @__PURE__ */ jsx(Settings2, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: next,
+            disabled: isFlipping,
+            className: `flex items-center gap-1 px-3 py-1 rounded-full text-[11px] font-medium transition-all cursor-pointer ${theme === "dark" ? "bg-white/10 hover:bg-white/20 text-white" : "bg-neutral-200 hover:bg-neutral-300 text-black"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { children: "Next" }),
+              /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: showSettings && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 },
+        className: `mt-3 w-full max-w-sm rounded-xl p-4 shadow-xl border ${theme === "dark" ? "bg-[#1e1e1e] border-white/15 text-white" : "bg-white border-neutral-200 text-black"}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+            /* @__PURE__ */ jsx("h4", { className: "text-[11px] font-bold uppercase tracking-wider text-neutral-400", children: "Book Controls" }),
+            /* @__PURE__ */ jsx("button", { onClick: () => setShowSettings(false), className: "text-neutral-400 hover:text-white", children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" }) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3 text-[11px]", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between font-medium", children: [
+                /* @__PURE__ */ jsx("span", { children: "Image Padding" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  settings.padding,
+                  "px"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "30",
+                  value: settings.padding,
+                  onChange: (e) => setSettings({ ...settings, padding: parseInt(e.target.value) }),
+                  className: "w-full cursor-pointer accent-white"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between font-medium", children: [
+                /* @__PURE__ */ jsx("span", { children: "Image Radius" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  settings.imageRadius,
+                  "px"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "40",
+                  value: settings.imageRadius,
+                  onChange: (e) => setSettings({ ...settings, imageRadius: parseInt(e.target.value) }),
+                  className: "w-full cursor-pointer accent-white"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between font-medium", children: [
+                /* @__PURE__ */ jsx("span", { children: "Crease Opacity" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  settings.creaseOpacity,
+                  "%"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "40",
+                  value: settings.creaseOpacity,
+                  onChange: (e) => setSettings({ ...settings, creaseOpacity: parseInt(e.target.value) }),
+                  className: "w-full cursor-pointer accent-white"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  Book,
+  DitherBook,
+  PAGES
+};

package/dist/catalog/components/dither-charts/DitherChartsGrid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface DitherChartsGridProps {
+    theme: 'dark' | 'light';
+    showToast?: (message: string) => void;
+    triggerHaptic?: (type: 'success' | 'warning' | 'error' | 'light' | 'medium' | 'heavy') => void;
+}
+export declare function DitherChartsGrid({ theme, showToast, triggerHaptic }: DitherChartsGridProps): React.JSX.Element;
+export declare const SimpleCompGrid: typeof DitherChartsGrid;
+export {};

package/dist/catalog/components/dither-charts/DitherChartsGrid.js

@@ -0,0 +1,108 @@
+"use client";
+import {
+  ditherChartsData
+} from "../../../catalog-chunks/chunk-OWYADZUR.js";
+import "../../../catalog-chunks/chunk-VMGI6CMO.js";
+import "../../../catalog-chunks/chunk-FXF53HPE.js";
+import {
+  StorageUsageChart
+} from "../../../catalog-chunks/chunk-ZUQZVT7M.js";
+import {
+  TrafficBubble
+} from "../../../catalog-chunks/chunk-ZCRXHCGS.js";
+import {
+  UptimeChart
+} from "../../../catalog-chunks/chunk-7XF4PVBJ.js";
+import {
+  DitherStackedChart
+} from "../../../catalog-chunks/chunk-I5MYV6VF.js";
+import {
+  RevenueLineChart
+} from "../../../catalog-chunks/chunk-4M7HZE4Z.js";
+import {
+  ServerGauge
+} from "../../../catalog-chunks/chunk-KYYXENHF.js";
+import {
+  DitherDonutChart
+} from "../../../catalog-chunks/chunk-ZXDZMNRZ.js";
+import {
+  DitherFunnelChart
+} from "../../../catalog-chunks/chunk-3QX6CASP.js";
+import {
+  DitherGrowthChart
+} from "../../../catalog-chunks/chunk-KN7YEZTH.js";
+import {
+  ActivityHeatmap
+} from "../../../catalog-chunks/chunk-62CFYJEA.js";
+import {
+  DeviceUsageChart
+} from "../../../catalog-chunks/chunk-B64DVBSK.js";
+import "../../../catalog-chunks/chunk-GDCQNKP7.js";
+import {
+  IconSwap,
+  IconSwapItem
+} from "../../../catalog-chunks/chunk-3TYA5TCG.js";
+
+// .generated/catalog/components/dither-charts/DitherChartsGrid.tsx
+import { useState, useCallback } from "react";
+import { motion } from "framer-motion";
+import { Copy, Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DitherChartsGrid({ theme, showToast, triggerHaptic }) {
+  const [copiedId, setCopiedId] = useState(null);
+  const handleCopyCode = useCallback((item) => {
+    navigator.clipboard.writeText(item.codeSnippet).then(() => {
+      if (triggerHaptic) triggerHaptic("success");
+      setCopiedId(item.id);
+      setTimeout(() => setCopiedId(null), 2e3);
+      if (showToast) showToast(`Copied ${item.label} code!`);
+    }).catch(() => {
+      if (triggerHaptic) triggerHaptic("error");
+      if (showToast) showToast("Failed to copy code.");
+    });
+  }, [showToast, triggerHaptic]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col gap-8 max-w-[1060px] mx-auto text-left font-sans", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full", children: ditherChartsData.map((item) => {
+    const isCopied = copiedId === item.id;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `relative group rounded-2xl flex flex-col items-center justify-between p-3.5 transition-all duration-300 border ${theme === "dark" ? "bg-[#181818] border-white/5 hover:bg-[#1f1f1f] shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]" : "bg-white border-neutral-100 hover:shadow-[0_4px_12px_rgba(0,0,0,0.03)] hover:border-neutral-200/50"}`,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center w-full h-[180px] overflow-hidden rounded-xl", children: [
+            item.id === "dither-donut" && /* @__PURE__ */ jsx(DitherDonutChart, { theme, compact: true }),
+            item.id === "dither-stacked" && /* @__PURE__ */ jsx(DitherStackedChart, { theme, compact: true }),
+            item.id === "dither-growth" && /* @__PURE__ */ jsx(DitherGrowthChart, { theme, compact: true }),
+            item.id === "dither-heatmap" && /* @__PURE__ */ jsx(ActivityHeatmap, { theme, compact: true }),
+            item.id === "dither-gauge" && /* @__PURE__ */ jsx(ServerGauge, { theme, compact: true }),
+            item.id === "dither-traffic" && /* @__PURE__ */ jsx(TrafficBubble, { theme, compact: true }),
+            item.id === "dither-funnel" && /* @__PURE__ */ jsx(DitherFunnelChart, { theme, compact: true }),
+            item.id === "dither-device" && /* @__PURE__ */ jsx(DeviceUsageChart, { theme, compact: true }),
+            item.id === "dither-storage" && /* @__PURE__ */ jsx(StorageUsageChart, { theme, compact: true }),
+            item.id === "dither-revenue" && /* @__PURE__ */ jsx(RevenueLineChart, { theme, compact: true }),
+            item.id === "dither-uptime" && /* @__PURE__ */ jsx(UptimeChart, { theme, compact: true })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between mt-2.5 px-1 gap-1", children: [
+            /* @__PURE__ */ jsx("span", { className: `text-[12px] font-medium truncate transition-colors ${theme === "dark" ? "text-neutral-300" : "text-neutral-700"}`, title: item.label, children: item.label }),
+            /* @__PURE__ */ jsx(
+              motion.button,
+              {
+                whileHover: { scale: 1.1 },
+                whileTap: { scale: 0.9 },
+                onClick: () => handleCopyCode(item),
+                className: `p-1.5 rounded-lg transition-all cursor-pointer border flex items-center justify-center ${isCopied ? theme === "dark" ? "bg-emerald-500/20 text-emerald-400 border-emerald-500/30" : "bg-emerald-100 text-emerald-600 border-emerald-300" : theme === "dark" ? "bg-white/[0.08] border-transparent text-neutral-300 hover:text-white hover:bg-white/[0.14]" : "bg-neutral-100/90 border-transparent text-neutral-600 hover:text-black hover:bg-neutral-200"}`,
+                title: "Copy usage example",
+                children: /* @__PURE__ */ jsx(IconSwap, { children: /* @__PURE__ */ jsx(IconSwapItem, { children: isCopied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500 dark:text-emerald-400" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" }) }, isCopied ? "check" : "copy") })
+              }
+            )
+          ] })
+        ]
+      },
+      item.id
+    );
+  }) }) });
+}
+var SimpleCompGrid = DitherChartsGrid;
+export {
+  DitherChartsGrid,
+  SimpleCompGrid
+};

package/dist/catalog/components/dither-charts/DitherDonutChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DitherDonutChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function DitherDonutChart({ theme, compact }: DitherDonutChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/dither-charts/DitherDonutChart.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DitherDonutChart
+} from "../../../catalog-chunks/chunk-ZXDZMNRZ.js";
+import "../../../catalog-chunks/chunk-GDCQNKP7.js";
+export {
+  DitherDonutChart
+};

package/dist/catalog/components/dither-charts/DitherFunnelChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function DitherFunnelChart({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;

package/dist/catalog/components/dither-charts/DitherFunnelChart.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DitherFunnelChart
+} from "../../../catalog-chunks/chunk-3QX6CASP.js";
+import "../../../catalog-chunks/chunk-GDCQNKP7.js";
+export {
+  DitherFunnelChart
+};

package/dist/catalog/components/dither-charts/DitherGrowthChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DitherGrowthChartProps {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}
+export declare function DitherGrowthChart({ theme, compact }: DitherGrowthChartProps): React.JSX.Element;
+export {};

package/dist/catalog/components/dither-charts/DitherGrowthChart.js

@@ -0,0 +1,8 @@
+"use client";
+import {
+  DitherGrowthChart
+} from "../../../catalog-chunks/chunk-KN7YEZTH.js";
+import "../../../catalog-chunks/chunk-GDCQNKP7.js";
+export {
+  DitherGrowthChart
+};

package/dist/catalog/components/dither-charts/DitherHeatmapGrid.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function DitherHeatmapGrid({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;

package/dist/catalog/components/dither-charts/DitherHeatmapGrid.js

@@ -0,0 +1,115 @@
+"use client";
+
+// .generated/catalog/components/dither-charts/DitherHeatmapGrid.tsx
+import { useEffect, useRef, useState, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { LayoutGrid } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+var HOURS = 12;
+function DitherHeatmapGrid({ theme = "dark", compact = false }) {
+  const [hoveredCell, setHoveredCell] = useState(null);
+  const canvasRef = useRef(null);
+  const timeRef = useRef(0);
+  const requestRef = useRef(void 0);
+  const matrixData = useMemo(() => {
+    return DAYS.map(
+      (_, d) => Array.from({ length: HOURS }, (_2, h) => Math.round(20 + Math.sin(d * 1.5 + h * 0.8) * 35 + Math.random() * 40))
+    );
+  }, []);
+  useEffect(() => {
+    const draw = () => {
+      timeRef.current += 0.03;
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      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(dpr, dpr);
+      const w = rect.width;
+      const h = rect.height;
+      const cellW = w / HOURS;
+      const cellH = h / DAYS.length;
+      const dotCell = Math.max(3, Math.round(w / 160));
+      matrixData.forEach((row, d) => {
+        row.forEach((val, hIdx) => {
+          const x0 = hIdx * cellW;
+          const y0 = d * cellH;
+          const isHovered = hoveredCell?.day === d && hoveredCell?.hour === hIdx;
+          const intensity = val / 100;
+          for (let bx = Math.floor(x0); bx < Math.ceil(x0 + cellW - 2); bx += dotCell) {
+            for (let by = Math.floor(y0); by < Math.ceil(y0 + cellH - 2); by += dotCell) {
+              const shimmer = Math.sin(bx * 0.1 + timeRef.current * 2) * 0.1;
+              if (Math.random() < intensity + shimmer || isHovered) {
+                ctx.fillStyle = isHovered ? "#FFFFFF" : `rgba(255, 255, 255, ${Math.min(1, Math.max(0.2, intensity))})`;
+                const sz = dotCell * (isHovered ? 0.95 : 0.75);
+                ctx.fillRect(bx, by, sz, sz);
+              }
+            }
+          }
+        });
+      });
+      ctx.restore();
+      requestRef.current = requestAnimationFrame(draw);
+    };
+    requestRef.current = requestAnimationFrame(draw);
+    return () => {
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [matrixData, hoveredCell]);
+  return /* @__PURE__ */ jsx("div", { className: "w-full flex flex-col items-center gap-3 font-sans", children: /* @__PURE__ */ jsxs("div", { className: `w-full rounded-2xl p-4 flex flex-col gap-3 shadow-lg border transition-colors ${theme === "dark" ? "bg-[#181818] border-white/10 text-white" : "bg-white border-neutral-200 text-black"}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(LayoutGrid, { className: "w-4 h-4 text-neutral-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-neutral-400", children: "Dither Heatmap Grid" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-emerald-400", children: "Peak Active" })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative h-[160px] w-full touch-none cursor-pointer",
+        onPointerMove: (e) => {
+          const rect = e.currentTarget.getBoundingClientRect();
+          const x = e.clientX - rect.left;
+          const y = e.clientY - rect.top;
+          const hIdx = Math.min(Math.max(0, Math.floor(x / rect.width * HOURS)), HOURS - 1);
+          const dIdx = Math.min(Math.max(0, Math.floor(y / rect.height * DAYS.length)), DAYS.length - 1);
+          setHoveredCell({ day: dIdx, hour: hIdx });
+        },
+        onPointerLeave: () => setHoveredCell(null),
+        children: [
+          /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "w-full h-full pointer-events-none" }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: hoveredCell !== null && /* @__PURE__ */ jsxs(
+            motion.div,
+            {
+              initial: { opacity: 0, scale: 0.9 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.9 },
+              className: "absolute bg-neutral-900 border border-neutral-700 text-white rounded-lg px-2.5 py-1 text-xs font-semibold shadow-xl pointer-events-none transform -translate-x-1/2 -translate-y-full top-2",
+              style: { left: `${(hoveredCell.hour + 0.5) / HOURS * 100}%` },
+              children: [
+                DAYS[hoveredCell.day],
+                " @ ",
+                hoveredCell.hour * 2,
+                ":00 - ",
+                matrixData[hoveredCell.day][hoveredCell.hour],
+                " ops/s"
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  DitherHeatmapGrid
+};

package/dist/catalog/components/dither-charts/DitherRadialChart.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare function DitherRadialChart({ theme, compact }: {
+    theme?: 'dark' | 'light';
+    compact?: boolean;
+}): React.JSX.Element;