@tryvitris/website-harness 0.0.0-stage → 0.1.0-beta.5

package/src/runtime/cookie-compliance.ts

@@ -0,0 +1,50 @@
+export const COOKIE_COMPLIANCE_PATH = "/cookie-compliance";
+
+export const COOKIE_COMPLIANCE_FOOTER_LINK = {
+  label: "Cookie compliance",
+  href: COOKIE_COMPLIANCE_PATH,
+} as const;
+
+const BODY = [
+  "This website is powered by Vitris. Analytics run on the site’s own domain — there are no third-party ad or analytics tags.",
+  "If you allow analytics cookies, we set a first-party cookie named vitris_vid (about 13 months). It is a random visitor id so return visits can be counted without knowing who you are. We also keep a short-lived session id in session storage while you browse.",
+  "With that id we record page views, time on page, scroll depth, clicks on navigation and buttons, live presence while the tab is open, and core conversions such as form submits, phone, email, and map links. Form submissions may include the visitor id when present.",
+  "We do not sell this data. Site owners see aggregated reports in their Vitris dashboard so they can improve the site.",
+  "If your browser sends Global Privacy Control or Do Not Track, we do not set the analytics cookie and we do not send live presence pings. That hit may still be counted in a cookieless way for that day only.",
+  "Essential site cookies (for example an owner login session on the Vitris app) are separate from this public-site analytics cookie and are not controlled by the banner on this page.",
+];
+
+/**
+ * Kernel-owned cookie compliance body (no site components).
+ * Sites should link here from their footer: /cookie-compliance
+ */
+export function cookieComplianceHtml(siteName: string): string {
+  const paras = BODY.map((p) => `<p>${p}</p>`).join("\n");
+  return `<main id="main" tabindex="-1" class="c-cookie-page">
+  <div class="wrap">
+    <h1>Cookie compliance</h1>
+    <p>First-party analytics on ${escapeText(siteName)}, and how to control them.</p>
+    <h2>What we store</h2>
+    ${paras}
+    <h2>Change your preference</h2>
+    <p>Use Accept to allow the analytics cookie, or Reject to clear it and stop future analytics cookies and live pings in this browser. Your choice is saved in a first-party preference cookie named vitris_cc. You can return here anytime to change it.</p>
+    <div class="c-cookie-page__actions">
+      <button type="button" class="btn" data-vitris-cc="accept" data-cookie-accept>Accept analytics cookies</button>
+      <button type="button" class="btn-ghost" data-vitris-cc="reject" data-cookie-reject>Reject analytics cookies</button>
+    </div>
+  </div>
+</main>`;
+}
+
+function escapeText(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+/** @deprecated Editor-era merge — kept as no-op helpers for transitional imports. */
+export function withCookieComplianceSite<T extends { pages?: unknown }>(site: T): T {
+  return site;
+}

package/src/runtime/counter.ts

@@ -0,0 +1,2 @@
+/** Compatibility export; per-route delivery uses the shared lifecycle and scheduler. */
+export { motionJs as counterJs } from "./scroll-motion.generated.ts";

package/src/runtime/editor.ts

@@ -0,0 +1,72 @@
+/** Preview-only click-to-edit overlay (injected when ?edit=1). */
+export const editorCss = `.vitris-edit {
+  position: relative;
+  cursor: pointer;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  transition: outline-color 160ms ease;
+}
+.vitris-edit:hover,
+.vitris-edit:focus-visible,
+.vitris-edit.is-on {
+  outline-color: #0891B2;
+  z-index: 5;
+}
+.vitris-edit:has(.c-header) {
+  position: sticky;
+  top: 0;
+  z-index: 22;
+}
+#vitris-cookie-banner { display: none !important; }
+`;
+
+export const editorJs = `(() => {
+  const post = (payload) => {
+    try { parent.postMessage(Object.assign({ vitris: "edit" }, payload), location.origin); }
+    catch (_) {}
+  };
+
+  const bindOf = (el) => el && el.getAttribute("data-vitris-bind") || "";
+
+  document.addEventListener("click", (event) => {
+    const t = event.target;
+    if (!(t instanceof Element)) return;
+    const edit = t.closest(".vitris-edit");
+    if (t.closest("a, button, [data-quotes-prev], [data-quotes-next], [data-stage-prev], [data-stage-next]")) {
+      event.preventDefault();
+    }
+    if (t.closest("form")) event.preventDefault();
+    if (!edit) return;
+    event.preventDefault();
+    event.stopPropagation();
+    document.querySelectorAll(".vitris-edit.is-on").forEach((n) => n.classList.remove("is-on"));
+    edit.classList.add("is-on");
+    post({
+      bind: bindOf(edit),
+      component: edit.getAttribute("data-vitris-component") || "",
+      id: edit.getAttribute("data-vitris-id") || "",
+    });
+  }, true);
+
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    const t = event.target;
+    if (!(t instanceof Element) || !t.classList.contains("vitris-edit")) return;
+    event.preventDefault();
+    t.click();
+  });
+
+  window.addEventListener("message", (event) => {
+    if (event.origin !== location.origin) return;
+    const data = event.data;
+    if (!data || data.vitris !== "highlight") return;
+    document.querySelectorAll(".vitris-edit.is-on").forEach((n) => n.classList.remove("is-on"));
+    if (!data.bind) return;
+    const el = document.querySelector('.vitris-edit[data-vitris-bind="' + CSS.escape(data.bind) + '"]');
+    if (el) {
+      el.classList.add("is-on");
+      el.scrollIntoView({ block: "nearest", behavior: "smooth" });
+    }
+  });
+})();
+`;

package/src/runtime/experience.ts

@@ -0,0 +1,57 @@
+/** Before first paint: keep a route handoff covered, then fail open if runtime fails. */
+export function experienceArrivalBootstrap(pauseKey='vitris-experience-paused'):string {
+ return `(()=>{try{if(matchMedia('(prefers-reduced-motion:reduce)').matches||document.documentElement.dataset.motionPolicy==='off'||localStorage.getItem(${JSON.stringify(pauseKey)})==='true')return;const key='vitris-experience-handoff',raw=sessionStorage.getItem(key);sessionStorage.removeItem(key);const handoff=raw?JSON.parse(raw):null;const route=handoff&&handoff.path===location.pathname&&Date.now()-handoff.at<15000;const initial=!sessionStorage.getItem('vitris-experience-arrived');if(!route&&!initial)return;document.documentElement.dataset.experienceArrival=route?'route':'initial';window.VitrisExperienceArrival={mode:route?'route':'initial',title:route?handoff.title:null,timer:setTimeout(()=>{delete document.documentElement.dataset.experienceArrival;delete window.VitrisExperienceArrival;},3500)};}catch{}})();`;
+}
+
+/** Opt-in interaction choreography. Customer markup/styles own the composition. */
+export const experienceJs = String.raw`(()=>{
+ if(window.VitrisExperience)return;
+ let cleanup=()=>{};
+ const reduce=matchMedia('(prefers-reduced-motion:reduce)'),fine=matchMedia('(hover:hover) and (pointer:fine)');
+ const allowed=()=>!reduce.matches&&document.documentElement.dataset.motionPolicy!=='off'&&!document.hidden;
+ const clamp=(n,min,max)=>Math.max(min,Math.min(max,n));
+ function init(){
+  cleanup();const abort=new AbortController(),cancels=[];let raf=0;
+  const on=(el,event,fn,options={})=>el?.addEventListener(event,fn,{...options,signal:abort.signal});
+  const preview=document.querySelector('[data-experience-preview]'),cursor=document.querySelector('[data-experience-cursor]');
+  let active=null,mode='',last=0,target={x:0,y:0},position={x:0,y:0},cursorPosition={x:0,y:0};
+  const stop=()=>{active=null;cancelAnimationFrame(raf);raf=0;preview?.setAttribute('data-visible','false');cursor?.setAttribute('data-visible','false');};
+  function bounds(x,y){const w=preview?.offsetWidth||310,h=preview?.offsetHeight||230;return {x:clamp(x,w/2+12,innerWidth-w/2-12),y:clamp(y,h/2+12,innerHeight-h/2-12)};}
+  function paint(){if(preview)preview.style.transform='translate3d('+(position.x-(preview.offsetWidth/2))+'px,'+(position.y-(preview.offsetHeight/2))+'px,0)';if(cursor)cursor.style.transform='translate3d('+(cursorPosition.x-(cursor.offsetWidth/2))+'px,'+(cursorPosition.y-(cursor.offsetHeight/2))+'px,0)';}
+  function follow(t){if(!active||!allowed()){stop();return;}const dt=Math.min(48,t-last||16);last=t;const approach=(v,to,ms)=>v+(to-v)*(1-Math.exp(-dt/ms));position={x:approach(position.x,target.x,190),y:approach(position.y,target.y,190)};cursorPosition={x:approach(cursorPosition.x,target.x,110),y:approach(cursorPosition.y,target.y,110)};paint();if(Math.abs(position.x-target.x)+Math.abs(position.y-target.y)>.15){raf=requestAnimationFrame(follow);}else raf=0;}
+  const focusPosition=el=>{const r=el.getBoundingClientRect();return bounds(innerWidth*.72,r.top+r.height/2);};
+  function show(el,x,y,input){if(!preview||!fine.matches||!allowed()||innerWidth<=Number(preview.dataset.experienceMinWidth||1024)||el.closest('[data-view="grid"]'))return;active=el;mode=input;target=position=cursorPosition=bounds(x,y);last=0;const image=preview.querySelector('img');if(image){image.src=el.dataset.experienceImage;image.alt='';}const label=cursor?.querySelector('[data-experience-label]')||preview.querySelector('[data-experience-label]');if(label)label.textContent='View '+(el.dataset.experienceName||el.textContent.trim());paint();preview.dataset.visible='true';if(cursor)cursor.dataset.visible='true';}
+  document.querySelectorAll('[data-experience-image]').forEach(el=>{
+   on(el,'pointerenter',e=>show(el,e.clientX,e.clientY,'pointer'));
+   on(el,'pointermove',e=>{if(active!==el)return;target=bounds(e.clientX,e.clientY);if(!raf)raf=requestAnimationFrame(follow);});
+   on(el,'pointerleave',()=>{if(document.activeElement!==el)stop();});
+   on(el,'focus',()=>{const p=focusPosition(el);show(el,p.x,p.y,'keyboard');});on(el,'blur',stop);on(el,'click',stop);
+  });
+  on(window,'scroll',()=>{if(active&&mode==='keyboard'){target=position=cursorPosition=focusPosition(active);paint();}else stop();},{passive:true});on(window,'resize',stop);on(document,'visibilitychange',stop);on(reduce,'change',stop);on(fine,'change',stop);
+  const magnets=[...document.querySelectorAll('[data-experience-magnetic]')];
+  magnets.forEach(el=>{let x=0,y=0;const reset=()=>{x=y=0;el.style.transition=allowed()?'transform 1.2s cubic-bezier(.2,1.5,.5,1)':'none';el.style.transform='';};on(el,'pointermove',e=>{if(!allowed()||!fine.matches)return;const r=el.getBoundingClientRect();x=clamp((e.clientX-r.left-r.width/2+x)*.1,-8,8);y=clamp((e.clientY-r.top-r.height/2+y)*.1,-8,8);el.style.transition='transform .4s';el.style.transform='translate3d('+x+'px,'+y+'px,0)';});on(el,'pointerleave',reset);cancels.push(reset);});
+  const drifts=[...document.querySelectorAll('[data-experience-drift]')],tracks=[...document.querySelectorAll('[data-experience-marquee-speed]')];let previousY=scrollY,scrollRaf=0;
+  const settleDrift=()=>drifts.forEach(el=>{const trigger=document.getElementById(el.dataset.experienceTrigger)||el.parentElement;const r=trigger.getBoundingClientRect(),factor=Number(el.dataset.experienceDrift||.13),max=Number(el.dataset.experienceDriftMax||40);const value=allowed()&&r.bottom>0&&r.top<innerHeight?(el.dataset.experienceDriftMode==='center'?clamp((r.top-innerHeight*.5)*factor,-max,0):clamp(-r.top*factor,0,max)):0;el.style.transform=value?'translate3d(0,'+value+'px,0)':'';});
+  function sizeTracks(){tracks.forEach(el=>{const copy=el.firstElementChild;if(copy)el.style.animationDuration=(copy.getBoundingClientRect().width/Number(el.dataset.experienceMarqueeSpeed||73))+'s';});}
+  function scroll(){settleDrift();const delta=scrollY-previousY;if(Math.abs(delta)>2&&allowed())tracks.forEach(el=>{const animation=el.getAnimations()[0];if(!animation)return;const duration=Number(animation.effect.getTiming().duration);if(Number(animation.currentTime)<duration*2)animation.currentTime=Number(animation.currentTime)+duration*100;animation.updatePlaybackRate(delta>=0?1:-1);});previousY=scrollY;scrollRaf=0;}
+  on(window,'scroll',()=>{if(!scrollRaf)scrollRaf=requestAnimationFrame(scroll);},{passive:true});on(window,'resize',()=>{sizeTracks();settleDrift();});sizeTracks();document.fonts?.ready.then(()=>{if(!abort.signal.aborted)sizeTracks();});settleDrift();
+  const observer=new IntersectionObserver(entries=>entries.forEach(e=>{if(e.isIntersecting){e.target.classList.add('experience-seen');if(e.target.hasAttribute('data-experience-intro')&&allowed())e.target.querySelectorAll('[data-experience-line]').forEach((el,i)=>{const animation=el.animate([{transform:'translateY(24px)',opacity:.75},{transform:'none',opacity:1}],{duration:650,delay:Math.min(i*90,270),easing:'cubic-bezier(.2,1,.3,1)'});cancels.push(()=>animation.cancel());});observer.unobserve(e.target);}}),{threshold:.15});document.querySelectorAll('[data-experience-seam],[data-experience-intro]').forEach(el=>observer.observe(el));
+  const curtain=document.querySelector('[data-experience-transition]');let navigating=false;
+  const opening=()=>{if(allowed())document.querySelectorAll('[data-experience-opening]').forEach((el,i)=>{const a=el.animate([{transform:'translateY(32px)'},{transform:'translateY(0)'}],{duration:1000,delay:Math.min(i*60,180),easing:'cubic-bezier(.15,1,.2,1)',fill:'backwards'});cancels.push(()=>a.cancel());});};
+  const arrival=window.VitrisExperienceArrival;
+  if(arrival&&curtain){clearTimeout(arrival.timer);delete window.VitrisExperienceArrival;try{sessionStorage.setItem('vitris-experience-arrived','seen');}catch{}
+   if(allowed()){
+    const title=document.createElement('span');title.textContent=arrival.title||curtain.dataset.experienceArrival||document.title;curtain.replaceChildren(title);curtain.dataset.state='arrival-hold';curtain.style.visibility='visible';curtain.style.transform='translateY(0)';curtain.style.borderRadius='0';curtain.style.pointerEvents='auto';
+    const reveal=()=>{if(abort.signal.aborted)return;if(!allowed()){delete document.documentElement.dataset.experienceArrival;curtain.style.visibility='';curtain.style.transform='';curtain.style.borderRadius='';curtain.style.pointerEvents='';return;}opening();curtain.dataset.state='revealing';const a=curtain.animate([{transform:'translateY(0)',borderRadius:'0'},{transform:'translateY(-115%)',borderRadius:'0 0 50% 50% / 0 0 12% 12%'}],{duration:800,easing:'cubic-bezier(.65,0,.2,1)',fill:'forwards'});cancels.push(()=>a.cancel());a.finished.catch(()=>{}).finally(()=>{delete document.documentElement.dataset.experienceArrival;curtain.style.visibility='';curtain.style.transform='';curtain.style.borderRadius='';curtain.style.pointerEvents='';curtain.dataset.state='idle';a.cancel();});};
+    const timer=setTimeout(reveal,arrival.mode==='initial'?420:0);cancels.push(()=>clearTimeout(timer));
+   }else delete document.documentElement.dataset.experienceArrival;
+  }else opening();
+  const arrivalSettled=()=>new Promise(resolve=>{if(!document.documentElement.dataset.experienceArrival){resolve();return;}let timer;const done=()=>{observer.disconnect();clearTimeout(timer);abort.signal.removeEventListener('abort',done);resolve();};const observer=new MutationObserver(()=>{if(!document.documentElement.dataset.experienceArrival)done();});observer.observe(document.documentElement,{attributes:true,attributeFilter:['data-experience-arrival']});timer=setTimeout(done,3500);abort.signal.addEventListener('abort',done,{once:true});});
+  on(document,'click',async e=>{const a=e.target.closest('a[href]');if(!curtain||!a||e.defaultPrevented||e.button!==0||e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||a.hasAttribute('download')||a.target&&a.target!=='_self'||!allowed())return;const url=new URL(a.href,location.href);if(url.origin!==location.origin||url.pathname===location.pathname||url.hash||!/^https?:$/.test(url.protocol))return;e.preventDefault();if(navigating)return;navigating=true;await arrivalSettled();if(abort.signal.aborted)return;if(!allowed()){location.assign(url.href);return;}document.dispatchEvent(new Event('vitris:before-navigate'));const label=document.createElement('span');label.textContent=a.dataset.experienceTitle||a.dataset.chapterName||a.textContent.trim().split('\n')[0];label.style.opacity='0';curtain.replaceChildren(label);curtain.dataset.state='covering';curtain.style.visibility='visible';curtain.style.pointerEvents='auto';try{const cover=curtain.animate([{transform:'translateY(115%)',borderRadius:'50% 50% 0 0 / 12% 12% 0 0'},{transform:'translateY(0)',borderRadius:'0'}],{duration:500,easing:'cubic-bezier(.7,0,.9,.4)',fill:'forwards'});cancels.push(()=>cover.cancel());await cover.finished;const title=label.animate([{opacity:0,transform:'translateY(20px)'},{opacity:1,transform:'none'}],{duration:650,fill:'forwards'});cancels.push(()=>title.cancel());await new Promise(resolve=>setTimeout(resolve,430));if(curtain.hasAttribute('data-experience-arrival')&&allowed())try{sessionStorage.setItem('vitris-experience-handoff',JSON.stringify({path:url.pathname,title:label.textContent,at:Date.now()}));}catch{}}catch{}finally{location.assign(url.href);}});
+  const settlePolicy=()=>{if(!allowed()){stop();magnets.forEach(el=>{el.style.transition='none';el.style.transform='';});document.querySelectorAll('[data-experience-opening],[data-experience-line]').forEach(el=>el.getAnimations().forEach(a=>a.cancel()));if(curtain){curtain.getAnimations().forEach(a=>a.cancel());delete document.documentElement.dataset.experienceArrival;curtain.style.visibility='';curtain.style.transform='';curtain.style.borderRadius='';curtain.style.pointerEvents='';}}settleDrift();};
+  const policy=new MutationObserver(settlePolicy);policy.observe(document.documentElement,{attributes:true,attributeFilter:['data-motion-policy']});on(reduce,'change',settlePolicy);on(fine,'change',()=>{magnets.forEach(el=>{el.style.transition='none';el.style.transform='';});});on(document,'visibilitychange',settlePolicy);
+  cleanup=()=>{stop();cancelAnimationFrame(scrollRaf);abort.abort();observer.disconnect();policy.disconnect();cancels.forEach(fn=>fn());drifts.forEach(el=>el.style.transform='');delete document.documentElement.dataset.experienceArrival;if(curtain){curtain.style.visibility='';curtain.style.pointerEvents='';curtain.style.transform='';curtain.style.borderRadius='';}};
+ }
+ window.VitrisExperience={init,dispose:()=>cleanup()};init();
+ addEventListener('pagehide',()=>cleanup());addEventListener('pageshow',e=>{if(e.persisted)init();});
+})();`;

package/src/runtime/header.ts

@@ -0,0 +1,46 @@
+/** Sticky header scroll state + mobile drawer. */
+
+export const headerJs = `(() => {
+  const headers = [...document.querySelectorAll("[data-island=\\"header\\"]")];
+  if (!headers.length) return;
+
+  const onScroll = () => {
+    const scrolled = window.scrollY > 8;
+    for (const el of headers) el.classList.toggle("is-scrolled", scrolled);
+  };
+  onScroll();
+  window.addEventListener("scroll", onScroll, { passive: true });
+
+  for (const root of headers) {
+    const toggle = root.querySelector("[data-nav-toggle]");
+    const drawer = root.querySelector(".nav-drawer");
+    const panel = root.querySelector(".nav-drawer__panel");
+    if (!toggle || !drawer || !panel) continue;
+
+    const close = () => {
+      drawer.classList.remove("is-open");
+      toggle.setAttribute("aria-expanded", "false");
+      document.body.style.overflow = "";
+    };
+    const open = () => {
+      drawer.classList.add("is-open");
+      toggle.setAttribute("aria-expanded", "true");
+      document.body.style.overflow = "hidden";
+      const focusable = panel.querySelector("a,button,[tabindex]:not([tabindex='-1'])");
+      if (focusable instanceof HTMLElement) focusable.focus();
+    };
+
+    toggle.addEventListener("click", () => {
+      if (drawer.classList.contains("is-open")) close();
+      else open();
+    });
+    drawer.addEventListener("click", (e) => {
+      if (e.target === drawer) close();
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") close();
+    });
+    panel.querySelectorAll("a").forEach((a) => a.addEventListener("click", close));
+  }
+})();
+`;

package/src/runtime/leads.ts

@@ -0,0 +1,102 @@
+/** One shared client for generated and preserved contact forms. Lazy challenge keeps resting layouts intact. */
+export const leadsJs = `(() => {
+  let challengeScript;
+  const loadChallenge = () => {
+    if (window.turnstile) return Promise.resolve(window.turnstile);
+    if (!challengeScript) challengeScript = new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit';
+      script.onload = () => window.turnstile ? resolve(window.turnstile) : reject(new Error('challenge_unavailable'));
+      script.onerror = () => { script.remove(); challengeScript = null; reject(new Error('challenge_unavailable')); };
+      document.head.append(script);
+    });
+    return challengeScript;
+  };
+  document.querySelectorAll('form[data-lead-form][data-vitris-enhanced]').forEach(form => {
+    // Named controls can shadow native form properties and methods.
+    const data = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'dataset').get.call(form);
+    const setAttribute = Element.prototype.setAttribute.bind(form);
+    const removeAttribute = Element.prototype.removeAttribute.bind(form);
+    const querySelectorAll = Element.prototype.querySelectorAll.bind(form);
+    if (data.vitrisInitialized) return;
+    data.vitrisInitialized = '1';
+    let submitting = false, key, signature, widget, token = '', challengeResolve, challengeReject, completedSignature;
+    const note = document.createElement('p'); note.className = 'c-lead-status';
+    note.setAttribute('role', 'status'); note.setAttribute('aria-live', 'polite'); note.tabIndex = -1;
+    note.style.display = 'none'; Element.prototype.after.call(form, note);
+    const say = (message, error = false) => {
+      note.style.display = ''; note.setAttribute('role', error ? 'alert' : 'status'); note.textContent = message;
+      if (error) note.focus();
+    };
+    let challengeBox;
+    const challenge = async () => {
+      const api = await loadChallenge();
+      if (challengeBox) challengeBox.style.display = '';
+      if (token) return token;
+      if (!challengeBox) { challengeBox = document.createElement('div'); challengeBox.className = 'vitris-challenge'; challengeBox.setAttribute('aria-label', 'Security verification'); Element.prototype.append.call(form, challengeBox); }
+      return new Promise((resolve, reject) => {
+        challengeResolve = resolve; challengeReject = reject;
+        if (widget !== undefined) api.reset(widget);
+        else widget = api.render(challengeBox, {
+          sitekey: data.vitrisSitekey, action: data.vitrisAction,
+          callback: value => { token = value; challengeResolve?.(value); },
+          'expired-callback': () => { token = ''; if (submitting) say('Security check expired. Please submit again.', true); challengeReject?.(new Error('challenge_expired')); },
+          'timeout-callback': () => { token = ''; challengeReject?.(new Error('challenge_expired')); },
+          'error-callback': () => { token = ''; challengeReject?.(new Error('challenge_unavailable')); }
+        });
+      });
+    };
+    EventTarget.prototype.addEventListener.call(form, 'submit', async event => {
+      if (event.defaultPrevented) return;
+      event.preventDefault(); if (submitting) return;
+      if (!HTMLFormElement.prototype.reportValidity.call(form)) return;
+      const values = new URLSearchParams(new FormData(form));
+      values.delete('cf-turnstile-response'); values.delete('idempotency_key');
+      const current = values.toString();
+      if (current === completedSignature) { say('Your message was already accepted.'); return; }
+      if (!data.vitrisForm || !data.vitrisSitekey) { say('This preview does not send messages. Please use the listed contact details.', true); return; }
+      if (current !== signature) { key = crypto.randomUUID(); signature = current; }
+      submitting = true;
+      const controls = [...querySelectorAll('button[type="submit"], button:not([type]), input[type="submit"], [data-vitrisid="emailSendButton"]')];
+      const prior = controls.map(c => c.disabled);
+      controls.forEach(c => { c.disabled = true; c.setAttribute('aria-disabled', 'true'); }); setAttribute('aria-busy', 'true');
+      let timeout;
+      try {
+        say('Please complete the security check.');
+        const challengeTimeout = new Promise((_, reject) => { timeout = setTimeout(() => reject(new Error('challenge_unavailable')), 120000); });
+        const verified = await Promise.race([challenge(), challengeTimeout]);
+        clearTimeout(timeout);
+        values.set('cf-turnstile-response', verified); values.set('idempotency_key', key);
+        say('Sending your inquiry…');
+        const controller = new AbortController();
+        timeout = setTimeout(() => controller.abort(), Math.max(100, Math.min(30000, Number(data.leadTimeoutMs) || 10000)));
+        const response = await fetch(Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, 'action').get.call(form), { method:'POST', body:values, headers:{accept:'application/json'}, signal:controller.signal, credentials:'omit' });
+        const result = response.headers.get('content-type')?.includes('application/json') ? await response.json() : null;
+        if (!response.ok || result?.ok !== true) throw new Error(result?.error || 'backend_unavailable');
+        say(result.mode === 'test' ? 'Test message accepted. No customer email will be sent.' : 'Message accepted. Your inquiry has been saved.');
+        completedSignature = current;
+        if (challengeBox) challengeBox.style.display = 'none';
+      } catch (error) {
+        const messages = {
+          challenge_required:'Please complete the security check and try again.',
+          challenge_invalid:'Security check expired or was invalid. Please try again.',
+          challenge_replayed:'Security check was already used. Please try again.',
+          challenge_expired:'Security check expired. Please try again.',
+          challenge_unavailable:'Security check is unavailable. Please try again or use the listed contact details.',
+          rate_limited:'Too many attempts. Please wait ten minutes and try again.',
+          validation_error:'Please check your form fields and try again.',
+          form_disabled:'This form is currently unavailable. Please use the listed contact details.',
+          configuration_unavailable:'This form is currently unavailable. Please use the listed contact details.',
+          idempotency_conflict:'This request changed during a retry. Please edit your message and try again.'
+        };
+        say(error?.name === 'AbortError' ? 'The request timed out. Your message is still here; please try again.' : (messages[error?.message] || 'Acceptance could not be confirmed. Your details are still here; please try again or use the listed contact options.'), true);
+        if (challengeBox) challengeBox.style.display = '';
+      } finally {
+        clearTimeout(timeout); token = ''; challengeResolve = null; challengeReject = null;
+        if (window.turnstile && widget !== undefined) window.turnstile.reset(widget);
+        controls.forEach((c, i) => { c.disabled = prior[i]; c.removeAttribute('aria-disabled'); });
+        removeAttribute('aria-busy'); submitting = false;
+      }
+    });
+  });
+})();`;

package/src/runtime/lightbox.ts

@@ -0,0 +1,26 @@
+/** Gallery lightbox via <dialog>. */
+
+export const lightboxJs = `(() => {
+  const roots = [...document.querySelectorAll("[data-island=\\"lightbox\\"]")];
+  for (const root of roots) {
+    const dialog = root.querySelector("dialog");
+    const img = dialog?.querySelector("img");
+    if (!(dialog instanceof HTMLDialogElement) || !(img instanceof HTMLImageElement)) continue;
+
+    root.querySelectorAll("[data-lightbox-src]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const src = btn.getAttribute("data-lightbox-src");
+        const alt = btn.getAttribute("data-lightbox-alt") || "";
+        if (!src) return;
+        img.src = src;
+        img.alt = alt;
+        dialog.showModal();
+      });
+    });
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) dialog.close();
+    });
+    dialog.querySelector("[data-lightbox-close]")?.addEventListener("click", () => dialog.close());
+  }
+})();
+`;

package/src/runtime/reveal.ts

@@ -0,0 +1,2 @@
+/** Compatibility export. Current builds use one per-route hashed motion asset. */
+export { motionJs as revealJs } from './scroll-motion.generated.ts';

package/src/runtime/scroll-motion.controller.js

@@ -0,0 +1,100 @@
+// Engine-independent lifecycle and authoring contract. Adapter selected by the matched benchmark.
+export function bootMotion(adapter) {
+  window.VitrisMotion?.dispose();
+  let cleanup = () => {}, states = new Map(), watching=false;
+  const reduce = matchMedia('(prefers-reduced-motion: reduce)'), mobile = matchMedia('(max-width: 599px)');
+  const completed=new WeakSet(), onceEffects=['count','text','sequence','draw'], entrances=['entrance','stagger',...onceEffects];
+  const number = (el, key, fallback) => Number(el.getAttribute('data-motion-' + key) ?? fallback);
+  const init = () => {
+    if(!watching){reduce.addEventListener('change',init);watching=true;}
+    for(const [id,state]of states)if(onceEffects.includes(state.effect)&&state.phase==='playing'){const el=document.getElementById(id);if(el)completed.add(el);}
+    cleanup(); states = new Map();
+    const cancels = [], handlers = [], animations = new Map(); let disposed = false;
+    const listen = (target, name, fn, options) => { target.addEventListener(name, fn, options); handlers.push(() => target.removeEventListener(name, fn, options)); };
+    const finish = el => { animations.get(el)?.(); animations.delete(el); el.classList.add('is-in'); const state = states.get(el.id); if (state) state.phase = 'complete'; };
+    cleanup = () => { disposed = true; for (const cancel of cancels) cancel(); for (const cancel of animations.values()) cancel(); animations.clear(); for (const remove of handlers) remove(); };
+    if (document.documentElement.dataset.motionPolicy==='off' || reduce.matches || !window.IntersectionObserver || !Element.prototype.animate) return;
+    try {
+      const enabled=document.documentElement.dataset.motionPolicy==='enabled';
+      const selector=enabled?'[data-motion],[data-reveal],[data-island="counter"] [data-count-to]':'[data-reveal],[data-island="counter"] [data-count-to]';
+      const roots = [...document.querySelectorAll(selector)];
+      const arm = (el,state) => {
+        state.run = adapter.enter(state.children,state.options,()=>{if(!disposed){state.phase='complete';completed.add(el);el.classList.add('is-in');}},true);
+        animations.set(el,state.run.cancel);
+      };
+      const io = new IntersectionObserver(entries => {
+        try {
+        for (const entry of entries) {
+          const el = entry.target, state = states.get(el.id);
+          if (!state || state.static) continue;
+          if (entry.isIntersecting && (state.effect!=='count'||entry.intersectionRatio>=.35) && state.phase === 'pending') {
+            state.phase = 'playing';
+            if (!state.run) arm(el,state);
+            state.run.play();
+            if (!state.repeat) io.unobserve(el);
+          } else if (!entry.isIntersecting && state.phase==='playing' && onceEffects.includes(state.effect)) { completed.add(el);finish(el);
+          } else if (!entry.isIntersecting && state.repeat && state.phase === 'complete') {
+            finish(el); state.phase = 'pending'; state.run=null; arm(el,state);
+          }
+        }
+        } catch(error) { cleanup(); states.clear(); console.warn('Motion playback failed; static content restored',error); }
+      }, { threshold: [0,.35], rootMargin: '0px 0px -10% 0px' });
+      cancels.push(() => io.disconnect());
+      for (const el of roots) {
+        if(!el.id)el.id=`motion-runtime-${roots.indexOf(el)}`;
+        const effect = (enabled && el.getAttribute('data-motion')) || (el.hasAttribute('data-count-to')?'count':el.hasAttribute('data-reveal-stagger') ? 'stagger' : 'entrance');
+        const rect = el.getBoundingClientRect(), style = getComputedStyle(el);
+        const nested = el.parentElement?.closest(selector);
+        const isStatic = effect === 'story' || !!nested || ['MAIN','HEADER','FOOTER','BODY','HTML'].includes(el.tagName) || /(?:^|\s)c-(?:site-)?(?:hero|header|footer)(?:\s|$)/.test(el.className) || rect.height > innerHeight * 2 || style.position === 'sticky' || style.position === 'fixed' || (mobile.matches && (el.getAttribute('data-motion-mobile') === 'static' || (effect === 'drift' && !el.hasAttribute('data-motion-mobile'))));
+        const childSelector=effect==='text'?'[data-motion-word]':effect==='draw'?'[data-motion-path]':enabled?'[data-motion-child],[data-reveal-child]':'[data-reveal-child]';
+        const marked = ['stagger','text','sequence','draw'].includes(effect) ? [...el.querySelectorAll(childSelector)].filter(child => child.closest(selector) === el && (effect!=='stagger' || !child.hasAttribute('data-motion-child') || child.parentElement===el)) : [];
+        const children=marked.length?marked:[el]; // Legacy zero-child groups retain their wrapper entrance; unmarked siblings of marked groups stay quiet.
+        const options = { effect, treatment:el.getAttribute('data-motion-treatment')||'phrase', duration: number(el,'duration', effect==='count'?900:Number.parseFloat(style.getPropertyValue('--reveal-dur')) || 550), delay: number(el,'delay',0), distance: number(el,'distance',effect==='text'?4:Number.parseFloat(style.getPropertyValue('--reveal-dist')) || 16), stagger: number(el,'stagger',70), from: el.getAttribute('data-motion-from') || el.getAttribute('data-reveal-from') || 'up', ease: el.getAttribute('data-motion-ease') || 'editorial' };
+        const state = { effect, static: isStatic, phase: 'pending', children, options, repeat: el.getAttribute('data-motion-replay') === 'repeat', progress: null };
+        states.set(el.id, state);
+        if (isStatic || (onceEffects.includes(effect)&&completed.has(el)) || (entrances.includes(effect) && (rect.bottom<=0 || location.hash.slice(1) === el.id || el.contains(document.activeElement))) || (['entrance','stagger','text','sequence'].includes(effect)&&rect.top<innerHeight)) { state.static = true; finish(el); continue; }
+        if (entrances.includes(effect)) io.observe(el);
+        else {
+          const trigger = document.getElementById(el.getAttribute('data-motion-trigger'));
+          if (!trigger) { state.static = true; continue; }
+          state.phase = 'linked';
+          const start = number(el,'range-start',0), end = number(el,'range-end',1);
+          state.progress = () => { const r = trigger.getBoundingClientRect(); return Math.max(0, Math.min(1, ((innerHeight-r.top)/(innerHeight+r.height)-start)/(end-start))); };
+          const linked = adapter.link(el, trigger, effect, { ...options, start, end }, state.progress);
+          animations.set(el, linked.cancel);
+          cancels.push(linked.cancel);
+        }
+      }
+      // Only after the observer and all targets validate do offscreen entrance states become hidden.
+      for(const el of roots){const state=states.get(el.id);if(state&&!state.static&&entrances.includes(state.effect))arm(el,state);}
+      const revealFocused = event => { for (const el of roots) if (el === event.target || el.contains(event.target)) finish(el); };
+      const revealAnchor = () => { const el = document.getElementById(decodeURIComponent(location.hash.slice(1))); if (el) revealFocused({ target: el }); };
+      listen(document, 'focusin', revealFocused); listen(window, 'hashchange', revealAnchor); revealAnchor();
+      listen(window, 'pageshow', event => { if (event.persisted) init(); });
+      listen(mobile, 'change', init);
+      // No cached line geometry: viewport/font changes finish copy in its natural responsive flow.
+      const readable=()=>{for(const el of roots){const state=states.get(el.id);if(state&&['text','sequence'].includes(state.effect)){completed.add(el);finish(el);}}};
+      listen(window,'resize',readable);
+      // FontFaceSet.ready can resolve before loadingdone is delivered. Pending
+      // offscreen copy has no cached line geometry and must retain its first
+      // visit choreography; finish only text already playing or completed.
+      listen(document.fonts,'loadingdone',()=>{for(const el of roots){const state=states.get(el.id);if(state&&state.phase!=='pending'&&['text','sequence'].includes(state.effect)){completed.add(el);finish(el);}}});
+    } catch (error) { cleanup(); states.clear(); console.warn('Motion initialization left static content readable', error); }
+  };
+  let startCanceled=false,startTimer=0;
+  const start=()=>{
+    let started=false;
+    const activate=()=>{if(started||startCanceled)return;started=true;clearTimeout(startTimer);init();};
+    // Preserve the static document while initial fonts settle. Initializing
+    // sooner lets loadingdone permanently finish every offscreen text/sequence.
+    startTimer=setTimeout(activate,1500);
+    const ready=document.fonts?.status==='loading'?document.fonts.ready:Promise.resolve();
+    ready.then(activate,activate);
+  };
+  window.VitrisMotion = { version: 1, engine: adapter.name, init, dispose() { startCanceled=true;clearTimeout(startTimer);document.removeEventListener('DOMContentLoaded',start);cleanup();states=new Map();reduce.removeEventListener('change',init);watching=false; }, inspect(id) { const s = states.get(id); return s ? { effect:s.effect, static:s.static, phase:s.phase, progress:typeof s.progress === 'function' ? s.progress() : null } : { static:true,phase:'static',progress:null }; } };
+  window.VitrisCounters={dispose(){window.VitrisMotion.dispose();}};
+  // Classic defer can execute before module islands. Their initial UI must settle before geometry reads.
+  // Late host loads still initialize immediately; failures always leave the static document readable.
+  if (document.readyState==='complete' || performance.getEntriesByType('navigation')[0]?.domContentLoadedEventStart>0) start();
+  else document.addEventListener('DOMContentLoaded',start,{once:true});
+}

package/src/runtime/scroll-motion.count.js

@@ -0,0 +1,21 @@
+// One demand-driven frame for all active counters. Canonical author text stays in the accessibility tree.
+const active=new Set(); let frame=0;
+function tick(now){frame=0;for(const item of [...active])item.update(now);if(active.size)frame=requestAnimationFrame(tick);}
+export function countPresentation(el,options,complete){
+  const final=el.textContent, legacy=!el.hasAttribute('data-motion');
+  const value=Number(el.getAttribute(legacy?'data-count-to':'data-motion-value'));
+  const match=final.match(/[-+]?\d[\d,]*(?:\.\d+)?/);
+  if(!Number.isFinite(value)||!match||el.children.length)return {play(){complete();},cancel(){}};
+  const before=legacy?final.slice(0,match.index):el.getAttribute('data-motion-prefix')||'';
+  const after=legacy?final.slice(match.index+match[0].length):el.getAttribute('data-motion-suffix')||'';
+  const decimals=legacy?(match[0].split('.')[1]?.length||0):Number(el.getAttribute('data-motion-decimals')||0);
+  const grouped=legacy?match[0].includes(','):el.getAttribute('data-motion-group')!=='false';
+  const plus=legacy?match[0].startsWith('+'):el.getAttribute('data-motion-sign')==='always';
+  const format=n=>before+(plus&&n>=0?'+':'')+n.toLocaleString('en-US',{minimumFractionDigits:decimals,maximumFractionDigits:decimals,useGrouping:grouped})+after;
+  if(!legacy&&format(value)!==final)return {play(){complete();},cancel(){}};
+  let start=null,canonical=null,visual=null,stopped=false;
+  const originalStyle=el.getAttribute('style');
+  const restore=()=>{active.delete(item);if(!active.size){cancelAnimationFrame(frame);frame=0;}if(canonical){el.replaceChildren(...canonical.childNodes);canonical=null;visual=null;if(originalStyle===null)el.removeAttribute('style');else el.setAttribute('style',originalStyle);}};
+  const item={update(now){if(start===null)start=now;const p=Math.min(1,(now-start)/options.duration);if(p>=1){restore();stopped=true;complete();return;}visual.textContent=format(value*(1-Math.pow(1-p,3)));}};
+  return {play(){if(stopped||canonical)return;canonical=document.createElement('span');canonical.style.opacity='0';canonical.append(...el.childNodes);visual=document.createElement('span');visual.setAttribute('aria-hidden','true');visual.setAttribute('data-motion-visual','');visual.style.cssText='position:absolute;inset:0;user-select:none;pointer-events:none;white-space:inherit';visual.textContent=format(0);el.style.position='relative';el.style.display='inline-block';el.append(canonical,visual);active.add(item);if(!frame)frame=requestAnimationFrame(tick);},cancel(){stopped=true;restore();}};
+}

package/src/runtime/scroll-motion.generated.ts

@@ -0,0 +1,5 @@
+// Generated by scripts/build-motion-runtime.mjs. Rebuild from the recorded engine decision.
+export const motionEngine = "vanilla";
+export const motionAssetHref = "/motion-465c0e1b6d85.js";
+export const motionAssetHash = "465c0e1b6d851c4d2cb310d9b41a2bbd533728b4ab53910de78058d169ee7bbe";
+export const motionJs = "(()=>{function W(a){window.VitrisMotion?.dispose();let n=()=>{},r=new Map,p=!1,u=matchMedia(\"(prefers-reduced-motion: reduce)\"),c=matchMedia(\"(max-width: 599px)\"),l=new WeakSet,b=[\"count\",\"text\",\"sequence\",\"draw\"],m=[\"entrance\",\"stagger\",...b],h=(o,s,w)=>Number(o.getAttribute(\"data-motion-\"+s)??w),v=()=>{p||(u.addEventListener(\"change\",v),p=!0);for(let[i,g]of r)if(b.includes(g.effect)&&g.phase===\"playing\"){let A=document.getElementById(i);A&&l.add(A)}n(),r=new Map;let o=[],s=[],w=new Map,I=!1,M=(i,g,A,$)=>{i.addEventListener(g,A,$),s.push(()=>i.removeEventListener(g,A,$))},L=i=>{w.get(i)?.(),w.delete(i),i.classList.add(\"is-in\");let g=r.get(i.id);g&&(g.phase=\"complete\")};if(n=()=>{I=!0;for(let i of o)i();for(let i of w.values())i();w.clear();for(let i of s)i()},!(document.documentElement.dataset.motionPolicy===\"off\"||u.matches||!window.IntersectionObserver||!Element.prototype.animate))try{let i=document.documentElement.dataset.motionPolicy===\"enabled\",g=i?'[data-motion],[data-reveal],[data-island=\"counter\"] [data-count-to]':'[data-reveal],[data-island=\"counter\"] [data-count-to]',A=[...document.querySelectorAll(g)],$=(e,t)=>{t.run=a.enter(t.children,t.options,()=>{I||(t.phase=\"complete\",l.add(e),e.classList.add(\"is-in\"))},!0),w.set(e,t.run.cancel)},O=new IntersectionObserver(e=>{try{for(let t of e){let x=t.target,d=r.get(x.id);!d||d.static||(t.isIntersecting&&(d.effect!==\"count\"||t.intersectionRatio>=.35)&&d.phase===\"pending\"?(d.phase=\"playing\",d.run||$(x,d),d.run.play(),d.repeat||O.unobserve(x)):!t.isIntersecting&&d.phase===\"playing\"&&b.includes(d.effect)?(l.add(x),L(x)):!t.isIntersecting&&d.repeat&&d.phase===\"complete\"&&(L(x),d.phase=\"pending\",d.run=null,$(x,d)))}}catch(t){n(),r.clear(),console.warn(\"Motion playback failed; static content restored\",t)}},{threshold:[0,.35],rootMargin:\"0px 0px -10% 0px\"});o.push(()=>O.disconnect());for(let e of A){e.id||(e.id=`motion-runtime-${A.indexOf(e)}`);let t=i&&e.getAttribute(\"data-motion\")||(e.hasAttribute(\"data-count-to\")?\"count\":e.hasAttribute(\"data-reveal-stagger\")?\"stagger\":\"entrance\"),x=e.getBoundingClientRect(),d=getComputedStyle(e),K=e.parentElement?.closest(g),R=t===\"story\"||!!K||[\"MAIN\",\"HEADER\",\"FOOTER\",\"BODY\",\"HTML\"].includes(e.tagName)||/(?:^|\\s)c-(?:site-)?(?:hero|header|footer)(?:\\s|$)/.test(e.className)||x.height>innerHeight*2||d.position===\"sticky\"||d.position===\"fixed\"||c.matches&&(e.getAttribute(\"data-motion-mobile\")===\"static\"||t===\"drift\"&&!e.hasAttribute(\"data-motion-mobile\")),Q=t===\"text\"?\"[data-motion-word]\":t===\"draw\"?\"[data-motion-path]\":i?\"[data-motion-child],[data-reveal-child]\":\"[data-reveal-child]\",V=[\"stagger\",\"text\",\"sequence\",\"draw\"].includes(t)?[...e.querySelectorAll(Q)].filter(S=>S.closest(g)===e&&(t!==\"stagger\"||!S.hasAttribute(\"data-motion-child\")||S.parentElement===e)):[],Z=V.length?V:[e],B={effect:t,treatment:e.getAttribute(\"data-motion-treatment\")||\"phrase\",duration:h(e,\"duration\",t===\"count\"?900:Number.parseFloat(d.getPropertyValue(\"--reveal-dur\"))||550),delay:h(e,\"delay\",0),distance:h(e,\"distance\",t===\"text\"?4:Number.parseFloat(d.getPropertyValue(\"--reveal-dist\"))||16),stagger:h(e,\"stagger\",70),from:e.getAttribute(\"data-motion-from\")||e.getAttribute(\"data-reveal-from\")||\"up\",ease:e.getAttribute(\"data-motion-ease\")||\"editorial\"},C={effect:t,static:R,phase:\"pending\",children:Z,options:B,repeat:e.getAttribute(\"data-motion-replay\")===\"repeat\",progress:null};if(r.set(e.id,C),R||b.includes(t)&&l.has(e)||m.includes(t)&&(x.bottom<=0||location.hash.slice(1)===e.id||e.contains(document.activeElement))||[\"entrance\",\"stagger\",\"text\",\"sequence\"].includes(t)&&x.top<innerHeight){C.static=!0,L(e);continue}if(m.includes(t))O.observe(e);else{let S=document.getElementById(e.getAttribute(\"data-motion-trigger\"));if(!S){C.static=!0;continue}C.phase=\"linked\";let T=h(e,\"range-start\",0),H=h(e,\"range-end\",1);C.progress=()=>{let U=S.getBoundingClientRect();return Math.max(0,Math.min(1,((innerHeight-U.top)/(innerHeight+U.height)-T)/(H-T)))};let Y=a.link(e,S,t,{...B,start:T,end:H},C.progress);w.set(e,Y.cancel),o.push(Y.cancel)}}for(let e of A){let t=r.get(e.id);t&&!t.static&&m.includes(t.effect)&&$(e,t)}let D=e=>{for(let t of A)(t===e.target||t.contains(e.target))&&L(t)},P=()=>{let e=document.getElementById(decodeURIComponent(location.hash.slice(1)));e&&D({target:e})};M(document,\"focusin\",D),M(window,\"hashchange\",P),P(),M(window,\"pageshow\",e=>{e.persisted&&v()}),M(c,\"change\",v),M(window,\"resize\",()=>{for(let e of A){let t=r.get(e.id);t&&[\"text\",\"sequence\"].includes(t.effect)&&(l.add(e),L(e))}}),M(document.fonts,\"loadingdone\",()=>{for(let e of A){let t=r.get(e.id);t&&t.phase!==\"pending\"&&[\"text\",\"sequence\"].includes(t.effect)&&(l.add(e),L(e))}})}catch(i){n(),r.clear(),console.warn(\"Motion initialization left static content readable\",i)}},f=!1,y=0,E=()=>{let o=!1,s=()=>{o||f||(o=!0,clearTimeout(y),v())};y=setTimeout(s,1500),(document.fonts?.status===\"loading\"?document.fonts.ready:Promise.resolve()).then(s,s)};window.VitrisMotion={version:1,engine:a.name,init:v,dispose(){f=!0,clearTimeout(y),document.removeEventListener(\"DOMContentLoaded\",E),n(),r=new Map,u.removeEventListener(\"change\",v),p=!1},inspect(o){let s=r.get(o);return s?{effect:s.effect,static:s.static,phase:s.phase,progress:typeof s.progress==\"function\"?s.progress():null}:{static:!0,phase:\"static\",progress:null}}},window.VitrisCounters={dispose(){window.VitrisMotion.dispose()}},document.readyState===\"complete\"||performance.getEntriesByType(\"navigation\")[0]?.domContentLoadedEventStart>0?E():document.addEventListener(\"DOMContentLoaded\",E,{once:!0})}var q=new Set,z=0;function X(a){z=0;for(let n of[...q])n.update(a);q.size&&(z=requestAnimationFrame(X))}function j(a,n,r){let p=a.textContent,u=!a.hasAttribute(\"data-motion\"),c=Number(a.getAttribute(u?\"data-count-to\":\"data-motion-value\")),l=p.match(/[-+]?\\d[\\d,]*(?:\\.\\d+)?/);if(!Number.isFinite(c)||!l||a.children.length)return{play(){r()},cancel(){}};let b=u?p.slice(0,l.index):a.getAttribute(\"data-motion-prefix\")||\"\",m=u?p.slice(l.index+l[0].length):a.getAttribute(\"data-motion-suffix\")||\"\",h=u?l[0].split(\".\")[1]?.length||0:Number(a.getAttribute(\"data-motion-decimals\")||0),v=u?l[0].includes(\",\"):a.getAttribute(\"data-motion-group\")!==\"false\",f=u?l[0].startsWith(\"+\"):a.getAttribute(\"data-motion-sign\")===\"always\",y=i=>b+(f&&i>=0?\"+\":\"\")+i.toLocaleString(\"en-US\",{minimumFractionDigits:h,maximumFractionDigits:h,useGrouping:v})+m;if(!u&&y(c)!==p)return{play(){r()},cancel(){}};let E=null,o=null,s=null,w=!1,I=a.getAttribute(\"style\"),M=()=>{q.delete(L),q.size||(cancelAnimationFrame(z),z=0),o&&(a.replaceChildren(...o.childNodes),o=null,s=null,I===null?a.removeAttribute(\"style\"):a.setAttribute(\"style\",I))},L={update(i){E===null&&(E=i);let g=Math.min(1,(i-E)/n.duration);if(g>=1){M(),w=!0,r();return}s.textContent=y(c*(1-Math.pow(1-g,3)))}};return{play(){w||o||(o=document.createElement(\"span\"),o.style.opacity=\"0\",o.append(...a.childNodes),s=document.createElement(\"span\"),s.setAttribute(\"aria-hidden\",\"true\"),s.setAttribute(\"data-motion-visual\",\"\"),s.style.cssText=\"position:absolute;inset:0;user-select:none;pointer-events:none;white-space:inherit\",s.textContent=y(0),a.style.position=\"relative\",a.style.display=\"inline-block\",a.append(o,s),q.add(L),z||(z=requestAnimationFrame(X)))},cancel(){w=!0,M()}}}var _={editorial:\"cubic-bezier(.22,1,.36,1)\",gentle:\"cubic-bezier(.25,.1,.25,1)\",linear:\"linear\"},G=a=>{let n=getComputedStyle(a).transform;return n===\"none\"?\"\":n},F=new Set,N=0,ee=()=>{N=0;let a=[...F].filter(n=>n.active||n.dirty).map(n=>[n,n.progress()]);for(let[n,r]of a)n.write(r),n.dirty=!1},k=()=>{N||(N=requestAnimationFrame(ee))},J={name:\"vanilla\",enter(a,n,r,p=!1){if(n.effect===\"count\")return j(a[0],n,r);let u=a.map((c,l)=>{let b=G(c),m=getComputedStyle(c).opacity,h=[\"left\",\"right\"].includes(n.from)?\"X\":\"Y\",v=[\"down\",\"left\"].includes(n.from)?-1:1,f={opacity:0,transform:`${b} translate${h}(${v*n.distance}px)`},y={opacity:m,transform:b||\"none\"};if(n.effect===\"text\"&&n.treatment===\"mask\"&&(f.clipPath=\"inset(0 0 100% 0)\",y.clipPath=\"inset(0 0 0% 0)\"),n.effect===\"sequence\"&&c.getAttribute(\"data-motion-role\")===\"image\"&&(f={opacity:m,transform:`${b} scale(1.015)`},y={opacity:m,transform:b||\"none\"}),n.effect===\"draw\"){let o=c.getTotalLength?.()||1;f={strokeDasharray:`${o} ${o}`,strokeDashoffset:o},y={strokeDasharray:`${o} ${o}`,strokeDashoffset:0}}let E=c.animate([f,y],{duration:n.duration,delay:Math.min(300,n.delay+l*n.stagger),easing:_[n.ease],fill:\"both\"});return p&&E.pause(),E});return Promise.all(u.map(c=>c.finished)).then(()=>{for(let c of u)c.cancel();r()}).catch(()=>{}),{play(){for(let c of u)c.play()},cancel(){for(let c of u)c.cancel()}}},link(a,n,r,p,u){let c=G(a),l=f=>r===\"drift\"?`${c} translateY(${p.distance*(2*f-1)}px)`:`${c} scaleX(${f})`;try{if(window.ViewTimeline){let f=new ViewTimeline({subject:n,axis:\"block\",inset:\"0px\"}),y=a.animate([{transform:l(0)},{transform:l(1)}],{timeline:f,rangeStart:`cover ${p.start*100}%`,rangeEnd:`cover ${p.end*100}%`,easing:\"linear\",fill:\"both\"});return{cancel(){y.cancel()}}}}catch{}let b=a.style.transform,m={active:!0,dirty:!0,progress:u,write:f=>{a.style.transform=l(f)}};F.size||(addEventListener(\"scroll\",k,{passive:!0}),addEventListener(\"resize\",k)),F.add(m);let h=new IntersectionObserver(f=>{m.active=f[0].isIntersecting,m.dirty=!0,k()});h.observe(n);let v=window.ResizeObserver?new ResizeObserver(()=>{m.dirty=!0,k()}):null;return v?.observe(n),document.fonts?.ready.then(()=>{F.has(m)&&(m.dirty=!0,k())}),k(),{cancel(){F.delete(m),F.size||(cancelAnimationFrame(N),N=0,removeEventListener(\"scroll\",k),removeEventListener(\"resize\",k)),h.disconnect(),v?.disconnect(),a.style.transform=b}}}};W(J);})();\n";

package/src/runtime/scroll-motion.vanilla.js

@@ -0,0 +1,45 @@
+import { countPresentation } from './scroll-motion.count.js';
+// Shipping adapter selected by the matched benchmark; effects share the controller lifecycle.
+const easing = { editorial:'cubic-bezier(.22,1,.36,1)', gentle:'cubic-bezier(.25,.1,.25,1)', linear:'linear' };
+const base = el => { const value=getComputedStyle(el).transform; return value==='none' ? '' : value; };
+// One frame for all fallback targets: read all geometry before any style writes.
+const fallback = new Set(); let frame=0;
+const update=()=>{frame=0;const writes=[...fallback].filter(t=>t.active||t.dirty).map(target=>[target,target.progress()]);for(const [target,p] of writes){target.write(p);target.dirty=false;}};
+const schedule=()=>{if(!frame)frame=requestAnimationFrame(update);};
+export const vanilla = {
+  name:'vanilla',
+  enter(children, options, complete, paused=false) {
+    if(options.effect==='count')return countPresentation(children[0],options,complete);
+    const animations=children.map((el,i) => {
+      const original=base(el), opacity=getComputedStyle(el).opacity;
+      const axis=['left','right'].includes(options.from)?'X':'Y', sign=['down','left'].includes(options.from)?-1:1;
+      let from={opacity:0,transform:`${original} translate${axis}(${sign*options.distance}px)`},to={opacity,transform:original||'none'};
+      if(options.effect==='text'&&options.treatment==='mask'){from.clipPath='inset(0 0 100% 0)';to.clipPath='inset(0 0 0% 0)';}
+      if(options.effect==='sequence'&&el.getAttribute('data-motion-role')==='image'){from={opacity,transform:`${original} scale(1.015)`};to={opacity,transform:original||'none'};}
+      if(options.effect==='draw'){const length=el.getTotalLength?.()||1;from={strokeDasharray:`${length} ${length}`,strokeDashoffset:length};to={strokeDasharray:`${length} ${length}`,strokeDashoffset:0};}
+      const animation=el.animate([from,to],{duration:options.duration,delay:Math.min(300,options.delay+i*options.stagger),easing:easing[options.ease],fill:'both'});
+      if(paused)animation.pause();return animation;
+    });
+    Promise.all(animations.map(a=>a.finished)).then(()=> { for(const a of animations)a.cancel(); complete(); }).catch(()=>{});
+    return {play(){for(const a of animations)a.play();},cancel(){ for(const a of animations)a.cancel(); }};
+  },
+  link(el, trigger, effect, options, progress) {
+    const original=base(el), transform=p=>effect==='drift'?`${original} translateY(${options.distance*(2*p-1)}px)`:`${original} scaleX(${p})`;
+    // Author controls the progress transform origin in CSS; transforms are composed with existing values.
+    try {
+      if(window.ViewTimeline) {
+        const timeline=new ViewTimeline({subject:trigger,axis:'block',inset:'0px'});
+        const animation=el.animate([{transform:transform(0)},{transform:transform(1)}],{timeline,rangeStart:`cover ${options.start*100}%`,rangeEnd:`cover ${options.end*100}%`,easing:'linear',fill:'both'});
+        return {cancel(){animation.cancel();}};
+      }
+    } catch { /* Bounded event-driven fallback below; equivalent effect remains present. */ }
+    const saved=el.style.transform, target={active:true,dirty:true,progress,write:p=>{el.style.transform=transform(p);}};
+    if(!fallback.size){addEventListener('scroll',schedule,{passive:true});addEventListener('resize',schedule);}
+    fallback.add(target);
+    const io=new IntersectionObserver(entries=>{target.active=entries[0].isIntersecting;target.dirty=true;schedule();});io.observe(trigger);
+    const ro=window.ResizeObserver?new ResizeObserver(()=>{target.dirty=true;schedule();}):null;ro?.observe(trigger);
+    document.fonts?.ready.then(()=>{if(fallback.has(target)){target.dirty=true;schedule();}});
+    schedule();
+    return {cancel(){fallback.delete(target);if(!fallback.size){cancelAnimationFrame(frame);frame=0;removeEventListener('scroll',schedule);removeEventListener('resize',schedule);}io.disconnect();ro?.disconnect();el.style.transform=saved;}};
+  }
+};