prop-for-that 0.6.4

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+import { a as Config, D as Disposer, S as Source } from './types-BYVnuPvd.js';
+export { C as Cadence, P as PropSpec, b as SourceContext } from './types-BYVnuPvd.js';
+
+/** Freeze the loop: no sampling, no flushing, until `resume()`. Idempotent. */
+declare function pause(): void;
+/** Unfreeze the loop and pick up sampling / queued writes again. Idempotent. */
+declare function resume(): void;
+
+type CoreKey = 'viewport' | 'pointer' | 'size' | 'visibility' | 'range';
+/** Built-in keys autocomplete; any registered/plugin key (a string) is allowed. */
+type SourceKey = CoreKey | (string & {});
+/** Register a custom or plugin source so it can be used by key. */
+declare function register(source: Source): void;
+/** Remove a previously registered source key. */
+declare function unregister(key: string): void;
+/** Override prefixes or the global root target. Call before attaching sources. */
+declare function configure(opts: Partial<Config>): void;
+/**
+ * Attach sources by key. Global by default (writes to `:root`); pass a Node,
+ * NodeList, or array of elements as the first argument to attach to elements.
+ *
+ *   propsFor(['pointer'])            // → :root
+ *   propsFor(el, ['size'])           // → el
+ *   propsFor(els, ['visibility'])    // → each element in a NodeList / array
+ *
+ * Returns a disposer that tears down exactly what this call started and removes
+ * the custom properties it wrote.
+ */
+declare function propsFor(keys: SourceKey[]): Disposer;
+declare function propsFor(target: Element | NodeList | HTMLCollection | Element[], keys: SourceKey[]): Disposer;
+/** Detach specific keys from an element, or all of them. Removes written props. */
+declare function unbind(target: HTMLElement, keys?: string[]): void;
+/** Tear down every active binding (and, via ref-counting, the shared observers
+ *  and listeners they used). Useful for SPA route changes, HMR, and tests. */
+declare function reset(): void;
+
+export { Config, Disposer, Source, type SourceKey, configure, pause, propsFor, register, reset, resume, unbind, unregister };

package/dist/index.global.js

@@ -0,0 +1 @@
+var PropForThat=(function(exports){'use strict';var p={livePrefix:"--live-",constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0,typed:false};var S=new Set,z=null,f=0,w=false,d=false,F=0,h=()=>typeof requestAnimationFrame=="function";function E(e){if(f=0,d)return;let t=p.liveHz;if(h()&&t&&t>0&&e-F<1e3/t){f=requestAnimationFrame(E);return}if(F=e,w=true,S.size)for(let r of [...S])r(e);z?.(),w=false,S.size&&h()&&b();}function b(){f||w||d||(h()?f=requestAnimationFrame(E):E(0));}function D(){b();}function R(e){z=e;}function B(){d||(d=true,f&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(f),f=0);}function V(){d&&(d=false,b());}var l;function G(){if(l!==void 0||(l=null,typeof document>"u"||typeof CSSStyleSheet!="function"||!("adoptedStyleSheets"in document)))return l;try{let e=new CSSStyleSheet;e.replaceSync(":root{}"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e],l=e.cssRules[0].style;}catch{l=null;}return l}function a(e){if(typeof document<"u"&&e===document.documentElement){let t=G();if(t)return t}return e.style}var x=class{pending=new Map;last=new WeakMap;set(t,r,n){let o=this.pending.get(t);if(o?.has(r)){o.set(r,n);return}this.last.get(t)?.get(r)!==n&&(o?o.set(r,n):this.pending.set(t,new Map([[r,n]])),D());}forget(t,r){this.last.get(t)?.delete(r),this.pending.get(t)?.delete(r);}flush=()=>{if(this.pending.size!==0){for(let[t,r]of this.pending){let n=this.last.get(t);n||this.last.set(t,n=new Map);let o=a(t);for(let[i,s]of r)n.get(i)!==s&&(o.setProperty(i,s),n.set(i,s));}this.pending.clear();}}},m=new x;R(m.flush);var P=new Set;function A(e,t,r){if(P.has(e)||typeof CSS>"u"||typeof CSS.registerProperty!="function")return;P.add(e);let n=t?r?.[t]:void 0,o=t?p.defaults?.[t]:void 0;try{CSS.registerProperty({name:e,syntax:n?.syntax??"<number>",inherits:n?.inherits??!0,initialValue:o!=null?String(o):n?.initial??"0"});}catch{}}var M=new Map;function y(e,t){let r=M.get(e);if(!r){let n=new Set,o=i=>{for(let s of [...n])s(i);};r={handlers:n,dispatch:o},M.set(e,r),window.addEventListener(e,o,{passive:true});}return r.handlers.add(t),()=>{r.handlers.delete(t),r.handlers.size===0&&(window.removeEventListener(e,r.dispatch),M.delete(e));}}var O={key:"viewport",scope:"global",start(e){let t=()=>{e.write("vw",window.innerWidth),e.write("vh",window.innerHeight);};return t(),y("resize",t)}};function c(e){return Math.round(e*1e4)/1e4}var I={key:"pointer",scope:"global",start(e){return y("pointermove",r=>{let n=r;e.write("pointer-x",n.clientX),e.write("pointer-y",n.clientY),e.write("pointer-x-ratio",c(n.clientX/window.innerWidth)),e.write("pointer-y-ratio",c(n.clientY/window.innerHeight));})}};var g,T=new WeakMap;function K(e,t){return g||(g=new ResizeObserver(r=>{for(let n of r)T.get(n.target)?.(n);})),T.set(e,t),g.observe(e),()=>{g.unobserve(e),T.delete(e);}}var v,k=new WeakMap;function W(e,t){return v||(v=new IntersectionObserver(r=>{for(let n of r)k.get(n.target)?.(n);},{threshold:[0,1]})),k.set(e,t),v.observe(e),()=>{v.unobserve(e),k.delete(e);}}var q={key:"size",scope:"element",start(e){return K(e.target,t=>{let r=t.borderBoxSize?.[0],n=r?r.inlineSize:t.contentRect.width,o=r?r.blockSize:t.contentRect.height;e.write("w",c(n)),e.write("h",c(o)),e.write("aspect",o>0?c(n/o):0);})}};var N={key:"visibility",scope:"element",start(e){let t=false;return e.write("visible",0),e.write("has-entered",0,"const"),W(e.target,r=>{let n=r.intersectionRatio>=1;e.write("visible",n?1:0),n&&!t&&(t=true,e.write("has-entered",1,"const"));})}};function X(e,t){return e.matches(t)?e:e.querySelector(t)}var Y={key:"range",scope:"element",start(e){let t=X(e.target,'input[type="range"], input[type="number"]');if(!t)return ()=>{};let r=()=>{let n=t.min===""?0:Number(t.min),o=t.max===""?100:Number(t.max),i=Number(t.value);e.write("value",i),e.write("value-pct",o>n?c((i-n)/(o-n)):0);};return r(),t.addEventListener("input",r,{passive:true}),()=>t.removeEventListener("input",r)}};var $={viewport:O,pointer:I,size:q,visibility:N,range:Y};var J=()=>{},u=new Map,C={...$};function Ke(e){C[e.key]=e;}function We(e){delete C[e];}function qe(e){Object.assign(p,e);}function Q(e,t,r){return {target:e,config:p,write(n,o,i="live"){let s=(i==="const"?p.constPrefix:p.livePrefix)+n;t.add(s),p.typed&&A(s,n,r),m.set(e,s,String(o));}}}function L(e,t,r){let n=r.get(t);if(!n)return;n.dispose();let o=a(e);for(let i of n.written)o.removeProperty(i),m.forget(e,i);r.delete(t);}function U(e,t){let r=u.get(e);r||u.set(e,r=new Map);let n=[];for(let o of t){if(r.has(o))continue;let i=C[o];if(!i){console.warn(`[prop-for-that] unknown source "${o}"`);continue}let s=new Set,H;try{H=i.start(Q(e,s,i.props));}catch(j){console.error(`[prop-for-that] source "${o}" failed to start`,j);continue}r.set(o,{dispose:H,written:s}),n.push(o);}return ()=>{let o=u.get(e);if(o){for(let i of n)L(e,i,o);o.size===0&&u.delete(e);}}}function Z(e){return e instanceof Element?[e]:typeof NodeList<"u"&&e instanceof NodeList||typeof HTMLCollection<"u"&&e instanceof HTMLCollection||Array.isArray(e)?Array.from(e).filter(t=>t instanceof Element):[]}function _(e){return Array.isArray(e)&&(e.length===0||typeof e[0]=="string")}function Ne(e,t){let r,n;if(t===void 0&&_(e)?(r=p.root?[p.root]:[],n=e):(r=Z(e),n=t??[]),!r.length||!n.length)return J;let o=r.map(i=>U(i,n));return ()=>{for(let i of o)i();}}function Xe(e,t){let r=u.get(e);if(r){for(let n of t??[...r.keys()])L(e,n,r);r.size===0&&u.delete(e);}}function Ye(){for(let[e,t]of u)for(let r of [...t.keys()])L(e,r,t);u.clear();}exports.configure=qe;exports.pause=B;exports.propsFor=Ne;exports.register=Ke;exports.reset=Ye;exports.resume=V;exports.unbind=Xe;exports.unregister=We;return exports;})({});

