@stfrigerio/sito-template 0.1.97 → 0.1.99

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { motion, AnimatePresence, useDragControls, useMotionValue, useTransform, animate, LayoutGroup } from 'framer-motion';
-import React, { useRef, useEffect, useCallback, useState, useMemo, createContext, useContext, Fragment as Fragment$1, memo } from 'react';
+import React, { useRef, useEffect, useCallback, useState, useMemo, createContext, useContext, Fragment as Fragment$1, useId, memo } from 'react';
 import { createPortal } from 'react-dom';
 import { X, Calendar as Calendar$1, ChevronDown, Search, Check, Edit, Folder, Users, Book, MessageSquare, UserPlus, Sun, Moon, Info, Github, SquareKanban, ChevronRight, Plus, Loader2, AlertTriangle, Play, Brain, FolderSearch, FilePlus, Pencil, FileText, Terminal, Trash2, GripVertical, Download, Menu, BarChart3, CalendarRange, CalendarDays, Divide, Sigma, ScatterChart, ChevronLeft, Maximize, Share2, Pause } from 'lucide-react';
 import dayjs from 'dayjs';
@@ -3936,22 +3936,27 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
     return (jsx(Fragment, { children: jsx(motion.nav, { className: `${styles.navbar} ${styles[`navbar${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${className}`, "data-colored-icons": coloredIconsAttr, initial: variant === 'sidebar' ? { x: -300 } : { opacity: 0 }, animate: variant === 'sidebar' ? { x: 0 } : { opacity: 1 }, transition: { type: 'spring', stiffness: 300, damping: 30 }, children: navContent }) }));
 };
 
-var styles$9 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","xAxis":"MoodChart-module_xAxis__SeIWG","yAxis":"MoodChart-module_yAxis__sRjjE","dataPoint":"MoodChart-module_dataPoint__112P1","tooltip":"MoodChart-module_tooltip__vW59y","tooltipHeader":"MoodChart-module_tooltipHeader__U7yvN","tooltipDate":"MoodChart-module_tooltipDate__6Jjeu","tooltipRating":"MoodChart-module_tooltipRating__5A2Yx","ratingValue":"MoodChart-module_ratingValue__7Gpfx","ratingMax":"MoodChart-module_ratingMax__10WcJ","tooltipTags":"MoodChart-module_tooltipTags__FUQrU","tag":"MoodChart-module_tag__QhCh5","tooltipComment":"MoodChart-module_tooltipComment__6driJ"};
+var styles$9 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","area":"MoodChart-module_area__a4BFM","areaStopTop":"MoodChart-module_areaStopTop__KEp49","areaStopBottom":"MoodChart-module_areaStopBottom__cp7Gn","crosshair":"MoodChart-module_crosshair__PHLfW","halo":"MoodChart-module_halo__YQB-7","overlay":"MoodChart-module_overlay__ZwuHi","xAxis":"MoodChart-module_xAxis__SeIWG","yAxis":"MoodChart-module_yAxis__sRjjE","dataPoint":"MoodChart-module_dataPoint__112P1","tooltip":"MoodChart-module_tooltip__vW59y","tooltipHeader":"MoodChart-module_tooltipHeader__U7yvN","tooltipDate":"MoodChart-module_tooltipDate__6Jjeu","tooltipRating":"MoodChart-module_tooltipRating__5A2Yx","ratingValue":"MoodChart-module_ratingValue__7Gpfx","ratingMax":"MoodChart-module_ratingMax__10WcJ","tooltipTags":"MoodChart-module_tooltipTags__FUQrU","tag":"MoodChart-module_tag__QhCh5","tooltipComment":"MoodChart-module_tooltipComment__6driJ"};
 
 const MoodChart = ({ moodData, width = 800, height = 400 }) => {
     const svgRef = useRef(null);
     const containerRef = useRef(null);
     const tooltipRef = useRef(null);
+    const isHoveringTooltipRef = useRef(false);
+    const rawId = useId();
+    const gradientId = useMemo(() => `mood-area-${rawId.replace(/[^a-zA-Z0-9]/g, '_')}`, [rawId]);
     const [selectedMood, setSelectedMood] = useState(null);
     const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
     const [isHoveringTooltip, setIsHoveringTooltip] = useState(false);
+    useEffect(() => {
+        isHoveringTooltipRef.current = isHoveringTooltip;
+    }, [isHoveringTooltip]);
     const margin = useMemo(() => ({ top: 20, right: 20, bottom: 50, left: 40 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
     const processedData = useMemo(() => {
         return moodData
             .map(mood => {
-            // Parse comma-separated tags
             const tags = mood.tag
                 ? mood.tag.split(',').map(t => t.trim()).filter(t => t)
                 : [];
@@ -3963,7 +3968,8 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             };
         })
             .filter(mood => !isNaN(mood.date.getTime()) &&
-            isFinite(mood.rating));
+            isFinite(mood.rating))
+            .sort((a, b) => a.date.getTime() - b.date.getTime());
     }, [moodData]);
     const colorScale = useMemo(() => {
         return d3.scaleLinear()
@@ -3976,6 +3982,13 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             return;
         const svg = d3.select(svgRef.current);
         svg.selectAll('*').remove();
+        const defs = svg.append('defs');
+        const gradient = defs.append('linearGradient')
+            .attr('id', gradientId)
+            .attr('x1', '0%').attr('y1', '0%')
+            .attr('x2', '0%').attr('y2', '100%');
+        gradient.append('stop').attr('offset', '0%').attr('class', styles$9.areaStopTop);
+        gradient.append('stop').attr('offset', '100%').attr('class', styles$9.areaStopBottom);
         const g = svg.append('g')
             .attr('transform', `translate(${margin.left},${margin.top})`);
         const extentDates = d3.extent(processedData, d => d.date);
@@ -3991,6 +4004,12 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .x(d => xScale(d.date))
             .y(d => yScale(d.rating))
             .curve(d3.curveMonotoneX);
+        const area = d3.area()
+            .x(d => xScale(d.date))
+            .y0(chartHeight)
+            .y1(d => yScale(d.rating))
+            .curve(d3.curveMonotoneX);
+        // Grid lines (fade in)
         g.selectAll('.grid-line-y')
             .data(yScale.ticks(5))
             .enter().append('line')
@@ -3998,70 +4017,210 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
             .attr('x1', 0)
             .attr('y1', d => yScale(d))
             .attr('x2', chartWidth)
-            .attr('y2', d => yScale(d));
-        g.append('path')
-            .datum(processedData)
-            .attr('class', styles$9.line)
-            .attr('d', line);
+            .attr('y2', d => yScale(d))
+            .style('opacity', 0)
+            .transition()
+            .duration(500)
+            .ease(d3.easeCubicOut)
+            .style('opacity', 1);
+        // Axes (fade in)
         g.append('g')
             .attr('class', styles$9.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
+            .style('opacity', 0)
             .call(d3.axisBottom(xScale)
-            .tickFormat(d => d3.timeFormat('%m/%d')(d)));
+            .tickFormat(d => d3.timeFormat('%m/%d')(d)))
+            .transition()
+            .duration(600)
+            .delay(100)
+            .style('opacity', 1);
         g.append('g')
             .attr('class', styles$9.yAxis)
-            .call(d3.axisLeft(yScale));
-        g.selectAll('.mood-circle')
+            .style('opacity', 0)
+            .call(d3.axisLeft(yScale))
+            .transition()
+            .duration(600)
+            .delay(100)
+            .style('opacity', 1);
+        // Area fill (fades in after line draws past it)
+        const areaPath = g.append('path')
+            .datum(processedData)
+            .attr('class', styles$9.area)
+            .attr('fill', `url(#${gradientId})`)
+            .attr('d', area)
+            .style('opacity', 0);
+        // Line (draw-in animation via stroke-dasharray)
+        const linePath = g.append('path')
+            .datum(processedData)
+            .attr('class', styles$9.line)
+            .attr('d', line);
+        const lineNode = linePath.node();
+        const totalLength = lineNode && typeof lineNode.getTotalLength === 'function'
+            ? lineNode.getTotalLength()
+            : 0;
+        const lineDuration = 1200;
+        if (totalLength > 0) {
+            linePath
+                .attr('stroke-dasharray', `${totalLength} ${totalLength}`)
+                .attr('stroke-dashoffset', totalLength)
+                .transition()
+                .duration(lineDuration)
+                .ease(d3.easeCubicOut)
+                .attr('stroke-dashoffset', 0)
+                .on('end', () => {
+                linePath.attr('stroke-dasharray', null);
+            });
+        }
+        areaPath
+            .transition()
+            .delay(lineDuration * 0.4)
+            .duration(800)
+            .ease(d3.easeCubicOut)
+            .style('opacity', 1);
+        // Crosshair (vertical guide on hover)
+        const crosshair = g.append('line')
+            .attr('class', styles$9.crosshair)
+            .attr('y1', 0)
+            .attr('y2', chartHeight)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        // Pulsing halo behind active point
+        const halo = g.append('circle')
+            .attr('class', styles$9.halo)
+            .attr('r', 0)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        // Data points (staggered entrance keyed to line draw)
+        const minX = xScale(extentDates[0]);
+        const maxX = xScale(extentDates[1]);
+        const xRange = Math.max(1, maxX - minX);
+        const pointSel = g.selectAll('.mood-circle')
             .data(processedData)
             .enter().append('circle')
             .attr('class', styles$9.dataPoint)
             .attr('cx', d => xScale(d.date))
             .attr('cy', d => yScale(d.rating))
-            .attr('r', 5)
+            .attr('r', 0)
             .attr('fill', d => colorScale(d.rating))
-            .style('cursor', 'pointer')
-            .on('mouseenter', (event, d) => {
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        pointSel.transition()
+            .delay(d => 100 + lineDuration * ((xScale(d.date) - minX) / xRange))
+            .duration(380)
+            .ease(d3.easeBackOut.overshoot(2))
+            .attr('r', 5)
+            .style('opacity', 1);
+        const pointNodes = pointSel.nodes();
+        // Active state lives in mutable refs (closure over redraw)
+        let activeIndex = null;
+        const startHaloPulse = (cx, cy, fill) => {
+            halo
+                .interrupt('halo-pulse')
+                .interrupt('halo-out')
+                .attr('cx', cx)
+                .attr('cy', cy)
+                .attr('fill', fill);
+            const pulseOnce = () => {
+                halo
+                    .attr('r', 5)
+                    .style('opacity', 0.55)
+                    .transition('halo-pulse')
+                    .duration(900)
+                    .ease(d3.easeCubicOut)
+                    .attr('r', 20)
+                    .style('opacity', 0)
+                    .on('end', pulseOnce);
+            };
+            pulseOnce();
+        };
+        const stopHaloPulse = () => {
+            halo
+                .interrupt('halo-pulse')
+                .transition('halo-out')
+                .duration(180)
+                .style('opacity', 0)
+                .attr('r', 0);
+        };
+        const setActive = (idx, clientX, clientY) => {
+            const d = processedData[idx];
+            if (!d)
+                return;
+            const cx = xScale(d.date);
+            const cy = yScale(d.rating);
             const rect = svgRef.current?.getBoundingClientRect();
-            const containerRect = containerRef.current?.getBoundingClientRect();
-            if (rect && containerRect) {
-                let x = event.clientX - rect.left + 10;
-                let y = event.clientY - rect.top - 10;
-                // Check if tooltip would overflow on the right
-                const estimatedTooltipWidth = 250; // Approximate tooltip width
-                const rightEdgeBuffer = 20; // Buffer from the right edge
-                if (x + estimatedTooltipWidth > chartWidth + margin.left - rightEdgeBuffer) {
-                    // Position tooltip to the left of the cursor, but keep it close
-                    x = event.clientX - rect.left - estimatedTooltipWidth - 10;
-                    // Ensure it doesn't go off the left edge
-                    if (x < 0) {
+            if (rect) {
+                let x = clientX - rect.left + 12;
+                let y = clientY - rect.top - 12;
+                const estW = 280;
+                if (x + estW > chartWidth + margin.left - 20) {
+                    x = clientX - rect.left - estW - 12;
+                    if (x < 0)
                         x = 10;
-                    }
                 }
-                // Ensure tooltip doesn't go above the container
-                if (y < 0) {
+                if (y < 0)
                     y = 10;
-                }
                 setTooltipPosition({ x, y });
             }
             setSelectedMood(d);
-            d3.select(event.currentTarget)
-                .transition()
-                .duration(200)
-                .attr('r', 8);
+            crosshair
+                .attr('x1', cx).attr('x2', cx)
+                .interrupt('crosshair-fade')
+                .transition('crosshair-fade')
+                .duration(120)
+                .style('opacity', 1);
+            if (activeIndex !== idx) {
+                if (activeIndex !== null) {
+                    d3.select(pointNodes[activeIndex])
+                        .transition('point-scale')
+                        .duration(180)
+                        .ease(d3.easeCubicOut)
+                        .attr('r', 5);
+                }
+                d3.select(pointNodes[idx])
+                    .transition('point-scale')
+                    .duration(180)
+                    .ease(d3.easeBackOut.overshoot(2))
+                    .attr('r', 8);
+                startHaloPulse(cx, cy, colorScale(d.rating));
+                activeIndex = idx;
+            }
+        };
+        const clearActive = () => {
+            crosshair
+                .interrupt('crosshair-fade')
+                .transition('crosshair-fade')
+                .duration(180)
+                .style('opacity', 0);
+            if (activeIndex !== null) {
+                d3.select(pointNodes[activeIndex])
+                    .transition('point-scale')
+                    .duration(180)
+                    .attr('r', 5);
+                activeIndex = null;
+            }
+            stopHaloPulse();
+            setSelectedMood(null);
+        };
+        // Overlay captures mouse for nearest-point lookup (rendered last so it sits on top)
+        const bisect = d3.bisector(d => d.date).center;
+        g.append('rect')
+            .attr('class', styles$9.overlay)
+            .attr('width', chartWidth)
+            .attr('height', chartHeight)
+            .on('mousemove', function (event) {
+            const [mx] = d3.pointer(event, this);
+            const xDate = xScale.invert(mx);
+            const idx = Math.max(0, Math.min(processedData.length - 1, bisect(processedData, xDate)));
+            setActive(idx, event.clientX, event.clientY);
         })
-            .on('mouseleave', (event) => {
-            // Add delay to allow mouse to move to tooltip
-            setTimeout(() => {
-                if (!isHoveringTooltip) {
-                    setSelectedMood(null);
+            .on('mouseleave', () => {
+            window.setTimeout(() => {
+                if (!isHoveringTooltipRef.current) {
+                    clearActive();
                 }
-            }, 250);
-            d3.select(event.currentTarget)
-                .transition()
-                .duration(200)
-                .attr('r', 5);
+            }, 220);
         });
-    }, [processedData, chartWidth, chartHeight, colorScale, margin, isHoveringTooltip]);
+    }, [processedData, chartWidth, chartHeight, colorScale, margin, gradientId]);
     // Clean up tooltip on unmount
     useEffect(() => {
         return () => {
@@ -4080,9 +4239,8 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 }, children: [jsxs("div", { className: styles$9.tooltipHeader, children: [jsx("div", { className: styles$9.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxs("div", { className: styles$9.tooltipRating, children: [jsx("span", { className: styles$9.ratingValue, children: selectedMood.rating }), jsx("span", { className: styles$9.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsx("div", { className: styles$9.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsx("span", { className: styles$9.tag, children: tag }, index))) })), selectedMood.comment && (jsx("div", { className: styles$9.tooltipComment, children: selectedMood.comment }))] }))] }));
 };
 
-var styles$8 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","aggregationToggle":"QuantifiableHabitsChart-module_aggregationToggle__WnxwB","aggregationButton":"QuantifiableHabitsChart-module_aggregationButton__sGCxX","aggregationIcon":"QuantifiableHabitsChart-module_aggregationIcon__HIaEf","aggregationLabel":"QuantifiableHabitsChart-module_aggregationLabel__Yc-S-","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","compactLegend":"QuantifiableHabitsChart-module_compactLegend__jMpLB","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
+var styles$8 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","aggregationToggle":"QuantifiableHabitsChart-module_aggregationToggle__WnxwB","aggregationButton":"QuantifiableHabitsChart-module_aggregationButton__sGCxX","aggregationIcon":"QuantifiableHabitsChart-module_aggregationIcon__HIaEf","aggregationLabel":"QuantifiableHabitsChart-module_aggregationLabel__Yc-S-","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","compactLegend":"QuantifiableHabitsChart-module_compactLegend__jMpLB","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","crosshair":"QuantifiableHabitsChart-module_crosshair__7hoFL","halo":"QuantifiableHabitsChart-module_halo__YlkOF","overlay":"QuantifiableHabitsChart-module_overlay__ffeNz","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
 
-// Default colors as fallback
 const DEFAULT_HABIT_COLORS$1 = {
     'Exercise': '#6BCB77',
     'Meditation': '#4D96FF',
@@ -4093,14 +4251,53 @@ const DEFAULT_HABIT_COLORS$1 = {
     'Calories': '#FF9F1C',
     'Study': '#C774E8'
 };
+// Smoothly interpolate between two SVG path strings by resampling both
+// at evenly-spaced arc-length positions and tweening corresponding points.
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const pathTween = (oldD, newD, samples = 80) => {
+    const safeOld = oldD && oldD.length > 0 ? oldD : 'M0,0';
+    const safeNew = newD && newD.length > 0 ? newD : 'M0,0';
+    const oldNode = document.createElementNS(SVG_NS, 'path');
+    const newNode = document.createElementNS(SVG_NS, 'path');
+    oldNode.setAttribute('d', safeOld);
+    newNode.setAttribute('d', safeNew);
+    const oldLen = typeof oldNode.getTotalLength === 'function' ? oldNode.getTotalLength() : 0;
+    const newLen = typeof newNode.getTotalLength === 'function' ? newNode.getTotalLength() : 0;
+    if (oldLen === 0 || newLen === 0) {
+        return () => safeNew;
+    }
+    const old = [];
+    const next = [];
+    for (let i = 0; i < samples; i++) {
+        const u = samples === 1 ? 0 : i / (samples - 1);
+        const op = oldNode.getPointAtLength(u * oldLen);
+        const np = newNode.getPointAtLength(u * newLen);
+        old.push([op.x, op.y]);
+        next.push([np.x, np.y]);
+    }
+    return (t) => {
+        let s = '';
+        for (let i = 0; i < samples; i++) {
+            const x = old[i][0] + (next[i][0] - old[i][0]) * t;
+            const y = old[i][1] + (next[i][1] - old[i][1]) * t;
+            s += (i === 0 ? 'M' : 'L') + x + ',' + y;
+        }
+        return s;
+    };
+};
 const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewType = 'daily', periodType = 'month', habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, onDataPointClick, hideControls = false, compactLegend = false }) => {
     const svgRef = useRef(null);
     const tooltipRef = useRef(null);
+    const onClickRef = useRef(onDataPointClick);
+    const hasMountedRef = useRef(false);
     const [viewType, setViewType] = useState(defaultViewType);
     const [activeHabits, setActiveHabits] = useState([]);
     const [hoveredHabit, setHoveredHabit] = useState(null);
     const [tooltipData, setTooltipData] = useState(null);
     const [aggregationMode, setAggregationMode] = useState('average');
+    useEffect(() => {
+        onClickRef.current = onDataPointClick;
+    }, [onDataPointClick]);
     const margin = useMemo(() => ({ top: 20, right: 20, bottom: 50, left: 50 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
@@ -4108,7 +4305,6 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
     useEffect(() => {
         setActiveHabits(habits);
     }, [habits]);
-    // Hide tooltip on scroll
     useEffect(() => {
         const handleScroll = () => {
             setTooltipData(null);
@@ -4135,39 +4331,32 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         }
     }, [periodType]);
     const getColor = useCallback((habit) => {
-        // First check custom colors, then defaults, then generate deterministic color
         return customHabitColors[habit] || DEFAULT_HABIT_COLORS$1[habit] || `hsl(${Math.abs(habit.split('').reduce((a, b) => a + b.charCodeAt(0), 0)) % 360}, 70%, 50%)`;
     }, [customHabitColors]);
-    // Aggregate data based on view type
     const aggregateData = useMemo(() => {
         if (viewType === 'daily' || !data.dates.length) {
             return data;
         }
         const aggregated = { dates: [] };
         const dateGroups = new Map();
-        // Group dates by period
         data.dates.forEach((dateStr, index) => {
             const date = new Date(dateStr);
             let groupKey;
             switch (viewType) {
                 case 'weekly': {
-                    // Get ISO week start (Monday)
                     const weekStart = new Date(date);
                     const day = weekStart.getDay();
                     const diff = weekStart.getDate() - day + (day === 0 ? -6 : 1);
                     weekStart.setDate(diff);
-                    // Use the Monday date as the group key to ensure proper sorting
                     groupKey = weekStart.toISOString().split('T')[0];
                     break;
                 }
                 case 'monthly':
-                    // Use first day of month for consistent sorting
                     groupKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-01`;
                     break;
                 case 'quarterly': {
                     const quarter = Math.floor(date.getMonth() / 3) + 1;
                     const quarterStartMonth = (quarter - 1) * 3;
-                    // Use first day of quarter for consistent sorting and grouping
                     const quarterStart = new Date(date.getFullYear(), quarterStartMonth, 1);
                     groupKey = quarterStart.toISOString().split('T')[0];
                     break;
@@ -4180,7 +4369,6 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             }
             dateGroups.get(groupKey).push(index);
         });
-        // Calculate aggregated values - sort dates for proper chronological order
         aggregated.dates = Array.from(dateGroups.keys()).sort();
         habits.forEach(habit => {
             aggregated[habit] = aggregated.dates.map(groupKey => {
@@ -4190,11 +4378,10 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                     .filter(v => typeof v === 'number' && !isNaN(v));
                 if (values.length === 0)
                     return 0;
-                // Calculate aggregation based on mode
                 if (aggregationMode === 'sum') {
                     return Math.round(values.reduce((sum, v) => sum + v, 0));
                 }
-                else { // average
+                else {
                     return Math.round(values.reduce((sum, v) => sum + v, 0) / values.length);
                 }
             });
@@ -4210,98 +4397,53 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         if (!svgRef.current || aggregateData.dates.length === 0)
             return;
         const svg = d3.select(svgRef.current);
-        svg.selectAll('*').remove();
-        // Add invisible rect to detect mouse leave events
-        svg.append('rect')
-            .attr('width', width)
-            .attr('height', height)
-            .attr('fill', 'transparent')
-            .style('pointer-events', 'all')
-            .on('mouseleave', () => {
-            setTooltipData(null);
-        });
-        const g = svg.append('g')
-            .attr('transform', `translate(${margin.left},${margin.top})`);
+        const isFirstRender = !hasMountedRef.current;
+        hasMountedRef.current = true;
+        // Acquire/create persistent root group + sub-groups
+        let root = svg.select('g.qhc-root');
+        if (root.empty()) {
+            root = svg.append('g').attr('class', 'qhc-root');
+        }
+        root.attr('transform', `translate(${margin.left},${margin.top})`);
+        const ensureGroup = (cls) => {
+            let s = root.select(`g.${cls}`);
+            if (s.empty())
+                s = root.append('g').attr('class', cls);
+            return s;
+        };
+        const gridGroup = ensureGroup('qhc-grid');
+        const linesGroup = ensureGroup('qhc-lines');
+        const pointsGroup = ensureGroup('qhc-points');
+        const axesGroup = ensureGroup('qhc-axes');
+        const uiGroup = ensureGroup('qhc-ui');
         const dates = aggregateData.dates.map(d => new Date(d));
         const xScale = d3.scaleTime()
             .domain(d3.extent(dates))
             .range([0, chartWidth]);
-        const maxValue = Math.max(...activeHabits.flatMap(habit => aggregateData[habit].filter(v => typeof v === 'number')));
+        const maxValue = Math.max(1, ...activeHabits.flatMap(habit => aggregateData[habit].filter(v => typeof v === 'number')));
         const yScale = d3.scaleLinear()
             .domain([0, maxValue * 1.1])
             .range([chartHeight, 0]);
-        g.selectAll('.grid-line-y')
-            .data(yScale.ticks(5))
-            .enter().append('line')
-            .attr('class', styles$8.gridLine)
-            .attr('x1', 0)
-            .attr('y1', d => yScale(d))
-            .attr('x2', chartWidth)
-            .attr('y2', d => yScale(d));
-        const line = d3.line()
+        const lineGen = d3.line()
             .x(d => xScale(d[0]))
             .y(d => yScale(d[1]))
             .curve(d3.curveMonotoneX);
-        activeHabits.forEach(habit => {
-            const habitData = dates.map((date, i) => [date, aggregateData[habit][i]]).filter(d => typeof d[1] === 'number');
-            g.append('path')
-                .datum(habitData)
-                .attr('class', styles$8.line)
-                .attr('d', line)
-                .attr('stroke', getColor(habit))
-                .attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
-            // Add invisible larger circles for better hover detection
-            g.selectAll(`.hover-circle-${habit}`)
-                .data(habitData)
-                .enter().append('circle')
-                .attr('cx', d => xScale(d[0]))
-                .attr('cy', d => yScale(d[1]))
-                .attr('r', 10) // Larger invisible area
-                .attr('fill', 'transparent')
-                .style('cursor', 'pointer')
-                .on('mouseenter', function (_event, d) {
-                const [date, value] = d;
-                const rect = svgRef.current?.getBoundingClientRect();
-                if (rect) {
-                    setTooltipData({
-                        habit,
-                        date: date.toISOString().split('T')[0],
-                        value,
-                        x: xScale(date) + margin.left + rect.left,
-                        y: yScale(value) + margin.top + rect.top
-                    });
-                }
-                // Find and enlarge the visible circle
-                d3.select(g.node())
-                    .selectAll(`.circle-${habit}-${dates.indexOf(date)}`)
-                    .attr('r', 6);
-            })
-                .on('mouseleave', function (_event, _d) {
-                setTooltipData(null);
-                // Reset all circles for this habit
-                d3.select(g.node())
-                    .selectAll('[class*="circle-' + habit + '"]')
-                    .attr('r', 4);
-            })
-                .on('click', function (_event, d) {
-                const [date, value] = d;
-                if (onDataPointClick) {
-                    onDataPointClick(habit, date.toISOString().split('T')[0], value);
-                }
-            });
-            // Add visible circles
-            g.selectAll(`.circle-${habit}`)
-                .data(habitData)
-                .enter().append('circle')
-                .attr('class', (_d, i) => `${styles$8.dataPoint} circle-${habit}-${i}`)
-                .attr('cx', d => xScale(d[0]))
-                .attr('cy', d => yScale(d[1]))
-                .attr('r', 4)
-                .attr('fill', getColor(habit))
-                .attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1)
-                .style('pointer-events', 'none'); // Let the invisible circle handle events
-        });
-        // Helper function to get ISO week number
+        // -------- Grid --------
+        const gridSel = gridGroup.selectAll('line.qhc-grid-line')
+            .data(yScale.ticks(5), d => String(d));
+        gridSel.exit().remove();
+        const gridEnter = gridSel.enter().append('line')
+            .attr('class', `${styles$8.gridLine} qhc-grid-line`)
+            .style('opacity', 0);
+        gridEnter.merge(gridSel)
+            .attr('x1', 0)
+            .attr('x2', chartWidth)
+            .attr('y1', d => yScale(d))
+            .attr('y2', d => yScale(d))
+            .transition()
+            .duration(400)
+            .style('opacity', 1);
+        // -------- Axes --------
         const getISOWeek = (date) => {
             const d = new Date(date);
             d.setHours(0, 0, 0, 0);
@@ -4309,28 +4451,20 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             const week1 = new Date(d.getFullYear(), 0, 4);
             return 1 + Math.round(((d.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
         };
-        // Format x-axis based on view type
         const xAxisFormat = (() => {
             switch (viewType) {
                 case 'daily':
                     return d3.timeFormat('%m-%d');
                 case 'weekly':
-                    return (d) => {
-                        const weekNum = getISOWeek(d);
-                        return `W${weekNum.toString().padStart(2, '0')}`;
-                    };
+                    return (d) => `W${getISOWeek(d).toString().padStart(2, '0')}`;
                 case 'monthly':
                     return d3.timeFormat('%b');
                 case 'quarterly':
-                    return (d) => {
-                        const quarter = Math.floor(d.getMonth() / 3) + 1;
-                        return `Q${quarter}`;
-                    };
+                    return (d) => `Q${Math.floor(d.getMonth() / 3) + 1}`;
                 default:
                     return d3.timeFormat('%m-%d');
             }
         })();
-        // Determine number of ticks based on view type and data
         const tickCount = (() => {
             switch (viewType) {
                 case 'daily':
@@ -4340,47 +4474,278 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                 case 'monthly':
                     return Math.min(12, aggregateData.dates.length);
                 case 'quarterly':
-                    return aggregateData.dates.length; // Show all quarters
+                    return aggregateData.dates.length;
                 default:
                     return undefined;
             }
         })();
         const xAxisGenerator = d3.axisBottom(xScale)
             .tickFormat(d => xAxisFormat(d));
-        // Set tick values for quarterly to avoid duplicates
         if (viewType === 'quarterly') {
             xAxisGenerator.tickValues(dates);
         }
         else if (tickCount) {
             xAxisGenerator.ticks(tickCount);
         }
-        const xAxis = g.append('g')
-            .attr('class', styles$8.xAxis)
-            .attr('transform', `translate(0,${chartHeight})`)
-            .call(xAxisGenerator);
-        // Rotate labels for better readability if needed
-        if (viewType === 'daily' || viewType === 'weekly') {
-            xAxis.selectAll('text')
-                .style('text-anchor', 'end')
-                .attr('dx', '-.8em')
-                .attr('dy', '.15em')
-                .attr('transform', 'rotate(-45)');
-        }
-        g.append('g')
-            .attr('class', styles$8.yAxis)
-            .call(d3.axisLeft(yScale));
-    }, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, onDataPointClick, getColor, height, viewType, width]);
-    // Format date for tooltip display
+        let xAxis = axesGroup.select('g.qhc-x-axis');
+        if (xAxis.empty()) {
+            xAxis = axesGroup.append('g').attr('class', `${styles$8.xAxis} qhc-x-axis`);
+        }
+        xAxis.attr('transform', `translate(0,${chartHeight})`).call(xAxisGenerator);
+        xAxis.selectAll('text')
+            .style('text-anchor', viewType === 'daily' || viewType === 'weekly' ? 'end' : 'middle')
+            .attr('dx', viewType === 'daily' || viewType === 'weekly' ? '-.8em' : '0')
+            .attr('dy', viewType === 'daily' || viewType === 'weekly' ? '.15em' : '.71em')
+            .attr('transform', viewType === 'daily' || viewType === 'weekly' ? 'rotate(-45)' : null);
+        let yAxis = axesGroup.select('g.qhc-y-axis');
+        if (yAxis.empty()) {
+            yAxis = axesGroup.append('g').attr('class', `${styles$8.yAxis} qhc-y-axis`);
+        }
+        yAxis.call(d3.axisLeft(yScale));
+        if (isFirstRender) {
+            xAxis.style('opacity', 0).transition().duration(500).delay(80).style('opacity', 1);
+            yAxis.style('opacity', 0).transition().duration(500).delay(80).style('opacity', 1);
+        }
+        // -------- Lines (data join, morph on update) --------
+        const lineData = activeHabits.map(habit => {
+            const points = dates
+                .map((date, i) => [date, aggregateData[habit][i]])
+                .filter(d => typeof d[1] === 'number');
+            return { habit, color: getColor(habit), points };
+        });
+        const lineSel = linesGroup.selectAll('path.qhc-line')
+            .data(lineData, (d) => d.habit);
+        lineSel.exit()
+            .transition('line-exit')
+            .duration(300)
+            .style('opacity', 0)
+            .remove();
+        const lineEnter = lineSel.enter().append('path')
+            .attr('class', `${styles$8.line} qhc-line`)
+            .attr('data-habit', d => d.habit)
+            .attr('fill', 'none')
+            .attr('stroke', d => d.color)
+            .attr('opacity', 0)
+            .attr('d', d => lineGen(d.points) || '')
+            .each(function () {
+            const node = this;
+            const len = typeof node.getTotalLength === 'function' ? node.getTotalLength() : 0;
+            if (len > 0) {
+                d3.select(node)
+                    .attr('stroke-dasharray', `${len} ${len}`)
+                    .attr('stroke-dashoffset', len);
+            }
+        });
+        lineEnter.transition('line-enter')
+            .duration(900)
+            .ease(d3.easeCubicOut)
+            .attr('opacity', 1)
+            .attr('stroke-dashoffset', 0)
+            .on('end', function () {
+            d3.select(this).attr('stroke-dasharray', null);
+        });
+        lineSel.transition('line-update')
+            .duration(700)
+            .ease(d3.easeCubicInOut)
+            .attr('stroke', d => d.color)
+            .attrTween('d', function (d) {
+            const oldD = d3.select(this).attr('d') || '';
+            const newD = lineGen(d.points) || '';
+            return pathTween(oldD, newD, 90);
+        })
+            .on('end', function (d) {
+            d3.select(this).attr('d', lineGen(d.points) || '');
+        });
+        // -------- Points --------
+        // Clear and re-add (simpler than join when both habit set + count change).
+        // Hide them during line morph, then spring up from baseline.
+        pointsGroup.selectAll('*').remove();
+        const allPoints = [];
+        activeHabits.forEach(habit => {
+            const color = getColor(habit);
+            dates.forEach((date, i) => {
+                const v = aggregateData[habit][i];
+                if (typeof v === 'number' && !isNaN(v)) {
+                    allPoints.push({ habit, color, date, value: v });
+                }
+            });
+        });
+        const minX = xScale(dates[0]);
+        const maxX = xScale(dates[dates.length - 1]);
+        const xRange = Math.max(1, maxX - minX);
+        const pointAppearDelay = isFirstRender ? 100 : 350;
+        const pointAppearTotal = isFirstRender ? 1100 : 600;
+        pointsGroup.selectAll('circle.qhc-point')
+            .data(allPoints)
+            .enter().append('circle')
+            .attr('class', `${styles$8.dataPoint} qhc-point`)
+            .attr('data-habit', d => d.habit)
+            .attr('cx', d => xScale(d.date))
+            .attr('cy', chartHeight)
+            .attr('r', 0)
+            .attr('fill', d => d.color)
+            .style('opacity', 0)
+            .transition('point-enter')
+            .delay(d => pointAppearDelay + pointAppearTotal * ((xScale(d.date) - minX) / xRange))
+            .duration(420)
+            .ease(d3.easeBackOut.overshoot(2))
+            .attr('cy', d => yScale(d.value))
+            .attr('r', 4)
+            .style('opacity', 1);
+        // -------- UI layer (crosshair, halo, overlay) --------
+        uiGroup.selectAll('*').remove();
+        const crosshair = uiGroup.append('line')
+            .attr('class', styles$8.crosshair)
+            .attr('y1', 0)
+            .attr('y2', chartHeight)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        const halo = uiGroup.append('circle')
+            .attr('class', styles$8.halo)
+            .attr('r', 0)
+            .style('opacity', 0)
+            .style('pointer-events', 'none');
+        let activeKey = null;
+        const startHaloPulse = (cx, cy, fill) => {
+            halo.interrupt('halo-pulse').interrupt('halo-out')
+                .attr('cx', cx).attr('cy', cy).attr('fill', fill);
+            const pulseOnce = () => {
+                halo.attr('r', 4).style('opacity', 0.55)
+                    .transition('halo-pulse').duration(900).ease(d3.easeCubicOut)
+                    .attr('r', 18).style('opacity', 0)
+                    .on('end', pulseOnce);
+            };
+            pulseOnce();
+        };
+        const stopHaloPulse = () => {
+            halo.interrupt('halo-pulse')
+                .transition('halo-out').duration(180)
+                .style('opacity', 0).attr('r', 0);
+        };
+        const activeAll = allPoints.map(p => ({
+            habit: p.habit,
+            date: p.date,
+            value: p.value,
+            x: xScale(p.date),
+            y: yScale(p.value)
+        }));
+        const setActive = (pt, clientX, clientY) => {
+            const key = `${pt.habit}|${pt.date.toISOString()}`;
+            const color = getColor(pt.habit);
+            crosshair.attr('x1', pt.x).attr('x2', pt.x)
+                .interrupt('crosshair-fade')
+                .transition('crosshair-fade').duration(120).style('opacity', 1);
+            if (activeKey !== key) {
+                pointsGroup.selectAll('circle.qhc-point')
+                    .filter(function () { return d3.select(this).attr('data-active') === 'true'; })
+                    .attr('data-active', null)
+                    .transition('point-scale').duration(150).attr('r', 4);
+                pointsGroup.selectAll('circle.qhc-point')
+                    .filter(function () {
+                    const cx = +d3.select(this).attr('cx');
+                    const cy = +d3.select(this).attr('cy');
+                    const habit = d3.select(this).attr('data-habit');
+                    return habit === pt.habit && Math.abs(cx - pt.x) < 0.5 && Math.abs(cy - pt.y) < 0.5;
+                })
+                    .attr('data-active', 'true')
+                    .transition('point-scale').duration(180).ease(d3.easeBackOut.overshoot(2))
+                    .attr('r', 7);
+                startHaloPulse(pt.x, pt.y, color);
+                activeKey = key;
+            }
+            setTooltipData({
+                habit: pt.habit,
+                date: pt.date.toISOString().split('T')[0],
+                value: pt.value,
+                x: clientX,
+                y: clientY
+            });
+        };
+        const clearActive = () => {
+            crosshair.interrupt('crosshair-fade')
+                .transition('crosshair-fade').duration(180).style('opacity', 0);
+            pointsGroup.selectAll('circle.qhc-point')
+                .filter(function () { return d3.select(this).attr('data-active') === 'true'; })
+                .attr('data-active', null)
+                .transition('point-scale').duration(180).attr('r', 4);
+            stopHaloPulse();
+            activeKey = null;
+            setTooltipData(null);
+        };
+        uiGroup.append('rect')
+            .attr('class', styles$8.overlay)
+            .attr('width', chartWidth)
+            .attr('height', chartHeight)
+            .on('mousemove', function (event) {
+            if (activeAll.length === 0)
+                return;
+            const [mx, my] = d3.pointer(event, this);
+            let nearest = activeAll[0];
+            let nearestDist = Infinity;
+            for (const p of activeAll) {
+                const dx = p.x - mx;
+                const dy = p.y - my;
+                const dist = dx * dx + dy * dy;
+                if (dist < nearestDist) {
+                    nearestDist = dist;
+                    nearest = p;
+                }
+            }
+            setActive(nearest, event.clientX, event.clientY);
+        })
+            .on('mouseleave', () => {
+            clearActive();
+        })
+            .on('click', function (event) {
+            if (activeAll.length === 0 || !onClickRef.current)
+                return;
+            const [mx, my] = d3.pointer(event, this);
+            let nearest = activeAll[0];
+            let nearestDist = Infinity;
+            for (const p of activeAll) {
+                const dx = p.x - mx;
+                const dy = p.y - my;
+                const dist = dx * dx + dy * dy;
+                if (dist < nearestDist) {
+                    nearestDist = dist;
+                    nearest = p;
+                }
+            }
+            onClickRef.current(nearest.habit, nearest.date.toISOString().split('T')[0], nearest.value);
+        });
+        uiGroup.raise();
+    }, [aggregateData, activeHabits, chartWidth, chartHeight, margin, getColor, viewType, width, height]);
+    // Hover dimming: update opacity on existing elements without redrawing.
+    useEffect(() => {
+        if (!svgRef.current)
+            return;
+        const svg = d3.select(svgRef.current);
+        svg.selectAll('path.qhc-line')
+            .each(function () {
+            const habit = this.getAttribute('data-habit');
+            const dim = hoveredHabit && hoveredHabit !== habit;
+            d3.select(this)
+                .transition('hover-dim')
+                .duration(180)
+                .attr('opacity', dim ? 0.25 : 1);
+        });
+        svg.selectAll('circle.qhc-point')
+            .each(function () {
+            const habit = this.getAttribute('data-habit');
+            const dim = hoveredHabit && hoveredHabit !== habit;
+            d3.select(this)
+                .transition('hover-dim')
+                .duration(180)
+                .attr('opacity', dim ? 0.25 : 1);
+        });
+    }, [hoveredHabit]);
     const formatTooltipDate = (dateStr, viewType) => {
         const date = new Date(dateStr);
         switch (viewType) {
             case 'daily':
                 return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
-            case 'weekly': {
-                const weekEnd = new Date(date);
-                weekEnd.setDate(date.getDate() + 6);
+            case 'weekly':
                 return `Week of ${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`;
-            }
             case 'monthly':
                 return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
             case 'quarterly': {
@@ -4391,7 +4756,6 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                 return dateStr;
         }
     };
-    // View type icons and labels
     const viewTypeConfig = {
         daily: { Icon: Calendar$1, label: 'Daily' },
         weekly: { Icon: CalendarDays, label: 'Weekly' },