@stfrigerio/sito-template 0.1.6 → 0.1.8

package/dist/index.js

@@ -1199,7 +1199,8 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
 
 var styles$a = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
 
-const filterOptions = [
+// Default filter options for backwards compatibility
+const defaultFilterOptions = [
     { value: 'all', label: 'All', icon: FiSearch },
     { value: 'projects', label: 'Projects', icon: FiFolder },
     { value: 'clients', label: 'Clients', icon: FiUsers },
@@ -1207,16 +1208,18 @@ const filterOptions = [
     { value: 'interactions', label: 'Interactions', icon: FiMessageSquare },
     { value: 'team', label: 'Team', icon: FiUserPlus },
 ];
-const entityIcons = {
+const defaultEntityIcons = {
     projects: FiFolder,
     clients: FiUsers,
     contacts: FiBook,
     interactions: FiMessageSquare,
     team: FiUserPlus,
 };
-const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch, onResultClick, onClear, debounceDelay = 300, minSearchLength = 2, showFilter = true, enableKeyboardShortcut = true }) => {
+const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch, onResultClick, onClear, debounceDelay = 300, minSearchLength = 2, showFilter = true, enableKeyboardShortcut = true, filterOptions: customFilterOptions, entityIcons: customEntityIcons }) => {
+    const filterOptions = customFilterOptions ?? defaultFilterOptions;
+    const entityIcons = customEntityIcons ?? defaultEntityIcons;
     const [query, setQuery] = React.useState('');
-    const [filter, setFilter] = React.useState('all');
+    const [filter, setFilter] = React.useState(filterOptions[0]?.value ?? 'all');
     const [results, setResults] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
@@ -1500,9 +1503,19 @@ const useTheme = () => {
 
 var styles$7 = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
 
-const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', }) => {
-    const { theme, setTheme } = useTheme();
-    const themes = [
+const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
+    // Try to use internal context if available, otherwise use props
+    const contextTheme = (() => {
+        try {
+            return useTheme();
+        }
+        catch {
+            return null;
+        }
+    })();
+    const theme = currentTheme ?? contextTheme?.theme ?? 'light';
+    const setTheme = onThemeChange ?? contextTheme?.setTheme ?? (() => { });
+    const defaultThemes = [
         { value: 'light', label: 'Light', icon: jsxRuntime.jsx(FiSun, {}) },
         { value: 'dark', label: 'Dark', icon: jsxRuntime.jsx(FiMoon, {}) },
         { value: 'lossito', label: 'Lossito Light', icon: '✨' },
@@ -1510,21 +1523,22 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
         { value: 'dmood', label: 'Dmood Light', icon: '💙' },
         { value: 'dmood-dark', label: 'Dmood Dark', icon: '🌌' },
     ];
+    const themes = customThemes ?? defaultThemes;
     const currentThemeIndex = themes.findIndex(t => t.value === theme);
-    const currentTheme = themes[currentThemeIndex];
+    const currentThemeData = themes[currentThemeIndex] ?? themes[0];
     if (variant === 'toggle') {
         // Simple toggle between light and dark
         const isDark = theme.includes('dark');
         return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(FiMoon, { size: 14 }) : jsxRuntime.jsx(FiSun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: isDark ? 'Dark' : 'Light' })] }));
     }
     if (variant === 'dropdown') {
-        return (jsxRuntime.jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentTheme.icon, showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentTheme.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$7.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
+        return (jsxRuntime.jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$7.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
     }
     // Default button variant - cycles through themes
     return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.button} ${className}`, onClick: () => {
             const nextIndex = (currentThemeIndex + 1) % themes.length;
             setTheme(themes[nextIndex].value);
-        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentTheme.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$7.iconWrapper, children: currentTheme.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentTheme.label })] }));
+        }, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$7.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentThemeData.label })] }));
 };
 
 // THIS FILE IS AUTO GENERATED
@@ -1534,15 +1548,16 @@ function SiJira (props) {
 
 var styles$6 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
 
-const tabs = [
+// Default tabs for backwards compatibility
+const defaultTabs = [
     { id: 'details', icon: FiInfo, label: 'Dettagli' },
     { id: 'github', icon: FiGithub, label: 'GitHub' },
     { id: 'jira', icon: SiJira, label: 'Jira' },
     { id: 'functional', icon: FiInfo, label: 'Analisi funzionale' }
 ];
-const Tabs = ({ activeTab, onTabChange }) => {
-    return (jsxRuntime.jsx("div", { className: styles$6.tabs, children: tabs.map((tab) => {
-            const Icon = tab.icon;
+const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
+    const tabs = customTabs ?? defaultTabs;
+    return (jsxRuntime.jsx("div", { className: `${styles$6.tabs} ${className}`, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
             return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
                             rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
@@ -1551,7 +1566,7 @@ const Tabs = ({ activeTab, onTabChange }) => {
                                 duration: 0.5,
                                 ease: 'easeInOut'
                             }
-                        }, children: jsxRuntime.jsx(Icon, { className: styles$6.tabIcon }) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
+                        }, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$6.tabIcon, children: React.createElement(tab.icon) })) : (jsxRuntime.jsx("span", { className: styles$6.tabIcon, children: tab.icon }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
         }) }));
 };
 
@@ -2235,11 +2250,22 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
 var styles$1 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
 
 const COLOR_PALETTE = [
-    '#d4af37', '#FFD700', '#FFA500', '#FF8C00',
-    '#FF6347', '#DC143C', '#8B4513', '#A0522D',
-    '#DEB887', '#F4A460', '#D2691E', '#CD853F'
+    '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
+    '#f59e0b', '#ef4444', '#ec4899', '#84cc16',
+    '#f97316', '#3b82f6', '#14b8a6', '#f59e0b'
 ];
-const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {} }) => {
+// Calculate text color based on background luminance for optimal contrast
+const getTextColor$1 = (backgroundColor) => {
+    const color = d3__namespace.color(backgroundColor);
+    if (!color)
+        return '#ffffff';
+    const rgb = color.rgb();
+    // Calculate relative luminance using WCAG formula
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    // Return white text for dark backgrounds, black for light backgrounds
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Chart', tagColors = {}, unit = 'items', centerLabel }) => {
     const svgRef = React.useRef(null);
     const colorMap = React.useRef(new Map()).current;
     const colorIndex = React.useRef(0);
@@ -2282,7 +2308,8 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .startAngle(d => d.x0)
             .endAngle(d => d.x1)
             .innerRadius(d => Math.sqrt(d.y0))
-            .outerRadius(d => Math.sqrt(d.y1));
+            .outerRadius(d => Math.sqrt(d.y1))
+            .cornerRadius(3);
         const tooltip = d3__namespace.select('body').append('div')
             .attr('class', styles$1.tooltip)
             .style('opacity', 0)
@@ -2301,11 +2328,20 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             .attr('stroke', 'var(--bg-primary)')
             .attr('stroke-width', 2)
             .style('cursor', 'pointer')
+            .style('filter', 'drop-shadow(0 1px 3px rgba(0,0,0,0.12))')
             .on('mouseover', function (event, d) {
+            const hoverArc = d3__namespace.arc()
+                .startAngle(d => d.x0)
+                .endAngle(d => d.x1)
+                .innerRadius(d => Math.sqrt(d.y0) - 2)
+                .outerRadius(d => Math.sqrt(d.y1) + 4)
+                .cornerRadius(3);
             d3__namespace.select(this)
                 .transition()
-                .duration(200)
-                .style('opacity', 0.8);
+                .duration(150)
+                .attr('d', d => hoverArc(d))
+                .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.2))')
+                .style('opacity', 0.9);
             tooltip.transition()
                 .duration(200)
                 .style('opacity', 1);
@@ -2319,10 +2355,12 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
         })
-            .on('mouseout', function () {
+            .on('mouseout', function (event, d) {
             d3__namespace.select(this)
                 .transition()
-                .duration(200)
+                .duration(150)
+                .attr('d', d => arc(d))
+                .style('filter', 'drop-shadow(0 1px 3px rgba(0,0,0,0.12))')
                 .style('opacity', 1);
             tooltip.transition()
                 .duration(500)
@@ -2332,9 +2370,32 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
             const angle = d.x1 - d.x0;
             return angle > 0.15 && d.depth <= 2;
         };
-        g.selectAll('text')
+        // Calculate average background color for center text contrast
+        const allSegments = nodes.filter(d => d.depth === 1);
+        const avgColor = allSegments.length > 0 ? d3__namespace.interpolateRgb.gamma(2.2)(...allSegments.map(d => getColor(d.data.name, 1)))(0.5) : '#ffffff';
+        const centerTextColor = getTextColor$1(avgColor);
+        // Add center text
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('font-size', '18px')
+            .attr('font-weight', 'bold')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 3px rgba(0,0,0,0.5)' : '0 1px 3px rgba(255,255,255,0.5)')
+            .text(centerLabel || data.name || 'Total');
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('y', 20)
+            .attr('font-size', '14px')
+            .attr('font-weight', '500')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 2px rgba(0,0,0,0.4)' : '0 1px 2px rgba(255,255,255,0.4)')
+            .text(`${(root.value || 0).toLocaleString()} ${unit}`);
+        g.selectAll('text.segment-label')
             .data(nodes.filter(d => d.depth > 0 && d.value && d.value > 0 && shouldDisplayLabel(d)))
             .enter().append('text')
+            .attr('class', 'segment-label')
             .attr('transform', d => {
             const angle = (d.x0 + d.x1) / 2;
             const radius = (Math.sqrt(d.y0) + Math.sqrt(d.y1)) / 2;
@@ -2344,11 +2405,32 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
         })
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
-            .attr('font-size', '12px')
-            .attr('fill', 'var(--text-inverse)')
-            .attr('font-weight', 'var(--font-medium)')
+            .attr('font-size', d => d.depth === 1 ? '13px' : '11px')
+            .attr('fill', d => {
+            let ancestor = d;
+            while (ancestor.depth > 1 && ancestor.parent) {
+                ancestor = ancestor.parent;
+            }
+            const segmentColor = getColor(ancestor.data.name, d.depth);
+            return getTextColor$1(segmentColor);
+        })
+            .attr('font-weight', '600')
             .style('pointer-events', 'none')
-            .text(d => d.data.name.substring(0, 10));
+            .style('text-shadow', d => {
+            let ancestor = d;
+            while (ancestor.depth > 1 && ancestor.parent) {
+                ancestor = ancestor.parent;
+            }
+            const segmentColor = getColor(ancestor.data.name, d.depth);
+            const textColor = getTextColor$1(segmentColor);
+            // Use contrasting shadow color
+            const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)';
+            return `0 1px 2px ${shadowColor}`;
+        })
+            .text(d => {
+            const maxLength = d.depth === 1 ? 12 : 8;
+            return d.data.name.substring(0, maxLength);
+        });
         return () => {
             tooltip.remove();
         };
@@ -2359,12 +2441,23 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
 var styles = {"container":"PieChart-module_container__tXjbe","title":"PieChart-module_title__61o0R","chartContainer":"PieChart-module_chartContainer__uLmOz","chart":"PieChart-module_chart__3nqON","legend":"PieChart-module_legend__rAWgh","legendItem":"PieChart-module_legendItem__Nb031","legendColor":"PieChart-module_legendColor__fLuv9","legendLabel":"PieChart-module_legendLabel__xbjBr","legendValue":"PieChart-module_legendValue__h2WS2","tooltip":"PieChart-module_tooltip__140RU"};
 
 const DEFAULT_COLORS = [
-    '#d4af37', '#FFD700', '#FFA500', '#FF8C00',
-    '#FF6347', '#DC143C', '#8B4513', '#A0522D',
-    '#DEB887', '#F4A460', '#D2691E', '#CD853F',
-    '#B8860B', '#DAA520', '#F0E68C', '#BDB76B'
+    '#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
+    '#f59e0b', '#ef4444', '#ec4899', '#84cc16',
+    '#f97316', '#3b82f6', '#8b5cf6', '#14b8a6',
+    '#f59e0b', '#ef4444', '#06b6d4', '#10b981'
 ];
-const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', showLegend = true }) => {
+// Calculate text color based on background luminance for optimal contrast
+const getTextColor = (backgroundColor) => {
+    const color = d3__namespace.color(backgroundColor);
+    if (!color)
+        return '#ffffff';
+    const rgb = color.rgb();
+    // Calculate relative luminance using WCAG formula
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
+    // Return white text for dark backgrounds, black for light backgrounds
+    return luminance > 0.5 ? '#000000' : '#ffffff';
+};
+const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', showLegend = true, unit = 'items', centerLabel }) => {
     const svgRef = React.useRef(null);
     const radius = Math.min(width, height) / 2 - 20;
     React.useEffect(() => {
@@ -2378,8 +2471,9 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .value(d => d.value)
             .sort(null);
         const arc = d3__namespace.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
+            .innerRadius(radius * 0.4)
+            .outerRadius(radius)
+            .cornerRadius(4);
         const labelArc = d3__namespace.arc()
             .innerRadius(radius * 0.7)
             .outerRadius(radius * 0.7);
@@ -2397,13 +2491,19 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .attr('d', d => arc(d))
             .attr('fill', (d, i) => d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length])
             .attr('stroke', 'var(--bg-primary)')
-            .attr('stroke-width', 2)
+            .attr('stroke-width', 3)
             .style('cursor', 'pointer')
+            .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))')
             .on('mouseover', function (event, d) {
+            const hoverArc = d3__namespace.arc()
+                .innerRadius(radius * 0.4)
+                .outerRadius(radius * 1.05)
+                .cornerRadius(4);
             d3__namespace.select(this)
                 .transition()
                 .duration(200)
-                .style('opacity', 0.8);
+                .attr('d', d => hoverArc(d))
+                .style('filter', 'drop-shadow(0 4px 12px rgba(0,0,0,0.25))');
             tooltip.transition()
                 .duration(200)
                 .style('opacity', 1);
@@ -2416,27 +2516,59 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
                 .style('left', (event.pageX + 10) + 'px')
                 .style('top', (event.pageY - 28) + 'px');
         })
-            .on('mouseout', function () {
+            .on('mouseout', function (event, d) {
             d3__namespace.select(this)
                 .transition()
                 .duration(200)
-                .style('opacity', 1);
+                .attr('d', d => arc(d))
+                .style('filter', 'drop-shadow(0 2px 8px rgba(0,0,0,0.15))');
             tooltip.transition()
                 .duration(500)
                 .style('opacity', 0);
         });
-        arcs.filter(d => (d.endAngle - d.startAngle) > 0.3)
+        // Calculate average background color for center text contrast
+        const avgColor = data.length > 0 ? d3__namespace.interpolateRgb.gamma(2.2)(...data.map((d, i) => d.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length]))(0.5) : '#ffffff';
+        const centerTextColor = getTextColor(avgColor);
+        // Add center text for donut
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('font-size', '20px')
+            .attr('font-weight', 'bold')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 3px rgba(0,0,0,0.5)' : '0 1px 3px rgba(255,255,255,0.5)')
+            .text(centerLabel || 'Total');
+        g.append('text')
+            .attr('text-anchor', 'middle')
+            .attr('alignment-baseline', 'middle')
+            .attr('y', 22)
+            .attr('font-size', '16px')
+            .attr('font-weight', '600')
+            .attr('fill', centerTextColor)
+            .style('text-shadow', centerTextColor === '#ffffff' ? '0 1px 2px rgba(0,0,0,0.4)' : '0 1px 2px rgba(255,255,255,0.4)')
+            .text(`${total.toLocaleString()} ${unit}`);
+        arcs.filter(d => (d.endAngle - d.startAngle) > 0.2)
             .append('text')
             .attr('transform', d => `translate(${labelArc.centroid(d)})`)
             .attr('text-anchor', 'middle')
             .attr('alignment-baseline', 'middle')
-            .attr('font-size', '12px')
-            .attr('fill', 'var(--text-inverse)')
-            .attr('font-weight', 'var(--font-semibold)')
+            .attr('font-size', '13px')
+            .attr('fill', (d, i) => {
+            const segmentColor = d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            return getTextColor(segmentColor);
+        })
+            .attr('font-weight', '600')
             .style('pointer-events', 'none')
+            .style('text-shadow', (d, i) => {
+            const segmentColor = d.data.color || DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            const textColor = getTextColor(segmentColor);
+            // Use contrasting shadow color
+            const shadowColor = textColor === '#ffffff' ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.4)';
+            return `0 1px 2px ${shadowColor}`;
+        })
             .text(d => {
             const percentage = ((d.data.value / total) * 100);
-            return percentage > 5 ? `${percentage.toFixed(1)}%` : '';
+            return percentage > 8 ? `${percentage.toFixed(0)}%` : '';
         });
         return () => {
             tooltip.remove();