package/dist/index.js

@@ -0,0 +1 @@
+export{i as configure,b as pause,j as propsFor,g as register,l as reset,c as resume,k as unbind,h as unregister}from'./chunk-6DXNWAGS.js';import'./chunk-LWKH66VY.js';

package/dist/plugins.cjs

@@ -0,0 +1 @@
+'use strict';var _={};var k=new Set,T=0,D=false,U=false,Y=0,O=()=>typeof requestAnimationFrame=="function";function z(e){if(T=0,U);let t=_.liveHz;if(O()&&t&&t>0&&e-Y<1e3/t){T=requestAnimationFrame(z);return}if(Y=e,D=true,k.size)for(let r of [...k])r(e);D=false,k.size&&O()&&G();}function G(){T||D||U||(O()?T=requestAnimationFrame(z):z(0));}function C(e){return k.add(e),G(),()=>{k.delete(e);}}var x=new Map;function y(e,t){let r=x.get(e);if(!r){let o=new Set,n=i=>{for(let a of [...o])a(i);};r={handlers:o,dispatch:n},x.set(e,r),window.addEventListener(e,n,{passive:true});}return r.handlers.add(t),()=>{r.handlers.delete(t),r.handlers.size===0&&(window.removeEventListener(e,r.dispatch),x.delete(e));}}var X={key:"viewport",scope:"global",start(e){let t=()=>{e.write("vw",window.innerWidth),e.write("vh",window.innerHeight);};return t(),y("resize",t)}};function s(e){return Math.round(e*1e4)/1e4}var $={key:"pointer",scope:"global",start(e){return y("pointermove",r=>{let o=r;e.write("pointer-x",o.clientX),e.write("pointer-y",o.clientY),e.write("pointer-x-ratio",s(o.clientX/window.innerWidth)),e.write("pointer-y-ratio",s(o.clientY/window.innerHeight));})}};var F,V=new WeakMap;function j(e,t){return F||(F=new ResizeObserver(r=>{for(let o of r)V.get(o.target)?.(o);})),V.set(e,t),F.observe(e),()=>{F.unobserve(e),V.delete(e);}}var H,B=new WeakMap;function Q(e,t){return H||(H=new IntersectionObserver(r=>{for(let o of r)B.get(o.target)?.(o);},{threshold:[0,1]})),B.set(e,t),H.observe(e),()=>{H.unobserve(e),B.delete(e);}}var J={key:"size",scope:"element",start(e){return j(e.target,t=>{let r=t.borderBoxSize?.[0],o=r?r.inlineSize:t.contentRect.width,n=r?r.blockSize:t.contentRect.height;e.write("w",s(o)),e.write("h",s(n)),e.write("aspect",n>0?s(o/n):0);})}};var Z={key:"visibility",scope:"element",start(e){let t=false;return e.write("visible",0),e.write("has-entered",0,"const"),Q(e.target,r=>{let o=r.intersectionRatio>=1;e.write("visible",o?1:0),o&&!t&&(t=true,e.write("has-entered",1,"const"));})}};function v(e,t){return e.matches(t)?e:e.querySelector(t)}var ee={key:"range",scope:"element",start(e){let t=v(e.target,'input[type="range"], input[type="number"]');if(!t)return ()=>{};let r=()=>{let o=t.min===""?0:Number(t.min),n=t.max===""?100:Number(t.max),i=Number(t.value);e.write("value",i),e.write("value-pct",n>o?s((i-o)/(n-o)):0);};return r(),t.addEventListener("input",r,{passive:true}),()=>t.removeEventListener("input",r)}};var te={viewport:X,pointer:$,size:J,visibility:Z,range:ee};var Oe={...te};function re(e){Oe[e.key]=e;}var oe={key:"scroll-velocity",scope:"global",start(e){let t=window.scrollY,r=0,o=null,n=()=>{let c=window.scrollY,l=c-t;t=c,r=l||r*.8,Math.abs(r)<.01&&(r=0);let u=s(r);e.write("scroll-velocity",u),e.write("scroll-direction",Math.sign(u)),u===0&&o&&(o(),o=null);},i=()=>{o||(o=C(n));};e.write("scroll-velocity",0),e.write("scroll-direction",0);let a=y("scroll",i);return ()=>{a(),o?.();}}};var ne={key:"online",scope:"global",start(e){let t=()=>e.write("online",navigator.onLine?1:0);t();let r=y("online",t),o=y("offline",t);return ()=>{r(),o();}}};var ie={key:"page-focused",scope:"global",start(e){let t=()=>e.write("page-focused",document.hasFocus()?1:0);t();let r=y("focus",t),o=y("blur",t);return ()=>{r(),o();}}};var N=new Map;function se(e,t){let r=N.get(e);if(!r){let o=new Set,n=i=>{for(let a of [...o])a(i);};r={handlers:o,dispatch:n},N.set(e,r),document.addEventListener(e,n,{passive:true});}return r.handlers.add(t),()=>{r.handlers.delete(t),r.handlers.size===0&&(document.removeEventListener(e,r.dispatch),N.delete(e));}}var ae={key:"page-visible",scope:"global",start(e){let t=()=>e.write("page-visible",document.visibilityState==="visible"?1:0);return t(),se("visibilitychange",t)}};var ce={key:"nav-type",scope:"global",props:{"nav-type":{syntax:"<custom-ident>",initial:"navigate"}},start(e){let t=performance.getEntriesByType("navigation")[0];return e.write("nav-type",t?.type??"navigate","const"),()=>{}}};function ze(e){switch(e){case "slow-2g":return 1;case "2g":return 2;case "3g":return 3;case "4g":return 4;default:return 0}}var le={key:"network",scope:"global",start(e){let t=navigator.connection;if(!t)return ()=>{};let r=()=>{e.write("net-downlink",t.downlink??0),e.write("net-rtt",t.rtt??0),e.write("net-save-data",t.saveData?1:0),e.write("net-type",ze(t.effectiveType));};return r(),t.addEventListener("change",r),()=>t.removeEventListener("change",r)}};var ue={key:"battery",scope:"global",start(e){let t=navigator.getBattery;if(!t)return ()=>{};let r=false,o,n;return t.call(navigator).then(i=>{r||(o=i,n=()=>{e.write("battery-level",s(i.level)),e.write("battery-charging",i.charging?1:0);},n(),i.addEventListener("levelchange",n),i.addEventListener("chargingchange",n));}),()=>{r=true,o&&n&&(o.removeEventListener("levelchange",n),o.removeEventListener("chargingchange",n));}}};var pe={key:"clock",scope:"global",start(e){let t=0,r=()=>{let o=new Date;e.write("now",Math.floor(o.getTime()/1e3)),e.write("hours",o.getHours()),e.write("minutes",o.getMinutes()),e.write("seconds",o.getSeconds()),t=setTimeout(r,1e3-Date.now()%1e3);};return r(),()=>clearTimeout(t)}};var me={key:"fps",scope:"global",start(e){let t=performance.now(),r=60;return C(o=>{let n=o-t;t=o,!(n<=0)&&(r+=(1e3/n-r)*.1,e.write("fps",Math.round(r)));})}};var de={key:"visual-viewport",scope:"global",start(e){let t=window.visualViewport;if(!t)return ()=>{};let r=()=>{e.write("vvp-scale",s(t.scale)),e.write("vvp-offset-top",s(t.offsetTop)),e.write("vvp-height",s(t.height));};return r(),t.addEventListener("resize",r,{passive:true}),t.addEventListener("scroll",r,{passive:true}),()=>{t.removeEventListener("resize",r),t.removeEventListener("scroll",r);}}};var fe={key:"pointer-local",scope:"element",start(e){let t=e.target;return y("pointermove",o=>{let n=o,i=t.getBoundingClientRect(),a=i.width>0?(n.clientX-i.left)/i.width:0,c=i.height>0?(n.clientY-i.top)/i.height:0,l=a>=0&&a<=1&&c>=0&&c<=1;e.write("local-pointer-x-ratio",s(a)),e.write("local-pointer-y-ratio",s(c)),e.write("local-pointer-inside",l?1:0);})}};var ve={key:"media",scope:"element",start(e){let t=v(e.target,"video, audio");if(!t)return ()=>{};let r=()=>{let n=isFinite(t.duration)?t.duration:0;e.write("current-time",s(t.currentTime)),e.write("duration",s(n)),e.write("progress",n>0?s(t.currentTime/n):0),e.write("paused",t.paused?1:0),e.write("volume",s(t.volume));};r();let o=["timeupdate","loadedmetadata","play","pause","volumechange"];for(let n of o)t.addEventListener(n,r,{passive:true});return ()=>{for(let n of o)t.removeEventListener(n,r);}}};var xe=[["valueMissing","value-missing"],["typeMismatch","type-mismatch"],["patternMismatch","pattern-mismatch"],["tooLong","too-long"],["tooShort","too-short"],["rangeUnderflow","range-underflow"],["rangeOverflow","range-overflow"],["stepMismatch","step-mismatch"],["badInput","bad-input"],["customError","custom-error"]],ge={key:"field",scope:"element",start(e){let t=v(e.target,"input, textarea, select");if(!t)return ()=>{};let r=()=>{let n=t.value.length;e.write("length",n),e.write("empty",n===0?1:0),e.write("valid",t.validity.valid?1:0);for(let[a,c]of xe)e.write(c,t.validity[a]?1:0);let i=t.maxLength;i>=0&&(e.write("remaining",Math.max(0,i-n)),e.write("fill-pct",i>0?s(Math.min(1,n/i)):0));};r();let o=["input","change"];for(let n of o)t.addEventListener(n,r,{passive:true});return ()=>{for(let n of o)t.removeEventListener(n,r);}}};var ye="input:not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]), textarea, select",I=e=>e.matches(ye)?[e]:Array.from(e.querySelectorAll(ye));var we=e=>e instanceof HTMLInputElement&&(e.type==="checkbox"||e.type==="radio")?e.checked?"1":"0":e.value,Ve=e=>{if(e instanceof HTMLInputElement&&(e.type==="checkbox"||e.type==="radio"))return e.defaultChecked?"1":"0";if(e instanceof HTMLSelectElement){let t=Array.from(e.options).find(r=>r.defaultSelected);return t?t.value:e.options[0]?.value??""}return e.defaultValue},he={key:"field-state",scope:"element",start(e){let t=I(e.target);if(!t.length)return ()=>{};let r=new Set(t),o=new WeakMap;for(let d of t)o.set(d,we(d));let n=new Set,i=new Set,a=new Set,c=false,l=()=>{let d=n.size>0,f=i.size>0;e.write("dirty",d?1:0),e.write("pristine",d?0:1),e.write("touched",f?1:0),e.write("untouched",f?0:1),e.write("changed",a.size>0?1:0),e.write("submitted",c?1:0);};l();let u=d=>{let f=d.target;r.has(f)&&(n.add(f),we(f)===o.get(f)?a.delete(f):a.add(f),l());},m=d=>{let f=d.target;r.has(f)&&(i.add(f),l());};e.target.addEventListener("input",u,{passive:true}),e.target.addEventListener("change",u,{passive:true}),e.target.addEventListener("focusout",m,{passive:true});let p=e.target instanceof HTMLFormElement?e.target:t[0]?.form,S=()=>{c=true,l();},L=()=>{n.clear(),i.clear(),c=false,a.clear();for(let d of t)Ve(d)!==o.get(d)&&a.add(d);l();};return p?.addEventListener("submit",S,{passive:true}),p?.addEventListener("reset",L,{passive:true}),()=>{e.target.removeEventListener("input",u),e.target.removeEventListener("change",u),e.target.removeEventListener("focusout",m),p?.removeEventListener("submit",S),p?.removeEventListener("reset",L);}}};var be={key:"form-state",scope:"element",start(e){let t=I(e.target);if(!t.length)return ()=>{};let r=()=>{let a=0,c=0,l=0,u=0;for(let m of t){if(!m.willValidate)continue;a++;let p=m.validity.valid;p&&c++,m.required&&(l++,p&&u++);}e.write("field-count",a),e.write("valid-count",c),e.write("invalid-count",a-c),e.write("all-valid",a===c?1:0),e.write("completion",l?s(u/l):1);};r(),e.target.addEventListener("input",r,{passive:true}),e.target.addEventListener("change",r,{passive:true});let o=false,n=e.target instanceof HTMLFormElement?e.target:t[0]?.form,i=()=>{requestAnimationFrame(()=>{o||r();});};return n?.addEventListener("reset",i,{passive:true}),()=>{o=true,e.target.removeEventListener("input",r),e.target.removeEventListener("change",r),n?.removeEventListener("reset",i);}}};var Ee={key:"select",scope:"element",start(e){let t=v(e.target,"select");if(!t)return ()=>{};let r=()=>{let n=t.options.length,i=t.selectedIndex,a=t.selectedOptions.length;e.write("index",i),e.write("option-count",n),e.write("index-pct",i>=0&&n>1?s(i/(n-1)):0),e.write("selected-count",a),e.write("selected-pct",n>0?s(a/n):0);let c=Number(t.value);t.value.trim()!==""&&Number.isFinite(c)&&e.write("value-num",c);};r();let o=["input","change"];for(let n of o)t.addEventListener(n,r,{passive:true});return ()=>{for(let n of o)t.removeEventListener(n,r);}}};var b=({r:e,g:t,b:r})=>`#${(16777216|e<<16|t<<8|r).toString(16).slice(1)}`,w={syntax:"<color>",initial:"transparent"},Se=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,Be=(e,t,r)=>{let o=Math.max(e,t,r)/255,n=Math.min(e,t,r)/255,i=o-n;return i===0?0:Math.min(1,i/(1-Math.abs(o+n-1)))};function Ne(e){let t=new Map,r=0,o=0,n=0,i=0;for(let a=0;a<e.length;a+=4){if(e[a+3]<128)continue;let c=e[a],l=e[a+1],u=e[a+2];r++,o+=c,n+=l,i+=u;let m=c>>4<<8|l>>4<<4|u>>4,p=t.get(m);p?(p.r+=c,p.g+=l,p.b+=u,p.n++):t.set(m,{r:c,g:l,b:u,n:1});}return {buckets:t,count:r,sumR:o,sumG:n,sumB:i}}var We=e=>{let t=Math.round(e.r/e.n),r=Math.round(e.g/e.n),o=Math.round(e.b/e.n);return {r:t,g:r,b:o,l:Se(t,r,o)}},qe=.04,Ke=.96,_e=.15;function R(e){let{buckets:t,count:r,sumR:o,sumG:n,sumB:i}=Ne(e);if(!r)return null;let a=0;for(let E of t.values())E.n>a&&(a=E.n);let c=null,l=0,u=null,m=-1/0,p=null,S=1/0,L=null,d=-1/0;for(let E of t.values()){let g=We(E);E.n>l&&(l=E.n,c=g);let q=Be(g.r,g.g,g.b);if(q>=_e){let Ae=1-Math.abs(g.l-.5)*2,K=3*q+1.5*Math.max(0,Ae)+E.n/a;K>m&&(m=K,u=g);}g.l>=qe&&g.l<S&&(S=g.l,p=g),g.l<=Ke&&g.l>d&&(d=g.l,L=g);}let f=Math.round(o/r),W=Math.round(n/r),A=Math.round(i/r),Pe={r:f,g:W,b:A,l:Se(f,W,A)},M=c;return {dominant:M,accent:u??M,dark:p??M,light:L??M,average:Pe,temp:(f-A)/255}}var h=16,Ye=()=>{if(typeof OffscreenCanvas<"u")return new OffscreenCanvas(h,h);if(typeof document>"u")return null;let e=document.createElement("canvas");return e.width=e.height=h,e};function P(){let t=Ye()?.getContext("2d",{willReadFrequently:true});return t?r=>{t.drawImage(r,0,0,h,h);try{return t.getImageData(0,0,h,h).data}catch{return null}}:null}var Le={key:"color-input",scope:"element",props:{color:w},start(e){let t=v(e.target,'input[type="color"]');if(!t)return ()=>{};let r=()=>e.write("color",t.value);r();let o=["input","change"];for(let n of o)t.addEventListener(n,r,{passive:true});return ()=>{for(let n of o)t.removeEventListener(n,r);}}};var ke={key:"orientation",scope:"global",start(e){if(typeof DeviceOrientationEvent>"u")return ()=>{};let t=r=>{e.write("orient-alpha",s(r.alpha??0)),e.write("orient-beta",s(r.beta??0)),e.write("orient-gamma",s(r.gamma??0));};return window.addEventListener("deviceorientation",t,{passive:true}),()=>window.removeEventListener("deviceorientation",t)}};var Me={key:"motion",scope:"global",start(e){if(typeof DeviceMotionEvent>"u")return ()=>{};let t=r=>{let o=r.accelerationIncludingGravity;e.write("accel-x",s(o?.x??0)),e.write("accel-y",s(o?.y??0)),e.write("accel-z",s(o?.z??0));};return window.addEventListener("devicemotion",t,{passive:true}),()=>window.removeEventListener("devicemotion",t)}};var Te={key:"geo",scope:"global",start(e){let t=navigator.geolocation;if(!t)return ()=>{};let r=false,o=t.watchPosition(n=>{r||(e.write("geo-lat",s(n.coords.latitude)),e.write("geo-lng",s(n.coords.longitude)),e.write("geo-accuracy",s(n.coords.accuracy)));});return ()=>{r=true,t.clearWatch(o);}}};var Ue={nominal:0,fair:1,serious:2,critical:3},Ce={key:"cpu-pressure",scope:"global",start(e){let t=globalThis.PressureObserver;if(!t)return ()=>{};e.write("cpu-pressure",0);let r;try{r=new t(o=>{let n=o[o.length-1];n&&e.write("cpu-pressure",Ue[n.state]??0);}),r.observe("cpu",{sampleInterval:1e3}).catch(()=>{});}catch{r=void 0;}return ()=>r?.disconnect()}};var Fe={key:"img",scope:"element",start(e){let t=v(e.target,"img");if(!t)return ()=>{};let r=()=>t.getAttribute("src")!==null||t.getAttribute("srcset")!==null,o=t.complete&&t.naturalWidth===0&&r(),n=()=>{e.write("natural-w",t.naturalWidth),e.write("natural-h",t.naturalHeight),e.write("loaded",t.complete&&t.naturalWidth>0?1:0),e.write("broken",o?1:0);},i=()=>{o=false,n();},a=()=>{o=true,n();};return n(),t.addEventListener("load",i,{passive:true}),t.addEventListener("error",a,{passive:true}),()=>{t.removeEventListener("load",i),t.removeEventListener("error",a);}}};async function Ge(e){let t=P();if(!t)return null;let r=e,o;if(typeof createImageBitmap=="function")try{o=await createImageBitmap(e,{resizeWidth:h,resizeHeight:h,resizeQuality:"low"}),r=o;}catch{}let n=t(r);return o?.close(),n}var He={key:"img-color",scope:"element",props:{img:w,"img-accent":w,"img-dark":w,"img-light":w,"img-avg":w,"img-temp":{syntax:"<number>",initial:"0"}},start(e){let t=v(e.target,"img");if(!t)return ()=>{};let r=false,o=async()=>{if(!t.complete||t.naturalWidth===0)return;let n=await Ge(t).catch(()=>null);if(r||!n)return;let i=R(n);i&&(e.write("img",b(i.dominant)),e.write("img-accent",b(i.accent)),e.write("img-dark",b(i.dark)),e.write("img-light",b(i.light)),e.write("img-avg",b(i.average)),e.write("img-temp",s(i.temp)));};return o(),t.addEventListener("load",o,{passive:true}),()=>{r=true,t.removeEventListener("load",o);}}};var Ie=250,Xe=2,Re={key:"video-color",scope:"element",props:{video:w,"video-accent":w},start(e){let t=v(e.target,"video");if(!t)return ()=>{};let r=P();if(!r)return ()=>{};let o=false,n=-1/0,i=u=>{if(u-n<Ie||t.readyState<Xe)return;let m=r(t);if(!m)return;let p=R(m);p&&(n=u,e.write("video",b(p.dominant)),e.write("video-accent",b(p.accent)));};i(0);let a=t.requestVideoFrameCallback?.bind(t);if(a){let u=a(function m(p){o||(i(p),u=a(m));});return ()=>{o=true,t.cancelVideoFrameCallback?.(u);}}let c=0,l=()=>i(c+=Ie);return t.addEventListener("timeupdate",l,{passive:true}),t.addEventListener("loadeddata",l,{passive:true}),()=>{o=true,t.removeEventListener("timeupdate",l),t.removeEventListener("loadeddata",l);}}};var $e=[oe,ne,ie,ae,ce,le,ue,pe,me,de,fe,ve,ge,he,be,Ee,Le,ke,Me,Te,Ce,Fe,He,Re];function Zr(...e){for(let t of e.length?e:$e)re(t);}exports.allPlugins=$e;exports.battery=ue;exports.clock=pe;exports.colorInput=Le;exports.cpuPressure=Ce;exports.field=ge;exports.fieldState=he;exports.formState=be;exports.fps=me;exports.geo=Te;exports.img=Fe;exports.imgColor=He;exports.media=ve;exports.motion=Me;exports.navType=ce;exports.network=le;exports.online=ne;exports.orientation=ke;exports.pageFocused=ie;exports.pageVisible=ae;exports.pointerLocal=fe;exports.registerPlugins=Zr;exports.scrollVelocity=oe;exports.select=Ee;exports.videoColor=Re;exports.visualViewport=de;

