@stfrigerio/sito-template 0.1.80 → 0.1.82

package/dist/index.js

@@ -741,47 +741,29 @@ const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
     return (jsxRuntime.jsxs("div", { className: wrapperClass, children: [icon && jsxRuntime.jsx("div", { className: styles$z.icon, children: icon }), title && jsxRuntime.jsx("h3", { className: styles$z.title, children: title }), jsxRuntime.jsx("p", { className: styles$z.message, children: message }), action && jsxRuntime.jsx("div", { className: styles$z.action, children: action })] }));
 };
 
-var styles$y = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q"};
+var styles$y = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q","backdropSheet":"Modal-module_backdropSheet__o9kW3","dialogSheet":"Modal-module_dialogSheet__EjpwP","grabBar":"Modal-module_grabBar__qhl9f"};
 
-/**
- * Modal Component
- *
- * @component
- * @description
- * An accessible overlay dialog with a backdrop, title header, optional
- * header actions, and a flexible body. Renders into a React portal on
- * `document.body`, animates in/out with Framer Motion, closes on Escape
- * key or backdrop click, and clicks inside the dialog don't propagate
- * to the backdrop.
- *
- * @example
- * // Basic usage
- * <Modal open={isOpen} title="Confirm" onClose={() => setIsOpen(false)}>
- *   <p>Are you sure?</p>
- * </Modal>
- *
- * @example
- * // With header actions and wide size
- * <Modal
- *   open={isOpen}
- *   title="Edit profile"
- *   size="wide"
- *   actions={<button onClick={save}>Save</button>}
- *   onClose={handleClose}
- * >
- *   <ProfileForm />
- * </Modal>
- *
- * @example
- * // Flush body (no padding) for editors and full-bleed content
- * <Modal open={isOpen} title="Document" padding={false} onClose={handleClose}>
- *   <DocEditor content={content} onSave={save} />
- * </Modal>
- *
- * @param {ModalProps} props - The props for the Modal component
- * @returns {React.ReactPortal | null} A portal rendering the modal, or null on the server
- */
-const Modal = ({ open, title, onClose, children, size = 'default', actions, padding = true, }) => {
+const MOBILE_BREAKPOINT = '(max-width: 640px)';
+const useIsMobile = () => {
+    const [isMobile, setIsMobile] = React.useState(() => {
+        if (typeof window === 'undefined')
+            return false;
+        return window.matchMedia(MOBILE_BREAKPOINT).matches;
+    });
+    React.useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mq = window.matchMedia(MOBILE_BREAKPOINT);
+        const onChange = (e) => setIsMobile(e.matches);
+        mq.addEventListener('change', onChange);
+        return () => mq.removeEventListener('change', onChange);
+    }, []);
+    return isMobile;
+};
+const Modal = ({ open, title, onClose, children, size = 'default', actions, padding = true, mobileVariant = 'sheet', draggable = true, }) => {
+    const isMobile = useIsMobile();
+    const dragControls = framerMotion.useDragControls();
+    const headerRef = React.useRef(null);
     React.useEffect(() => {
         if (!open)
             return;
@@ -794,14 +776,38 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
     }, [open, onClose]);
     if (typeof document === 'undefined')
         return null;
+    const isSheet = mobileVariant === 'sheet' && isMobile;
+    const isDraggable = isSheet && draggable;
+    const backdropClass = [styles$y.backdrop, isSheet && styles$y.backdropSheet]
+        .filter(Boolean)
+        .join(' ');
     const dialogClass = [
         styles$y.dialog,
         size === 'compact' && styles$y.dialogCompact,
         size === 'wide' && styles$y.dialogWide,
+        isSheet && styles$y.dialogSheet,
     ]
         .filter(Boolean)
         .join(' ');
-    return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$y.backdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: 8 }, transition: { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$y.header, children: [jsxRuntime.jsx("span", { className: styles$y.title, children: title }), actions && jsxRuntime.jsx("div", { className: styles$y.headerActions, children: actions }), jsxRuntime.jsx("button", { className: styles$y.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })] }), jsxRuntime.jsx("div", { className: padding ? styles$y.body : styles$y.bodyFlush, children: children })] }) })) }), document.body);
+    const enteringAnimation = isSheet
+        ? { initial: { y: '100%' }, animate: { y: 0 }, exit: { y: '100%' } }
+        : {
+            initial: { opacity: 0, scale: 0.96, y: 8 },
+            animate: { opacity: 1, scale: 1, y: 0 },
+            exit: { opacity: 0, scale: 0.96, y: 8 },
+        };
+    return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: backdropClass, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, ...enteringAnimation, transition: isSheet
+                    ? { type: 'spring', stiffness: 320, damping: 32 }
+                    : { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), drag: isDraggable ? 'y' : false, dragControls: isDraggable ? dragControls : undefined, dragConstraints: { top: 0 }, dragElastic: { top: 0, bottom: 0.3 }, dragListener: false, onDragEnd: (_, info) => {
+                    if (info.offset.y > 80)
+                        onClose();
+                }, children: [isSheet && jsxRuntime.jsx("div", { className: styles$y.grabBar }), jsxRuntime.jsxs("div", { ref: headerRef, className: styles$y.header, onPointerDown: (e) => {
+                            if (!isDraggable)
+                                return;
+                            if (e.target.closest('button'))
+                                return;
+                            dragControls.start(e);
+                        }, children: [jsxRuntime.jsx("span", { className: styles$y.title, children: title }), actions && jsxRuntime.jsx("div", { className: styles$y.headerActions, children: actions }), jsxRuntime.jsx("button", { className: styles$y.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })] }), jsxRuntime.jsx("div", { className: padding ? styles$y.body : styles$y.bodyFlush, children: children })] }) })) }), document.body);
 };
 
 var styles$x = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
