Apply image focal points in Pilot and document theme integration

[hta218]

Context

Follow-up to discussion #523 by @pixelastronauts. Studio will save an optional focal point on each image input, and the SDK will expose it through WeaverseImage. Pilot should demonstrate how a theme uses that metadata to keep the selected point visible when an image fills a frame.

Scope

• Consume the SDK release that exposes focalPoint?: { x: number; y: number }, with coordinates in [0, 1].
• Support focal points in the shared image renderer (app/components/image.tsx) and the separate background renderer (app/components/background-image.tsx).
• Audit relevant image-input render paths for direct image rendering so section images and backgrounds honor the same behavior.
• Convert coordinates to percentages and apply object-position on the actual image element, alongside the existing fit behavior.
• Give a valid focal point precedence over the existing position setting. With no focal point, preserve the current position/default behavior.
• Keep legacy image objects and string image URLs working.
• Provide clear code examples and theme integration documentation covering the data contract, precedence, reset behavior, and rendering limits.

Example: { x: 0.8, y: 0.3 } maps to object-position: 80% 30%.

Acceptance criteria

• Image-input sections and backgrounds apply a saved focal point to the rendered image.
• The same image can render with different focal points in separate sections.
• Removing the point restores the existing positioning behavior.
• Verify representative portrait/landscape images and desktop/mobile frames; images displayed without clipping retain their existing fit behavior.
• The examples explain that percentage positioning aligns the selected image point with the same relative position in its frame. It does not necessarily center the point or guarantee that the entire subject remains visible.

Boundaries and dependencies

Depends on the SDK contract; end-to-end verification also needs Studio's focal point controls. Reuse the existing rendering components and native CSS.

No crop editor, image processing service, new image assets, separate mobile focal point, or changes to the source Shopify file. Coordinate with the Studio and SDK companion issues.

Companion issues

• Weaverse/builder #3043
• Weaverse/weaverse #528