@stfrigerio/sito-template 0.1.7 → 0.1.9

package/dist/index.esm.js

@@ -198,7 +198,7 @@ function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, pla
     return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$l.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$l.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$l.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
 }
 
-var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn"};
+var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn","removeButton":"ArrayInput-module_removeButton__khhdR","addButton":"ArrayInput-module_addButton__10o-9"};
 
 /**
  * ArrayInput component - Versatile dynamic list manager
@@ -238,7 +238,7 @@ function ArrayInput(props) {
     return jsx(SimpleArrayInput, { ...props });
 }
 // Simple string array implementation
-function SimpleArrayInput({ label, values, onChange, placeholder }) {
+function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inputStyle }) {
     const handleChange = (index, value) => {
         const newValues = [...values];
         newValues[index] = value;
@@ -251,10 +251,14 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
         const newValues = values.filter((_, i) => i !== index);
         onChange(newValues);
     };
-    return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: styles$k.arrayInputItem, children: [jsx("div", { className: styles$k.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
+    return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$k.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+                            duration: 0.3,
+                            ease: "easeInOut",
+                            layout: { duration: 0.2 }
+                        }, children: [jsx("div", { className: styles$k.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input, style: inputStyle }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, `item-${index}`))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
 }
 // Complex object array implementation
-function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
+function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
     const handleChange = (index, field, value) => {
         const newValues = [...values];
         newValues[index] = { ...newValues[index], [field]: value };
@@ -276,7 +280,11 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
         // Generate key from all field values
         return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
     };
-    return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, generateKey(value, index)))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
+    return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+                            duration: 0.3,
+                            ease: "easeInOut",
+                            layout: { duration: 0.2 }
+                        }, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
 }
 
 var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
@@ -825,8 +833,15 @@ var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  * @returns {JSX.Element} The rendered Toggle component
  */
 function Toggle(props) {
-    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
-    return (jsxs("div", { className: styles$e.toggleContainer, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
+    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
+    // Ensure content stays centered by merging styles
+    const buttonStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style
+    };
+    return (jsxs("div", { className: `${styles$e.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
 }
 
 var styles$d = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","pulse":"NumberStepper-module_pulse__51oUo"};
@@ -1178,7 +1193,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 },
@@ -1186,16 +1202,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] = useState('');
-    const [filter, setFilter] = useState('all');
+    const [filter, setFilter] = useState(filterOptions[0]?.value ?? 'all');
     const [results, setResults] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -1524,15 +1542,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 (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 (jsx("div", { className: `${styles$6.tabs} ${className}`, children: tabs.map((tab) => {
             const isActive = activeTab === tab.id;
             return (jsxs(motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
                             rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
@@ -1541,7 +1560,7 @@ const Tabs = ({ activeTab, onTabChange }) => {
                                 duration: 0.5,
                                 ease: 'easeInOut'
                             }
-                        }, children: jsx(Icon, { className: styles$6.tabIcon }) }), jsx("span", { children: tab.label })] }, tab.id));
+                        }, children: tab.icon && (typeof tab.icon === 'function' ? (jsx("span", { className: styles$6.tabIcon, children: React.createElement(tab.icon) })) : (jsx("span", { className: styles$6.tabIcon, children: tab.icon }))) }), jsx("span", { children: tab.label })] }, tab.id));
         }) }));
 };
 
@@ -2225,11 +2244,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.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 = useRef(null);
     const colorMap = useRef(new Map()).current;
     const colorIndex = useRef(0);
@@ -2272,7 +2302,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.select('body').append('div')
             .attr('class', styles$1.tooltip)
             .style('opacity', 0)
@@ -2291,11 +2322,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.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.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);
@@ -2309,10 +2349,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.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)
@@ -2322,9 +2364,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.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;
@@ -2334,11 +2399,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();
         };
@@ -2349,12 +2435,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.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 = useRef(null);
     const radius = Math.min(width, height) / 2 - 20;
     useEffect(() => {
@@ -2368,8 +2465,9 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
             .value(d => d.value)
             .sort(null);
         const arc = d3.arc()
-            .innerRadius(0)
-            .outerRadius(radius);
+            .innerRadius(radius * 0.4)
+            .outerRadius(radius)
+            .cornerRadius(4);
         const labelArc = d3.arc()
             .innerRadius(radius * 0.7)
             .outerRadius(radius * 0.7);
@@ -2387,13 +2485,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.arc()
+                .innerRadius(radius * 0.4)
+                .outerRadius(radius * 1.05)
+                .cornerRadius(4);
             d3.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);
@@ -2406,27 +2510,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.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.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();