phlex-reactive 0.13.3 → 0.14.0

data/app/javascript/phlex/reactive/features/effects.js

@@ -0,0 +1,362 @@
+// phlex/reactive/features/effects — stream effects (issue #215) and
+// self-dismissing flashes (issue #100): everything the client does AROUND a
+// <turbo-stream> render. One of the feature modules the core imports on
+// demand (issue #275); in the default client it is part of the one file.
+//
+// Both are document-level, not per root: the core owns the ONE
+// turbo:before-stream-render listener and hands every event to wrap() below,
+// which wraps event.detail.render. With phlex/reactive/core alone the module
+// is imported when a root declares an effect, or when the first stream that
+// needs it arrives — the core then holds that stream's render (and any stream
+// behind it) until the module is here, so the effect applies to THAT stream.
+//
+// This module never imports the core.
+
+// The core's stream-render listener calls this for every <turbo-stream>.
+// Dismiss wraps first, effects around it — the order the two listeners were
+// registered in before they shared one.
+export function wrap(event) {
+  wrapStreamRenderForDismiss(event)
+  wrapStreamRenderForEffects(event)
+}
+
+// Schedule every dismissing flash already in the document: what the core runs
+// once when the module arrives late (a flash rendered while it was loading).
+export function sweep() {
+  scheduleReactiveDismissals()
+}
+
+// Document-level self-dismissing flashes (issue #100). A flash rendered with
+// dismiss_after: carries data-reactive-dismiss-after="<ms>"; after the timeout
+// it removes itself. This is deliberately NOT a Stimulus controller — the flash
+// container is a plain host-app div (Response#flash appends into it) with no
+// controller attached, so nothing would honor the attr. A document-level scan
+// on turbo:before-stream-render (which fires for EVERY <turbo-stream> render —
+// a reply AND a broadcast) schedules removal for any newly-arrived dismissing
+// flash. Each is marked data-reactive-dismiss-scheduled so re-scans (a later
+// stream render) never double-schedule the same node.
+//
+// turbo:before-stream-render fires BEFORE the stream is applied — and Turbo
+// then does `await nextRepaint(); await event.detail.render(this)`, so a bare
+// setTimeout(0) can run BEFORE the node is inserted (observed under Falcon).
+// WRAP event.detail.render instead: run Turbo's own render, then scan once it
+// has resolved — timing-independent and correct on every server. detail.render
+// may be absent on exotic streams — guard it.
+
+// Chain the dismissing-flash scan after Turbo's own stream render resolves, so
+// the scan sees the freshly-inserted node. Idempotent per event (marks
+// detail.render as already-wrapped) and defensive if detail/render is missing.
+function wrapStreamRenderForDismiss(event) {
+  const detail = event.detail
+  const original = detail?.render
+  if (typeof original !== "function" || original.__reactiveDismissWrapped) {
+    // No render to wrap (or already wrapped) — fall back to a post-repaint scan.
+    if (typeof requestAnimationFrame === "function") requestAnimationFrame(scheduleReactiveDismissals)
+    else setTimeout(scheduleReactiveDismissals, 0)
+    return
+  }
+  const wrapped = async (streamElement) => {
+    await original(streamElement)
+    scheduleReactiveDismissals()
+  }
+  wrapped.__reactiveDismissWrapped = true
+  detail.render = wrapped
+}
+
+// Scan for un-scheduled dismissing flashes and schedule each one's removal.
+// Kept a module function so the scan logic is testable and re-run on every
+// stream render.
+function scheduleReactiveDismissals() {
+  const flashes = document.querySelectorAll("[data-reactive-dismiss-after]")
+  for (const el of flashes) {
+    if (el.hasAttribute("data-reactive-dismiss-scheduled")) continue
+    const ms = Number(el.getAttribute("data-reactive-dismiss-after"))
+    if (!Number.isFinite(ms) || ms <= 0) continue
+    el.setAttribute("data-reactive-dismiss-scheduled", "")
+    setTimeout(() => el.remove(), ms)
+  }
+}
+
+
+// Reactive effects (issue #215): animate ENTER (append/prepend), EXIT (remove)
+// and UPDATE (replace/update, plain or morph) when a <turbo-stream> renders.
+// Document-level and render-wrapping like the dismiss hook above, so ONE
+// interceptor covers both delivery paths (a reply and a broadcast). Strictly
+// data-driven and default-deny: the per-call data-reactive-effect on the
+// stream element wins ("off" suppresses), else the carrier element's
+// data-reactive-effect-<hook> — the DOM target for exit/update, the INCOMING
+// template root for enter. No attribute → no work; unknown names and
+// malformed legs warn + skip (a newer or forged attr must never break the
+// page). prefers-reduced-motion disables everything (the shipped CSS is also
+// media-wrapped — defense in depth).
+//
+// Timing:
+//   * exit — the animation runs BEFORE Turbo's render (the removal), awaited
+//     via animationend/transitionend with a timeout fallback; a ZERO computed
+//     duration (no effects CSS loaded, reduced-motion CSS gate) skips the wait
+//     entirely, so a missing stylesheet can never freeze a removal.
+//   * enter/update — Turbo renders first, then the effect class is applied to
+//     the inserted/updated element(s) and removed on settle (fire-and-forget).
+//     Re-applying an update effect restarts it (class off → reflow → on).
+//
+// A named effect maps to the shipped CSS class reactive-fx--<name>-<hook>
+// (app/assets/stylesheets/phlex/reactive/effects.css); "random" picks a
+// built-in per application; a "["-prefixed value is a custom
+// [during, from, to] class-legs triple (the #96/#186 vocabulary), run with
+// runTransition's add → frame → swap → settle choreography.
+const EFFECT_HOOKS = Object.freeze({
+  append: "enter",
+  prepend: "enter",
+  replace: "update",
+  update: "update",
+  remove: "exit",
+})
+const EFFECT_BUILT_INS = Object.freeze(["fade", "slide", "scale", "highlight", "shake"])
+// Marks an incoming template root so the post-render scan finds the inserted
+// CLONE (Turbo clones template content on render — attrs ride the clone).
+const EFFECT_PENDING_ATTR = "data-reactive-fx-pending"
+// The hard ceiling on any effect wait — an exit's removal is delayed at most
+// this long even if animationend/transitionend never fire.
+const EFFECT_SETTLE_FALLBACK_MS = 1000
+
+
+// Wrap event.detail.render (the dismiss-hook pattern) when this stream both
+// maps to a hook AND resolves to an effect. Resolution happens HERE, before
+// the render, because exit must read the target while it is still in the DOM
+// and enter must read (and mark) the template content before Turbo clones it.
+function wrapStreamRenderForEffects(event) {
+  const detail = event.detail
+  const original = detail?.render
+  if (typeof original !== "function" || original.__reactiveEffectsWrapped) return
+  const streamEl = detail?.newStream ?? event.target
+  const hook = EFFECT_HOOKS[streamEl?.getAttribute?.("action")]
+  if (!hook || effectsReducedMotion()) return
+  const effect = resolveStreamEffect(streamEl, hook)
+  if (!effect) return
+
+  const wrapped =
+    hook === "exit"
+      ? async (el) => {
+          await runExitEffect(effectTarget(streamEl), effect)
+          await original(el)
+        }
+      : async (el) => {
+          const container = hook === "enter" ? markIncomingRoots(streamEl) : null
+          await original(el)
+          if (hook === "enter") animateMarkedRoots(container, effect)
+          else runEnterOrUpdateEffect(effectTarget(streamEl), effect)
+        }
+  wrapped.__reactiveEffectsWrapped = true
+  detail.render = wrapped
+}
+
+// The effect for this stream: per-call data-reactive-effect first ("off" →
+// none), else the carrier's declared data-reactive-effect-<hook>.
+function resolveStreamEffect(streamEl, hook) {
+  const perCall = streamEl.getAttribute?.("data-reactive-effect")
+  if (perCall === "off") return null
+  if (perCall) return parseEffect(perCall, hook)
+  const carrier = hook === "enter" ? incomingEffectRoot(streamEl) : effectTarget(streamEl)
+  const declared = carrier?.getAttribute?.(`data-reactive-effect-${hook}`)
+  return declared ? parseEffect(declared, hook) : null
+}
+
+// The stream's CURRENT DOM target (re-queried at use, so a post-replace call
+// sees the freshly-swapped element). Our builders always emit `target` —
+// multi-`targets` streams are not ours and pass through unanimated.
+function effectTarget(streamEl) {
+  const target = streamEl.getAttribute?.("target")
+  return target ? (document.getElementById?.(target) ?? null) : null
+}
+
+// The incoming content's root element (an append/prepend's arriving
+// component) — the carrier of a declared enter effect.
+function incomingEffectRoot(streamEl) {
+  return streamEl.querySelector?.("template")?.content?.firstElementChild ?? null
+}
+
+// A wire value → an executable effect: { className } for a shipped built-in
+// ("random" picks one per application), { legs } for a custom triple. null +
+// console.warn for anything else (default-deny).
+function parseEffect(value, hook) {
+  if (value.startsWith("[")) {
+    let legs = null
+    try {
+      const parsed = JSON.parse(value)
+      if (Array.isArray(parsed) && parsed.length === 3) legs = parsed.map(String)
+    } catch {
+      // malformed JSON → the shared warn below
+    }
+    if (legs) return { legs }
+    console.warn(`[phlex-reactive] malformed effect legs ${JSON.stringify(value)} — skipped`)
+    return null
+  }
+  const name =
+    value === "random" ? EFFECT_BUILT_INS[Math.floor(Math.random() * EFFECT_BUILT_INS.length)] : value
+  if (!EFFECT_BUILT_INS.includes(name)) {
+    console.warn(`[phlex-reactive] unknown effect ${JSON.stringify(value)} — skipped`)
+    return null
+  }
+  return { className: `reactive-fx--${name}-${hook}` }
+}
+
+function effectsReducedMotion() {
+  try {
+    return typeof matchMedia === "function" && matchMedia("(prefers-reduced-motion: reduce)").matches
+  } catch {
+    return false
+  }
+}
+
+// Stamp each incoming template root with the pending marker (Turbo's render
+// clones the content, so the marker rides the inserted clone) and return the
+// container the post-render scan searches. Pre-render on purpose.
+function markIncomingRoots(streamEl) {
+  const content = streamEl.querySelector?.("template")?.content
+  if (!content) return null
+  for (const child of Array.from(content.children ?? [])) child.setAttribute?.(EFFECT_PENDING_ATTR, "")
+  return effectTarget(streamEl)
+}
+
+// Post-render: find the just-inserted clones by their marker, unmark, animate.
+function animateMarkedRoots(container, effect) {
+  if (typeof container?.querySelectorAll !== "function") return
+  for (const el of Array.from(container.querySelectorAll(`[${EFFECT_PENDING_ATTR}]`))) {
+    el.removeAttribute(EFFECT_PENDING_ATTR)
+    runEnterOrUpdateEffect(el, effect)
+  }
+}
+
+// EXIT: animate on the still-present element, resolve when settled, and only
+// then does the wrapper run Turbo's removal. Zero computed duration (no
+// effects CSS) resolves immediately — never a dead 1s freeze.
+async function runExitEffect(el, effect) {
+  if (!el?.classList) return
+  if (effect.legs) {
+    await runLegsEffect(el, effect.legs)
+    return
+  }
+  el.classList.add(effect.className)
+  const duration = effectDurationMs(el)
+  if (duration <= 0) {
+    el.classList.remove(effect.className)
+    return
+  }
+  await effectSettled(el, duration)
+  el.classList.remove(effect.className)
+}
+
+// ENTER/UPDATE: fire-and-forget after the render. A re-applied class is
+// removed + reflowed first so rapid successive updates restart the flash; the
+// per-element token keeps an older settle from clearing a newer application.
+function runEnterOrUpdateEffect(el, effect) {
+  if (!el?.classList) return
+  if (effect.legs) {
+    runLegsEffect(el, effect.legs)
+    return
+  }
+  if (el.classList.contains(effect.className)) {
+    el.classList.remove(effect.className)
+    void el.offsetWidth // force a reflow so re-adding restarts the animation
+  }
+  el.classList.add(effect.className)
+  const duration = effectDurationMs(el)
+  if (duration <= 0) {
+    el.classList.remove(effect.className)
+    return
+  }
+  const token = (el.__reactiveFxToken = (el.__reactiveFxToken ?? 0) + 1)
+  effectSettled(el, duration).then(() => {
+    if (el.__reactiveFxToken === token) el.classList.remove(effect.className)
+  })
+}
+
+// Custom class legs — runTransition's choreography (add during+from, swap
+// from→to on the next frame, settle, clean up), promise-shaped so an exit can
+// await it. Class lists are space-separated (the #96/#186 wire).
+//
+// Rapid re-application on the same element RESTARTS, mirroring the named
+// path's token guard: each run takes the per-element token, clears any
+// earlier run's leg classes, and a superseded run stops touching the element
+// the moment a newer run owns it — so a stale settle can never strip classes
+// mid-animation or double-swap the legs. A superseded EXIT run resolves
+// early, which only lets Turbo's removal proceed sooner (never later).
+async function runLegsEffect(el, legs) {
+  const [during, from, to] = legs.map(splitEffectClasses)
+  const token = (el.__reactiveFxToken = (el.__reactiveFxToken ?? 0) + 1)
+  el.classList.remove(...during, ...from, ...to)
+  el.classList.add(...during, ...from)
+  await effectNextFrame()
+  if (el.__reactiveFxToken !== token) return
+  el.classList.remove(...from)
+  el.classList.add(...to)
+  const duration = effectDurationMs(el)
+  if (duration > 0) await effectSettled(el, duration)
+  if (el.__reactiveFxToken !== token) return
+  el.classList.remove(...during, ...to)
+}
+
+function splitEffectClasses(list) {
+  return String(list ?? "")
+    .split(/\s+/)
+    .filter(Boolean)
+}
+
+// The longest computed animation/transition (duration + delay, comma lists
+// included) in ms, capped at the hard fallback. 0 when getComputedStyle is
+// unavailable or nothing animates — callers skip the wait entirely.
+function effectDurationMs(el) {
+  if (typeof getComputedStyle !== "function") return 0
+  try {
+    const style = getComputedStyle(el)
+    const longest = (value) =>
+      String(value ?? "")
+        .split(",")
+        .reduce((max, part) => Math.max(max, parseFloat(part) || 0), 0)
+    const animation = longest(style.animationDuration) + longest(style.animationDelay)
+    const transition = longest(style.transitionDuration) + longest(style.transitionDelay)
+    return Math.min(Math.max(animation, transition) * 1000, EFFECT_SETTLE_FALLBACK_MS)
+  } catch {
+    return 0
+  }
+}
+
+// Resolve on animationend/transitionend — whichever fires first — with a
+// timeout slightly past the computed duration, so a canceled animation (a
+// display:none ancestor, an interrupted transition) can't hang an exit.
+// Only the element's OWN end event counts — both bubble, and a descendant's
+// would settle the effect early (issue #296) — and settling removes both
+// listeners (`once` would only drop the one that fired).
+function effectSettled(el, durationMs) {
+  return new Promise((resolve) => {
+    const settle = (event) => {
+      if (event && event.target !== el) return
+      el.removeEventListener?.("animationend", settle)
+      el.removeEventListener?.("transitionend", settle)
+      resolve()
+    }
+    el.addEventListener?.("animationend", settle)
+    el.addEventListener?.("transitionend", settle)
+    setTimeout(settle, Math.min(durationMs + 50, EFFECT_SETTLE_FALLBACK_MS))
+  })
+}
+
+// One frame, raced against the settle fallback (issue #295): a background tab
+// never runs rAF, and an exit must not hold its removal (and every stream
+// behind it) until the tab is visible again. The fallback is the full settle
+// ceiling, never a short timer — one could beat rAF in a visible tab and swap
+// from→to before the `from` leg paints. Whichever wins cancels the other, so a
+// visible tab leaves no stray 1s timer behind.
+function effectNextFrame() {
+  return new Promise((resolve) => {
+    if (typeof requestAnimationFrame !== "function") return setTimeout(resolve, 16)
+    const timer = setTimeout(() => {
+      globalThis.cancelAnimationFrame?.(frame)
+      resolve()
+    }, EFFECT_SETTLE_FALLBACK_MS)
+    const frame = requestAnimationFrame(() => {
+      clearTimeout(timer)
+      resolve()
+    })
+  })
+}

