npm - prop-for-that - Versions diffs - 0.6.4 - Mend

prop-for-that 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/CHANGELOG.md +369 -0
package/LICENSE +21 -0
package/README.md +76 -0
package/dist/auto.cjs +1 -0
package/dist/auto.d.cts +2 -0
package/dist/auto.d.ts +2 -0
package/dist/auto.global.js +1 -0
package/dist/auto.js +1 -0
package/dist/chunk-6DXNWAGS.js +1 -0
package/dist/chunk-LWKH66VY.js +1 -0
package/dist/head.cjs +1 -0
package/dist/head.d.cts +2 -0
package/dist/head.d.ts +2 -0
package/dist/head.global.js +1 -0
package/dist/head.js +1 -0
package/dist/index.cjs +1 -0
package/dist/index.d.cts +37 -0
package/dist/index.d.ts +37 -0
package/dist/index.global.js +1 -0
package/dist/index.js +1 -0
package/dist/plugins.cjs +1 -0
package/dist/plugins.d.cts +328 -0
package/dist/plugins.d.ts +328 -0
package/dist/plugins.js +1 -0
package/dist/types-BYVnuPvd.d.cts +64 -0
package/dist/types-BYVnuPvd.d.ts +64 -0
package/llms.txt +204 -0
package/package.json +83 -0

package/CHANGELOG.md ADDED Viewed

