AI rule: preserve interaction continuity

When changing input, keyboard, event, conditional, loop, or redraw behavior, preserve the user's active native interaction: focus, caret or selection range, IME composition, pressed control, and next intended action.

Build interaction islands

Keep shared application data in a stable outer host. Put each editor and independently refreshed output region in its own nested, data-less serc-rod, so each child inherits the shared data but owns its own redraw lifetime. Write in the editor, then target only the output host when it must be refreshed.

Do not assume full redraw preserves focus

An ordinary Sercrod host redraw rebuilds its child DOM from the template and replaces it. It is not a general DOM-diff or focus-restoration system. Do not add update(true) as a generic reliability fix, and do not redraw the host that owns the active editor merely to refresh another region.

Browser rendering work

After a DOM or CSS change, browsers can omit some layout or paint work and retain internal rendering data. This is a performance optimization chosen by the engine, not a guarantee that a replaced DOM node retains focus, selection, or scroll state. Profile the target browser before making a rendering-work claim.

Keep reading position stable

Keep the scrolling element and its ancestors in the stable shell, and redraw descendants or a separate nested output host. Do not set scrollTop, call scrollTo(), or call scrollIntoView() after a general update.

Supporting browsers enable CSS Scroll Anchoring by default, which can compensate when content outside the viewport changes. It is not universal: preserve layout geometry where possible, avoid changing size, margin, padding, position, or transform on the anchor path, and use overflow-anchor: none only for an intentional opt-out.

Prevent geometry shifts

• Reserve image, video, embed, and asynchronous-panel space with dimensions or an aspect ratio.
• Use compatible fallback font metrics so a late font does not rewrap the reading region.
• Use scrollbar-gutter: stable for a scroll panel when a classic scrollbar appearing would rewrap text.
• Use content-visibility: auto only with a realistic contain-intrinsic-size for long offscreen content.
• Leave browser history scroll restoration automatic unless the application owns a fully tested manual policy.

Choose the narrowest valid update

• Normal text *input avoids an immediate full host redraw.
• Use input-level *lazy when inherited-child output must also wait for change/blur.
• Use *eager only when a live result is intentional, then test typing, selection, composition, and the next action.
• Keep editable controls outside deliberately replaced conditional or structural regions unless replacement is the intended user experience.

Verification

Use a real browser to focus an input, type, place a caret and selection, trigger the update path, then Tab or click the next intended control. Test IME composition separately where supported.

Read the complete repository rule at docs/spec/ai-interaction-continuity.md when working from the source tree.