vintage-frames 0.1.0 → 0.2.0

package/dist/components/vf-option.js

@@ -1,18 +1,19 @@
 import { vfElement as e } from "../define.js";
 import { ScaleController as t } from "../scale.js";
 import n from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { vfDisplay as r } from "../styles/recipes/display-face.js";
-import { vfBase as i } from "../styles/recipes/host.js";
-import { CHECKMARK as a, glyphSvg as o } from "../glyphs.js";
-import { LitElement as s, css as c, html as l } from "lit";
-import { property as u } from "lit/decorators.js";
+import { VfPositioned as r } from "../position.js";
+import { vfDisplay as i } from "../styles/recipes/display-face.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { CHECKMARK as o, glyphSvg as s } from "../glyphs.js";
+import { LitElement as c, css as l, html as u } from "lit";
+import { property as d } from "lit/decorators.js";
 //#region src/components/vf-option.ts
-var d = class extends s {
+var f = class extends r(c) {
 	static {
 		this.styles = [
+			a,
 			i,
-			r,
-			c`
+			l`
       :host {
         position: relative;
         display: flex;
@@ -97,23 +98,23 @@ var d = class extends s {
 		e.has("selected") && (this.#e.ariaSelected = this.selected ? "true" : "false"), e.has("disabled") && (this.#e.ariaDisabled = this.disabled ? "true" : null);
 	}
 	render() {
-		return l`
+		return u`
       <span class="check" part="check" aria-hidden="true"
-        >${o(a, "checkmark")}</span
+        >${s(o, "checkmark")}</span
       >
       <slot></slot>
     `;
 	}
 };
-n([u()], d.prototype, "value", void 0), n([u({
+n([d()], f.prototype, "value", void 0), n([d({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "disabled", void 0), n([u({
+})], f.prototype, "disabled", void 0), n([d({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "selected", void 0), n([u({
+})], f.prototype, "selected", void 0), n([d({
 	type: Boolean,
 	reflect: !0
-})], d.prototype, "active", void 0), d = n([e("vf-option")], d);
+})], f.prototype, "active", void 0), f = n([e("vf-option")], f);
 //#endregion
-export { d as VfOption };
+export { f as VfOption };

package/dist/components/vf-paragraph.d.ts

@@ -19,8 +19,8 @@ declare const VfParagraph_base: (new (...args: any[]) => import("../size.js").Vf
  *   everything after it further off the device-pixel grid, smearing 1-bit
  *   borders and bitmap glyph stems (docs/SIZING.md rule 2). A
  *   whole-pixel line box accumulates whole offsets;
- * - its own {@link GridSnapController}, so it holds its own origin once the
- *   page opts in with `applyGridSnap()`;
+ * - its own {@link GridSnapController}, so it holds its own origin
+ *   wherever the page puts it;
  * - a **declared box** when the layout wants one — `width`/`height` in whole
  *   system px ({@link VfSized}). In flow a paragraph takes its container's
  *   width, which is usually right; a *placed* one (`top`/`left`) shrink-wraps
@@ -52,7 +52,7 @@ export declare class VfParagraph extends VfParagraph_base {
     static styles: import("lit").CSSResult[];
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Which embedded face to set the copy in — `'body'` (Geneva, the

package/dist/components/vf-progress-bar.d.ts

@@ -28,7 +28,7 @@ export declare class VfProgressBar extends VfProgressBar_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Current progress, from 0 to `max`. Clamped for display and ARIA. */
     value: number;

package/dist/components/vf-scroll-area.d.ts

@@ -30,7 +30,7 @@ declare const VfScrollArea_base: (new (...args: any[]) => import("../position.js
  */
 export declare class VfScrollArea extends VfScrollArea_base {
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Which scroll rails to reserve as permanent placeholders: `vertical`

package/dist/components/vf-select.d.ts

@@ -116,7 +116,7 @@ export declare class VfSelect extends VfSelect_base {
     private cachedOptions;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * Whether the closed pill wears the kit's dashed focus rule — keyboard focus

package/dist/components/vf-separator.d.ts

@@ -22,7 +22,7 @@ export declare class VfSeparator extends VfSeparator_base {
     #private;
     static styles: import("lit").CSSResult[];
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Render as a vertical rule (1px wide) instead of horizontal. */
     vertical: boolean;

package/dist/components/vf-slider.d.ts

@@ -48,7 +48,7 @@ export declare class VfSlider extends VfSlider_base {
     private readonly trackSize;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** True when this component owns the host `tabindex`. */
     private selfManagedTabIndex;

package/dist/components/vf-stack.d.ts

@@ -93,12 +93,16 @@ declare const VfStack_base: (new (...args: any[]) => import("../size.js").VfSize
  * and a layout box for *anything*, and consumer content inside it — a div, an
  * `<img>`, a run of text — has no controller of its own. So the flex
  * container, the placed-child anchor and the `vf-snap` class live on one
- * shadow box, and under `applyGridSnap()` the correction moves the stack's
+ * shadow box, and the correction moves the stack's
  * whole coordinate system; children (kit or not) ride it, and the sweep's
  * outermost-first order means the kit children then find nothing left to
  * correct. What this deliberately does not fix: a text-governed child width
  * mid-row still shifts later siblings fractionally (their own controllers
- * cover that), and centering still can't land on a whole pixel by itself.
+ * cover that).
+ *
+ * **Centering lands on whole system px as well** — halving an odd count of free
+ * system px gives a half, which no container can round in CSS. See
+ * {@link CrossCenterController}.
  *
  * It is also the kit's one **typographically transparent** component: `vfBase`'s
  * chrome face, ratio line box, color and non-selectability are all reset to
@@ -148,18 +152,18 @@ export declare class VfStack extends VfStack_base {
      * `text-align` on any element, so the cross-axis switch used to re-align every
      * run of copy inside the stack (see the `text-align` reset above).
      *
-     * Note the one thing centering cannot do: land on a whole pixel by itself. A
-     * 16px caption centered in a row set by the 25-system-px `vf-number-field`
-     * sits at 4.5 system px, and no container can round that — it would have to
-     * read each child's height. `applyGridSnap()` keeps the caption's own ink
-     * crisp regardless (it corrects the origin inside the child's shadow root);
-     * `place="start"` is the deterministic escape.
+     * Centering divides the free space in two, so an odd count of system px would
+     * land a child on a half — a 16px caption centered in a row set by the
+     * 25-system-px `vf-number-field` sits at 4.5. {@link CrossCenterController}
+     * steps that back onto whole system px, the exact half going toward the start
+     * the way QuickDraw's `div 2` did; `place="start"` is still the way to ask
+     * for no centering at all.
      */
     place?: VfStackPlace;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
     /**
-     * Hold the box on the device-pixel grid under `applyGridSnap()` — see the
+     * Hold the box on the device-pixel grid — see the
      * class doc for why the original no-controller decision was reversed. The
      * host is what gets measured; `.box` (vf-snap) is where the correction
      * lands, taking the whole coordinate system with it.
@@ -167,6 +171,20 @@ export declare class VfStack extends VfStack_base {
     private readonly gridSnap;
     /** The shadow flex box `gap`/`pad` write to; exists from the first render. */
     private readonly box;
+    /** The slot the children arrive through. (`slot` itself is HTMLElement's.) */
+    private readonly childSlot;
+    /**
+     * Keeps cross-axis centering on whole system px (src/cross-center.ts).
+     * A null axis is the inert state — no observers, nothing held — which is
+     * every column that starts its children, i.e. the default.
+     */
+    private readonly crossCenter;
+    /**
+     * Mirrors the stylesheet's alignment selectors: a row centers unless `place`
+     * names something else, a column only when it says `center`, and an
+     * unrecognized value lands on the direction's default in both places.
+     */
+    private get centersChildren();
     /**
      * `gap` and `pad` go on the shadow box's inline style as
      * `calc(var(--vf-scale, 1) * Npx)`, the way VfSized writes the declared

package/dist/components/vf-stack.js

@@ -5,15 +5,20 @@ import { VfPositioned as a } from "../position.js";
 import { vfBase as o } from "../styles/recipes/host.js";
 import { GridSnapController as s } from "../grid-snap.js";
 import { VfSized as c } from "../size.js";
-import { LitElement as l, css as u, html as d } from "lit";
-import { property as f, query as p } from "lit/decorators.js";
+import { CrossCenterController as l } from "../cross-center.js";
+import { LitElement as u, css as d, html as f } from "lit";
+import { property as p, query as m } from "lit/decorators.js";
 //#region src/components/vf-stack.ts
-var m = class extends c(a(l)) {
+var h = class extends c(a(u)) {
 	constructor(...e) {
-		super(...e), this.direction = "column", this.gap = 0, this.scale = new t(this), this.gridSnap = new s(this);
+		super(...e), this.direction = "column", this.gap = 0, this.scale = new t(this), this.gridSnap = new s(this), this.crossCenter = new l(this, () => ({
+			box: this.box,
+			slot: this.childSlot,
+			axis: this.centersChildren ? this.direction === "row" ? "y" : "x" : null
+		}));
 	}
 	static {
-		this.styles = [o, u`
+		this.styles = [o, d`
       :host {
         /* Shrink to the content, but stay BLOCK-level while doing it: the stack
            is exactly as big as what it holds, so it can't hand a size it never
@@ -126,6 +131,20 @@ var m = class extends c(a(l)) {
         align-items: flex-end;
       }
 
+      /* The centering tie: CrossCenterController steps a centered child onto
+         whole system px through these variables (src/cross-center.ts has the
+         why). Keyed off the marker because a ::slotted rule outranks a slotted
+         element's own :host — a blanket position would restyle vf-window and
+         vf-menu. */
+      :host(:not([direction='row'])) ::slotted([data-vf-tie]) {
+        position: relative;
+        left: var(--vf-stack-dx, 0px);
+      }
+      :host([direction='row']) ::slotted([data-vf-tie]) {
+        position: relative;
+        top: var(--vf-stack-dy, 0px);
+      }
+
       /* --- Children ----------------------------------------------------- */
       /* Neither grow nor shrink: the content governs the box, not the other way
          round (see the class doc). A light-DOM declaration beats a ::slotted
@@ -156,13 +175,16 @@ var m = class extends c(a(l)) {
       }
     `];
 	}
+	get centersChildren() {
+		return this.place === "center" ? !0 : this.place === "start" || this.place === "end" ? !1 : this.direction === "row";
+	}
 	updated(e) {
 		e.has("gap") && (this.box.style.gap = n(this.gap)), e.has("pad") && (this.box.style.padding = r(this.pad));
 	}
 	render() {
-		return d`<div class="vf-snap box"><slot></slot></div>`;
+		return f`<div class="vf-snap box"><slot></slot></div>`;
 	}
 };
-i([f({ reflect: !0 })], m.prototype, "direction", void 0), i([f({ type: Number })], m.prototype, "gap", void 0), i([f()], m.prototype, "pad", void 0), i([f({ reflect: !0 })], m.prototype, "place", void 0), i([p(".box")], m.prototype, "box", void 0), m = i([e("vf-stack")], m);
+i([p({ reflect: !0 })], h.prototype, "direction", void 0), i([p({ type: Number })], h.prototype, "gap", void 0), i([p()], h.prototype, "pad", void 0), i([p({ reflect: !0 })], h.prototype, "place", void 0), i([m(".box")], h.prototype, "box", void 0), i([m("slot")], h.prototype, "childSlot", void 0), h = i([e("vf-stack")], h);
 //#endregion
-export { m as VfStack };
+export { h as VfStack };

package/dist/components/vf-swatch.d.ts

@@ -79,7 +79,7 @@ export declare class VfSwatch extends VfSwatch_base {
     disabled: boolean;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /**
      * The consumer's `--vf-swatch-checker` override, or `''` for the kit

package/dist/components/vf-window.d.ts

@@ -92,7 +92,7 @@ export declare class VfWindow extends VfWindow_base {
     scrollbars?: 'vertical' | 'horizontal' | 'both';
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
     private readonly scale;
-    /** Device-pixel grid snapping (opt in with applyGridSnap()); see src/grid-snap.ts. */
+    /** Device-pixel grid snapping; see src/grid-snap.ts. */
     private readonly gridSnap;
     /** Holds the centered title patch on the placement lattice (src/chrome.ts). */
     private readonly titleCenter;

package/dist/cross-center.d.ts

@@ -0,0 +1,76 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/** The axis a container centers its children across — `null` when it doesn't. */
+export type CrossAxis = 'x' | 'y' | null;
+/** What {@link CrossCenterController} reads off its host before each measure. */
+export interface CrossCenterParts {
+    /** The flex box the children are centered in. */
+    box: HTMLElement | null | undefined;
+    /** The slot they arrive through. */
+    slot: HTMLSlotElement | null | undefined;
+    /** Which axis that centering happens on, if it happens at all. */
+    axis: CrossAxis;
+}
+/**
+ * Marks a held child; the container's `::slotted()` rule keys off it. The
+ * container owns the correction, the child carries only the fact of it.
+ */
+export declare const CENTER_TIE_ATTRIBUTE = "data-vf-tie";
+/**
+ * Holds cross-axis centering on the system-pixel grid.
+ *
+ * Centering halves the free space, and half of an odd count of system px is a
+ * half: a 71-system-px child centered in 200 sits at 64.5 — half a *system*
+ * px, so the child's whole 1-bit interior misses the device grid at every
+ * density. CSS can't round it: no rule can say "half my child's width,
+ * floored", and a fractional transform leaves the composite-time fringe
+ * grid-snap.ts measured. So the offset is measured here and corrected through
+ * layout: each centered child steps to the nearest whole system px, the exact
+ * half going toward the start as QuickDraw's `div 2` did.
+ *
+ * It measures where flexbox actually put each child rather than deriving from
+ * the two widths — a stack holds anything, including a child whose width isn't
+ * whole system px (`vf-select` is 87⅓ at 1.5×), and deriving would move such a
+ * child *off* a grid position it already held. Everything is relative to the
+ * box, so a stack the page put on a fractional origin is untouched: that stays
+ * the page's fault, or the grid snapper's to absorb (src/grid-snap.ts).
+ *
+ * The correction lands as {@link CENTER_TIE_ATTRIBUTE} plus a length in
+ * `--vf-stack-dx` / `--vf-stack-dy`, applied by the container's own
+ * `::slotted([data-vf-tie])` rule (see vf-stack.ts). A marker plus a variable
+ * is the weakest channel available — any inline style or page rule beats it —
+ * and the marker matters because a `::slotted` rule outranks a slotted
+ * element's own `:host` (measured): a blanket `position` would restyle
+ * `vf-window` and `vf-menu`.
+ *
+ * Re-measures after every host render and on any resize of the box or a child
+ * — a density change, a late-registering face, an edited label. A relative
+ * offset changes no box's size, so the measurement stays stable: the applied
+ * correction is subtracted back out before the next one is derived, and a
+ * child already on the grid is left exactly as it is.
+ */
+export declare class CrossCenterController implements ReactiveController {
+    private readonly host;
+    private readonly read;
+    private observer?;
+    private observed;
+    private slot?;
+    private readonly held;
+    constructor(host: ReactiveControllerHost & HTMLElement, read: () => CrossCenterParts);
+    hostConnected(): void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    /** Re-attach to the current box, slot and children, then re-measure. */
+    private readonly sync;
+    /**
+     * Detach from everything and give every held child its box back. Keeps the
+     * observer instance, so a re-parented stack doesn't allocate a fresh one.
+     */
+    private rest;
+    /** Observe the box and every child, once per distinct set. */
+    private watch;
+    /** Put every centered child on the nearest whole system px, ties to the start. */
+    private hold;
+    private apply;
+    /** Give a child back exactly the box it arrived with. */
+    private clear;
+}

package/dist/cross-center.js

@@ -0,0 +1,69 @@
+import { effectiveScale as e } from "./scale.js";
+//#region src/cross-center.ts
+var t = "data-vf-tie", n = {
+	x: "--vf-stack-dx",
+	y: "--vf-stack-dy"
+}, r = 1 / 32, i = .05, a = (e) => parseFloat(e) || 0;
+function o(e, t) {
+	let n = getComputedStyle(e), r = e.getBoundingClientRect();
+	return t === "x" ? r.left + a(n.borderLeftWidth) + a(n.paddingLeft) : r.top + a(n.borderTopWidth) + a(n.paddingTop);
+}
+var s = class {
+	constructor(e, t) {
+		this.host = e, this.read = t, this.observed = [], this.held = /* @__PURE__ */ new Map(), this.sync = () => {
+			let e = this.read(), { box: t, slot: n, axis: r } = e;
+			if (!t || !n || !r) return this.rest();
+			n !== this.slot && (this.slot?.removeEventListener("slotchange", this.sync), n.addEventListener("slotchange", this.sync), this.slot = n), this.watch(t, n), this.hold(e);
+		}, e.addController(this);
+	}
+	hostConnected() {
+		this.sync();
+	}
+	hostUpdated() {
+		this.sync();
+	}
+	hostDisconnected() {
+		this.rest();
+	}
+	rest() {
+		this.observer?.disconnect(), this.observed = [], this.slot?.removeEventListener("slotchange", this.sync), this.slot = void 0;
+		for (let e of [...this.held.keys()]) this.clear(e);
+	}
+	watch(e, t) {
+		if (typeof ResizeObserver > "u") return;
+		let n = [e, ...t.assignedElements()];
+		if (!(n.length === this.observed.length && n.every((e, t) => e === this.observed[t]))) {
+			this.observer ??= new ResizeObserver(() => this.hold(this.read())), this.observer.disconnect();
+			for (let e of n) this.observer.observe(e);
+			this.observed = n;
+		}
+	}
+	hold({ box: t, slot: n, axis: a }) {
+		if (!t || !n || !a) return;
+		let s = e(this.host), c = o(t, a), l = new Set(this.held.keys());
+		for (let e of n.assignedElements()) {
+			if (!(e instanceof HTMLElement)) continue;
+			l.delete(e);
+			let t = getComputedStyle(e).position;
+			if (t === "absolute" || t === "fixed") {
+				this.clear(e);
+				continue;
+			}
+			let n = e.getBoundingClientRect(), o = a === "x" ? n.left : n.top, u = this.held.get(e), d = o - c - (u?.axis === a ? u.offset : 0), f = Math.ceil(d / s - .5 - i) * s - d;
+			Math.abs(f) < r ? this.clear(e) : this.apply(e, a, f);
+		}
+		for (let e of l) this.clear(e);
+	}
+	apply(e, r, i) {
+		let a = this.held.get(e);
+		(a?.axis !== r || a.offset !== i) && (e.style.setProperty(n[r], `${i}px`), e.style.removeProperty(n[r === "x" ? "y" : "x"]), e.setAttribute(t, ""), this.held.set(e, {
+			axis: r,
+			offset: i
+		}));
+	}
+	clear(e) {
+		this.held.delete(e) && (e.style.removeProperty(n.x), e.style.removeProperty(n.y), e.removeAttribute(t), e.getAttribute("style") || e.removeAttribute("style"));
+	}
+};
+//#endregion
+export { t as CENTER_TIE_ATTRIBUTE, s as CrossCenterController };

package/dist/define.d.ts

@@ -14,8 +14,8 @@
  * working. The warning matters as much as the guard, because a duplicated copy
  * is not benign even once the page survives it: the scaling, grid-snapping and
  * focus-modality registries are all module-scoped singletons, so the second
- * copy's `applyGridSnap()` reaches none of the first copy's components and the
- * two disagree silently. Better to say so than to let it look fine.
+ * copy's schedulers reach none of the first copy's components and the two
+ * disagree silently. Better to say so than to let it look fine.
  */
 /**
  * Register `ctor` under `tagName` unless the name is already taken.

package/dist/define.js

@@ -3,7 +3,7 @@ var e = (e, t) => {
 	let n = customElements.get(e);
 	if (n !== t) {
 		if (n !== void 0) {
-			console.warn(`[vintage-frames] <${e}> is already registered on this page, so this second registration was skipped and the first one kept. Two copies of the library also mean two of every module-scoped singleton — applyGridSnap(), applyScale() and the focus-modality tracker each only reach the components built from their own copy. Dedupe vintage-frames to a single version.`);
+			console.warn(`[vintage-frames] <${e}> is already registered on this page, so this second registration was skipped and the first one kept. Two copies of the library also mean two of every module-scoped singleton — the grid-snap scheduler, applyScale() and the focus-modality tracker each only reach the components built from their own copy. Dedupe vintage-frames to a single version.`);
 			return;
 		}
 		customElements.define(e, t);

package/dist/grid-snap.d.ts

@@ -9,9 +9,8 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  *
  * The component's template must put the `vf-snap` class (see `vfBase`) on its
  * top-level painted element(s); the host box is what gets measured, so an
- * authored offset inside it (a toggle's centered box) stays put. Dormant
- * until the app calls {@link applyGridSnap}, and skipped per-element by a
- * `nosnap` attribute on the host.
+ * authored offset inside it (a toggle's centered box) stays put. Always
+ * active; skipped per-element by a `nosnap` attribute on the host.
  */
 export declare class GridSnapController implements ReactiveController {
     readonly host: ReactiveControllerHost & HTMLElement;
@@ -44,27 +43,6 @@ export declare class GridSnapController implements ReactiveController {
     /** Drop the correction: delete the two variables and forget everything. */
     reset(): void;
 }
-/**
- * Opt the page into automatic device-pixel-grid snapping: every mounted
- * component (and every one mounted afterwards) holds its paint on whole device
- * pixels, whatever the surrounding layout does. Returns a cleanup function
- * that turns it back off. Calls share one switch: snapping stays on until
- * every caller's cleanup has run, and running a cleanup twice releases only
- * once — so two widgets on one page can each opt in and out without turning
- * the other's snapping off.
- *
- * ```ts
- * import { applyGridSnap } from 'vintage-frames'
- * applyGridSnap()
- * ```
- *
- * The whole footprint on your DOM is two reserved custom properties
- * (`--vf-snap-dx`/`--vf-snap-dy`) on each corrected host's inline style; the
- * offset they drive is applied inside the component's own shadow root. Worth
- * knowing: a component's painted box can sit up to half a device pixel outside
- * its layout box while corrected.
- */
-export declare function applyGridSnap(): () => void;
 /**
  * Re-check every component before the next paint. Call it after moving
  * components in a way nothing observable changed size — the one case the

package/dist/grid-snap.js

@@ -6,29 +6,14 @@ var n = .05, r = 1 / 64, i = () => e() || 1, a = (e, t) => {
 	return n - Math.round(n);
 }, o = (e) => Math.round(e / r) * r, s = new class {
 	constructor() {
-		this.controllers = /* @__PURE__ */ new Set(), this.enabled = !1, this.frame = 0, this.teardown = [];
+		this.controllers = /* @__PURE__ */ new Set(), this.enabled = !1, this.frame = 0;
 	}
 	register(e) {
-		if (this.controllers.add(e), !this.enabled) {
-			e.reset();
-			return;
-		}
-		this.resizes?.observe(e.host), this.request();
+		this.controllers.add(e), !this.enabled && typeof window < "u" ? (this.enabled = !0, this.install()) : this.resizes?.observe(e.host), this.request();
 	}
 	unregister(e) {
 		this.controllers.delete(e), this.resizes?.unobserve(e.host);
 	}
-	enable() {
-		this.enabled || typeof window > "u" || (this.enabled = !0, this.install(), this.request());
-	}
-	disable() {
-		if (this.enabled) {
-			this.enabled = !1, this.frame && cancelAnimationFrame(this.frame), this.frame = 0;
-			for (let e of this.teardown.splice(0)) e();
-			this.resizes?.disconnect(), this.resizes = void 0;
-			for (let e of this.controllers) e.reset();
-		}
-	}
 	request() {
 		!this.enabled || this.frame || typeof window > "u" || (this.frame = requestAnimationFrame(() => {
 			this.frame = 0, this.sweep();
@@ -45,17 +30,13 @@ var n = .05, r = 1 / 64, i = () => e() || 1, a = (e, t) => {
 		window.addEventListener("resize", e), window.addEventListener("orientationchange", e), window.addEventListener("scroll", e, {
 			capture: !0,
 			passive: !0
-		}), this.teardown.push(() => {
-			window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e), window.removeEventListener("scroll", e, { capture: !0 });
 		});
 		let n = document.fonts;
-		n && (n.addEventListener("loadingdone", e), this.teardown.push(() => n.removeEventListener("loadingdone", e)), n.ready.then(e)), this.teardown.push(t(e));
-		let r = new MutationObserver(e);
-		r.observe(document.documentElement, {
+		n && (n.addEventListener("loadingdone", e), n.ready.then(e)), t(e), new MutationObserver(e).observe(document.documentElement, {
 			subtree: !0,
 			attributes: !0,
 			attributeFilter: ["nosnap"]
-		}), this.teardown.push(() => r.disconnect());
+		});
 	}
 }(), c = class {
 	constructor(e) {
@@ -120,16 +101,9 @@ var n = .05, r = 1 / 64, i = () => e() || 1, a = (e, t) => {
 	let t = 0;
 	for (let n = l(e); n; n = l(n)) n.tagName.toLowerCase().startsWith("vf-") && t++;
 	return t;
-}, d = 0;
-function f() {
-	d++, s.enable();
-	let e = !1;
-	return () => {
-		e || (e = !0, --d === 0 && s.disable());
-	};
-}
-function p() {
+};
+function d() {
 	s.request();
 }
 //#endregion
-export { c as GridSnapController, f as applyGridSnap, p as requestGridSnap };
+export { c as GridSnapController, d as requestGridSnap };

package/dist/index.d.ts

@@ -65,12 +65,12 @@ export { applyScale, ScaleController, effectiveScale, getScale, onScaleChange, s
  */
 export { getZoom, truePixelRatio, onZoomChange, devicePxPerSystemPx, resetZoomBaseline, } from './zoom.js';
 /**
- * Automatic device-pixel-grid snapping. `applyGridSnap()` is the one call an
- * app makes to have every component hold its own origin on whole device pixels
- * whatever the surrounding layout does — the half of the layout contract the
- * components can keep for you.
+ * Automatic device-pixel-grid snapping. Always on: every component holds its
+ * own origin on whole device pixels whatever the surrounding layout does — the
+ * half of the layout contract the components keep for you. `requestGridSnap()`
+ * re-checks before the next paint, for a move nothing observable resized.
  */
-export { applyGridSnap, requestGridSnap, GridSnapController, } from './grid-snap.js';
+export { requestGridSnap, GridSnapController } from './grid-snap.js';
 /**
  * The page-drawn cursor. `applyCursor()` is the one call an app makes to
  * replace the native pointer with the embedded System 7 set — arrow, I-beam,