[dannote]

Why

A spike that used ordinary libraries in the demo's contacts page (es-toolkit's sortBy, VueUse's refDebounced, useLocalStorage, useClipboard, onKeyStroke) turned up three gaps:

• The page returned 500. A computed reading a composable's result (debouncedSearch) or an import (sortBy) failed every server render with ExpressionError, and compiling said nothing.
• Composable state was invisible. Only ref() counted as client state, so a file whose state came from composables compiled as server-only, and that state was never recorded for replay.
• Callbacks in templates run in QuickBEAM on every render.

What changed

One commit each:

• Left-out computeds, decided when compiling. Hybrid.Computeds.compile/2 decides, in dependency order, which computeds read only what the server has: refs, props, JS globals and other such computeds. The rest are left out with a warning naming what they lack. An expression reading a left-out computed is unrendered, and a v-if chain stops at an unrendered condition, so the first paint shows no branch rather than a misleading v-else.
• Composable state is client state. ScriptSetup.client_bindings lists top-level names bound by any call other than Vue's compiler macros, ref(), computed() and macro imports, destructured names included. Such a binding makes a file hybrid.
• Elixir counterparts for computeds. A def filtered(assigns) in <script lang="elixir"> computes filtered on the server on every render and in a replay. A counterpart named after a LiveView callback is a compile error.
• Recording only what the render reads. Setup registers the client state that the template, or the computeds and counterparts it reads, read (a counterpart's from its patterns), refs and composables alike. The bridge reports the latest value of what changed once per PhoenixReplay's flush interval, so frame-rate state such as useMouse isn't recorded, and a replay accepts exactly those names.
• State a render doesn't have (review): each hybrid render lists the composable state it lacks, all of it live, what a replay didn't record. Expressions reading it aren't rendered, a v-if chain stops at it, and an Elixir counterpart reading it isn't called (a counterpart matching %{sortKey: _} used to raise FunctionClauseError live).
• Constants and counterpart calls (review): top-level constants are evaluated once while compiling and known to the server; a computed calling a script function with an Elixir counterpart calls the counterpart.
• Recording (review): sources are unwrapped with unref and functions skipped, so useClipboard's copy is never called; pending changes go out when the page is hidden or navigates; left-out warnings carry the computed's line.
• Docs. A "Composables and libraries" section in the Hybrid guide covers what the server has, left-out computeds and the v-if rule, counterparts and how they can drift, and callbacks in templates. Also the replay section, ARCHITECTURE.md and the CHANGELOG.

Verification

• mix lint and mix test --include e2e: 356 tests. Fixtures from the spike assert the composable case and the import case, the first paint, counterparts live and in a replay (including one reading composable state, absent live), v-if on composable state, constants and counterpart calls in computeds, the reserved-name error, and the recorded names (state read only by a left-out computed isn't recorded).
• Demo browser tests: a pending change going out when the page is hidden; recorded names on start, three keystrokes within one flush as one report of only search with its latest value, nothing before start or after stop, and a mount during a recording. The demo's other Playwright tests pass.
• The spike applied to this branch: /contacts renders (200, previously 500) with a warning per left-out computed and no misleading "No contacts match". The demo rebuild on top of this is a separate PR.