@@ -4423,6 +4429,53 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
         const active = new Set(activeHabits);
         return parsed.filter(e => active.has(e.habitKey));
     }, [parsed, activeHabits]);
+    // Group events that land on the same minute (same habit) into a single
+    // cluster so overlapping dots become one sized/counted dot. Then, for any
+    // (date, minute) coord with multiple habits, fan them out horizontally so
+    // different-colored dots stop masking each other.
+    const clusters = React.useMemo(() => {
+        const byKey = new Map();
+        filtered.forEach(e => {
+            const bucketFraction = Math.round(e.hourFraction * 60) / 60;
+            const bucketMinute = Math.round(bucketFraction * 60) % 60;
+            const bucketHour = Math.floor(bucketFraction);
+            const key = `${e.date}|${e.habitKey}|${bucketFraction}`;
+            const existing = byKey.get(key);
+            if (existing) {
+                existing.count += 1;
+            }
+            else {
+                byKey.set(key, {
+                    habitKey: e.habitKey,
+                    date: e.date,
+                    hour: bucketHour,
+                    minute: bucketMinute,
+                    hourFraction: bucketFraction,
+                    count: 1,
+                    xOffsetPx: 0,
+                });
+            }
+        });
+        const coordGroups = new Map();
+        byKey.forEach(c => {
+            const coordKey = `${c.date}|${c.hourFraction}`;
+            const arr = coordGroups.get(coordKey);
+            if (arr)
+                arr.push(c);
+            else
+                coordGroups.set(coordKey, [c]);
+        });
+        const out = [];
+        const spacing = 10;
+        coordGroups.forEach(group => {
+            group.sort((a, b) => a.habitKey.localeCompare(b.habitKey));
+            const mid = (group.length - 1) / 2;
+            group.forEach((c, i) => {
+                out.push({ ...c, xOffsetPx: (i - mid) * spacing });
+            });
+        });
+        return out;
+    }, [filtered]);
     const hourlyTotals = React.useMemo(() => {
         const totals = Array.from({ length: 24 }, (_, hour) => ({
             hour,
@@ -4476,15 +4529,16 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 .attr('y2', chartHeight);
             // Dots
             const rowHeight = yScale.bandwidth();
-            const radius = Math.min(5, Math.max(2, rowHeight / 2));
+            const baseRadius = Math.min(5, Math.max(2, rowHeight / 2));
+            const maxRadius = baseRadius * 2.2;
             g.selectAll('circle.dot')
-                .data(filtered)
+                .data(clusters)
                 .enter()
                 .append('circle')
                 .attr('class', styles$7.dot)
-                .attr('cx', d => xScale(d.hourFraction))
+                .attr('cx', d => xScale(d.hourFraction) + d.xOffsetPx)
                 .attr('cy', d => (yScale(d.date) ?? 0) + rowHeight / 2)
-                .attr('r', radius)
+                .attr('r', d => Math.min(maxRadius, baseRadius * Math.sqrt(d.count)))
                 .attr('fill', d => getColor(d.habitKey))
                 .attr('opacity', d => hoveredHabit && hoveredHabit !== d.habitKey ? 0.15 : 0.8)
                 .style('cursor', 'pointer')
@@ -4493,13 +4547,13 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
                 if (!rect)
                     return;
                 setTooltipData({
-                    x: xScale(d.hourFraction) + margin.left + rect.left,
+                    x: xScale(d.hourFraction) + d.xOffsetPx + margin.left + rect.left,
                     y: (yScale(d.date) ?? 0) + margin.top + rect.top,
                     habit: d.habitKey,
                     hour: d.hour,
                     minute: d.minute,
                     date: d.date,
-                    count: 1,
+                    count: d.count,
                 });
             })
                 .on('mouseleave', () => setTooltipData(null));
@@ -4595,6 +4649,7 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
     }, [
         view,
         filtered,
+        clusters,
         hourlyTotals,
         dateRange,
         maxHourTotal,
@@ -4618,9 +4673,9 @@ const HabitTimeOfDayChart = ({ events, width = 800, height = 400, startDate, end
             day: 'numeric',
         });
     };
-    return (jsxRuntime.jsxs("div", { className: styles$7.container, children: [!hideControls && (jsxRuntime.jsx("div", { className: styles$7.controls, children: jsxRuntime.jsx("div", { className: styles$7.viewToggle, children: ['scatter', 'totals'].map(type => (jsxRuntime.jsxs("button", { className: `${styles$7.viewButton} ${view === type ? styles$7.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$7.viewIcon, children: viewConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$7.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsxRuntime.jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) })), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$7.chart }), tooltipData && (jsxRuntime.jsx("div", { className: `${styles$7.tooltip} ${styles$7.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 70}px` }, children: tooltipData.habit ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsxs("span", { children: [customHabitEmojis[tooltipData.habit] || '', " ", tooltipData.habit] })] }), jsxRuntime.jsx("div", { className: styles$7.tooltipInfo, children: jsxRuntime.jsxs("div", { className: styles$7.tooltipDate, children: [tooltipData.date ? formatTooltipDate(tooltipData.date) : '', tooltipData.minute !== undefined
-                                        ? ` · ${formatTime$1(tooltipData.hour, tooltipData.minute)}`
-                                        : ''] }) })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$7.tooltipHeader, children: jsxRuntime.jsx("span", { children: formatHour(tooltipData.hour) }) }), jsxRuntime.jsxs("div", { className: styles$7.tooltipInfo, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: tooltipData.count }), jsxRuntime.jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown && tooltipData.breakdown.length > 1 && (jsxRuntime.jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxRuntime.jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsxRuntime.jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] })) }))] }));
+    return (jsxRuntime.jsxs("div", { className: styles$7.container, children: [!hideControls && (jsxRuntime.jsx("div", { className: styles$7.controls, children: jsxRuntime.jsx("div", { className: styles$7.viewToggle, children: ['scatter', 'totals'].map(type => (jsxRuntime.jsxs("button", { className: `${styles$7.viewButton} ${view === type ? styles$7.active : ''}`, onClick: () => setView(type), title: viewConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$7.viewIcon, children: viewConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$7.viewLabel, children: viewConfig[type].label })] }, type))) }) })), habits.length > 0 && (jsxRuntime.jsx("div", { className: `${styles$7.legend}${compactLegend ? ` ${styles$7.compactLegend}` : ''}`, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$7.legendItem} ${!activeHabits.includes(habit) ? styles$7.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$7.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$7.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$7.legendLabel, children: habit })] }, habit))) })), jsxRuntime.jsx("svg", { ref: svgRef, viewBox: `0 0 ${width} ${height}`, preserveAspectRatio: "xMidYMid meet", className: styles$7.chart }), tooltipData && (jsxRuntime.jsx("div", { className: `${styles$7.tooltip} ${styles$7.visible}`, style: { left: `${tooltipData.x}px`, top: `${tooltipData.y - 70}px` }, children: tooltipData.habit ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsxs("span", { children: [customHabitEmojis[tooltipData.habit] || '', " ", tooltipData.habit] })] }), jsxRuntime.jsxs("div", { className: styles$7.tooltipInfo, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipDate, children: [tooltipData.date ? formatTooltipDate(tooltipData.date) : '', tooltipData.minute !== undefined
+                                            ? ` · ${formatTime$1(tooltipData.hour, tooltipData.minute)}`
+                                            : ''] }), tooltipData.count > 1 && (jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: tooltipData.count }), jsxRuntime.jsx("span", { className: styles$7.tooltipUnits, children: "events" })] }))] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: styles$7.tooltipHeader, children: jsxRuntime.jsx("span", { children: formatHour(tooltipData.hour) }) }), jsxRuntime.jsxs("div", { className: styles$7.tooltipInfo, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipValue, children: [jsxRuntime.jsx("strong", { children: tooltipData.count }), jsxRuntime.jsxs("span", { className: styles$7.tooltipUnits, children: ["event", tooltipData.count === 1 ? '' : 's'] })] }), tooltipData.breakdown && tooltipData.breakdown.length > 1 && (jsxRuntime.jsx("div", { className: styles$7.tooltipBreakdown, children: tooltipData.breakdown.map(({ habit, count }) => (jsxRuntime.jsxs("div", { className: styles$7.tooltipBreakdownRow, children: [jsxRuntime.jsx("span", { className: styles$7.tooltipDot, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsxs("span", { children: [customHabitEmojis[habit] || '', " ", habit] }), jsxRuntime.jsx("span", { className: styles$7.tooltipCount, children: count })] }, habit))) }))] })] })) }))] }));
 };
 
 var styles$6 = {"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"};