Function resolveGradient

apps/sim/lib/pptx-renderer/renderer/style-resolver.ts:431–501

* Parse a gradient fill into a CSS gradient string.

(
  gradFill: SafeXmlNode,
  ctx: RenderContext,
  placeholderColorNode?: SafeXmlNode
)

 * Parse a gradient fill into a CSS gradient string.
 */
function resolveGradient(
  gradFill: SafeXmlNode,
  ctx: RenderContext,
  placeholderColorNode?: SafeXmlNode
): string {
  // Parse gradient stops
  const gsLst = gradFill.child('gsLst')
  const stops: { position: number; color: string }[] = []

  for (const gs of gsLst.children('gs')) {
    const pos = gs.numAttr('pos') ?? 0
    const posPercent = pctToDecimal(pos) * 100
    const { color, alpha } = resolveColorWithPlaceholder(gs, ctx, placeholderColorNode)
    stops.push({ position: posPercent, color: toCssColor(color, alpha) })
  }

  if (stops.length === 0) {
    return ''
  }

  // Sort stops by position
  stops.sort((a, b) => a.position - b.position)

  const stopsStr = stops.map((s) => `${s.color} ${s.position.toFixed(1)}%`).join(', ')

  // Determine gradient type
  const lin = gradFill.child('lin')
  if (lin.exists()) {
    const angle = angleToDeg(lin.numAttr('ang') ?? 0)
    // OOXML angle 0 = top-to-bottom in the gradient coordinate system
    // CSS angle 0 = bottom-to-top, so we need to adjust
    const cssAngle = (angle + 90) % 360
    return `linear-gradient(${cssAngle.toFixed(1)}deg, ${stopsStr})`
  }

  const path = gradFill.child('path')
  if (path.exists()) {
    const pathType = path.attr('path')
    if (pathType === 'circle' || pathType === 'shape' || pathType === 'rect') {
      // OOXML path gradients: stop pos=0 = fillToRect center, pos=100000 = shape edge.
      // CSS radial-gradient: 0% = center, 100% = edge.
      // Conventions match — no reversal needed.

      // Resolve fillToRect center point
      const ftr = path.child('fillToRect')
      let cx = 50
      let cy = 50
      if (ftr.exists()) {
        const l = (ftr.numAttr('l') ?? 0) / 100000
        const t = (ftr.numAttr('t') ?? 0) / 100000
        const r = (ftr.numAttr('r') ?? 0) / 100000
        const b = (ftr.numAttr('b') ?? 0) / 100000
        cx = ((l + (1 - r)) / 2) * 100
        cy = ((t + (1 - b)) / 2) * 100
      }

      if (pathType === 'rect') {
        // Rectangular gradient (L∞ norm / Chebyshev distance): creates cross/X contour