@agent-native/core 0.119.0 → 0.119.2

package/dist/ingestion/figma-node-to-html.js

@@ -61,6 +61,7 @@
  * which is a documented follow-up if a specific design surfaces a visible
  * mismatch.
  */
+import { cssBlendMode, gradientAngleDegrees as gradientAngleDegreesMath, remapLinearStopPosition as remapLinearStopPositionMath, resolveGradientHandles, vectorLength, } from "./figma-paint-math.js";
 const UNSUPPORTED_STRUCTURAL_TYPES = new Set([
     "BOOLEAN_OPERATION",
     "VECTOR",
@@ -196,11 +197,11 @@ class FidelityTracker {
         return { entries, summary };
     }
 }
+// ---------------------------------------------------------------------------
+// Gradient angle / position derivation
+// ---------------------------------------------------------------------------
 function resolveGradientGeometry(paint) {
-    const handles = paint.gradientHandlePositions;
-    if (!handles || handles.length < 3)
-        return null;
-    return { start: handles[0], end: handles[1], width: handles[2] };
+    return resolveGradientHandles(paint.gradientHandlePositions);
 }
 /**
  * Derive a CSS `linear-gradient()` angle (degrees) from Figma's normalized
@@ -218,14 +219,7 @@ function resolveGradientGeometry(paint) {
  *   dx = 0, dy = 1*h -> atan2(dy, 0) = 90deg -> +90 = 180deg. Matches.
  */
 export function gradientAngleDegrees(paint, box) {
-    const geometry = resolveGradientGeometry(paint);
-    if (!geometry)
-        return null;
-    const dx = (geometry.end.x - geometry.start.x) * box.width;
-    const dy = (geometry.end.y - geometry.start.y) * box.height;
-    const angleRad = Math.atan2(dy, dx);
-    const angleDeg = (angleRad * 180) / Math.PI + 90;
-    return ((angleDeg % 360) + 360) % 360;
+    return gradientAngleDegreesMath(paint, box);
 }
 function gradientStopsCss(paint, remapPosition) {
     const stops = paint.gradientStops ?? [];
@@ -239,51 +233,8 @@ function gradientStopsCss(paint, remapPosition) {
     })
         .join(", ");
 }
-/**
- * CSS `linear-gradient(angle, ...)` always stretches its 0%/100% stops
- * across the box's FULL diagonal extent at that angle (the CSS spec's
- * "gradient line" always spans corner-to-corner) -- it has no way to say
- * "start partway in, end partway in" the way Figma's actual gradient handles
- * can (a designer can drag the start/end handles anywhere, including short
- * of the shape's edges, or past them). Figma's own stop positions are
- * fractions of the literal start-handle-to-end-handle distance, which only
- * happens to coincide with the CSS full-box span when the handles are
- * dragged exactly corner-to-corner -- a common case, but far from the only
- * one, and the divergence gets worse the more the box's aspect ratio departs
- * from square (rotated/skewed handles included, e.g. gradientTransform-authored
- * paints). This projects each Figma stop's real pixel position onto the same
- * angle CSS will use and re-expresses it as a percentage of the CSS line's
- * length, so a partial/offset gradient renders at the same actual pixel
- * positions Figma draws it at instead of silently stretching to fill the box.
- */
 function remapLinearStopPosition(geometry, box, angleDeg) {
-    const angleRad = (angleDeg * Math.PI) / 180;
-    const ux = Math.sin(angleRad);
-    const uy = -Math.cos(angleRad);
-    const lineLength = box.width * Math.abs(ux) + box.height * Math.abs(uy);
-    if (lineLength < 1e-6)
-        return (position) => position;
-    const startPx = {
-        x: geometry.start.x * box.width,
-        y: geometry.start.y * box.height,
-    };
-    const endPx = {
-        x: geometry.end.x * box.width,
-        y: geometry.end.y * box.height,
-    };
-    const centerX = box.width / 2;
-    const centerY = box.height / 2;
-    return (position) => {
-        const pointX = startPx.x + position * (endPx.x - startPx.x);
-        const pointY = startPx.y + position * (endPx.y - startPx.y);
-        const projected = (pointX - centerX) * ux + (pointY - centerY) * uy;
-        return (projected + lineLength / 2) / lineLength;
-    };
-}
-function vectorLength(from, to, box) {
-    const dx = (to.x - from.x) * box.width;
-    const dy = (to.y - from.y) * box.height;
-    return Math.sqrt(dx * dx + dy * dy);
+    return remapLinearStopPositionMath(geometry, box, angleDeg);
 }
 /**
  * Convert one Figma paint layer to a CSS `background-image` value (or plain
@@ -581,42 +532,17 @@ function buildEffects(node, isTextNode, tracker) {
 // ---------------------------------------------------------------------------
 // Blend modes
 // ---------------------------------------------------------------------------
-const CSS_BLEND_MODES = new Set([
-    "multiply",
-    "screen",
-    "overlay",
-    "darken",
-    "lighten",
-    "color-dodge",
-    "color-burn",
-    "hard-light",
-    "soft-light",
-    "difference",
-    "exclusion",
-    "hue",
-    "saturation",
-    "color",
-    "luminosity",
-]);
-const FIGMA_ONLY_BLEND_MODE_FALLBACK = {
-    LINEAR_BURN: "multiply",
-    LINEAR_DODGE: "plus-lighter",
-    LIGHTER: "plus-lighter",
-    DARKER: "darken",
-};
 function buildBlendMode(node, tracker) {
     const mode = node.blendMode;
-    if (!mode || mode === "PASS_THROUGH" || mode === "NORMAL")
+    if (!mode)
+        return undefined;
+    const result = cssBlendMode(mode);
+    if (!result)
         return undefined;
-    const cssMode = mode.toLowerCase().replace(/_/g, "-");
-    if (CSS_BLEND_MODES.has(cssMode))
-        return cssMode;
-    const fallback = FIGMA_ONLY_BLEND_MODE_FALLBACK[mode];
-    if (fallback) {
-        tracker.record(node, "approximated", `Figma blend mode "${mode}" has no CSS equivalent; approximated as mix-blend-mode: ${fallback}.`);
-        return fallback;
+    if (result.verdict === "approximated") {
+        tracker.record(node, "approximated", `Figma blend mode "${mode}" has no CSS equivalent; approximated as mix-blend-mode: ${result.cssMode}.`);
     }
-    return undefined;
+    return result.cssMode;
 }
 // ---------------------------------------------------------------------------
 // Text styling