fix(anchor): eliminate position flash by switching to useLayoutEffect

[draedful]

Summary

• Add useSignalLayoutEffect — synchronous variant of useSignalEffect that runs via useLayoutEffect instead of useEffect
• Switch useBlockAnchorPosition to use it so CSS variables are applied before the browser paints
• Default anchor CSS fallback position to -99999px so anchors without a calculated position are hidden off-screen instead of appearing at 0,0

Problem

useEffect fires asynchronously after the browser paints, causing anchors to flash at their default position (0px, 0px → top-left corner of the block) for one frame before snapping to the correct coordinates. The position was already known at render time — it just wasn't applied synchronously.

Test Plan

• Verify anchors appear at correct position immediately without flicker on initial load
• Verify anchor positions update correctly when block moves
• Verify existing tests pass (npm test)

Summary by Sourcery

Prevent block anchors from briefly rendering at an incorrect position by making their position updates synchronous and hiding them off-screen until coordinates are available.

New Features:

• Introduce useSignalLayoutEffect as a layout-effect-based variant of useSignalEffect for synchronous DOM updates driven by signals.

Bug Fixes:

• Ensure block anchor positions are applied before paint to eliminate the visible flicker at the default position.
• Hide anchors off-screen by default when no position is available instead of rendering them at the top-left corner.

Enhancements:

• Refine anchor positioning hooks to use the new synchronous signal layout effect for more accurate visual updates.

[sourcery-ai]

Reviewer's Guide

Introduces a layout-effect-based signal hook and uses it to apply anchor position styles synchronously, while changing default anchor CSS to hide unpositioned anchors off-screen instead of at (0,0).

File-Level Changes

Change	Details	Files
Add a layout-effect variant of the signal-based effect hook to run DOM-updating effects before paint.	Define useSignalLayoutEffect that wraps effectFn with useFn and runs it inside useLayoutEffect Reuse the existing effect(...) integration pattern from useSignalEffect but with layout timing Document intended usage and timing semantics in a JSDoc comment with an example	src/react-components/hooks/useSignal.ts
Apply anchor position updates with the new synchronous hook to eliminate visible flicker.	Replace useSignalEffect with useSignalLayoutEffect in useBlockAnchorState hook for anchor position updates Ensure anchor CSS variables are updated synchronously when anchor or block state changes	src/react-components/hooks/useBlockAnchorState.ts
Change default anchor CSS fallback coordinates so uninitialized anchors are hidden off-screen.	Update default CSS custom property fallbacks for anchor x/y from 0px to -99999px for absolutely positioned anchors Ensure anchors without computed positions render off-screen rather than at the top-left of the block	src/react-components/Anchor.css

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[gravity-ui-bot]

Preview is ready.