@fairmint/ui 0.2.32 → 0.2.33

package/dist/fairmint-ui.js

@@ -45022,6 +45022,8 @@ const DEFAULT_RIBBON_CONFIG = {
   samples: 72
 };
 const MARK_RIBBON_RIGHT_EDGE = 0.936;
+const HERO_WIDE_TOP_END = DEFAULT_RIBBON_CONFIG.xEndDraw[DEFAULT_RIBBON_CONFIG.xEndDraw.length - 1];
+const RIBBON_END_STAGGER_X = DEFAULT_RIBBON_CONFIG.xEndStagger * 1e3 / (1e3 - 500);
 const MARK_FIT_HORIZONTAL_COMPRESS = 0.78;
 const MARK_RIBBON_CONFIG = {
   ...DEFAULT_RIBBON_CONFIG,
@@ -45140,6 +45142,45 @@ function clampBandCount(count2, max2 = 5) {
   if (!Number.isFinite(count2)) return max2;
   return Math.min(max2, Math.max(1, Math.round(count2)));
 }
+function resolveChartGeometryWidth(containerWidth, containerHeight, chartWidth) {
+  const layoutWidth = Number.isFinite(containerWidth) && containerWidth > 0 ? containerWidth : 0;
+  const layoutHeight = Number.isFinite(containerHeight) && containerHeight > 0 ? containerHeight : 0;
+  if (chartWidth != null && Number.isFinite(chartWidth) && chartWidth > 0) {
+    const nominal = Math.max(chartWidth, layoutHeight);
+    if (layoutWidth > 0) {
+      return Math.min(nominal, layoutWidth);
+    }
+    return nominal;
+  }
+  if (layoutWidth > 0) {
+    return layoutWidth;
+  }
+  return layoutHeight;
+}
+function nominalChartWidthPx(chartWidth, renderedHeightPx) {
+  const heightPx = Number.isFinite(renderedHeightPx) && renderedHeightPx > 0 ? renderedHeightPx : 0;
+  return Math.max(chartWidth, heightPx);
+}
+function ribbonEndStaggerNorm(chartWidth, height) {
+  const w = Math.max(chartWidth, height);
+  if (w <= height) return 0;
+  const intPx = (w - height) * RIBBON_END_STAGGER_X;
+  return intPx / w;
+}
+function buildStaggeredEndDraw(bandCount, chartWidth, height) {
+  const validBandCount = clampBandCount(bandCount);
+  const intNorm = ribbonEndStaggerNorm(chartWidth, height);
+  const t = DEFAULT_RIBBON_CONFIG.xEndStagger > 0 ? Math.min(1, intNorm / DEFAULT_RIBBON_CONFIG.xEndStagger) : 0;
+  const rightAnchor = MARK_RIBBON_RIGHT_EDGE - t * (MARK_RIBBON_RIGHT_EDGE - HERO_WIDE_TOP_END);
+  const last = validBandCount - 1;
+  return Array.from({ length: validBandCount }, (_, i) => rightAnchor - (last - i) * intNorm);
+}
+function configWithChartDimensions(base, chartWidth, height) {
+  return {
+    ...base,
+    xEndDraw: buildStaggeredEndDraw(base.xStart.length, chartWidth, height)
+  };
+}
 function buildRibbonGeometry(width, height, labels, config2 = DEFAULT_RIBBON_CONFIG, bandCount = config2.xStart.length, layout = "hero") {
   const totalBands = config2.xStart.length;
   const visibleBands = clampBandCount(bandCount, totalBands);
@@ -45253,10 +45294,12 @@ function EquityRibbonChart({
   animated = true,
   hideLabels = false,
   background = "transparent",
+  gapColor,
   layout = "hero",
   labelColor = ribbonChartLabelDefault,
   className,
   height,
+  chartWidth,
   style
 }) {
   const bandCount = clampBandCount(bandCountProp);
@@ -45286,11 +45329,13 @@ function EquityRibbonChart({
     cancelRevealAnimation();
     const el = rootRef.current;
     if (!el) return;
-    const width = el.clientWidth;
+    const containerWidth = el.clientWidth;
     const heightPx = el.clientHeight;
-    const config2 = layout === "mark" ? MARK_RIBBON_CONFIG : void 0;
+    const geometryWidth = resolveChartGeometryWidth(containerWidth, heightPx, chartWidth);
+    const baseConfig = layout === "mark" ? MARK_RIBBON_CONFIG : DEFAULT_RIBBON_CONFIG;
+    const config2 = configWithChartDimensions(baseConfig, geometryWidth, heightPx);
     const built = buildRibbonGeometry(
-      width,
+      geometryWidth,
       heightPx,
       labelsRef.current,
       config2,
@@ -45307,7 +45352,7 @@ function EquityRibbonChart({
         }))
       );
     }
-  }, [animated, bandCount, cancelRevealAnimation, labelsKey, layout]);
+  }, [animated, bandCount, cancelRevealAnimation, chartWidth, labelsKey, layout]);
   useLayoutEffect(() => {
     playedRef.current = false;
     revealScheduleRef.current = 0;
@@ -45414,17 +45459,23 @@ function EquityRibbonChart({
   }, [geometry, runReveal]);
   const suppressLabels = hideLabels || layout === "mark";
   const activeGeometry = geometry && geometry.bandCount === bandCount ? geometry : null;
+  const hasExplicitWidth = chartWidth != null && Number.isFinite(chartWidth) && chartWidth > 0;
   const rootClass = [
     "fairmint-equity-ribbon",
     RIBBON_BACKGROUND_CLASS[background],
     layout === "mark" ? "fairmint-equity-ribbon--layout-mark" : "",
+    hasExplicitWidth ? "fairmint-equity-ribbon--has-chart-width" : "",
     suppressLabels ? "fairmint-equity-ribbon--hidden-labels" : "",
     className ?? ""
   ].filter(Boolean).join(" ");
+  const resolvedGapColor = gapColor ?? (background === "white" ? ribbonChartSurface.white : background === "black" ? ribbonChartSurface.black : ribbonChartSurface.black);
+  const nominalWidthPx = hasExplicitWidth && chartWidth ? nominalChartWidthPx(chartWidth, activeGeometry?.height ?? 0) : null;
   const rootStyle = {
     ...RIBBON_SURFACE_CSS_VARS,
+    "--fairmint-ribbon-gap-color": resolvedGapColor,
     ...style,
-    ...height ? { height } : {}
+    ...height ? { height } : {},
+    ...nominalWidthPx != null ? { "--fairmint-ribbon-nominal-width": `${nominalWidthPx}px` } : {}
   };
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: rootClass, style: rootStyle, children: [
     /* @__PURE__ */ jsxs(
@@ -45497,6 +45548,7 @@ function FairmintRibbonMark({
   bandCount = 5,
   gradients,
   background = "black",
+  gapColor,
   labelColor,
   className,
   style
@@ -45508,6 +45560,7 @@ function FairmintRibbonMark({
       bandCount,
       gradients,
       background,
+      gapColor,
       labelColor,
       layout: "mark",
       animated: false,