@@ -0,0 +1,369 @@
+# Changelog
+All notable changes to **prop-for-that** are recorded here. Format follows
+[Keep a Changelog](https://keepachangelog.com/). While the package is `0.x`, a
+**minor** bump signals a breaking change and a **patch** bump signals a
+backwards-compatible change (semver's `1.0.0`+ rules kick in at v1).
+Only the published library (`dist/`) is versioned here; the demo and docs site
+are repo-only and not part of the npm package.
+## [0.6.4]
+### Added
+- **`nav-type` plugin** — `--const-nav-type`: how the user arrived at the page,
+  written once as a string (`navigate` / `reload` / `back_forward` / `prerender`)
+  from `performance.getEntriesByType('navigation')[0].type`. Pairs with style
+  queries — `@container style(--const-nav-type: reload) { … }`. Global scope,
+  `const` cadence; typed mode registers it as a `<custom-ident>`. Import as
+  `navType` from `prop-for-that/plugins`. (Rides the batched writer, so it lands
+  the frame after bind — read the same value in a `<head>` script if you need it
+  before first paint.)
+## [0.6.3]
+### Added
+- **`page-visible` plugin** — `--live-page-visible` (1/0): whether the tab is in
+  the foreground vs hidden (backgrounded, minimized, switched away). The companion
+  to `page-focused` — a *visible* tab can still be *unfocused* — for pausing video,
+  polling, or expensive effects when the page is truly hidden. Global scope, seeded
+  from `document.visibilityState` and driven by `visibilitychange`. Import as
+  `pageVisible` from `prop-for-that/plugins`.
+- Internal: `onDocument` — a shared, ref-counted passive `document`-listener helper
+  (the document-target twin of `onWindow`), so sources can subscribe to
+  `document`-only events (`visibilitychange`, Page Lifecycle `freeze`/`resume`)
+  without a raw `addEventListener`.
+## [0.6.2]
+### Added
+- **`page-focused` plugin** — `--live-page-focused` (1/0): whether the document
+  has focus (tab frontmost *and* window focused). Goes `0` when the user switches
+  to another tab, window, or app, and `1` on return. Global scope, seeded from
+  `document.hasFocus()` and driven by window `focus`/`blur`. Import as
+  `pageFocused` from `prop-for-that/plugins`.
+## [0.6.1]
+### Added
+- **`--const-mem` head constant** — `prop-for-that/head` now writes
+  `navigator.deviceMemory` (approximate device RAM in GiB) alongside the existing
+  scrollbar/DPR/core constants. Chromium-only and deliberately coarse (`0.25`–`8`,
+  capped for fingerprinting resistance); falls back to `0` where unsupported,
+  matching the `--const-cores` pattern.
+## [0.6.0]
+### Changed
+- **`pointer-local` plugin — renamed its emitted properties (breaking).**
+  `--live-px` → `--live-local-pointer-x-ratio`, `--live-py` →
+  `--live-local-pointer-y-ratio`, `--live-pointer-inside` →
+  `--live-local-pointer-inside`. The element-scoped pointer now shares the
+  `pointer` namespace with a `local-` qualifier, so the two are distinguishable
+  at a glance, and the `-ratio` suffix keeps units honest against the viewport
+  `pointer` source (`--live-pointer-x` is pixels; `*-ratio` is 0–1). The global
+  `pointer` source's properties are unchanged. Update any CSS reading the old
+  names.
+## [0.5.2]
+### Added
+- **`select` plugin** (`prop-for-that/plugins`) — a native `<select>`'s state as
+  numbers CSS can't reach: `--live-index` (`selectedIndex`, `-1` if none),
+  `--live-option-count`, `--live-index-pct` (0–1), `--live-value-num`
+  (`Number(value)`, only when the value is numeric), `--live-selected-count` and
+  `--live-selected-pct` (0–1) — the multi-select tally `:checked` can't count.
+  Turns a `<select>` into a discrete CSS state machine (slide a segmented
+  indicator off `--live-index`) or drives layout off the chosen value. Bind the
+  `<select>` or a container.
+- **`color-input` plugin** (`prop-for-that/plugins`) — `--live-color`, the colour
+  chosen in an `<input type="color">` as one sRGB hex string (CSS otherwise can't
+  read it); extract channels with relative colour syntax / `color-mix()`. Typed
+  mode registers it `<color>` so a picker can live-theme + interpolate a region
+  with zero consumer JS. Bind the input or a container.
+- **`field` plugin extended** — the per-reason `ValidityState` flags `:invalid`
+  can't distinguish (each 1/0): `--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`; plus a `maxlength` budget when one is
+  set: `--live-remaining` (chars left) and `--live-fill-pct` (0–1) for a pure-CSS
+  character counter. The budget props aren't written without a `maxlength`, so
+  keep a `var()` fallback.
+## [0.5.1]
+### Added
+- **`data-props-typed` on the root `<html>`** — the markup equivalent of
+  `configure({ typed: true })` for the `auto` entry. Read once on load, it
+  registers every written `--live-*` as an interpolatable `@property`, so
+  HTML-only (`data-props-for`) pages can opt into typed values without touching
+  JS. It's a boolean: `@property` is registered per name for the whole document,
+  so typing is all-or-nothing and any attribute value is ignored (there's no
+  per-key subset, matching the JS API). For per-property initial values, use the
+  JS `configure({ defaults })`.
+## [0.5.0]
+### Changed
+- **BREAKING: `imgColor` and `videoColor` now emit single `#rrggbb` colours, not
+  RGB channels.** The canvas pixels are sRGB, so a hex colour is sufficient — and
+  CSS already extracts whatever channels you need from a colour with relative
+  colour syntax (`oklch(from var(--live-img) l c h)`) or `color-mix()`, so sharing
+  separate channel props was redundant. This replaces the per-channel `r` / `g` /
+  `b` props and the `l` luminance prop:
+  - `imgColor`: `--live-img`, `--live-img-accent`, `--live-img-dark`,
+    `--live-img-light`, `--live-img-avg` (each was `…-r` / `-g` / `-b` / `-l`).
+    `--live-img-temp` is unchanged.
+  - `videoColor`: `--live-video`, `--live-video-accent` (each was `…-r/g/b/l`).
+  - To pick legible text, derive it from the colour's own lightness instead of a
+    luminance prop, e.g. `color: oklch(from var(--live-img) clamp(0, (0.6 - l) * 9, 1) 0 0)`.
+- Both sources now declare `@property` specs (`<color>`), so the live colours
+  interpolate smoothly under `configure({ typed: true })`.
+## [0.4.6]
+### Added
+- **`videoColor` now also writes a live accent colour** — `--live-video-accent-r`
+  / `-g` / `-b` / `-l`, the most vibrant colour of the current frame (reuses the
+  dominant when a frame is essentially grayscale). It reuses the same `palette()`
+  pass as `imgColor`, so the accent is free beyond a few ops per sample; the plugin
+  stays dominant + accent only (no full palette) since a six-swatch extraction
+  isn't worth running 4×/second for an ambient glow. The existing
+  `--live-video-r/g/b/l` dominant props are unchanged.
+### Changed
+- Removed the now-unused internal `dominantColor()` from `_color.ts`; `videoColor`
+  reads the dominant from `palette()` instead. Internal only — no public API or
+  behaviour change.
+## [0.4.5]
+### Added
+- **`imgColor` now extracts a small palette**, not just the dominant colour. Four
+  new swatches, each in the same `r` / `g` / `b` (`0`–`255`) + `l` (luminance
+  `0`–`1`) shape as the dominant: `--live-img-accent-*` (the most vibrant colour —
+  reuses the dominant for a grayscale image), `--live-img-dark-*` (darkest
+  non-black), `--live-img-light-*` (lightest non-white), and `--live-img-avg-*`
+  (the mean of every pixel, vs the dominant's mode). Plus a scalar
+  `--live-img-temp` (`−1` cool … `+1` warm) from the image's red-vs-blue balance.
+  All of it falls out of the **same single 16×16 bucketing pass** — no extra image
+  reads — so it's barely dearer than before. The existing `--live-img-r/g/b/l`
+  dominant props are unchanged.
+### Changed
+- `_color.ts` gains a shared `buildBuckets()` helper and a `palette()` extractor;
+  `dominantColor()` (used by `videoColor`) is refactored onto it with no behaviour
+  change, so `videoColor` stays dominant-only and pays nothing for the new palette.
+## [0.4.4]
+### Added
+- **`videoColor` plugin** (`prop-for-that/plugins`, key `video-color`, element).
+  The dominant colour of a playing `<video>` — `--live-video-r` / `-g` / `-b`
+  (`0`–`255`) plus `--live-video-l` (relative luminance `0`–`1`) — for an ambient
+  glow, scrim, or chrome that tracks the picture. Sampling rides
+  `requestVideoFrameCallback` (so it stops when the video is paused, offscreen, or
+  backgrounded) and is throttled to ~4 Hz on top; it seeds a paused/poster frame
+  on attach and falls back to the `timeupdate` event where
+  `requestVideoFrameCallback` is unavailable. The current frame is read 16×16 from
+  a canvas, reusing `img-color`'s dominant-colour path. Cross-origin video needs
+  `crossorigin="anonymous"` + permissive CORS headers, else the canvas is tainted
+  and the plugin writes nothing (`var()` fallbacks stay safe). Bind the `<video>`
+  or a container holding one.
+### Changed
+- The shared pixel-sampling + dominant-colour logic now lives in
+  `src/plugins/_color.ts`, reused by both `imgColor` and `videoColor`. No
+  behaviour change to `imgColor`.
+## [0.4.3]
+### Added
+- **`formState` plugin** (`prop-for-that/plugins`, key `form-state`, element).
+  Form-level **validity & completion** that CSS can't compute — `:invalid` matches
+  one control, but CSS can't count across a form or gate on "all valid." Bind it to
+  a `<form>` (or wrapper) for `--live-field-count` (controls subject to constraint
+  validation), `--live-valid-count` / `--live-invalid-count`, `--live-all-valid`
+  (`1`/`0` — the submit gate), and `--live-completion` (`0`–`1`: valid required
+  controls ÷ required controls). Recomputes on `input`/`change`, and on the frame
+  after a `reset`. Pairs with `field-state` (interaction history) and `field`
+  (per-field `--live-valid`).
+- **`imgColor` plugin** (`prop-for-that/plugins`, key `img-color`, element). The
+  **dominant colour** of an `<img>` (CSS can't read pixels): `--live-img-r` /
+  `--live-img-g` / `--live-img-b` (`0`–`255`) plus `--live-img-l` (relative
+  luminance `0`–`1`, to pick legible text). Sampled 16×16 via `createImageBitmap`
+  + `OffscreenCanvas` (decode/downscale off the main thread, ~256 px read back),
+  with a `<canvas>` fallback; recomputed on load so a `src` swap updates it. Bind
+  the `<img>` or a container holding one. Cross-origin images need
+  `crossorigin="anonymous"` + CORS, else the canvas is tainted and the plugin
+  writes nothing — so keep a `var()` fallback. Kept separate from `img` so the
+  pixel-reading cost is opt-in.
+## [0.4.2]
+### Fixed
+- **`fieldState`**: `--live-changed` now clears correctly after a form `reset`.
+  It's recomputed against each control's *default* value synchronously, instead
+  of re-read in a microtask — Chromium runs that microtask checkpoint *before* the
+  reset event reverts the control values, so `--live-changed` stayed stuck on after
+  a reset. `dirty` / `touched` / `submitted` already reset correctly; now `changed`
+  does too (handles text inputs, `<textarea>`, `<select>`, and checkbox/radio).
+## [0.4.1]
+### Added
+- **`fieldState` plugin** (`prop-for-that/plugins`, key `field-state`, element).
+  The form interaction-history states libraries like Angular, Formik, and React
+  Hook Form track but CSS pseudo-classes can't express — all `1`/`0`:
+  `--live-dirty` / `--live-pristine` (has the user edited the field at all —
+  latches on first `input`/`change`), `--live-touched` / `--live-untouched`
+  (blurred at least once — latches on first `blur`), `--live-changed` (current
+  value differs from the value at mount — un-latches when typed back), and
+  `--live-submitted` (the owning `<form>` has been submitted — latches on
+  `submit`, clears on `reset`). Both latch pairs reset when the form is reset.
+  Bind a **single field** for that field's state, or a **`<form>` / wrapper** for
+  the *aggregate* over every field inside it (dirty/touched/changed if *any*
+  field is — like a framework form-group). Props land on the bound element, so a
+  label, hint, or submit button can reveal an error or enable only once
+  `--live-touched`/`--live-submitted`/`--live-dirty`. Validity stays in the
+  `field` plugin; focus stays in `:focus`.
+## [0.4.0]
+### Added
+- **`--const-scrollbar-thin-w`** from the `head` entry: the scrollbar width when
+  `scrollbar-width: thin` is applied, measured alongside `--const-scrollbar-w`.
+  Falls back to the classic width where `scrollbar-width: thin` isn't supported.
+- **`img` plugin** (`prop-for-that/plugins`, key `img`, element). For `<img>`:
+  `--live-natural-w` / `--live-natural-h` (intrinsic pixel size), `--live-loaded`
+  (`1`/`0`), `--live-broken` (`1`/`0`). Bind the image or a container holding one
+  (props land on the container, so a wrapper can show a skeleton while loading, a
+  fallback when broken, or set `aspect-ratio` from the natural size). Seeds from
+  `complete`/`naturalWidth` so already-cached images report correctly.
+- **`cpuPressure` plugin** (`prop-for-that/plugins`, key `cpu-pressure`, global).
+  Exposes the CPU's [Compute Pressure](https://developer.mozilla.org/en-US/docs/Web/API/Compute_Pressure_API)
+  state as `--live-cpu-pressure`, an ordered tier (nominal=0, fair=1, serious=2,
+  critical=3) — use it to back off expensive CSS work as the CPU gets busy.
+  Chromium-only, secure-context, and gated by the `compute-pressure` Permissions
+  Policy; feature-detects and no-ops (seeding `0` where supported, writing nothing
+  where not) so `var(--live-cpu-pressure, 0)` is safe everywhere.
+### Changed (breaking)
+- **The auto-mode attribute is renamed `data-prop` → `data-props-for`.** The
+  zero-config `prop-for-that/auto` entry now scans for, observes, and binds
+  `[data-props-for="key1 key2"]` (was `[data-prop]`). Rename the attribute on every
+  element: `<div data-prop="size">` → `<div data-props-for="size">`. The value
+  syntax is unchanged — one or more space-separated source keys. The imperative
+  `propsFor()` API is unaffected.
+- **`visibility` is now full-element, and its latch moved off the `live`
+  cadence.** Both signals key off *entire-element* containment instead of
+  first-pixel overlap, and the write-once latch is renamed:
+  - `--live-visible` (1/0) now flips only while the element is **entirely**
+    within the viewport (previously: any part overlapping). Still reactive.
+  - `--live-has-entered` → **`--const-has-entered`**. It's written once (latches
+    to 1 the first time the element is entirely in view, never resets), so it now
+    lives on the `const` cadence. Update CSS to read `var(--const-has-entered)`.
+  - The shared `IntersectionObserver` gains `threshold: [0, 1]` to detect full
+    containment. An element larger than the viewport can never be entirely
+    visible, so neither signal ever turns on for it.
+## [0.3.0]
+### Changed (breaking)
+- **Global `--live-*` writes go to an adopted stylesheet, not `<html>` inline
+  style.** Values written to the document root through the rAF writer now land in
+  a single constructable, adopted stylesheet rule (`:root {}`) instead of the
+  `<html>` element's inline `style`. This stops the per-frame churn from making
+  the DevTools Styles panel unusable and from flashing the Elements tree.
+  **Consumption is unchanged** — the rule targets `:root`, so `var()` / `calc()`
+  still inherit and resolve identically. What changes: reading
+  `document.documentElement.style.getPropertyValue('--live-*')` directly no longer
+  reflects these values (read computed style instead), and their cascade origin
+  moves from inline to an author rule (so author CSS / `!important` can now win).
+  Falls back to inline style where constructable stylesheets aren't supported
+  (older engines, SSR). **Element-scoped** writes are unchanged (still inline), and
+  the synchronous `head` entry still writes its `--const-*` constants inline by
+  design (first paint).
+### Added
+- **`pause()` / `resume()`**: freeze the shared frame loop (no sampling, no
+  flushing) so live values hold steady — handy for inspecting them in DevTools
+  without churn, or halting work in a backgrounded tab — then pick back up.
+  Bindings stay attached; both are idempotent.
+- **`configure({ liveHz })`**: optional cap (in Hz) on how often the loop samples
+  and flushes. Unset (default) runs every animation frame; e.g. `30` coalesces
+  writes to ≤30/sec for fewer style recalcs and a calmer DevTools panel, at the
+  cost of update smoothness. Throttles the whole loop, so per-frame samplers
+  (`fps`, `scroll-velocity`) measure at this rate too.
+## [0.2.0]
+### Changed (breaking)
+- **Unified `global()` and `bind()` into a single `propsFor()`**. It is global
+  (writes to the configured root) unless the first argument is a `Node`,
+  `NodeList`, or array of elements, in which case it attaches per element. Its
+  disposer tears down exactly what that call started and removes the custom
+  properties it wrote. The old `global` and `bind` exports are **removed**.
+- **The `config` object is no longer exported.** Read or change the prefixes and
+  root through `configure()`.
+- **`visibility`** now writes binary, scroll-*triggered* state: `--live-visible`
+  (`1`/`0`) plus `--live-has-entered` (`1`/`0`, latches on first entry and never
+  resets). The continuous `--live-visible-ratio` is **removed**; use native
+  `animation-timeline: view()` for continuous scroll-driven effects.
+- **`range`** is now container-aware: attach it to a wrapper and it finds the inner
+  `<input>`, writing `--live-value` / `--live-value-pct` on the **container** so
+  the input and sibling elements (gauges, readouts) can all read the value.
+### Removed (breaking)
+- **Global `scroll` source** (`--live-scroll-x` / `-y` / `-progress`): superseded
+  by native CSS scroll-driven animations (`animation-timeline: scroll()` /
+  `view()`), which run on the compositor.
+- **`el-scroll` plugin**: superseded by native `scroll(self)` / `scroll(nearest)`
+  scroll timelines.
+### Added
+- **`propsFor()`**: one entry point for attaching sources, global or per element
+  (a single element, a `NodeList`, or an array). Returns a scoped disposer.
+- **`reset()`**: tears down every active binding plus the shared observers and
+  listeners, for a clean slate (handy in tests and before hot reloads).
+- **`unregister(key)`**: removes a source from the registry by key.
+- **`SourceKey`** type export for the registry key.
+- **Typed properties** via `configure({ typed: true })`: opt-in `@property`
+  registration of written `--live-*` values, so they interpolate (consumers add
+  `transition` / `@keyframes`) and resolve to a guaranteed `0` initial. It is
+  feature-detected, idempotent, and uses `inherits: true`; sources may declare
+  per-property `props` typings (default `<number>` / `0`), and consumers may set
+  initial values in the same call with `configure({ typed: true, defaults: {…} })`.
+- `llms.txt`: a dense, agent-oriented reference, now included in the published package.
+- **`field`** is now container-aware: attach it to a wrapper and it finds the inner
+  `input` / `textarea` / `select`, writing `--live-length` / `--live-empty` /
+  `--live-valid` on the **container** so sibling readers (a counter, a meter, a
+  status word) inherit them. Attaching directly to the field still works.
+- **`media`** is now container-aware too: attach it to a wrapper and it finds the
+  inner `video` / `audio`, writing `--live-progress` / `--live-current-time` /
+  `--live-duration` / `--live-paused` / `--live-volume` on the **container** so
+  sibling readers (a progress ring, a scrubber) inherit them.
+### Fixed
+- Single shared `requestAnimationFrame` loop now drives the writer and every
+  sampler, instead of each source running its own.
+- `scroll-velocity` idles when the page isn't scrolling, instead of polling every
+  frame.
+- `fps` now reports a smoothed average rather than a jittery per-frame value.
+- `clock` no longer drifts: it's anchored to wall-clock time each tick.
+- One shared `pointermove` listener now feeds both `pointer` and `pointer-local`.
+- A failing source is isolated: it no longer takes down other sources or the loop.
+- Written custom properties are removed on teardown.
+- Disposers tear down only what their call started, leaving other bindings intact.
+## [0.1.0]
+### Added
+- Initial release. Batched, diffed `requestAnimationFrame` writer.
+- Core sources: `viewport`, `scroll`, `pointer`, `size`, `visibility`, `range`.
+- Entries: `prop-for-that` (API), `prop-for-that/auto` (`[data-prop]` scanning),
+  `prop-for-that/head` (sync FOUC-safe `--const-*`).
+- 14 opt-in plugins under `prop-for-that/plugins` (`scroll-velocity`, `online`,
+  `network`, `battery`, `clock`, `fps`, `visual-viewport`, `el-scroll`,
+  `pointer-local`, `media`, `field`, `orientation`, `motion`, `geo`).
+- Build: ESM + CJS + `.d.ts` via tsup; tree-shakeable; zero runtime deps.

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Adam Argyle
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,76 @@
+<div align="center">
+# prop-for-that
+**Expose what JavaScript knows but CSS can't see — as live CSS custom properties.**
+[![npm version](https://img.shields.io/npm/v/prop-for-that?logo=npm&color=cb3837)](https://www.npmjs.com/package/prop-for-that)
+[![minzipped size](https://img.shields.io/bundlephobia/minzip/prop-for-that?color=22aa77)](https://bundlephobia.com/package/prop-for-that)
+![zero dependencies](https://img.shields.io/badge/dependencies-0-22aa77)
+![license MIT](https://img.shields.io/badge/license-MIT-blue)
+[**Docs**](https://prop-for-that.netlify.app/docsite/) · [**Demos**](https://prop-for-that.netlify.app/) · [**Changelog**](./CHANGELOG.md) · [**llms.txt**](https://prop-for-that.netlify.app/llms.txt)
+</div>
+---
+Sliders, pointer position, element visibility, viewport size, battery, network, sensors — JavaScript can read all of it; CSS can't. **prop-for-that** writes that runtime state into `--live-*` and `--const-*` custom properties — batched and diffed down to one `setProperty` per frame — so your CSS can compose and react to it with plain `calc()` and `var()`.
+Zero dependencies. TypeScript. ESM + CJS. SSR-safe.
+```bash
+npm i prop-for-that
+```
+## Quick start
+```html
+<script type="module">import 'prop-for-that/auto'</script>
+<input type="range" data-props-for="range" />
+```
+```css
+/* the slider paints itself from its own value — no event listeners, no render loop */
+input {
+  background: hsl(calc(var(--live-value-pct) * 120) 80% 50%);
+}
+```
+Bind any element with `data-props-for="key …"` and read its `--live-*` properties in CSS. That's the whole idea.
+## Why
+- **CSS does the work.** No per-element event handlers or render loops — bind once, compose in stylesheets.
+- **Fast by design.** One `requestAnimationFrame` flush per frame, write-on-change diffing, and a single shared `ResizeObserver` / `IntersectionObserver` for the whole page.
+- **Ship only what you use.** Five core sources are built in; everything else is an opt-in, tree-shakeable plugin.
+- **Plays with the platform.** Opt into typed [`@property`](https://prop-for-that.netlify.app/docsite/concepts/typed-properties/) values for interpolation, or FOUC-safe constants written before first paint.
+- **Tiny and dependency-free**, in every bundle format.
+## What it can read
+**Core** (always on): viewport, pointer, element size, visibility, and `<input type="range">` values.
+**Plugins** (opt-in): battery, network, online status, page focus & visibility, navigation type, FPS, clock, scroll velocity, device orientation / motion, geolocation, CPU pressure, media playback, form & field state, select & color-picker values, and dominant + accent colors extracted from images and video — 20+ in all.
+→ Every source, every property, and live demos are in the **[docs](https://prop-for-that.netlify.app/docsite/reference/plugins/)**.
+## Three entry points
+| Import | What it does |
+| --- | --- |
+| `prop-for-that/auto` | Zero-config: attaches global state and binds every `data-props-for` element, kept in sync with the DOM. |
+| `prop-for-that` | Imperative API — `propsFor()`, `register()`, `configure()` — for explicit control and teardown. |
+| `prop-for-that/head` | Synchronous, FOUC-safe constants (scrollbar width, DPR, core count, device memory) before first paint. |
+| `prop-for-that/plugins` | The opt-in plugin catalog. |
+Full API and concepts: **[prop-for-that.netlify.app/docsite](https://prop-for-that.netlify.app/docsite/)**.
+## For LLMs / AI tools
+A condensed, single-file reference — entry points, the full variable catalog, recipes, and gotchas — lives at **[llms.txt](./llms.txt)**, hosted at [prop-for-that.netlify.app/llms.txt](https://prop-for-that.netlify.app/llms.txt) and shipped in the npm package (`node_modules/prop-for-that/llms.txt`).
+## License
+MIT © [Adam Argyle](https://github.com/argyleink)

package/dist/auto.cjs ADDED Viewed

@@ -0,0 +1 @@

+ 'use strict';var c={livePrefix:"--live-",constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0,typed:false};var h=new Set,z=null,l=0,w=false,D=false,F=0,E=()=>typeof requestAnimationFrame=="function";function b(e){if(l=0,D);let t=c.liveHz;if(E()&&t&&t>0&&e-F<1e3/t){l=requestAnimationFrame(b);return}if(F=e,w=true,h.size)for(let r of [...h])r(e);z?.(),w=false,h.size&&E()&&A();}function A(){l||w||D||(E()?l=requestAnimationFrame(b):b(0));}function R(){A();}function O(e){z=e;}var f;function Q(){if(f!==void 0||(f=null,typeof document>"u"||typeof CSSStyleSheet!="function"||!("adoptedStyleSheets"in document)))return f;try{let e=new CSSStyleSheet;e.replaceSync(":root{}"),document.adoptedStyleSheets=[...document.adoptedStyleSheets,e],f=e.cssRules[0].style;}catch{f=null;}return f}function a(e){if(typeof document<"u"&&e===document.documentElement){let t=Q();if(t)return t}return e.style}var M=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]])),R());}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 M;O(m.flush);var P=new Set;function q(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?c.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 L=new Map;function y(e,t){let r=L.get(e);if(!r){let n=new Set,o=i=>{for(let s of [...n])s(i);};r={handlers:n,dispatch:o},L.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),L.delete(e));}}var I={key:"viewport",scope:"global",start(e){let t=()=>{e.write("vw",window.innerWidth),e.write("vh",window.innerHeight);};return t(),y("resize",t)}};function p(e){return Math.round(e*1e4)/1e4}var W={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",p(n.clientX/window.innerWidth)),e.write("pointer-y-ratio",p(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,x=new WeakMap;function N(e,t){return v||(v=new IntersectionObserver(r=>{for(let n of r)x.get(n.target)?.(n);},{threshold:[0,1]})),x.set(e,t),v.observe(e),()=>{v.unobserve(e),x.delete(e);}}var B={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",p(n)),e.write("h",p(o)),e.write("aspect",o>0?p(n/o):0);})}};var X={key:"visibility",scope:"element",start(e){let t=false;return e.write("visible",0),e.write("has-entered",0,"const"),N(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 Y(e,t){return e.matches(t)?e:e.querySelector(t)}var $={key:"range",scope:"element",start(e){let t=Y(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?p((i-n)/(o-n)):0);};return r(),t.addEventListener("input",r,{passive:true}),()=>t.removeEventListener("input",r)}};var j={viewport:I,pointer:W,size:B,visibility:X,range:$};var Z=()=>{},u=new Map,ee={...j};function G(e){Object.assign(c,e);}function te(e,t,r){return {target:e,config:c,write(n,o,i="live"){let s=(i==="const"?c.constPrefix:c.livePrefix)+n;t.add(s),c.typed&&q(s,n,r),m.set(e,s,String(o));}}}function U(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 re(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=ee[o];if(!i){console.warn(`[prop-for-that] unknown source "${o}"`);continue}let s=new Set,C;try{C=i.start(te(e,s,i.props));}catch(J){console.error(`[prop-for-that] source "${o}" failed to start`,J);continue}r.set(o,{dispose:C,written:s}),n.push(o);}return ()=>{let o=u.get(e);if(o){for(let i of n)U(e,i,o);o.size===0&&u.delete(e);}}}function ne(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 oe(e){return Array.isArray(e)&&(e.length===0||typeof e[0]=="string")}function H(e,t){let r,n;if(t===void 0&&oe(e)?(r=c.root?[c.root]:[],n=e):(r=ne(e),n=t??[]),!r.length||!n.length)return Z;let o=r.map(i=>re(i,n));return ()=>{for(let i of o)i();}}function k(e,t){let r=u.get(e);if(r){for(let n of t??[...r.keys()])U(e,n,r);r.size===0&&u.delete(e);}}var ie=["viewport","pointer"],d=new WeakMap;function se(e){return (e.dataset.propsFor??"").split(/\s+/).filter(Boolean)}function S(e){let t=se(e),r=d.get(e)??[],n=r.filter(i=>!t.includes(i)),o=t.filter(i=>!r.includes(i));n.length&&k(e,n),o.length&&H(e,o),t.length?d.set(e,t):d.delete(e);}function V(e){let t=d.get(e);t&&(k(e,t),d.delete(e));}function ce(e){e instanceof HTMLElement&&(e.hasAttribute("data-props-for")&&S(e),e.querySelectorAll("[data-props-for]").forEach(S));}function pe(e){e instanceof HTMLElement&&(V(e),e.querySelectorAll("[data-props-for]").forEach(V));}function _(){document.documentElement.hasAttribute("data-props-typed")&&G({typed:true}),H(ie),document.querySelectorAll("[data-props-for]").forEach(S),new MutationObserver(e=>{for(let t of e){if(t.type==="attributes"&&t.target instanceof HTMLElement){S(t.target);continue}t.removedNodes.forEach(pe),t.addedNodes.forEach(ce);}}).observe(document.documentElement,{subtree:true,childList:true,attributes:true,attributeFilter:["data-props-for"]});}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",_,{once:true}):_());

package/dist/auto.d.cts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/auto.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/auto.global.js ADDED Viewed

@@ -0,0 +1 @@

package/dist/auto.js ADDED Viewed

@@ -0,0 +1 @@

+ import {i,j,k}from'./chunk-6DXNWAGS.js';import'./chunk-LWKH66VY.js';var p=["viewport","pointer"],n=new WeakMap;function m(e){return (e.dataset.propsFor??"").split(/\s+/).filter(Boolean)}function o(e){let t=m(e),d=n.get(e)??[],s=d.filter(r=>!t.includes(r)),a=t.filter(r=>!d.includes(r));s.length&&k(e,s),a.length&&j(e,a),t.length?n.set(e,t):n.delete(e);}function u(e){let t=n.get(e);t&&(k(e,t),n.delete(e));}function E(e){e instanceof HTMLElement&&(e.hasAttribute("data-props-for")&&o(e),e.querySelectorAll("[data-props-for]").forEach(o));}function L(e){e instanceof HTMLElement&&(u(e),e.querySelectorAll("[data-props-for]").forEach(u));}function l(){document.documentElement.hasAttribute("data-props-typed")&&i({typed:true}),j(p),document.querySelectorAll("[data-props-for]").forEach(o),new MutationObserver(e=>{for(let t of e){if(t.type==="attributes"&&t.target instanceof HTMLElement){o(t.target);continue}t.removedNodes.forEach(L),t.addedNodes.forEach(E);}}).observe(document.documentElement,{subtree:true,childList:true,attributes:true,attributeFilter:["data-props-for"]});}typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",l,{once:true}):l());

package/dist/chunk-6DXNWAGS.js ADDED Viewed

@@ -0,0 +1 @@

+ import {a as a$1}from'./chunk-LWKH66VY.js';var a=new Set,z=null,f=0,h=false,d=false,F=0,E=()=>typeof requestAnimationFrame=="function";function b(e){if(f=0,d)return;let t=a$1.liveHz;if(E()&&t&&t>0&&e-F<1e3/t){f=requestAnimationFrame(b);return}if(F=e,h=true,a.size)for(let r of [...a])r(e);z?.(),h=false,a.size&&E()&&m();}function m(){f||h||d||(E()?f=requestAnimationFrame(b):b(0));}function D(){m();}function R(e){z=e;}function te(e){return a.add(e),m(),()=>{a.delete(e);}}function B(){d||(d=true,f&&typeof cancelAnimationFrame=="function"&&cancelAnimationFrame(f),f=0);}function V(){d&&(d=false,m());}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 y(e){if(typeof document<"u"&&e===document.documentElement){let t=G();if(t)return t}return e.style}var M=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=y(t);for(let[i,s]of r)n.get(i)!==s&&(o.setProperty(i,s),n.set(i,s));}this.pending.clear();}}},g=new M;R(g.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?a$1.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 x=new Map;function v(e,t){let r=x.get(e);if(!r){let n=new Set,o=i=>{for(let s of [...n])s(i);};r={handlers:n,dispatch:o},x.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),x.delete(e));}}var O={key:"viewport",scope:"global",start(e){let t=()=>{e.write("vw",window.innerWidth),e.write("vh",window.innerHeight);};return t(),v("resize",t)}};function c(e){return Math.round(e*1e4)/1e4}var I={key:"pointer",scope:"global",start(e){return v("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 S,k=new WeakMap;function K(e,t){return S||(S=new ResizeObserver(r=>{for(let n of r)k.get(n.target)?.(n);})),k.set(e,t),S.observe(e),()=>{S.unobserve(e),k.delete(e);}}var w,T=new WeakMap;function W(e,t){return w||(w=new IntersectionObserver(r=>{for(let n of r)T.get(n.target)?.(n);},{threshold:[0,1]})),T.set(e,t),w.observe(e),()=>{w.unobserve(e),T.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,L={...$};function Ke(e){L[e.key]=e;}function We(e){delete L[e];}function qe(e){Object.assign(a$1,e);}function Q(e,t,r){return {target:e,config:a$1,write(n,o,i="live"){let s=(i==="const"?a$1.constPrefix:a$1.livePrefix)+n;t.add(s),a$1.typed&&A(s,n,r),g.set(e,s,String(o));}}}function C(e,t,r){let n=r.get(t);if(!n)return;n.dispose();let o=y(e);for(let i of n.written)o.removeProperty(i),g.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=L[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)C(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=a$1.root?[a$1.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()])C(e,n,r);r.size===0&&u.delete(e);}}function Ye(){for(let[e,t]of u)for(let r of [...t.keys()])C(e,r,t);u.clear();}export{te as a,B as b,V as c,v as d,c as e,X as f,Ke as g,We as h,qe as i,Ne as j,Xe as k,Ye as l};

package/dist/chunk-LWKH66VY.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ var e={livePrefix:"--live-",constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0,typed:false};export{e as a};

package/dist/head.cjs ADDED Viewed

@@ -0,0 +1 @@

+ 'use strict';var o={constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0};function s(){let i=o.root,t=(n,r)=>i.style.setProperty(o.constPrefix+n,String(r)),e=document.createElement("div");e.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden",(document.body??i).appendChild(e),t("scrollbar-w",e.offsetWidth-e.clientWidth),e.style.scrollbarWidth="thin",t("scrollbar-thin-w",e.offsetWidth-e.clientWidth),e.remove(),t("dpr",window.devicePixelRatio||1),t("cores",navigator.hardwareConcurrency||0),t("mem",navigator.deviceMemory||0);}typeof document<"u"&&s();

package/dist/head.d.cts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/head.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+
2	+ export { }

package/dist/head.global.js ADDED Viewed

@@ -0,0 +1 @@

+ (function(){'use strict';var o={constPrefix:"--const-",root:typeof document<"u"?document.documentElement:void 0};function s(){let i=o.root,t=(n,r)=>i.style.setProperty(o.constPrefix+n,String(r)),e=document.createElement("div");e.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden",(document.body??i).appendChild(e),t("scrollbar-w",e.offsetWidth-e.clientWidth),e.style.scrollbarWidth="thin",t("scrollbar-thin-w",e.offsetWidth-e.clientWidth),e.remove(),t("dpr",window.devicePixelRatio||1),t("cores",navigator.hardwareConcurrency||0),t("mem",navigator.deviceMemory||0);}typeof document<"u"&&s();})();

package/dist/head.js ADDED Viewed

@@ -0,0 +1 @@

+ import {a}from'./chunk-LWKH66VY.js';function s(){let i=a.root,e=(r,n)=>i.style.setProperty(a.constPrefix+r,String(n)),t=document.createElement("div");t.style.cssText="position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden",(document.body??i).appendChild(t),e("scrollbar-w",t.offsetWidth-t.clientWidth),t.style.scrollbarWidth="thin",e("scrollbar-thin-w",t.offsetWidth-t.clientWidth),t.remove(),e("dpr",window.devicePixelRatio||1),e("cores",navigator.hardwareConcurrency||0),e("mem",navigator.deviceMemory||0);}typeof document<"u"&&s();

package/dist/index.cjs ADDED Viewed

@@ -0,0 +1 @@

+ '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;

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,37 @@
+import { a as Config, D as Disposer, S as Source } from './types-BYVnuPvd.cjs';
+export { C as Cadence, P as PropSpec, b as SourceContext } from './types-BYVnuPvd.cjs';
+/** 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 };