data/app/javascript/phlex/reactive/features/effects.min.js

@@ -0,0 +1,4 @@
+function k(t){_(t),F(t)}function M(){c()}function _(t){let e=t.detail,n=e?.render;if(typeof n!=="function"||n.__reactiveDismissWrapped){if(typeof requestAnimationFrame==="function")requestAnimationFrame(c);else setTimeout(c,0);return}let r=async(i)=>{await n(i),c()};r.__reactiveDismissWrapped=!0,e.render=r}function c(){let t=document.querySelectorAll("[data-reactive-dismiss-after]");for(let e of t){if(e.hasAttribute("data-reactive-dismiss-scheduled"))continue;let n=Number(e.getAttribute("data-reactive-dismiss-after"));if(!Number.isFinite(n)||n<=0)continue;e.setAttribute("data-reactive-dismiss-scheduled",""),setTimeout(()=>e.remove(),n)}}var E=Object.freeze({append:"enter",prepend:"enter",replace:"update",update:"update",remove:"exit"}),f=Object.freeze(["fade","slide","scale","highlight","shake"]),m="data-reactive-fx-pending",d=1000;function F(t){let e=t.detail,n=e?.render;if(typeof n!=="function"||n.__reactiveEffectsWrapped)return;let r=e?.newStream??t.target,i=E[r?.getAttribute?.("action")];if(!i||T())return;let a=A(r,i);if(!a)return;let s=i==="exit"?async(o)=>{await x(u(r),a),await n(o)}:async(o)=>{let h=i==="enter"?S(r):null;if(await n(o),i==="enter")w(h,a);else y(u(r),a)};s.__reactiveEffectsWrapped=!0,e.render=s}function A(t,e){let n=t.getAttribute?.("data-reactive-effect");if(n==="off")return null;if(n)return g(n,e);let i=(e==="enter"?L(t):u(t))?.getAttribute?.(`data-reactive-effect-${e}`);return i?g(i,e):null}function u(t){let e=t.getAttribute?.("target");return e?document.getElementById?.(e)??null:null}function L(t){return t.querySelector?.("template")?.content?.firstElementChild??null}function g(t,e){if(t.startsWith("[")){let r=null;try{let i=JSON.parse(t);if(Array.isArray(i)&&i.length===3)r=i.map(String)}catch{}if(r)return{legs:r};return console.warn(`[phlex-reactive] malformed effect legs ${JSON.stringify(t)} — skipped`),null}let n=t==="random"?f[Math.floor(Math.random()*f.length)]:t;if(!f.includes(n))return console.warn(`[phlex-reactive] unknown effect ${JSON.stringify(t)} — skipped`),null;return{className:`reactive-fx--${n}-${e}`}}function T(){try{return typeof matchMedia==="function"&&matchMedia("(prefers-reduced-motion: reduce)").matches}catch{return!1}}function S(t){let e=t.querySelector?.("template")?.content;if(!e)return null;for(let n of Array.from(e.children??[]))n.setAttribute?.(m,"");return u(t)}function w(t,e){if(typeof t?.querySelectorAll!=="function")return;for(let n of Array.from(t.querySelectorAll(`[${m}]`)))n.removeAttribute(m),y(n,e)}async function x(t,e){if(!t?.classList)return;if(e.legs){await v(t,e.legs);return}t.classList.add(e.className);let n=l(t);if(n<=0){t.classList.remove(e.className);return}await p(t,n),t.classList.remove(e.className)}function y(t,e){if(!t?.classList)return;if(e.legs){v(t,e.legs);return}if(t.classList.contains(e.className))t.classList.remove(e.className),t.offsetWidth;t.classList.add(e.className);let n=l(t);if(n<=0){t.classList.remove(e.className);return}let r=t.__reactiveFxToken=(t.__reactiveFxToken??0)+1;p(t,n).then(()=>{if(t.__reactiveFxToken===r)t.classList.remove(e.className)})}async function v(t,e){let[n,r,i]=e.map(N),a=t.__reactiveFxToken=(t.__reactiveFxToken??0)+1;if(t.classList.remove(...n,...r,...i),t.classList.add(...n,...r),await b(),t.__reactiveFxToken!==a)return;t.classList.remove(...r),t.classList.add(...i);let s=l(t);if(s>0)await p(t,s);if(t.__reactiveFxToken!==a)return;t.classList.remove(...n,...i)}function N(t){return String(t??"").split(/\s+/).filter(Boolean)}function l(t){if(typeof getComputedStyle!=="function")return 0;try{let e=getComputedStyle(t),n=(a)=>String(a??"").split(",").reduce((s,o)=>Math.max(s,parseFloat(o)||0),0),r=n(e.animationDuration)+n(e.animationDelay),i=n(e.transitionDuration)+n(e.transitionDelay);return Math.min(Math.max(r,i)*1000,d)}catch{return 0}}function p(t,e){return new Promise((n)=>{let r=(i)=>{if(i&&i.target!==t)return;t.removeEventListener?.("animationend",r),t.removeEventListener?.("transitionend",r),n()};t.addEventListener?.("animationend",r),t.addEventListener?.("transitionend",r),setTimeout(r,Math.min(e+50,d))})}function b(){return new Promise((t)=>{if(typeof requestAnimationFrame!=="function")return setTimeout(t,16);let e=setTimeout(()=>{globalThis.cancelAnimationFrame?.(n),t()},d),n=requestAnimationFrame(()=>{clearTimeout(e),t()})})}export{M as sweep,k as wrap};
+
+//# debugId=5B84C2BEAC9F25E664756E2164756E21
+//# sourceMappingURL=effects.min.js.map

