refactor: split animation helpers by domain

apps/web/src/rendering/NOTES.md

@@ -0,0 +1,27 @@
+# Notes
+
+## `Transform` is misplaced
+
+`Transform` is currently defined in `apps/web/src/rendering/index.ts`. It's
+exported from the rendering domain because rendering happens to be one of its
+consumers — but every other domain that touches scene geometry consumes it too
+(`@/timeline`, `@/preview`, `@/animation/values`, `@/text`, etc.). It's not
+"of" rendering any more than `Vector2` would be "of" math.
+
+`Transform` is closer to a primitive than a domain concept. It's infrastructure:
+a small value type with no behavior, no dependencies, no domain-specific
+invariants. Anything that wants to position something on a 2D canvas needs it.
+
+The codebase should be refactored so it's defined lower-level, rather than
+sitting in a domain. Candidate homes:
+
+- `apps/web/src/primitives/transform.ts` (new dir for these value types)
+- `apps/web/src/geometry/transform.ts` if `Vector2` and friends end up there
+- `apps/web/src/rendering/transform.ts` is acceptable only if `@/rendering`
+becomes a primitives folder rather than a domain (it's borderline today —
+it also exports `BlendMode`, which has the same problem).
+
+Side effect of fixing this: `@/rendering/animation-values.ts` (which exists
+only because `Transform` lives next to it) can move into `@/animation/values.ts`
+alongside the other resolve-at-time helpers, since `Transform` would no longer
+pull in a domain dependency.

apps/web/src/rendering/animation-values.ts

@@ -0,0 +1,49 @@
+import type { ElementAnimations } from "@/animation/types";
+import { resolveAnimationPathValueAtTime } from "@/animation";
+import type { Transform } from "./index";
+
+export function resolveTransformAtTime({
+	baseTransform,
+	animations,
+	localTime,
+}: {
+	baseTransform: Transform;
+	animations: ElementAnimations | undefined;
+	localTime: number;
+}): Transform {
+	const safeLocalTime = Math.max(0, localTime);
+	return {
+		position: {
+			x: resolveAnimationPathValueAtTime({
+				animations,
+				propertyPath: "transform.positionX",
+				localTime: safeLocalTime,
+				fallbackValue: baseTransform.position.x,
+			}),
+			y: resolveAnimationPathValueAtTime({
+				animations,
+				propertyPath: "transform.positionY",
+				localTime: safeLocalTime,
+				fallbackValue: baseTransform.position.y,
+			}),
+		},
+		scaleX: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.scaleX",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.scaleX,
+		}),
+		scaleY: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.scaleY",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.scaleY,
+		}),
+		rotate: resolveAnimationPathValueAtTime({
+			animations,
+			propertyPath: "transform.rotate",
+			localTime: safeLocalTime,
+			fallbackValue: baseTransform.rotate,
+		}),
+	};
+}

apps/web/src/rendering/components/blending-tab.tsx

@@ -27,7 +27,7 @@ import { RainDropIcon } from "@hugeicons/core-free-icons";
 import { KeyframeToggle } from "@/components/editor/panels/properties/components/keyframe-toggle";
 import { useKeyframedNumberProperty } from "@/components/editor/panels/properties/hooks/use-keyframed-number-property";
 import { useElementPlayhead } from "@/components/editor/panels/properties/hooks/use-element-playhead";
-import { resolveOpacityAtTime } from "@/animation";
+import { resolveOpacityAtTime } from "@/animation/values";
 import { DEFAULTS } from "@/timeline/defaults";
 import { isPropertyAtDefault } from "./transform-tab";
 import type { MediaTime } from "@/wasm";

apps/web/src/rendering/components/transform-tab.tsx

@@ -20,8 +20,8 @@ import {
 import {
 	getGroupKeyframesAtTime,
 	hasGroupKeyframeAtTime,
-	resolveTransformAtTime,
 } from "@/animation";
+import { resolveTransformAtTime } from "@/rendering/animation-values";
 import { DEFAULTS } from "@/timeline/defaults";
 import { useElementPlayhead } from "@/components/editor/panels/properties/hooks/use-element-playhead";
 import { KeyframeToggle } from "@/components/editor/panels/properties/components/keyframe-toggle";