@stfrigerio/sito-template 0.1.21 → 0.1.23

package/dist/index.js

@@ -2256,7 +2256,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
                 }, children: [jsxRuntime.jsxs("div", { className: styles$6.tooltipHeader, children: [jsxRuntime.jsx("div", { className: styles$6.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxRuntime.jsxs("div", { className: styles$6.tooltipRating, children: [jsxRuntime.jsx("span", { className: styles$6.ratingValue, children: selectedMood.rating }), jsxRuntime.jsx("span", { className: styles$6.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsxRuntime.jsx("div", { className: styles$6.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsxRuntime.jsx("span", { className: styles$6.tag, children: tag }, index))) })), selectedMood.comment && (jsxRuntime.jsx("div", { className: styles$6.tooltipComment, children: selectedMood.comment }))] }))] }));
 };
 
-var styles$5 = {"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","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","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"};
+var styles$5 = {"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","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","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"};
 
 // Default colors as fallback
 const DEFAULT_HABIT_COLORS = {
@@ -2269,11 +2269,13 @@ const DEFAULT_HABIT_COLORS = {
     'Calories': '#FF9F1C',
     'Study': '#C774E8'
 };
-const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewType = 'daily', periodType = 'month', habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {} }) => {
+const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewType = 'daily', periodType = 'month', habitColors: customHabitColors = {}, habitEmojis: customHabitEmojis = {}, onDataPointClick }) => {
     const svgRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
     const [viewType, setViewType] = React.useState(defaultViewType);
     const [activeHabits, setActiveHabits] = React.useState([]);
     const [hoveredHabit, setHoveredHabit] = React.useState(null);
+    const [tooltipData, setTooltipData] = React.useState(null);
     const margin = { top: 20, right: 20, bottom: 50, left: 50 };
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
@@ -2281,6 +2283,16 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
     React.useEffect(() => {
         setActiveHabits(habits);
     }, [habits]);
+    // Hide tooltip on scroll
+    React.useEffect(() => {
+        const handleScroll = () => {
+            setTooltipData(null);
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        return () => {
+            window.removeEventListener('scroll', handleScroll, true);
+        };
+    }, []);
     const availableViewTypes = React.useMemo(() => {
         switch (periodType) {
             case 'week':
@@ -2369,6 +2381,15 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
             return;
         const svg = d3__namespace.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 dates = aggregateData.dates.map(d => new Date(d));
@@ -2399,15 +2420,56 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
                 .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__namespace.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__namespace.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', styles$5.dataPoint)
+                .attr('class', (_d, i) => `${styles$5.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);
+                .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
         const getISOWeek = (date) => {
@@ -2477,7 +2539,28 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         g.append('g')
             .attr('class', styles$5.yAxis)
             .call(d3__namespace.axisLeft(yScale));
-    }, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, customHabitColors]);
+    }, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, customHabitColors, onDataPointClick]);
+    // Format date for tooltip display
+    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);
+                return `Week of ${date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}`;
+            }
+            case 'monthly':
+                return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
+            case 'quarterly': {
+                const quarter = Math.floor(date.getMonth() / 3) + 1;
+                return `Q${quarter} ${date.getFullYear()}`;
+            }
+            default:
+                return dateStr;
+        }
+    };
     // View type icons and labels
     const viewTypeConfig = {
         daily: { icon: '📅', label: 'Daily' },
@@ -2485,42 +2568,57 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
         monthly: { icon: '🗓️', label: 'Monthly' },
         quarterly: { icon: '📊', label: 'Quarterly' }
     };
-    return (jsxRuntime.jsxs("div", { className: styles$5.container, children: [jsxRuntime.jsx("div", { className: styles$5.controls, children: jsxRuntime.jsx("div", { className: styles$5.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$5.viewButton} ${viewType === type ? styles$5.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$5.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$5.viewLabel, children: viewTypeConfig[type].label })] }, type))) }) }), jsxRuntime.jsx("div", { className: styles$5.legend, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$5.legendItem} ${!activeHabits.includes(habit) ? styles$5.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$5.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$5.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$5.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$5.container, children: [jsxRuntime.jsx("div", { className: styles$5.controls, children: jsxRuntime.jsx("div", { className: styles$5.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$5.viewButton} ${viewType === type ? styles$5.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$5.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$5.viewLabel, children: viewTypeConfig[type].label })] }, type))) }) }), jsxRuntime.jsx("div", { className: styles$5.legend, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$5.legendItem} ${!activeHabits.includes(habit) ? styles$5.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$5.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$5.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$5.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$5.tooltip} ${tooltipData ? styles$5.visible : ''}`, style: {
+                    left: `${tooltipData.x}px`,
+                    top: `${tooltipData.y - 80}px`
+                }, children: [jsxRuntime.jsxs("div", { className: styles$5.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$5.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$5.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsx("span", { children: tooltipData.habit })] }), jsxRuntime.jsxs("div", { className: styles$5.tooltipInfo, children: [jsxRuntime.jsx("div", { className: styles$5.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxRuntime.jsxs("div", { className: styles$5.tooltipValue, children: [jsxRuntime.jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsxRuntime.jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
 };
 
-var styles$4 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA"};
+var styles$4 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};
 
 const parseTimeToDecimal = (time) => {
     const [hours, minutes] = time.split(':').map(Number);
     return hours + minutes / 60;
 };
-const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
+const formatTime = (hour) => {
+    const h24 = Math.floor(hour % 24);
+    const h12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24;
+    const ampm = h24 >= 12 ? 'PM' : 'AM';
+    const minutes = Math.round((hour % 1) * 60);
+    return `${Math.floor(h12)}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+};
+const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
     const svgRef = React.useRef(null);
-    const margin = React.useMemo(() => ({ top: 20, right: 20, bottom: 40, left: 60 }), []);
+    const [tooltipData, setTooltipData] = React.useState(null);
+    const margin = React.useMemo(() => ({ top: 30, right: 30, bottom: 50, left: 80 }), []);
     const chartWidth = width - margin.left - margin.right;
     const chartHeight = height - margin.top - margin.bottom;
+    // Hide tooltip on scroll
+    React.useEffect(() => {
+        const handleScroll = () => {
+            setTooltipData(null);
+        };
+        window.addEventListener('scroll', handleScroll, true);
+        return () => {
+            window.removeEventListener('scroll', handleScroll, true);
+        };
+    }, []);
     React.useEffect(() => {
         if (!svgRef.current || sleepData.length === 0)
             return;
         const svg = d3__namespace.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})`);
-        // Create tooltip
-        const tooltip = d3__namespace.select('body').append('div')
-            .attr('class', 'sleep-chart-tooltip')
-            .style('position', 'absolute')
-            .style('background', 'var(--bg-secondary)')
-            .style('color', 'var(--text-primary)')
-            .style('padding', '12px')
-            .style('border-radius', '8px')
-            .style('box-shadow', '0 4px 12px rgba(0,0,0,0.25)')
-            .style('border', '1px solid var(--border-primary)')
-            .style('font-size', '14px')
-            .style('pointer-events', 'none')
-            .style('opacity', 0)
-            .style('z-index', '1000')
-            .style('backdrop-filter', 'blur(8px)');
         const xScale = d3__namespace.scaleLinear()
             .domain([18, 42])
             .range([0, chartWidth]);
@@ -2528,16 +2626,39 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         const yScale = d3__namespace.scaleBand()
             .domain(yDomain)
             .range([0, chartHeight])
-            .paddingInner(0.1)
-            .paddingOuter(0.05);
+            .paddingInner(0.2)
+            .paddingOuter(0.1);
+        // Add vertical grid lines with midnight/noon highlights
         g.selectAll('.grid-line-x')
-            .data(d3__namespace.range(18, 43, 3))
+            .data(d3__namespace.range(18, 43, 1))
             .enter().append('line')
             .attr('class', styles$4.gridLine)
             .attr('x1', d => xScale(d))
             .attr('y1', 0)
             .attr('x2', d => xScale(d))
-            .attr('y2', chartHeight);
+            .attr('y2', chartHeight)
+            .style('stroke', d => {
+            const hour = d % 24;
+            if (hour === 0)
+                return 'var(--color-border)'; // Midnight
+            if (hour === 12)
+                return 'var(--color-border)'; // Noon
+            return 'var(--color-border)';
+        })
+            .style('stroke-opacity', d => {
+            const hour = d % 24;
+            if (hour === 0 || hour === 12)
+                return 0.3;
+            if (hour % 3 === 0)
+                return 0.15;
+            return 0.05;
+        })
+            .style('stroke-width', d => {
+            const hour = d % 24;
+            if (hour === 0 || hour === 12)
+                return 2;
+            return 1;
+        });
         sleepData.forEach((dayData) => {
             const yValue = yScale(dayData.date);
             if (yValue === undefined)
@@ -2575,37 +2696,60 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             }
             // Draw the bar only if both values exist
             if (sleepHour !== null && wakeHour !== null) {
-                sleepGroup.append('rect')
+                const rect = sleepGroup.append('rect')
                     .attr('x', xScale(sleepHour))
                     .attr('y', yValue)
-                    .attr('width', Math.max(0, xScale(wakeHour) - xScale(sleepHour)))
+                    .attr('width', 0) // Start with 0 width for animation
                     .attr('height', barHeight)
-                    .attr('rx', 4)
+                    .attr('rx', barHeight / 2)
                     .attr('fill', 'url(#sleepGradient)')
-                    .attr('opacity', 0.8)
-                    .attr('stroke', 'none');
+                    .attr('opacity', 0) // Start invisible
+                    .attr('stroke', 'rgba(255,255,255,0.3)')
+                    .attr('stroke-width', 1)
+                    .style('filter', 'drop-shadow(0 2px 8px rgba(155, 89, 182, 0.3))');
+                // Animate the bar
+                rect.transition()
+                    .duration(800)
+                    .delay(Math.random() * 200) // Stagger the animations
+                    .ease(d3__namespace.easeCubicOut)
+                    .attr('width', Math.max(0, xScale(wakeHour) - xScale(sleepHour)))
+                    .attr('opacity', 0.85);
             }
             // Draw sleep dot if sleep time exists
             if (sleepHour !== null) {
-                sleepGroup.append('circle')
+                const sleepDot = sleepGroup.append('circle')
                     .attr('cx', xScale(sleepHour))
                     .attr('cy', yValue + barHeight / 2)
-                    .attr('r', 4)
+                    .attr('r', 0) // Start with 0 radius
                     .attr('fill', '#9B59B6')
-                    .attr('stroke', '#fff')
-                    .attr('stroke-width', 1)
-                    .style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))');
+                    .attr('stroke', '#ffffff')
+                    .attr('stroke-width', 2)
+                    .style('filter', 'drop-shadow(0 3px 6px rgba(155, 89, 182, 0.4))')
+                    .style('transition', 'all 0.3s ease');
+                // Animate the dot
+                sleepDot.transition()
+                    .duration(400)
+                    .delay(300 + Math.random() * 100)
+                    .ease(d3__namespace.easeBackOut)
+                    .attr('r', 6);
             }
             // Draw wake dot if wake hour exists
             if (wakeHour !== null) {
-                sleepGroup.append('circle')
+                const wakeDot = sleepGroup.append('circle')
                     .attr('cx', xScale(wakeHour))
                     .attr('cy', yValue + barHeight / 2)
-                    .attr('r', 4)
+                    .attr('r', 0) // Start with 0 radius
                     .attr('fill', '#3498DB')
-                    .attr('stroke', '#fff')
-                    .attr('stroke-width', 1)
-                    .style('filter', 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))');
+                    .attr('stroke', '#ffffff')
+                    .attr('stroke-width', 2)
+                    .style('filter', 'drop-shadow(0 3px 6px rgba(52, 152, 219, 0.4))')
+                    .style('transition', 'all 0.3s ease');
+                // Animate the dot
+                wakeDot.transition()
+                    .duration(400)
+                    .delay(500 + Math.random() * 100)
+                    .ease(d3__namespace.easeBackOut)
+                    .attr('r', 6);
             }
             // Add hover interactions with tooltip
             sleepGroup
@@ -2615,48 +2759,50 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
                     .transition()
                     .duration(200)
                     .attr('opacity', 1)
-                    .style('filter', 'brightness(1.1)');
-                // Show tooltip
-                const formatTime = (hour) => {
-                    const h24 = hour % 24;
-                    const h12 = h24 === 0 ? 12 : h24 > 12 ? h24 - 12 : h24;
-                    const ampm = h24 >= 12 ? 'PM' : 'AM';
-                    const minutes = Math.round((hour % 1) * 60);
-                    return `${h12}:${minutes.toString().padStart(2, '0')} ${ampm}`;
-                };
-                let tooltipContent = `<div><strong>${new Date(dayData.date).toLocaleDateString()}</strong></div>`;
-                if (sleepHour !== null && wakeHour !== null) {
-                    const sleepDuration = wakeHour - sleepHour;
-                    tooltipContent += `<div>Sleep: ${formatTime(sleepHour)}</div>`;
-                    tooltipContent += `<div>Wake: ${formatTime(wakeHour)}</div>`;
-                    tooltipContent += `<div>Duration: ${Math.floor(sleepDuration)}h ${Math.round((sleepDuration % 1) * 60)}m</div>`;
-                }
-                else {
-                    if (sleepHour !== null)
-                        tooltipContent += `<div>Sleep: ${formatTime(sleepHour)}</div>`;
-                    if (wakeHour !== null)
-                        tooltipContent += `<div>Wake: ${formatTime(wakeHour)}</div>`;
+                    .style('filter', 'drop-shadow(0 4px 12px rgba(155, 89, 182, 0.5)) brightness(1.1)');
+                // Scale up the dots
+                d3__namespace.select(this).selectAll('circle')
+                    .transition()
+                    .duration(200)
+                    .attr('r', 8);
+                // Calculate tooltip data
+                const rect = svgRef.current?.getBoundingClientRect();
+                if (rect) {
+                    const duration = (sleepHour !== null && wakeHour !== null)
+                        ? wakeHour - sleepHour
+                        : null;
+                    setTooltipData({
+                        date: dayData.date,
+                        sleepTime: sleepHour !== null ? formatTime(sleepHour) : null,
+                        wakeTime: wakeHour !== null ? formatTime(wakeHour) : null,
+                        duration: duration !== null ? Math.round(duration * 100) / 100 : null,
+                        x: event.pageX,
+                        y: event.pageY - 80
+                    });
                 }
-                tooltip.html(tooltipContent)
-                    .style('opacity', 1)
-                    .style('left', (event.pageX + 10) + 'px')
-                    .style('top', (event.pageY - 10) + 'px');
             })
                 .on('mouseleave', function () {
                 // Reset bar appearance
                 d3__namespace.select(this).select('rect')
                     .transition()
                     .duration(200)
-                    .attr('opacity', 0.8)
-                    .style('filter', 'none');
+                    .attr('opacity', 0.85)
+                    .style('filter', 'drop-shadow(0 2px 8px rgba(155, 89, 182, 0.3))');
+                // Reset dots
+                d3__namespace.select(this).selectAll('circle')
+                    .transition()
+                    .duration(200)
+                    .attr('r', 6);
                 // Hide tooltip
-                tooltip.style('opacity', 0);
+                setTooltipData(null);
             })
                 .on('mousemove', function (event) {
                 // Update tooltip position
-                tooltip
-                    .style('left', (event.pageX + 10) + 'px')
-                    .style('top', (event.pageY - 10) + 'px');
+                setTooltipData(prev => prev ? {
+                    ...prev,
+                    x: event.pageX,
+                    y: event.pageY - 80
+                } : null);
             });
         });
         // Create gradient definition
@@ -2668,16 +2814,23 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
         gradient.append('stop')
             .attr('offset', '0%')
             .attr('stop-color', '#9B59B6')
-            .attr('stop-opacity', 0.9);
+            .attr('stop-opacity', 1);
+        gradient.append('stop')
+            .attr('offset', '50%')
+            .attr('stop-color', '#7B68A6')
+            .attr('stop-opacity', 1);
         gradient.append('stop')
             .attr('offset', '100%')
             .attr('stop-color', '#3498DB')
-            .attr('stop-opacity', 0.9);
+            .attr('stop-opacity', 1);
         const xAxisTicks = d3__namespace.range(18, 43, 3).map(hour => ({
             value: hour,
-            label: (hour % 24).toString().padStart(2, '0') + ':00'
+            label: hour === 24 ? '12 AM' : hour === 36 ? '12 PM' :
+                (hour % 24) === 0 ? '12 AM' :
+                    (hour % 24) < 12 ? `${hour % 24} AM` :
+                        (hour % 24) === 12 ? '12 PM' : `${(hour % 24) - 12} PM`
         }));
-        g.append('g')
+        const xAxis = g.append('g')
             .attr('class', styles$4.xAxis)
             .attr('transform', `translate(0,${chartHeight})`)
             .call(d3__namespace.axisBottom(xScale)
@@ -2685,7 +2838,14 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             .tickFormat((d) => {
             const tick = xAxisTicks.find(t => t.value === d);
             return tick ? tick.label : '';
-        }));
+        })
+            .tickSizeOuter(0));
+        // Style axis ticks
+        xAxis.selectAll('text')
+            .style('font-weight', d => {
+            const hour = d % 24;
+            return hour === 0 || hour === 12 ? '600' : '400';
+        });
         const yAxisTicks = yDomain.filter((_, i) => i % Math.ceil(yDomain.length / 10) === 0);
         g.append('g')
             .attr('class', styles$4.yAxis)
@@ -2695,12 +2855,15 @@ const SleepChart = ({ sleepData, width = 800, height = 300, onDateClick }) => {
             const date = new Date(d);
             return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
         }));
-        // Cleanup function
-        return () => {
-            tooltip.remove();
-        };
     }, [sleepData, chartWidth, chartHeight, margin, onDateClick]);