data/app/javascript/phlex/reactive/features/effects.min.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["features/effects.js"],
+  "sourcesContent": [
+    "// phlex/reactive/features/effects — stream effects (issue #215) and\n// self-dismissing flashes (issue #100): everything the client does AROUND a\n// <turbo-stream> render. One of the feature modules the core imports on\n// demand (issue #275); in the default client it is part of the one file.\n//\n// Both are document-level, not per root: the core owns the ONE\n// turbo:before-stream-render listener and hands every event to wrap() below,\n// which wraps event.detail.render. With phlex/reactive/core alone the module\n// is imported when a root declares an effect, or when the first stream that\n// needs it arrives — the core then holds that stream's render (and any stream\n// behind it) until the module is here, so the effect applies to THAT stream.\n//\n// This module never imports the core.\n\n// The core's stream-render listener calls this for every <turbo-stream>.\n// Dismiss wraps first, effects around it — the order the two listeners were\n// registered in before they shared one.\nexport function wrap(event) {\n  wrapStreamRenderForDismiss(event)\n  wrapStreamRenderForEffects(event)\n}\n\n// Schedule every dismissing flash already in the document: what the core runs\n// once when the module arrives late (a flash rendered while it was loading).\nexport function sweep() {\n  scheduleReactiveDismissals()\n}\n\n// Document-level self-dismissing flashes (issue #100). A flash rendered with\n// dismiss_after: carries data-reactive-dismiss-after=\"<ms>\"; after the timeout\n// it removes itself. This is deliberately NOT a Stimulus controller — the flash\n// container is a plain host-app div (Response#flash appends into it) with no\n// controller attached, so nothing would honor the attr. A document-level scan\n// on turbo:before-stream-render (which fires for EVERY <turbo-stream> render —\n// a reply AND a broadcast) schedules removal for any newly-arrived dismissing\n// flash. Each is marked data-reactive-dismiss-scheduled so re-scans (a later\n// stream render) never double-schedule the same node.\n//\n// turbo:before-stream-render fires BEFORE the stream is applied — and Turbo\n// then does `await nextRepaint(); await event.detail.render(this)`, so a bare\n// setTimeout(0) can run BEFORE the node is inserted (observed under Falcon).\n// WRAP event.detail.render instead: run Turbo's own render, then scan once it\n// has resolved — timing-independent and correct on every server. detail.render\n// may be absent on exotic streams — guard it.\n\n// Chain the dismissing-flash scan after Turbo's own stream render resolves, so\n// the scan sees the freshly-inserted node. Idempotent per event (marks\n// detail.render as already-wrapped) and defensive if detail/render is missing.\nfunction wrapStreamRenderForDismiss(event) {\n  const detail = event.detail\n  const original = detail?.render\n  if (typeof original !== \"function\" || original.__reactiveDismissWrapped) {\n    // No render to wrap (or already wrapped) — fall back to a post-repaint scan.\n    if (typeof requestAnimationFrame === \"function\") requestAnimationFrame(scheduleReactiveDismissals)\n    else setTimeout(scheduleReactiveDismissals, 0)\n    return\n  }\n  const wrapped = async (streamElement) => {\n    await original(streamElement)\n    scheduleReactiveDismissals()\n  }\n  wrapped.__reactiveDismissWrapped = true\n  detail.render = wrapped\n}\n\n// Scan for un-scheduled dismissing flashes and schedule each one's removal.\n// Kept a module function so the scan logic is testable and re-run on every\n// stream render.\nfunction scheduleReactiveDismissals() {\n  const flashes = document.querySelectorAll(\"[data-reactive-dismiss-after]\")\n  for (const el of flashes) {\n    if (el.hasAttribute(\"data-reactive-dismiss-scheduled\")) continue\n    const ms = Number(el.getAttribute(\"data-reactive-dismiss-after\"))\n    if (!Number.isFinite(ms) || ms <= 0) continue\n    el.setAttribute(\"data-reactive-dismiss-scheduled\", \"\")\n    setTimeout(() => el.remove(), ms)\n  }\n}\n\n\n// Reactive effects (issue #215): animate ENTER (append/prepend), EXIT (remove)\n// and UPDATE (replace/update, plain or morph) when a <turbo-stream> renders.\n// Document-level and render-wrapping like the dismiss hook above, so ONE\n// interceptor covers both delivery paths (a reply and a broadcast). Strictly\n// data-driven and default-deny: the per-call data-reactive-effect on the\n// stream element wins (\"off\" suppresses), else the carrier element's\n// data-reactive-effect-<hook> — the DOM target for exit/update, the INCOMING\n// template root for enter. No attribute → no work; unknown names and\n// malformed legs warn + skip (a newer or forged attr must never break the\n// page). prefers-reduced-motion disables everything (the shipped CSS is also\n// media-wrapped — defense in depth).\n//\n// Timing:\n//   * exit — the animation runs BEFORE Turbo's render (the removal), awaited\n//     via animationend/transitionend with a timeout fallback; a ZERO computed\n//     duration (no effects CSS loaded, reduced-motion CSS gate) skips the wait\n//     entirely, so a missing stylesheet can never freeze a removal.\n//   * enter/update — Turbo renders first, then the effect class is applied to\n//     the inserted/updated element(s) and removed on settle (fire-and-forget).\n//     Re-applying an update effect restarts it (class off → reflow → on).\n//\n// A named effect maps to the shipped CSS class reactive-fx--<name>-<hook>\n// (app/assets/stylesheets/phlex/reactive/effects.css); \"random\" picks a\n// built-in per application; a \"[\"-prefixed value is a custom\n// [during, from, to] class-legs triple (the #96/#186 vocabulary), run with\n// runTransition's add → frame → swap → settle choreography.\nconst EFFECT_HOOKS = Object.freeze({\n  append: \"enter\",\n  prepend: \"enter\",\n  replace: \"update\",\n  update: \"update\",\n  remove: \"exit\",\n})\nconst EFFECT_BUILT_INS = Object.freeze([\"fade\", \"slide\", \"scale\", \"highlight\", \"shake\"])\n// Marks an incoming template root so the post-render scan finds the inserted\n// CLONE (Turbo clones template content on render — attrs ride the clone).\nconst EFFECT_PENDING_ATTR = \"data-reactive-fx-pending\"\n// The hard ceiling on any effect wait — an exit's removal is delayed at most\n// this long even if animationend/transitionend never fire.\nconst EFFECT_SETTLE_FALLBACK_MS = 1000\n\n\n// Wrap event.detail.render (the dismiss-hook pattern) when this stream both\n// maps to a hook AND resolves to an effect. Resolution happens HERE, before\n// the render, because exit must read the target while it is still in the DOM\n// and enter must read (and mark) the template content before Turbo clones it.\nfunction wrapStreamRenderForEffects(event) {\n  const detail = event.detail\n  const original = detail?.render\n  if (typeof original !== \"function\" || original.__reactiveEffectsWrapped) return\n  const streamEl = detail?.newStream ?? event.target\n  const hook = EFFECT_HOOKS[streamEl?.getAttribute?.(\"action\")]\n  if (!hook || effectsReducedMotion()) return\n  const effect = resolveStreamEffect(streamEl, hook)\n  if (!effect) return\n\n  const wrapped =\n    hook === \"exit\"\n      ? async (el) => {\n          await runExitEffect(effectTarget(streamEl), effect)\n          await original(el)\n        }\n      : async (el) => {\n          const container = hook === \"enter\" ? markIncomingRoots(streamEl) : null\n          await original(el)\n          if (hook === \"enter\") animateMarkedRoots(container, effect)\n          else runEnterOrUpdateEffect(effectTarget(streamEl), effect)\n        }\n  wrapped.__reactiveEffectsWrapped = true\n  detail.render = wrapped\n}\n\n// The effect for this stream: per-call data-reactive-effect first (\"off\" →\n// none), else the carrier's declared data-reactive-effect-<hook>.\nfunction resolveStreamEffect(streamEl, hook) {\n  const perCall = streamEl.getAttribute?.(\"data-reactive-effect\")\n  if (perCall === \"off\") return null\n  if (perCall) return parseEffect(perCall, hook)\n  const carrier = hook === \"enter\" ? incomingEffectRoot(streamEl) : effectTarget(streamEl)\n  const declared = carrier?.getAttribute?.(`data-reactive-effect-${hook}`)\n  return declared ? parseEffect(declared, hook) : null\n}\n\n// The stream's CURRENT DOM target (re-queried at use, so a post-replace call\n// sees the freshly-swapped element). Our builders always emit `target` —\n// multi-`targets` streams are not ours and pass through unanimated.\nfunction effectTarget(streamEl) {\n  const target = streamEl.getAttribute?.(\"target\")\n  return target ? (document.getElementById?.(target) ?? null) : null\n}\n\n// The incoming content's root element (an append/prepend's arriving\n// component) — the carrier of a declared enter effect.\nfunction incomingEffectRoot(streamEl) {\n  return streamEl.querySelector?.(\"template\")?.content?.firstElementChild ?? null\n}\n\n// A wire value → an executable effect: { className } for a shipped built-in\n// (\"random\" picks one per application), { legs } for a custom triple. null +\n// console.warn for anything else (default-deny).\nfunction parseEffect(value, hook) {\n  if (value.startsWith(\"[\")) {\n    let legs = null\n    try {\n      const parsed = JSON.parse(value)\n      if (Array.isArray(parsed) && parsed.length === 3) legs = parsed.map(String)\n    } catch {\n      // malformed JSON → the shared warn below\n    }\n    if (legs) return { legs }\n    console.warn(`[phlex-reactive] malformed effect legs ${JSON.stringify(value)} — skipped`)\n    return null\n  }\n  const name =\n    value === \"random\" ? EFFECT_BUILT_INS[Math.floor(Math.random() * EFFECT_BUILT_INS.length)] : value\n  if (!EFFECT_BUILT_INS.includes(name)) {\n    console.warn(`[phlex-reactive] unknown effect ${JSON.stringify(value)} — skipped`)\n    return null\n  }\n  return { className: `reactive-fx--${name}-${hook}` }\n}\n\nfunction effectsReducedMotion() {\n  try {\n    return typeof matchMedia === \"function\" && matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n  } catch {\n    return false\n  }\n}\n\n// Stamp each incoming template root with the pending marker (Turbo's render\n// clones the content, so the marker rides the inserted clone) and return the\n// container the post-render scan searches. Pre-render on purpose.\nfunction markIncomingRoots(streamEl) {\n  const content = streamEl.querySelector?.(\"template\")?.content\n  if (!content) return null\n  for (const child of Array.from(content.children ?? [])) child.setAttribute?.(EFFECT_PENDING_ATTR, \"\")\n  return effectTarget(streamEl)\n}\n\n// Post-render: find the just-inserted clones by their marker, unmark, animate.\nfunction animateMarkedRoots(container, effect) {\n  if (typeof container?.querySelectorAll !== \"function\") return\n  for (const el of Array.from(container.querySelectorAll(`[${EFFECT_PENDING_ATTR}]`))) {\n    el.removeAttribute(EFFECT_PENDING_ATTR)\n    runEnterOrUpdateEffect(el, effect)\n  }\n}\n\n// EXIT: animate on the still-present element, resolve when settled, and only\n// then does the wrapper run Turbo's removal. Zero computed duration (no\n// effects CSS) resolves immediately — never a dead 1s freeze.\nasync function runExitEffect(el, effect) {\n  if (!el?.classList) return\n  if (effect.legs) {\n    await runLegsEffect(el, effect.legs)\n    return\n  }\n  el.classList.add(effect.className)\n  const duration = effectDurationMs(el)\n  if (duration <= 0) {\n    el.classList.remove(effect.className)\n    return\n  }\n  await effectSettled(el, duration)\n  el.classList.remove(effect.className)\n}\n\n// ENTER/UPDATE: fire-and-forget after the render. A re-applied class is\n// removed + reflowed first so rapid successive updates restart the flash; the\n// per-element token keeps an older settle from clearing a newer application.\nfunction runEnterOrUpdateEffect(el, effect) {\n  if (!el?.classList) return\n  if (effect.legs) {\n    runLegsEffect(el, effect.legs)\n    return\n  }\n  if (el.classList.contains(effect.className)) {\n    el.classList.remove(effect.className)\n    void el.offsetWidth // force a reflow so re-adding restarts the animation\n  }\n  el.classList.add(effect.className)\n  const duration = effectDurationMs(el)\n  if (duration <= 0) {\n    el.classList.remove(effect.className)\n    return\n  }\n  const token = (el.__reactiveFxToken = (el.__reactiveFxToken ?? 0) + 1)\n  effectSettled(el, duration).then(() => {\n    if (el.__reactiveFxToken === token) el.classList.remove(effect.className)\n  })\n}\n\n// Custom class legs — runTransition's choreography (add during+from, swap\n// from→to on the next frame, settle, clean up), promise-shaped so an exit can\n// await it. Class lists are space-separated (the #96/#186 wire).\n//\n// Rapid re-application on the same element RESTARTS, mirroring the named\n// path's token guard: each run takes the per-element token, clears any\n// earlier run's leg classes, and a superseded run stops touching the element\n// the moment a newer run owns it — so a stale settle can never strip classes\n// mid-animation or double-swap the legs. A superseded EXIT run resolves\n// early, which only lets Turbo's removal proceed sooner (never later).\nasync function runLegsEffect(el, legs) {\n  const [during, from, to] = legs.map(splitEffectClasses)\n  const token = (el.__reactiveFxToken = (el.__reactiveFxToken ?? 0) + 1)\n  el.classList.remove(...during, ...from, ...to)\n  el.classList.add(...during, ...from)\n  await effectNextFrame()\n  if (el.__reactiveFxToken !== token) return\n  el.classList.remove(...from)\n  el.classList.add(...to)\n  const duration = effectDurationMs(el)\n  if (duration > 0) await effectSettled(el, duration)\n  if (el.__reactiveFxToken !== token) return\n  el.classList.remove(...during, ...to)\n}\n\nfunction splitEffectClasses(list) {\n  return String(list ?? \"\")\n    .split(/\\s+/)\n    .filter(Boolean)\n}\n\n// The longest computed animation/transition (duration + delay, comma lists\n// included) in ms, capped at the hard fallback. 0 when getComputedStyle is\n// unavailable or nothing animates — callers skip the wait entirely.\nfunction effectDurationMs(el) {\n  if (typeof getComputedStyle !== \"function\") return 0\n  try {\n    const style = getComputedStyle(el)\n    const longest = (value) =>\n      String(value ?? \"\")\n        .split(\",\")\n        .reduce((max, part) => Math.max(max, parseFloat(part) || 0), 0)\n    const animation = longest(style.animationDuration) + longest(style.animationDelay)\n    const transition = longest(style.transitionDuration) + longest(style.transitionDelay)\n    return Math.min(Math.max(animation, transition) * 1000, EFFECT_SETTLE_FALLBACK_MS)\n  } catch {\n    return 0\n  }\n}\n\n// Resolve on animationend/transitionend — whichever fires first — with a\n// timeout slightly past the computed duration, so a canceled animation (a\n// display:none ancestor, an interrupted transition) can't hang an exit.\n// Only the element's OWN end event counts — both bubble, and a descendant's\n// would settle the effect early (issue #296) — and settling removes both\n// listeners (`once` would only drop the one that fired).\nfunction effectSettled(el, durationMs) {\n  return new Promise((resolve) => {\n    const settle = (event) => {\n      if (event && event.target !== el) return\n      el.removeEventListener?.(\"animationend\", settle)\n      el.removeEventListener?.(\"transitionend\", settle)\n      resolve()\n    }\n    el.addEventListener?.(\"animationend\", settle)\n    el.addEventListener?.(\"transitionend\", settle)\n    setTimeout(settle, Math.min(durationMs + 50, EFFECT_SETTLE_FALLBACK_MS))\n  })\n}\n\n// One frame, raced against the settle fallback (issue #295): a background tab\n// never runs rAF, and an exit must not hold its removal (and every stream\n// behind it) until the tab is visible again. The fallback is the full settle\n// ceiling, never a short timer — one could beat rAF in a visible tab and swap\n// from→to before the `from` leg paints. Whichever wins cancels the other, so a\n// visible tab leaves no stray 1s timer behind.\nfunction effectNextFrame() {\n  return new Promise((resolve) => {\n    if (typeof requestAnimationFrame !== \"function\") return setTimeout(resolve, 16)\n    const timer = setTimeout(() => {\n      globalThis.cancelAnimationFrame?.(frame)\n      resolve()\n    }, EFFECT_SETTLE_FALLBACK_MS)\n    const frame = requestAnimationFrame(() => {\n      clearTimeout(timer)\n      resolve()\n    })\n  })\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "5B84C2BEAC9F25E664756E2164756E21",
+  "names": []
+}