package/dist/plugins.d.cts

@@ -0,0 +1,328 @@
+import { S as Source } from './types-BYVnuPvd.cjs';
+
+/**
+ * `--live-scroll-velocity` (signed px/frame, decays toward 0 when idle),
+ * `--live-scroll-direction` (1 down / -1 up / 0).
+ *
+ * Idles when the page isn't scrolling: a scroll event wakes a per-frame sampler
+ * that decays the velocity and then stops itself once it reaches 0.
+ */
+declare const scrollVelocity: Source;
+
+/** `--live-online` (0/1) */
+declare const online: Source;
+
+/**
+ * `--live-page-focused` (1/0) — whether the document currently has focus: the
+ * tab is frontmost *and* its window is focused. Goes `0` when the user switches
+ * to another tab, window, or app, and back to `1` on return. Driven by window
+ * `focus`/`blur`, seeded from `document.hasFocus()`.
+ *
+ * Note: a blurred-but-still-visible window (e.g. clicking another app side by
+ * side) keeps rAF alive, so the `0` flushes and CSS can react. Switching tabs
+ * pauses rAF, so the change applies on return — invisible while hidden anyway.
+ */
+declare const pageFocused: Source;
+
+/**
+ * `--live-page-visible` (1/0) — whether the tab is currently visible
+ * (foreground) versus hidden (backgrounded, minimized, or switched away).
+ *
+ * Distinct from `page-focused`: a *visible* tab can still be *unfocused* (another
+ * window holds focus while this one stays on screen). Visibility gates the things
+ * that should pause when truly hidden — video, polling, expensive effects — where
+ * focus gates the things that react to "is the user looking here right now."
+ * Driven by `visibilitychange`, seeded from `document.visibilityState`.
+ */
+declare const pageVisible: Source;
+
+/**
+ * `--const-nav-type` — how the user arrived at this page, read once from
+ * `performance.getEntriesByType('navigation')[0].type`:
+ *
+ * - `navigate` — a fresh navigation (typed URL, link, form, or script)
+ * - `reload` — the page was reloaded
+ * - `back_forward` — history traversal (Back/Forward, often a bfcache restore)
+ * - `prerender` — the page was prerendered
+ *
+ * Written once as a string on the `const` cadence, so it pairs with style queries
+ * — `@container style(--const-nav-type: reload) { … }` — to branch styling on how
+ * the visit started. Falls back to `navigate` where Navigation Timing is absent.
+ *
+ * Typed (`configure({ typed: true })`) registers it as a `<custom-ident>` so the
+ * string survives `@property`. Note it rides the batched writer like any plugin,
+ * so it lands the frame *after* bind, not before first paint — for a FOUC-safe,
+ * pre-paint constant, read the same value synchronously in a `<head>` script.
+ */
+declare const navType: Source;
+
+/**
+ * `--live-net-downlink`, `--live-net-rtt`, `--live-net-save-data` (0/1),
+ * `--live-net-type` (slow-2g=1, 2g=2, 3g=3, 4g=4, else 0).
+ */
+declare const network: Source;
+
+/** `--live-battery-level` (0–1), `--live-battery-charging` (0/1) */
+declare const battery: Source;
+
+/**
+ * `--live-now` (epoch seconds), `--live-hours`, `--live-minutes`, `--live-seconds`.
+ * Re-armed to each whole second so it doesn't drift.
+ */
+declare const clock: Source;
+
+/**
+ * `--live-fps`, a short exponential moving average of recent frame rates so the
+ * value is stable rather than jittering frame to frame. Runs on the shared frame
+ * loop while bound.
+ */
+declare const fps: Source;
+
+/**
+ * `--live-vvp-scale`, `--live-vvp-offset-top`, `--live-vvp-height`
+ * from `window.visualViewport`.
+ */
+declare const visualViewport: Source;
+
+/**
+ * `--live-local-pointer-x-ratio`, `--live-local-pointer-y-ratio` (0–1 within the
+ * element's box), `--live-local-pointer-inside` (0/1).
+ *
+ * Shares the page's single `pointermove` listener. The rect is read per move
+ * (cheap when layout is clean) so it stays correct through layout shifts, which
+ * a cached rect would miss.
+ */
+declare const pointerLocal: Source;
+
+/**
+ * For `<video>`/`<audio>`: `--live-current-time`, `--live-duration`,
+ * `--live-progress` (0–1), `--live-paused` (0/1), `--live-volume` (0–1).
+ *
+ * Bind it to the media element, or to a container that holds one. When bound to
+ * a container the props are written on the container, so sibling readers (a
+ * progress ring, a scrubber, a time label) all inherit them.
+ */
+declare const media: Source;
+
+/**
+ * For form fields: `--live-length` (value length), `--live-empty` (0/1),
+ * `--live-valid` (0/1 from `el.validity.valid`).
+ *
+ * Plus the per-reason validity flags CSS can't distinguish (each 0/1):
+ * `--live-value-missing`, `--live-type-mismatch`, `--live-pattern-mismatch`,
+ * `--live-too-long`, `--live-too-short`, `--live-range-underflow`,
+ * `--live-range-overflow`, `--live-step-mismatch`, `--live-bad-input`,
+ * `--live-custom-error` — so a hint can react to the *specific* failure.
+ *
+ * And, when the field has a `maxlength` (inputs + textareas): `--live-remaining`
+ * (chars left) and `--live-fill-pct` (length ÷ maxlength, 0–1) for a pure-CSS
+ * character counter. Neither is written without a `maxlength`, so keep a
+ * `var(--live-remaining, …)` fallback.
+ *
+ * Bind it to the field itself, or to a container that holds one. When bound to
+ * a container the props are written on the container, so the field *and* sibling
+ * readers (a counter, a meter, a status word) all inherit them downward.
+ */
+declare const field: Source;
+
+/**
+ * The interaction-history states form libraries track (Angular, Formik, React
+ * Hook Form, final-form) but CSS pseudo-classes can't express — all `0`/`1`:
+ *
+ * - `--live-dirty` / `--live-pristine` — the user has edited a field *at all*
+ *   since it mounted. Latches on the first `input`/`change` and stays there even
+ *   if you type the value back (Angular's `.dirty`). `pristine` is the inverse.
+ * - `--live-touched` / `--live-untouched` — a field has been blurred at least
+ *   once. Latches on the first blur (Angular's `.touched`); `untouched` inverts it.
+ * - `--live-changed` — the *current* value differs from the value at mount
+ *   (React Hook Form's per-field dirty). Unlike `dirty` it un-latches when you
+ *   type back to the original.
+ * - `--live-submitted` — the owning `<form>` has been submitted (RHF's
+ *   `isSubmitted`). Latches on `submit`, clears on `reset`.
+ *
+ * Both latch pairs reset when the owning form is reset.
+ *
+ * **Bind it to a single field** for that field's state, or **to a `<form>` (or
+ * any wrapper)** for the *aggregate* across every field inside it — exactly like
+ * a framework's form-group vs. control state. Aggregated: `dirty`/`touched`/
+ * `changed` are on if *any* field is; `submitted` is the form's. Props land on
+ * the bound element, so labels, hints, and a submit button can all style from
+ * them (e.g. reveal errors only once `--live-touched` or `--live-submitted`).
+ *
+ * Validity stays in the `field` plugin (`--live-valid`); focus stays in `:focus`.
+ */
+declare const fieldState: Source;
+
+/**
+ * Form-level **validity & completion** that CSS can't compute. `:invalid` matches
+ * a *single* control, but CSS can't count across a form or gate on "all valid" —
+ * so this aggregates a form's constraint-validation state into readable numbers,
+ * all written on the bound element:
+ *
+ * - `--live-field-count` — controls subject to constraint validation (excludes
+ *   disabled / readonly / buttons / hidden — i.e. `willValidate === false`).
+ * - `--live-valid-count` / `--live-invalid-count` — how many currently pass / fail.
+ * - `--live-all-valid` (`1`/`0`) — the submit gate: no invalid controls remain.
+ * - `--live-completion` (0–1) — how much of the *required* part of the form is
+ *   satisfied (valid required controls ÷ required controls; `1` if none required).
+ *
+ * Bind it to a `<form>` (or any wrapper holding fields). It pairs with
+ * `field-state` (interaction history) and the `field` plugin (per-field
+ * `--live-valid`): use `field` on a control, `form-state` on the form.
+ */
+declare const formState: Source;
+
+/**
+ * A native `<select>`'s state as numbers CSS can compute with. CSS can match
+ * `:open`, `:checked` (on `<option>`s under `appearance: base-select`) and
+ * `:focus` — but it can never get *which* option, *as a number*, into `calc()`,
+ * nor count selections in a `<select multiple>`. This does:
+ *
+ * - `--live-index` — `selectedIndex` (0-based; `-1` when nothing is selected).
+ *   Turns a `<select>` into a discrete CSS state machine: slide a segmented-
+ *   control indicator with `translate: calc(var(--live-index) * 100%) 0`, or pick
+ *   the Nth palette/theme. With `configure({ typed: true })` the index animates.
+ * - `--live-option-count` — `options.length`.
+ * - `--live-index-pct` — `index ÷ (count − 1)`, 0–1: the choice's position in the
+ *   list (`0` for a one-option list or nothing selected).
+ * - `--live-value-num` — `Number(value)` *when the chosen value is numeric*, so a
+ *   choice's meaning drives layout directly:
+ *   `grid-template-columns: repeat(var(--live-value-num), 1fr)`. Not written for a
+ *   non-numeric value — keep a `var(--live-value-num, …)` fallback.
+ * - `--live-selected-count` — how many options are selected (the count CSS can't
+ *   compute: `:checked` matches them, nothing tallies them). `1`/`0` for a single
+ *   select; `0`…N for `<select multiple>`.
+ * - `--live-selected-pct` — `selected-count ÷ option-count`, 0–1: a multi-select
+ *   fill ratio.
+ *
+ * Bind the `<select>` itself, or a container holding one (props land on the
+ * container, so a sibling readout/indicator inherits them downward).
+ */
+declare const select: Source;
+
+/**
+ * The colour chosen in an `<input type="color">`, which CSS has no way to read.
+ * Exposed as one sRGB hex string, `--live-color` — pull whatever channels you
+ * need out of it with relative colour syntax / `color-mix()`, so a picker can
+ * live-theme a whole region with zero consumer JS:
+ *
+ *   .panel  { background: var(--live-color); }
+ *   .accent { background: oklch(from var(--live-color) l c h / 50%); }
+ *
+ * Typed (`configure({ typed: true })`) registers it as a `<color>`, so the theme
+ * interpolates between picks. Bind the input, or a container holding one (props
+ * land on the container, so siblings inherit the colour).
+ */
+declare const colorInput: Source;
+
+/**
+ * `--live-orient-alpha`, `--live-orient-beta`, `--live-orient-gamma` (degrees)
+ * from `deviceorientation`. Requires a user-gesture permission grant on some
+ * platforms (notably iOS).
+ */
+declare const orientation: Source;
+
+/**
+ * `--live-accel-x`, `--live-accel-y`, `--live-accel-z` (m/s², gravity included)
+ * from `devicemotion`. Requires a user-gesture permission grant on some
+ * platforms (notably iOS).
+ */
+declare const motion: Source;
+
+/**
+ * `--live-geo-lat`, `--live-geo-lng`, `--live-geo-accuracy` (meters) from
+ * `navigator.geolocation.watchPosition`. Requires a user-gesture permission
+ * grant on some platforms.
+ */
+declare const geo: Source;
+
+/**
+ * `--live-cpu-pressure` — the CPU's Compute Pressure state as an ordered tier:
+ * nominal=0, fair=1, serious=2, critical=3. Use it to back off expensive CSS
+ * work (animations, blur, shadows) as the CPU gets busy.
+ *
+ * Chromium-only, secure-context, and gated by the `compute-pressure` Permissions
+ * Policy. Feature-detects and no-ops (writing nothing) where unavailable, so CSS
+ * can fall back via `var(--live-cpu-pressure, 0)`.
+ */
+declare const cpuPressure: Source;
+
+/**
+ * For `<img>`: `--live-natural-w` / `--live-natural-h` (intrinsic pixel size),
+ * `--live-loaded` (0/1), `--live-broken` (0/1).
+ *
+ * Bind it to the image, or to a container that holds one. When bound to a
+ * container the props land on the container, so a wrapper/figure can react —
+ * skeleton while loading, fallback when broken, `aspect-ratio` from the natural
+ * dimensions before the bytes arrive.
+ */
+declare const img: Source;
+
+/**
+ * A small colour palette extracted from an `<img>`, each swatch a single
+ * `#rrggbb` colour you drop straight into `var()`:
+ *
+ *   - `--live-img`        — the dominant colour (the most common one)
+ *   - `--live-img-accent` — the most vibrant colour (an extracted accent)
+ *   - `--live-img-dark`   — the darkest colour that isn't black
+ *   - `--live-img-light`  — the lightest colour that isn't white
+ *   - `--live-img-avg`    — the average (mean) of every pixel
+ *
+ * plus `--live-img-temp` (−1 cool … +1 warm), the image's warm/cool bias. The
+ * pixels are sRGB, so a hex colour is enough — pull whatever channels you need
+ * out of it with relative colour syntax or mix it, no separate channel props:
+ *
+ *   .card { background: var(--live-img); }
+ *   .tag  { background: oklch(from var(--live-img-accent) l c h / 50%); }
+ *   .text { color: oklch(from var(--live-img) clamp(0, (0.6 - l) * 9, 1) 0 0); } // legible on the bg
+ *
+ * Bind the `<img>` or a container holding one (props land on the container, so a
+ * caption or overlay can theme itself from the artwork). Recomputed whenever the
+ * image loads, so a `src` swap updates it. Every swatch comes from one bucketing
+ * pass over just 16×16 px, offloaded via `createImageBitmap` + `OffscreenCanvas`.
+ *
+ * Cross-origin images need `crossorigin="anonymous"` **and** permissive CORS
+ * headers, else the canvas is tainted and the plugin no-ops (writes nothing, so
+ * `var(--live-img, …)` fallbacks stay safe). Feature-detects canvas support.
+ */
+declare const imgColor: Source;
+
+/**
+ * The live colours of a playing `<video>`, each a single `#rrggbb` colour: the
+ * **dominant** colour as `--live-video`, and the most vibrant **accent** as
+ * `--live-video-accent` (it reuses the dominant when a frame is essentially
+ * grayscale). The pixels are sRGB, so a hex colour is enough — drop them into
+ * `var()` for an ambient glow, scrim, or theme that tracks the footage, and pull
+ * channels out with relative colour syntax or mix them, no separate channel props:
+ *
+ *   .player { box-shadow: 0 0 4rem var(--live-video-accent); }
+ *   .scrim  { background: oklch(from var(--live-video) l c h / 50%); }
+ *
+ * Bind the `<video>` or a container holding one (props land on the container, so
+ * a caption or chrome can theme itself from the picture). Both colours come from
+ * one 16×16 bucketing pass. Sampling rides `requestVideoFrameCallback` — it fires
+ * per *presented* frame and stops when the video is paused, offscreen, or in a
+ * background tab, so an idle video costs nothing — and the pixel read is throttled
+ * to ~4 Hz on top. The current frame is read from a canvas; falls back to the
+ * `timeupdate` event where `requestVideoFrameCallback` is unavailable. A
+ * paused/poster frame is seeded on attach.
+ *
+ * Cross-origin video needs `crossorigin="anonymous"` **and** permissive CORS
+ * headers, else the canvas is tainted and the plugin no-ops (writes nothing, so
+ * `var(--live-video, …)` fallbacks stay safe). Feature-detects canvas support.
+ */
+declare const videoColor: Source;
+
+/** Every plugin source, for `registerPlugins()` / bulk registration. */
+declare const allPlugins: Source[];
+/**
+ * Register plugin sources with the core registry so they work via
+ * `bind`/`global`/`data-props-for`. Defaults to registering all plugins.
+ *
+ *   import { registerPlugins } from 'prop-for-that/plugins'
+ *   registerPlugins()                 // register everything
+ *   registerPlugins(battery, clock)   // register a subset
+ */
+declare function registerPlugins(...sources: Source[]): void;
+
+export { allPlugins, battery, clock, colorInput, cpuPressure, field, fieldState, formState, fps, geo, img, imgColor, media, motion, navType, network, online, orientation, pageFocused, pageVisible, pointerLocal, registerPlugins, scrollVelocity, select, videoColor, visualViewport };