FE-720(Refractive): Fix SSR issues by delaying rendering until dimensions available

[kube]

🌟 What is the purpose of this PR?

Fix @hashintel/refractive SSR crashes in Next.js by avoiding browser-only SVG filter rendering until the component has mounted on the client and its element dimensions are known.

🔗 Related links

• Fixes [refractive] ImageData is not defined #8612

🔍 What does this change?

• Defers Refractive filter generation until client-side element measurement reports non-zero dimensions.
• Avoids applying the SVG backdrop-filter URL until the corresponding filter exists.
• Adds a patch changeset for @hashintel/refractive.

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

• are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

🛡 What tests cover this?

• yarn workspace @hashintel/refractive lint:tsc
• yarn workspace @hashintel/refractive build
• SSR smoke test with react-dom/server

❓ How to test this?

1. Render a Refractive component in a Next.js SSR route.
2. Confirm the server render does not throw ImageData is not defined.
3. Confirm the refractive filter appears after client hydration and measurement.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	May 16, 2026 4:54pm
petrinaut	Ready	Preview, Comment	May 16, 2026 4:54pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	May 16, 2026 4:54pm

[cursor]

PR Summary

Medium Risk
Changes when the SVG Filter and backdropFilter are applied, which could affect visual output or hydration timing for refractive components. Scope is limited to the @hashintel/refractive HOC and is otherwise low risk.

Overview
Fixes SSR/hydration issues in @hashintel/refractive by only rendering the browser-dependent SVG Filter and applying backdropFilter once the wrapped element has measurable width/height (i.e., after client-side layout/ResizeObserver updates).

Adds a patch changeset documenting the SSR fix.

^{Reviewed by Cursor Bugbot for commit 4fb0bcb. Bugbot is set up for automated code reviews on this repo. Configure here.}

[augmentcode]

🤖 Augment PR Summary

Summary: Fixes SSR/hydration issues in the @hashintel/refractive package by avoiding browser-dependent SVG filter rendering until the client can measure the target element.

Changes:

• Adds a changeset to publish a patch release for @hashintel/refractive.
• Updates the createRefractiveComponent HOC to only render <Filter /> once ResizeObserver has provided non-zero width/height.
• Applies backdropFilter: url(#...) conditionally, only when the filter is present.

Technical Notes: This keeps the server render and the initial client render aligned (no filter output until dimensions exist), reducing SSR crashes (e.g., ImageData-related) and hydration mismatches.

_{🤖 Was this summary useful? React with 👍 or 👎}

[augmentcode]

Review completed. No suggestions at this time.

Comment augment review to trigger a new review at any time.