data/app/javascript/phlex/reactive/features/form.js

@@ -0,0 +1,216 @@
+// phlex/reactive/features/form — what a form root sets up when it connects
+// and re-syncs after a morph, with no round trip: dirty tracking and the
+// navigate-away guard (issue #103), and the paste-trigger availability gate
+// (issue #228). One of the feature modules the core imports on demand (issue
+// #275); in the default client it is part of the one file.
+//
+// The two share a module because they share a shape, not a page: a marker
+// check at connect, one pass over the root's own controls, the same pass
+// again on turbo:morph-element. The gate alone is smaller than what a module
+// of its own costs the core.
+//
+// This module never imports the core: it reaches a controller through the
+// `core` handle (core.owns — is this control this root's own, issue #15).
+
+// controller -> the removals of what connect() added, for disconnect() to run.
+const wired = new WeakMap()
+// The turbo:before-visit events a warn_unsaved root already prompted for: one
+// prompt per visit, however many dirty roots guard the page (issue #298).
+const askedVisits = new WeakSet()
+
+export function connect(controller, core) {
+  const root = controller.element
+  const offs = []
+  wired.set(controller, offs)
+  // Add a listener and keep its removal. Closures, not a record of named
+  // handlers: the minifier renames a local, never a property (issue #310).
+  const listen = (target, type, handler) => {
+    target.addEventListener?.(type, handler)
+    offs.push(() => target.removeEventListener?.(type, handler))
+  }
+
+  // Dirty tracking (issue #103) — ONLY when this root opts in (track_dirty: or a
+  // reactive_field(dirty:)), so a component that never uses it pays nothing (no
+  // baseline scan, no morph listener on every broadcast). A plain (outerHTML)
+  // replace re-connects the controller, so seed the baseline scan here — the root
+  // reflects current-vs-default WITHOUT waiting for the first input. An in-place
+  // morph / broadcast morph keeps the element CONNECTED and fires no Stimulus
+  // lifecycle, so ALSO listen for turbo:morph-element on the root to re-scan
+  // after the morph writes fresh default* attributes (reactive:applied is NOT a
+  // valid hook — it fires when streams are handed to Turbo, BEFORE the DOM
+  // mutation). Both listeners are torn down in disconnect().
+  if (dirtyTrackingEnabled(root, core)) {
+    const rescan = () => scan(controller, core)
+    listen(root, "turbo:morph-element", rescan)
+    rescan()
+
+    // warn_unsaved: arm a navigate-away guard gated on a LIVE dirty-count read
+    // (never a cached snapshot — the count is re-derived from the DOM each time).
+    // beforeunload covers a real browser unload; turbo:before-visit covers a
+    // Turbo in-app navigation (it does NOT fire on restoration visits — the
+    // documented gap). Registered on window only when the marker is present.
+    if (root.getAttribute?.("data-reactive-warn-unsaved") === "true") armUnsavedGuard(root, listen)
+  }
+
+  // Clipboard-trigger availability gate (issue #228) — ONLY when this root
+  // owns a paste trigger (on_client marks one with data-reactive-clipboard).
+  // The Async Clipboard API is absent in insecure contexts and some webviews;
+  // a paste button that can never work must not show. The gate OWNS a marked
+  // trigger's `hidden` flag: author the trigger `hidden` and this pass reveals
+  // it where the API exists (a dead button never paints); turbo:morph-element
+  // re-syncs because a morph rewrites the trigger back to its authored hidden
+  // state. The decision is made ONCE at connect — render the paste trigger
+  // unconditionally: a trigger first INTRODUCED by a later morph of a root
+  // that already tracks dirtiness stays ungated (hidden) until a full replace
+  // re-connects the controller.
+  if (clipboardGateEnabled(root, core)) {
+    const sync = () => syncClipboardTriggers(root, core)
+    listen(root, "turbo:morph-element", sync)
+    sync()
+  }
+}
+
+// Remove the listeners on disconnect (Turbo morph/navigation) so a morph
+// re-scan or a navigate-away guard never runs against a detached root.
+export function disconnect(controller) {
+  for (const off of wired.get(controller) ?? []) off()
+  wired.delete(controller)
+}
+
+// Whether this root opts into dirty tracking (issue #103): track_dirty: puts the
+// trackDirty descriptor on the ROOT's data-action; a per-field reactive_field(
+// dirty:) puts it on a descendant field. Either turns tracking on. A quick
+// attribute read + one scoped query, evaluated once per connect (a cold path).
+function dirtyTrackingEnabled(root, core) {
+  if ((root.getAttribute?.("data-action") ?? "").includes("reactive#trackDirty")) return true
+  const nodes = root.querySelectorAll?.('[data-action*="reactive#trackDirty"]') ?? []
+  for (const el of nodes) if (core.owns(el)) return true
+  return false
+}
+
+// Dirty tracking (issue #103). Wired by reactive_field(dirty: true) /
+// reactive_root(track_dirty: true): an `input` on an owned field runs a FULL
+// re-scan of every field this root owns (the controller's trackDirty action
+// calls this). NO round trip, NO shipped state.
+//
+// Re-compute the dirty flag for EVERY field this root owns in one pass, then
+// reflect the total onto the root. Called on an owned field's input, on
+// connect (baseline seed), and after a turbo:morph-element re-render (fresh
+// default* attrs). dirty = current ≠ the DOM's own default:
+//   checkbox/radio → checked  !== defaultChecked
+//   select         → some option.selected !== its reset state (issue #297)
+//   else           → value    !== defaultValue
+// A full pass (not per-target) is REQUIRED: a radio group's previously-checked
+// radio flips to checked=false with NO input event, so per-target toggling
+// would leave its flag stale. File inputs are skipped — a file has no server
+// default baseline. Per-dirty-field data-reactive-dirty="true" ("true" STRING,
+// not a valueless boolean attr — mirrors the on() flag convention); the root
+// carries data-reactive-dirty="<count>" and DROPS the attr at zero, so
+// `[data-reactive-dirty]` styles the whole form and `[data-reactive-dirty]`
+// on a field styles just the changed control — both pure CSS, zero JS.
+export function scan(controller, core) {
+  const root = controller.element
+  // Runs at bootstrap (the connect baseline seed) as well as on input/morph, so
+  // it must never throw — degrade to a no-op if the root can't be queried (a real
+  // reactive root always can; this guards minimal/test element stubs).
+  if (typeof root?.querySelectorAll !== "function") return
+
+  let count = 0
+  root.querySelectorAll("input[name], select[name], textarea[name]").forEach((field) => {
+    if (!core.owns(field)) return // skip a nested reactive root's fields (issue #15)
+    if (field.type === "file") return // no server default baseline to diff against
+
+    if (fieldDirty(field)) {
+      field.setAttribute("data-reactive-dirty", "true")
+      count++
+    } else {
+      field.removeAttribute("data-reactive-dirty")
+    }
+  })
+
+  if (count > 0) root.setAttribute("data-reactive-dirty", String(count))
+  else root.removeAttribute("data-reactive-dirty")
+}
+
+// Whether a single owned control differs from its server-rendered default.
+function fieldDirty(field) {
+  if (field.type === "checkbox" || field.type === "radio") {
+    return field.checked !== field.defaultChecked
+  }
+  if (field.tag === "select" || field.options) {
+    // Any option whose selected state diverges from the select's RESET state.
+    // Guard for a stub/absent options list (degrade to clean). A one-row single
+    // select resets to its last defaultSelected option or, with none, to its
+    // first enabled one — the browser selects it while its defaultSelected stays
+    // false, so a pristine form must not read as dirty (issue #297). A multiple
+    // (or size > 1) select resets to exactly its defaultSelected options. An
+    // option inside a disabled <optgroup> is disabled too (the browser skips it).
+    const options = Array.from(field.options ?? [])
+    const single = !field.multiple && !(field.size > 1)
+    const reset = options.filter((o) => o.defaultSelected).pop() ?? options.find((o) => !o.closest?.("optgroup")?.disabled && !o.disabled)
+    return options.some((o) => o.selected !== (single ? o === reset : o.defaultSelected))
+  }
+  return field.value !== field.defaultValue
+}
+
+// The live dirty-field count, re-derived from the DOM (never a cached snapshot)
+// — the source of truth for the warn_unsaved guard's gate.
+function dirtyCount(root) {
+  const raw = root.getAttribute?.("data-reactive-dirty")
+  const n = Number(raw)
+  return Number.isFinite(n) && n > 0 ? n : 0
+}
+
+// Arm the navigate-away guard (warn_unsaved: true, issue #103). beforeunload
+// blocks a real browser unload; turbo:before-visit blocks a Turbo in-app
+// navigation (it does NOT fire on restoration visits — the documented gap).
+// Both read the LIVE dirty count, so a clean form never blocks. Added through
+// connect()'s `listen`, so disconnect() removes exactly them.
+function armUnsavedGuard(root, listen) {
+  if (typeof window === "undefined" || typeof window.addEventListener !== "function") return
+
+  listen(window, "beforeunload", (event) => {
+    if (dirtyCount(root) === 0) return undefined
+    // The spec dance: preventDefault + a truthy returnValue triggers the native
+    // "leave site?" prompt. The string is legacy (modern browsers show their own
+    // copy) but must be non-empty/truthy to arm the dialog.
+    event.preventDefault()
+    event.returnValue = "You have unsaved changes."
+    return event.returnValue
+  })
+  // Every warn_unsaved root arms its own turbo:before-visit handler, and one
+  // visit is one event dispatched to all of them: the first DIRTY root asks,
+  // and the rest see the event already asked (issue #298). A clean root never
+  // claims the event, so any dirty root on the page can still veto the visit.
+  listen(window, "turbo:before-visit", (event) => {
+    if (dirtyCount(root) === 0 || askedVisits.has(event)) return
+    askedVisits.add(event)
+    const ok = typeof window.confirm === "function" ? window.confirm("You have unsaved changes. Leave anyway?") : true
+    if (!ok) event.preventDefault?.()
+  })
+}
+
+// Whether this root owns a clipboard-marked paste trigger (issue #228). The
+// ROOT itself counts (a button-only component that mixes on_client(paste_into)
+// onto reactive_root), then one scoped query; a NESTED root's triggers are
+// its own controller's to gate (issue #15 ownership).
+function clipboardGateEnabled(root, core) {
+  if (root.getAttribute?.("data-reactive-clipboard")) return true
+  const nodes = root.querySelectorAll?.("[data-reactive-clipboard]") ?? []
+  for (const el of nodes) if (core.owns(el)) return true
+  return false
+}
+
+// Set every owned paste trigger's `hidden` from clipboard availability
+// (issue #228): available → revealed (the authored `hidden` was only the
+// no-dead-button first paint), missing → hidden (insecure context /
+// webview). The gate owns the flag on MARKED elements only — nothing else
+// is ever touched. A marked ROOT is gated too: when the component IS the
+// paste button, hiding the root is exactly "the dead button never shows".
+function syncClipboardTriggers(root, core) {
+  const available = typeof globalThis.navigator?.clipboard?.readText === "function"
+  if (root.getAttribute?.("data-reactive-clipboard")) root.hidden = !available
+  for (const el of root.querySelectorAll?.("[data-reactive-clipboard]") ?? []) {
+    if (core.owns(el)) el.hidden = !available
+  }
+}