-    return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsxs("div", { className: styles$4.header, children: [jsxRuntime.jsx("h3", { className: styles$4.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$4.legend, children: [jsxRuntime.jsxs("div", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsxs("div", { className: styles$4.header, children: [jsxRuntime.jsx("h3", { className: styles$4.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$4.legend, children: [jsxRuntime.jsxs("div", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$4.tooltip} ${tooltipData ? styles$4.visible : ''}`, style: {
+                    left: `${tooltipData.x}px`,
+                    top: `${tooltipData.y}px`
+                }, children: [jsxRuntime.jsxs("div", { className: styles$4.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$4.tooltipEmoji, children: "\uD83D\uDE34" }), jsxRuntime.jsx("span", { children: new Date(tooltipData.date).toLocaleDateString('en-US', {
+                                    weekday: 'short',
+                                    month: 'short',
+                                    day: 'numeric'
+                                }) })] }), jsxRuntime.jsxs("div", { className: styles$4.tooltipInfo, children: [tooltipData.sleepTime && (jsxRuntime.jsxs("div", { className: styles$4.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$4.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\uD83C\uDF19" }), jsxRuntime.jsx("span", { children: "Sleep:" })] }), jsxRuntime.jsx("span", { className: styles$4.tooltipValue, children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxRuntime.jsxs("div", { className: styles$4.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$4.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\u2600\uFE0F" }), jsxRuntime.jsx("span", { children: "Wake:" })] }), jsxRuntime.jsx("span", { className: styles$4.tooltipValue, children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxRuntime.jsxs("div", { className: styles$4.tooltipDuration, children: [jsxRuntime.jsx("span", { children: "\u23F1\uFE0F" }), jsxRuntime.jsxs("span", { children: [Math.floor(tooltipData.duration), "h ", Math.round((tooltipData.duration % 1) * 60), "m"] })] }))] })] }))] }));
 };
 
 var styles$3 = {"container":"BooleansHeatmap-module_container__IOyeU","title":"BooleansHeatmap-module_title__8DRRQ","habitEmoji":"BooleansHeatmap-module_habitEmoji__Mawv-","chart":"BooleansHeatmap-module_chart__-q0Pc","monthLabel":"BooleansHeatmap-module_monthLabel__MXbIg","dayLabel":"BooleansHeatmap-module_dayLabel__2RRtm","cell":"BooleansHeatmap-module_cell__WADVB","legend":"BooleansHeatmap-module_legend__WqGF8","legendItem":"BooleansHeatmap-module_legendItem__rDE2g","legendColor":"BooleansHeatmap-module_legendColor__Z34-d","tooltip":"BooleansHeatmap-module_tooltip__-fHl7"};
@@ -2929,8 +3092,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     const interpolatedArc = d3__namespace.arc()
                         .startAngle(() => currX0)
                         .endAngle(() => currX1)
-                        .innerRadius(() => Math.sqrt(currY0))
-                        .outerRadius(() => Math.sqrt(currY1))
+                        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
+                        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
                         .cornerRadius(3);
                     return interpolatedArc(node) || '';
                 };
@@ -2960,13 +3123,21 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 .ease(d3__namespace.easeCubicInOut);
             // Zoom to clicked node - scale to fill the entire circle
             const clickedOriginal = clickedNode;
+            // Ensure we use the original x values for proper scaling
+            // The x-scale maps the clicked node's angular extent to the full circle
             const xScale = d3__namespace.scaleLinear()
                 .domain([clickedOriginal.x0Original, clickedOriginal.x1Original])
-                .range([0, 2 * Math.PI]);
-            // For the radial scale, we want to map the clicked node's radial range to the full circle
+                .range([0, 2 * Math.PI])
+                .clamp(true); // Ensure values stay within bounds
+            // For the radial scale, always use the full radius available
+            // Find the deepest descendant to ensure all children fit
+            const descendants = nodes.filter(d => isParentOf(clickedNode, d));
+            const maxChildRadius = Math.max(...descendants.map(d => d.y1Original));
+            // Always scale to use the full radius, regardless of original size
             const yScale = d3__namespace.scaleLinear()
-                .domain([clickedOriginal.y0Original, clickedOriginal.y1Original])
-                .range([0, radius * radius]);
+                .domain([clickedOriginal.y0Original, maxChildRadius])
+                .range([0, radius * radius])
+                .clamp(true); // Ensure values stay within bounds
             // First, immediately hide elements that shouldn't be visible
             paths.style('opacity', (d) => isParentOf(clickedNode, d) ? 1 : 0);
             paths.transition(transition)
@@ -2978,17 +3149,33 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     return () => '';
                 }
                 // Calculate new positions based on the original positions
-                const newX0 = xScale(node.x0Original);
-                const newX1 = xScale(node.x1Original);
-                // For radial positions, map them within the clicked node's range
+                // ALWAYS scale to fill the full circle, no minimum size preservation
+                let newX0 = xScale(node.x0Original);
+                let newX1 = xScale(node.x1Original);
+                // Ensure proper scaling even for very small segments
+                // The clicked node's extent should always map to full circle
+                if (newX1 <= newX0) {
+                    // Force proper angular extent based on proportion
+                    const proportion = (node.x1Original - node.x0Original) / (clickedOriginal.x1Original - clickedOriginal.x0Original);
+                    newX1 = newX0 + (2 * Math.PI * proportion);
+                }
+                // For radial positions, scale appropriately
                 let newY0, newY1;
                 if (node === clickedNode) {
-                    // The clicked node itself should fill from center to edge
+                    // The clicked node itself should fill from center
                     newY0 = 0;
-                    newY1 = radius * radius;
+                    // If it has children, leave room for them; otherwise fill to edge
+                    if (node.children && node.children.length > 0) {
+                        const childrenY0 = Math.min(...node.children.map(c => c.y0Original));
+                        newY1 = yScale(childrenY0) * 0.98; // Very slight gap for visual separation
+                    }
+                    else {
+                        newY1 = radius * radius * 0.98; // Fill almost to edge
+                    }
                 }
                 else {
-                    // Child nodes should be scaled within the full radius
+                    // Child nodes should be scaled to fill the remaining space proportionally
+                    // NO minimum size enforcement - pure proportional scaling
                     newY0 = yScale(node.y0Original);
                     newY1 = yScale(node.y1Original);
                 }
@@ -3011,8 +3198,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                     const interpolatedArc = d3__namespace.arc()
                         .startAngle(() => currX0)
                         .endAngle(() => currX1)
-                        .innerRadius(() => Math.sqrt(currY0))
-                        .outerRadius(() => Math.sqrt(currY1))
+                        .innerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY0))))
+                        .outerRadius(() => Math.min(radius, Math.sqrt(Math.max(0, currY1))))
                         .cornerRadius(3);
                     return interpolatedArc(node) || '';
                 };
@@ -3048,11 +3235,11 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             return getColor(ancestor.data.name, d.depth);
         })
             .attr('stroke', () => {
-            // Get computed background color
+            // Get computed border color from theme
             const computedStyle = window.getComputedStyle(svgRef.current);
-            return computedStyle.getPropertyValue('--bg-primary') || '#ffffff';
+            return computedStyle.getPropertyValue('--color-border') || '#e2e8f0';
         })
-            .attr('stroke-width', 1)
+            .attr('stroke-width', 2)
             .style('cursor', d => (!d.children || d.children.length === 0) ? 'default' : 'pointer')
             .on('click', handleClick)
             .on('mouseover', function (event, d) {
@@ -3112,7 +3299,9 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         });
         const shouldDisplayLabel = (d) => {
             const angle = d.x1 - d.x0;
-            return angle > 0.15 && d.depth <= 2;
+            // When zoomed in, be more lenient with label display since segments are larger
+            const minAngle = focusedNodeRef.current ? 0.05 : 0.15;
+            return angle > minAngle && d.depth <= 2;
         };
         // Function to update labels after transitions
         const updateLabels = (transition, visibleNodes, _isReset) => {