@papernote/ui 1.11.2 → 1.11.4

package/dist/styles.css

@@ -4205,6 +4205,10 @@ input:checked + .slider:before{
   fill: #a8a29e;
 }
 
+.fill-ink-500{
+  fill: #78716c;
+}
+
 .fill-ink-700{
   fill: #44403c;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/FunnelChart.tsx

@@ -62,9 +62,11 @@ export default function FunnelChart({
 
   const maxCount = Math.max(...stages.map(s => s.count), 1);
   const stageHeight = height / stages.length;
-  const svgWidth = 400;
+  const svgWidth = 450;
   const padding = 20;
-  const funnelWidth = svgWidth - padding * 2 - 160; // Leave room for labels
+  const leftLabelSpace = 50; // Space for conversion rate labels on left
+  const rightLabelSpace = 160; // Space for stage name + value labels on right
+  const funnelWidth = svgWidth - padding * 2 - leftLabelSpace - rightLabelSpace;
 
   return (
     <div className={className}>
@@ -75,7 +77,7 @@ export default function FunnelChart({
           const y = idx * stageHeight;
           const topWidth = funnelWidth * ratio;
           const bottomWidth = funnelWidth * nextRatio;
-          const centerX = padding + funnelWidth / 2;
+          const centerX = padding + leftLabelSpace + funnelWidth / 2;
           const color = stage.color || defaultColors[idx % defaultColors.length];
 
           // Conversion rate
@@ -139,17 +141,19 @@ export default function FunnelChart({
                 </text>
               )}
 
-              {/* Conversion rate on left */}
+              {/* Conversion rate on left — shows stage-to-stage conversion */}
               {showConversion && conversionRate !== null && (
-                <text
-                  x={centerX - funnelWidth / 2 - 8}
-                  y={y + 4}
-                  textAnchor="end"
-                  className="fill-ink-400"
-                  style={{ fontSize: '10px' }}
-                >
-                  {conversionRate}%
-                </text>
+                <g>
+                  <text
+                    x={centerX - funnelWidth / 2 - 16}
+                    y={y + 4}
+                    textAnchor="end"
+                    className="fill-ink-500"
+                    style={{ fontSize: '10px', fontWeight: 500 }}
+                  >
+                    ↓ {conversionRate}%
+                  </text>
+                </g>
               )}
             </g>
           );