FE-43: Rename PolarToCartesian to Refraction and absorb feDisplacementMap

The Refraction component is now a self-contained effect: polar-to-cartesian
conversion + displacement map application. This prepares FilterShell for
composing multiple effects (specular rim, gloss, diffuse) that each consume
the shared polar map independently.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: kube

libs/@hashintel/refractive/src/components/filter-shell.tsx

@@ -1,7 +1,7 @@
 import type { Parts } from "../helpers/split-imagedata-to-parts";
 import { buildCompositeSvgUrl } from "./composite/image";
 import { CompositeParts } from "./composite/parts";
-import { PolarToCartesian } from "./polar-to-cartesian";
+import { Refraction } from "./refraction";
 
 export type CompositeMode = "image" | "parts";
 
@@ -30,10 +30,11 @@ type FilterShellProps = {
 
 /**
  * @private
- * Full SVG filter pipeline: blur → polar map compositing → polar-to-cartesian → displacement.
+ * Full SVG filter pipeline: blur → polar map compositing → refraction effect.
  *
  * The `compositing` prop controls how the 9-patch polar map is assembled
- * inside the SVG filter graph.
+ * inside the SVG filter graph. The polar map is then consumed by the
+ * Refraction effect (and in the future, other effects like specular).
  */
 export const FilterShell: React.FC<FilterShellProps> = ({
   id,
@@ -74,34 +75,28 @@ export const FilterShell: React.FC<FilterShellProps> = ({
                 hideLeft,
                 hideRight,
               )}
-              result="polar_map"
               preserveAspectRatio="none"
+              result="polar_map"
             />
           ) : (
             <CompositeParts
               parts={parts}
               elementRef={elementRef!}
               cornerWidth={cornerWidth}
-              result="polar_map"
               hideTop={hideTop}
               hideBottom={hideBottom}
               hideLeft={hideLeft}
               hideRight={hideRight}
+              result="polar_map"
             />
           )}
 
-          <PolarToCartesian
+          <Refraction
             magnitudeTable={magnitudeTable}
-            in="polar_map"
-            result="displacement_map"
-          />
-
-          <feDisplacementMap
-            in="blurred_source"
-            in2="displacement_map"
             scale={scale}
-            xChannelSelector="R"
-            yChannelSelector="G"
+            in="polar_map"
+            source="blurred_source"
+            result="refracted"
           />
         </filter>
       </defs>

…ve/src/components/polar-to-cartesian.tsx …refractive/src/components/refraction.tsxlibs/@hashintel/refractive/src/components/polar-to-cartesian.tsx renamed to libs/@hashintel/refractive/src/components/refraction.tsx libs/@hashintel/refractive/src/components/polar-to-cartesian.tsx renamed to libs/@hashintel/refractive/src/components/refraction.tsx

@@ -11,32 +11,38 @@ const sinTable = generateTableValues(256, (i) => {
   return (Math.sin(angle) + 1) / 2;
 });
 
-type PolarToCartesianProps = {
+type RefractionProps = {
   /** Magnitude lookup table (from generateMagnitudeTable). */
   magnitudeTable: string;
+  /** Displacement scale factor. */
+  scale: number;
   /** Input result name containing the polar map (R=ratio, G=angle). */
   in: string;
-  /** Output result name for the cartesian displacement map. */
+  /** Input result name for the source to be displaced. */
+  source: string;
+  /** Output result name for the displaced image. */
   result: string;
 };
 
 /**
  * @private
- * SVG filter primitives that convert a polar distance map (R = border distance
- * ratio, G = displacement angle) into a cartesian displacement map (R = dx,
- * G = dy, centered at 0.5).
+ * Refraction effect: converts a polar distance map into a cartesian displacement
+ * field and applies it to a source image via feDisplacementMap.
  *
  * Pipeline:
  * 1. Extract angle (G) → apply cos/sin lookup tables via feComponentTransfer
- * 2. Extract distance ratio (R) → apply magnitude lookup table
+ * 2. Extract distance ratio (R) → apply magnitude lookup table (Snell's law)
  * 3. Signed multiplication via feComposite arithmetic: magnitude × trig
+ * 4. Apply displacement to source
  *
  * The signed multiplication formula `result = 2·A·B − A − B + 1` correctly
  * multiplies two values encoded in [0,1] centered at 0.5.
  */
-export const PolarToCartesian: React.FC<PolarToCartesianProps> = ({
+export const Refraction: React.FC<RefractionProps> = ({
   magnitudeTable,
+  scale,
   in: inResult,
+  source,
   result,
 }) => (
   <>
@@ -77,6 +83,16 @@ export const PolarToCartesian: React.FC<PolarToCartesianProps> = ({
       k2={-1}
       k3={-1}
       k4={1}
+      result={`${result}_displacement`}
+    />
+
+    {/* Apply displacement to source */}
+    <feDisplacementMap
+      in={source}
+      in2={`${result}_displacement`}
+      scale={scale}
+      xChannelSelector="R"
+      yChannelSelector="G"
       result={result}
     />
   </>