vintage-frames 0.1.0

package/dist/toggle-control.d.ts

@@ -0,0 +1,60 @@
+import { LitElement } from 'lit';
+type Constructor<T = object> = new (...args: any[]) => T;
+type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
+/**
+ * The mixin's own surface: what a concrete toggle must supply, and what it
+ * gets back. Spelled out as a `declare class` because TypeScript cannot name
+ * the anonymous class a mixin returns when emitting declarations (TS4094) —
+ * and that is unavoidable here rather than a consequence of our own members,
+ * since LitElement's `render`/`updated`/`willUpdate`/`createRenderRoot` are
+ * themselves protected. This is the shape Lit documents for typed mixins.
+ *
+ * Keep it in sync with the implementation below; it is the type half of one
+ * declaration.
+ */
+export declare abstract class VfToggleControlInterface extends LitElement {
+    abstract checked: boolean;
+    protected abstract get toggleInternals(): ElementInternals;
+    protected abstract get toggleDisabled(): boolean;
+    protected abstract activate(): void;
+    protected get externallyCoordinated(): boolean;
+    protected syncToggleState(): void;
+}
+/**
+ * The interaction skeleton shared by the kit's two toggle controls
+ * (`vf-checkbox`, `vf-radio`) — everything they did identically apart from
+ * their glyphs and their toggle-vs-select semantics:
+ *
+ * - the click / Space→activate wiring, including the `event.repeat` guard that
+ *   stops a *held* Space from re-firing on every ~30ms tick;
+ * - the single disabled guard every activation passes through, so "a disabled
+ *   toggle never activates" is guaranteed in one place (the same shape as
+ *   {@link VfFormControl.syncFormValue}'s disabled funnel for form values);
+ * - `aria-checked` / `aria-disabled` mirroring in `updated()`;
+ * - the self-managed host tabindex, and the ownership latch that keeps it
+ *   honest across reconnects (see {@link consumerOwnsTabIndex}).
+ *
+ * It is a **mixin, not a plain base class**, because the two controls sit on
+ * different bases and must stay there: `vf-checkbox` extends
+ * {@link VfFormControl} (it submits a value under a name), while `vf-radio` is
+ * deliberately *not* form-associated — a lone radio has no value to submit, and
+ * its enclosing `vf-radio-group` is the form-associated surface. Unifying them
+ * under one concrete base would mean making radio form-associated, which is a
+ * behavior change (a bare `<vf-radio>` would start contributing to `FormData`),
+ * not a refactor.
+ *
+ * A concrete control supplies four things: {@link checked}, its
+ * {@link toggleInternals}, its {@link toggleDisabled} rule, and {@link activate}.
+ *
+ * @example
+ * ```ts
+ * class VfCheckbox extends VfToggleControl(VfFormControl) {
+ *   \@property({ type: Boolean, reflect: true }) checked = false
+ *   protected override get toggleInternals() { return this.internals }
+ *   protected override get toggleDisabled() { return this.isDisabled }
+ *   protected override activate() { ... }
+ * }
+ * ```
+ */
+export declare const VfToggleControl: <T extends Constructor<LitElement>>(Base: T) => AbstractConstructor<VfToggleControlInterface> & T;
+export {};

package/dist/toggle-control.js

@@ -0,0 +1,41 @@
+import { ScaleController as e } from "./scale.js";
+import { GridSnapController as t } from "./grid-snap.js";
+import { deferActivation as n } from "./events.js";
+//#region src/toggle-control.ts
+var r = (r) => {
+	class i extends r {
+		get externallyCoordinated() {
+			return !1;
+		}
+		#e;
+		constructor(...r) {
+			super(...r), this.scale = new e(this), this.gridSnap = new t(this), this.#e = null, this.selfManagedTabIndex = !1, this.#n = (e) => {
+				n(this, e, () => this.#t());
+			}, this.#r = (e) => {
+				e.key === " " && (e.preventDefault(), !e.repeat && this.dispatchEvent(new MouseEvent("click", {
+					bubbles: !0,
+					composed: !0,
+					cancelable: !0
+				})));
+			}, this.addEventListener("click", this.#n), this.addEventListener("keydown", this.#r);
+		}
+		connectedCallback() {
+			super.connectedCallback(), this.#e ??= this.hasAttribute("tabindex"), this.selfManagedTabIndex = !this.#e && !this.externallyCoordinated, this.selfManagedTabIndex && (this.tabIndex = this.toggleDisabled ? -1 : 0);
+		}
+		updated(e) {
+			super.updated(e), this.syncToggleState();
+		}
+		syncToggleState() {
+			let e = this.toggleInternals, t = this.toggleDisabled;
+			e.ariaChecked = this.checked ? "true" : "false", e.ariaDisabled = t ? "true" : "false", this.selfManagedTabIndex && (this.tabIndex = t ? -1 : 0);
+		}
+		#t() {
+			this.toggleDisabled || this.activate();
+		}
+		#n;
+		#r;
+	}
+	return i;
+};
+//#endregion
+export { r as VfToggleControl };

package/dist/track-width.d.ts

@@ -0,0 +1,42 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Measured width of an indicator's track box, for components that draw their
+ * own 1-bit geometry into it.
+ *
+ * `vf-slider` and `vf-progress-bar` can't express their fill in CSS: both snap
+ * it to whole *system* pixels so the 1px leading edge (and the slider's thumb
+ * sprite) lands on the device grid instead of fringing, which means they need
+ * the track's width as a number before they can render. This controller
+ * supplies it — a {@link ResizeObserver} on the track box, floored to a whole
+ * CSS px, requesting a host update whenever it changes.
+ *
+ * Wiring the observer is the fiddly part, and it is the reason this is a
+ * controller rather than two copies of the same twenty lines: the track lives
+ * in the shadow root, so it does not exist on the host's *first* connect but
+ * does on every later one. Both components previously called their observe
+ * helper from `connectedCallback` *and* `firstUpdated`, where the first-mount
+ * call is a guarded no-op that exists only so a reconnect re-observes. Here
+ * that is one entry point driven by the controller lifecycle, which is also
+ * why re-observing is skipped when the element hasn't changed: `observe()` on
+ * an already-observed element re-fires the initial callback, and `hostUpdated`
+ * runs on every update.
+ */
+export declare class TrackWidthController implements ReactiveController {
+    private readonly host;
+    private readonly getTrack;
+    private resizeObserver?;
+    private observed;
+    private measured;
+    constructor(host: ReactiveControllerHost, getTrack: () => HTMLElement | null | undefined);
+    /**
+     * Content width of the track in CSS px (already scaled — convert with
+     * `toSys()` before doing system-pixel math). `0` until first measured, which
+     * each component treats as "not measured yet" and falls back from.
+     */
+    get width(): number;
+    hostConnected(): void;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+    /** (Re-)attach the observer to the track box, once per distinct element. */
+    private wire;
+}

package/dist/track-width.js

@@ -0,0 +1,30 @@
+//#region src/track-width.ts
+var e = class {
+	constructor(e, t) {
+		this.host = e, this.getTrack = t, this.observed = null, this.measured = 0, e.addController(this);
+	}
+	get width() {
+		return this.measured;
+	}
+	hostConnected() {
+		this.wire();
+	}
+	hostUpdated() {
+		this.wire();
+	}
+	hostDisconnected() {
+		this.resizeObserver?.disconnect(), this.observed = null;
+	}
+	wire() {
+		if (typeof ResizeObserver > "u") return;
+		let e = this.getTrack();
+		!e || e === this.observed || (this.resizeObserver ??= new ResizeObserver((e) => {
+			let t = e[0];
+			if (!t) return;
+			let n = Math.floor(t.contentRect.width);
+			n !== this.measured && (this.measured = n, this.host.requestUpdate());
+		}), this.resizeObserver.observe(e), this.observed = e);
+	}
+};
+//#endregion
+export { e as TrackWidthController };

package/dist/type-ahead.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Classic Finder first-letter type-ahead, as a shared buffer.
+ *
+ * Keystrokes accumulate into a prefix; {@link TypeAheadBuffer.feed} returns
+ * the index of the next entry whose text starts with it. The search wraps,
+ * skips disabled entries, re-tests the current entry while the prefix grows,
+ * and cycles the entries sharing a first letter when one character is
+ * repeated. The prefix resets after {@link TYPEAHEAD_TIMEOUT_MS} of silence.
+ *
+ * Lifted out of `vf-list` so `vf-select` and the menus run the same model
+ * (the way `runSelectionBlink` was lifted into src/motion.ts): each host keeps
+ * its own buffer and decides what a match does — select, highlight, or focus.
+ */
+/**
+ * How long a type-ahead prefix stays open before the buffer resets, so the
+ * next keystroke starts a fresh search.
+ */
+export declare const TYPEAHEAD_TIMEOUT_MS = 1000;
+/** One searchable row, in the caller's own order. */
+export interface TypeAheadEntry {
+    text: string;
+    disabled: boolean;
+}
+export declare class TypeAheadBuffer {
+    #private;
+    /**
+     * Feeds one printable key and returns the index of the entry the grown
+     * prefix now matches, or -1 for none. `current` is the caller's keyboard
+     * cursor (-1 for no cursor): a fresh prefix looks past it, a growing prefix
+     * re-tests it so the match can hold as the user keeps typing.
+     */
+    feed(key: string, current: number, entries: readonly TypeAheadEntry[]): number;
+    /** Clears the pending prefix and its timer. */
+    reset(): void;
+}

package/dist/type-ahead.js

@@ -0,0 +1,20 @@
+//#region src/type-ahead.ts
+var e = 1e3, t = class {
+	#e = "";
+	#t;
+	feed(t, n, r) {
+		if (r.length === 0) return -1;
+		this.#e += t.toLowerCase(), this.#t !== void 0 && window.clearTimeout(this.#t), this.#t = window.setTimeout(() => this.reset(), e);
+		let i = this.#e, a = i.length > 1 && [...i].every((e) => e === i[0]), o = a ? i[0] : i, s = i.length === 1 || a ? n + 1 : Math.max(n, 0);
+		for (let e = 0; e < r.length; e++) {
+			let t = (s + e) % r.length, n = r[t];
+			if (!(!n || n.disabled) && n.text.trim().toLowerCase().startsWith(o)) return t;
+		}
+		return -1;
+	}
+	reset() {
+		this.#t !== void 0 && window.clearTimeout(this.#t), this.#t = void 0, this.#e = "";
+	}
+};
+//#endregion
+export { e as TYPEAHEAD_TIMEOUT_MS, t as TypeAheadBuffer };

package/dist/zoom.d.ts

@@ -0,0 +1,204 @@
+/**
+ * Browser-zoom tracking — the zoom half of the display-scale model.
+ *
+ * Every component renders one system pixel (the 1-bit art unit) as a whole
+ * number of device pixels, and that number is *derived from the display*, not
+ * fixed: the Macintosh pixel this art was drawn for is 1/72 inch, so the target
+ * is the whole device-pixel count that lands nearest that size —
+ * `clamp(round(trueDpr × 96/72), 1, 24)`, where 96 is CSS's reference dpi and
+ * `trueDpr` is device px per CSS px (see {@link devicePxPerSystemPx} for the
+ * worked displays). A 2× Retina display works out to 3, which is where the
+ * kit's old hard-coded 3 came from — it was that one display's answer written
+ * down as a constant, 3× too large on a 1× monitor and a quarter short on a 3×
+ * one. Zoom needs no separate term: it multiplies device px per CSS px, which
+ * is what zoom *is*, so it arrives inside `trueDpr` and the art grows *with*
+ * the page instead of un-zooming itself back to physical size. Always whole
+ * device pixels, because the layout contract's rule 1 is not negotiable.
+ *
+ * The work is knowing the zoom at all. Zoom multiplies device-px-per-CSS-px in
+ * every engine — that is what zoom is — but the engines differ in whether they
+ * report it: Chrome and Firefox fold it into `devicePixelRatio`, Safari pins
+ * `devicePixelRatio` to the hardware and moves `innerWidth` instead. So the
+ * tracker watches two signals:
+ *
+ *   1. `devicePixelRatio`, via a resolution media query re-armed at each new
+ *      value. A dpr change is *either* zoom or the window moving to a
+ *      different-density display, and the two must not be confused — a monitor
+ *      move already renders perfectly today and must keep doing so. The
+ *      discriminator: page zoom moves neither the window nor the screen's
+ *      logical geometry, so a `screen.*`/`screenX/Y` signature that is
+ *      unchanged (or uniformly scaled by the dpr ratio, for engines that
+ *      report those members in zoom-affected CSS px) means zoom; anything else
+ *      means a display change, which rebases the baseline and reports nothing.
+ *   2. `innerWidth`/`innerHeight` against `outerWidth`/`outerHeight`, for
+ *      Safari: zoom rescales the inner (CSS-px) viewport on both axes by the
+ *      same factor while the outer (screen-px) window holds still. A change in
+ *      the outer size is a real window resize and rebases; a one-axis inner
+ *      change (an edge drag, devtools docking, a sidebar) is never zoom and
+ *      rebases; a both-axes change reads as zoom only when both axes land on
+ *      the same {@link ZOOM_LADDER} level. A width-derived zoom is an
+ *      inference, unlike path 1's engine-stated density, so anything it can't
+ *      match to a real zoom level rebases rather than reports (see
+ *      {@link onResize} for what accepting a raw ratio used to cost).
+ *
+ * Once path 1 has classified a change as zoom, the engine is known to fold
+ * zoom into dpr and path 2 is switched off for the session
+ * ({@link dprTracksZoom}) — killing its false positives wholesale.
+ *
+ * Like `focus-modality.ts`, this is a module-scoped singleton with refcounted
+ * listeners: the first {@link onZoomChange} subscriber starts the tracker, the
+ * last release stops it. The baselines are sampled at module evaluation — not
+ * at first subscribe — so a lazily imported kit still dates them from page
+ * load, which is the closest thing to "100%" a page can observe. A page loaded
+ * *already* zoomed (Chrome persists zoom per origin) reads that as its 100%;
+ * `resetZoomBaseline()` is the escape hatch, and so is a reload at 100%.
+ *
+ * Pinch zoom is out of scope by design: `visualViewport.scale` magnifies
+ * already-rasterized output at composite time, changes no rasterization
+ * density, and is not reported by either path.
+ *
+ * Everything here is reported *quantized*: measured zoom snaps to the nearest
+ * ladder level browsers actually offer (within 2%), so a zoom that sits exactly
+ * on a rounding threshold can't flutter between two device-px targets on a
+ * width-derived 1.4998 vs 1.5001. The thresholds move with the display — the
+ * target flips where `96/72 × trueDpr` hits a half — and on a 1.5× display
+ * (Windows at 150%) two real ladder rungs, 75% and 125%, land exactly on one.
+ */
+/** The screen the art was drawn for: one system pixel is 1/72 inch. */
+export declare const CLASSIC_DPI = 72;
+/**
+ * CSS's reference pixel — 1 CSS px = 1/96 inch — which is the only density
+ * anchor the platform offers. `devicePixelRatio` is device px per *CSS* px, so
+ * `96 × dpr` is the display's density as far as a browser will say it; nothing
+ * reports a panel's real ppi (a `resolution` media query in `dpi` is defined as
+ * 96 × dppx — the same number wearing different units).
+ *
+ * Real hardware differs from the nominal figure, and it differs in the kit's
+ * favor: macOS lays a Retina display out at ~109 logical dpi, so its dpr 2 is
+ * really ~218 ppi. Both anchors round to the same whole target there (218/72 =
+ * 3.03, 192/72 = 2.67), while a *measured* ppi would not — a 254-ppi MacBook
+ * Pro panel would ask for 4 and render the art larger than the iMac beside it.
+ * The nominal anchor is the stable thing to compute from.
+ */
+export declare const CSS_REFERENCE_DPI = 96;
+/** One system pixel in CSS px, before rounding to whole device px: 96/72. */
+export declare const SYSTEM_PX_IN_CSS_PX: number;
+/**
+ * ONE THING THIS DELIBERATELY DOES NOT DO, because it was tried and was worse.
+ *
+ * A whole target does not make `target / trueDpr` — the `--vf-scale` every
+ * metric multiplies by — a length the *engine* can hold: Blink lays out in 1/64
+ * CSS px, so a scale of 4/3 (a 3× display, or a 2× one at 150% zoom) quantizes
+ * to 85/64 and a 7-system-px gap measures 27.98 device px instead of 28. Over a
+ * repeated fill that error accumulates, which is what takes the desktop dither
+ * to 38% mid-gray at that scale.
+ *
+ * Preferring counts whose scale IS holdable (multiples of a quarter CSS px)
+ * fixes that and breaks something worse: the holdable set depends on the
+ * *denominator* of trueDpr, which jumps around, so the target stops being
+ * monotonic. On a 2× display that shipped 3 device px at 100%, 5 at 125% and 3
+ * again at 150% — zooming in made the art smaller. Nothing rescues it either:
+ * at 110% zoom (trueDpr 2.2) the smallest holdable count is 11, four times the
+ * art's size, so no policy can be both holdable and near true size everywhere.
+ *
+ * So the rounding stands, and sub-quantum drift is accepted as the engine's
+ * price for a fractional density — the same price the kit paid at every
+ * fractional zoom before any of this. Where it shows is tiled art; the fix
+ * belongs in those two dither tiles, not in the size of every component.
+ */
+/**
+ * Zoom levels browsers actually offer — Chrome's set plus Safari's 85% and
+ * 115%. Two consumers, two strictnesses: path 1 snaps its dpr-derived zoom to
+ * the nearest entry within {@link LADDER_TOLERANCE} and otherwise trusts it
+ * raw (the engine measured it — Firefox's 120/133/170% land between entries
+ * and pass through, which is fine), while path 2 accepts ONLY these levels:
+ * its width-derived measurement is an inference, and every real zoom it can
+ * observe is a Safari one, so Safari's own steps must all be entries.
+ */
+export declare const ZOOM_LADDER: number[];
+/**
+ * Snap a measured zoom to the nearest {@link ZOOM_LADDER} entry within 2%,
+ * else return it unchanged (Firefox steps and OS-level zoom can land off the
+ * ladder). Exists because the device-px target rounds, so some zoom level on
+ * any given display sits exactly on a threshold: without snapping, a
+ * width-derived 1.4998 and 1.5001 on a 2× display give 4 and 5 device px — a
+ * 25% size flip — on alternating resize events.
+ */
+export declare function quantizeZoom(raw: number): number;
+/**
+ * Device px per system px the kit aims for on a display of `trueDpr`: the whole
+ * count nearest the classic 1/72 inch — `round(96/72 × trueDpr)` — clamped to
+ * [1, 24].
+ *
+ *   display              ideal  target  --vf-scale
+ *   1×                    1.33     1      1
+ *   1.25× (Win 125%)      1.67     2      1.6
+ *   1.5×  (Win 150%)      2.0      2      1.333
+ *   2×    Retina          2.67     3      1.5
+ *   3×                    4.0      4      1.333
+ *
+ * Monotonic by construction: `round` of an increasing quantity never goes
+ * backwards, so a denser display — or a deeper zoom, which is the same thing —
+ * never renders the art smaller.
+ *
+ * The 2× row is where the kit's old hard-coded 3 came from — one display's
+ * answer written down as a constant. The 1× row is why that was wrong: it
+ * rendered every system pixel 3 device px wide on a display where 1.33 is true,
+ * three times the size the art was drawn at.
+ *
+ * The target is a step function, so zoom moves it in steps, and *not moving* is
+ * a correct answer: 100% and 125% on a 2× display both round to 3, so the art
+ * holds its size while the copy around it grows. Rounding to the nearest whole
+ * count is the whole contract — bending it to make zoom feel responsive would
+ * put the art off the device grid, which is the one thing that never bends.
+ *
+ * Pass {@link truePixelRatio}, not `devicePixelRatio`: zoom belongs in this
+ * number. A 2× display at 200% zoom is `trueDpr` 4 → 5 device px per system px,
+ * so the art grows with the page. `Math.round` ties go *up* (4.5 → 5)
+ * deliberately: a zoom-driven accessibility response should err toward larger,
+ * and the representability step prefers the larger count for the same reason.
+ *
+ * Rounding is what costs physical accuracy, and it is bounded at half a device
+ * pixel per system pixel: a 1× monitor renders 25% small, a 2× display 12%
+ * large, a 1.5× and a 3× one exact. Nothing does better while every system
+ * pixel is a whole number of device pixels, and that is the invariant — art off
+ * the device grid is not the art.
+ */
+export declare function devicePxPerSystemPx(trueDpr: number): number;
+/** Page zoom relative to load, quantized to the ladder. 1 until observed otherwise. */
+export declare function getZoom(): number;
+/**
+ * Device px per CSS px *right now* — the number every "snap to the device
+ * grid" computation must divide by. `window.devicePixelRatio` is that number
+ * only in engines that fold zoom into it; Safari's is simply wrong about the
+ * current rasterization density at any non-100% zoom. Reading the live dpr and
+ * folding the tracked zoom back in is correct in both:
+ *
+ *   Chrome/Firefox (latched)   dpr already includes zoom  →  dpr
+ *   Safari (never latches)     dpr is the hardware        →  dpr × zoom
+ *
+ * The live read matters: a monitor move changes the true density whether or
+ * not the tracker is running, and this stays exactly as correct as the old
+ * direct `devicePixelRatio` read in that case (zoom is 1 until tracked).
+ */
+export declare function truePixelRatio(): number;
+type ZoomListener = (zoom: number) => void;
+/**
+ * Subscribe to quantized zoom changes; returns the release function. The
+ * listeners behind it are shared and refcounted exactly like
+ * `trackFocusModality()`: the first subscriber arms one media query and one
+ * `resize` listener for the whole page, the last release removes them
+ * (releasing twice is a no-op).
+ */
+export declare function onZoomChange(callback: ZoomListener): () => void;
+/**
+ * Declare the *current* state to be 100% zoom: re-sample every baseline and
+ * clear the tracked zoom. The escape hatch for the one classification hole
+ * that needs a human — a display-mode switch at an identical logical size
+ * (macOS 1440×900 HiDPI ↔ native), which moves nothing the discriminator can
+ * see — and for a page that knows it loaded already-zoomed. The engine latch
+ * survives: which signal zoom arrives through is a fact about the browser,
+ * not about the baseline.
+ */
+export declare function resetZoomBaseline(): void;
+export {};

package/dist/zoom.js

@@ -0,0 +1,105 @@
+//#region src/zoom.ts
+var e = 72, t = 96, n = 96 / 72, r = 1, i = 24, a = [
+	.25,
+	.33,
+	.5,
+	.67,
+	.75,
+	.8,
+	.85,
+	.9,
+	1,
+	1.1,
+	1.15,
+	1.25,
+	1.5,
+	1.75,
+	2,
+	2.5,
+	3,
+	4,
+	5
+], o = .02;
+function s(e) {
+	if (!Number.isFinite(e) || e <= 0) return 1;
+	for (let t of a) if (Math.abs(e / t - 1) <= o) return t;
+	return e;
+}
+function c(e) {
+	let t = Math.round(n * e);
+	return Math.min(i, Math.max(r, t));
+}
+var l = () => typeof window > "u" ? {
+	sw: 0,
+	sh: 0,
+	aw: 0,
+	ah: 0,
+	x: 0,
+	y: 0
+} : {
+	sw: screen.width,
+	sh: screen.height,
+	aw: screen.availWidth,
+	ah: screen.availHeight,
+	x: window.screenX,
+	y: window.screenY
+}, u = (e, t) => Object.keys(e).every((n) => Math.abs(e[n] - t[n]) <= 1), d = (e, t, n) => Object.keys(e).every((r) => {
+	let i = t[r] / n;
+	return Math.abs(e[r] - i) <= Math.max(2, Math.abs(i) * .01);
+}), f = 4, p = .001, m = 1, h = 1, g = 0, _ = 0, v = 0, y = 0, b = l(), x = 1, S = !1;
+typeof window < "u" && (m = window.devicePixelRatio || 1, h = m, g = window.innerWidth, _ = window.innerHeight, v = window.outerWidth, y = window.outerHeight);
+function C() {
+	return x;
+}
+function w() {
+	let e = typeof window < "u" && window.devicePixelRatio || 1;
+	return S ? e : e * x;
+}
+var T = /* @__PURE__ */ new Set(), E, D = () => {
+	for (let e of [...T]) e(x);
+}, O = (e) => {
+	e !== x && (x = e, D());
+}, k = (e) => {
+	let t = e / h, n = l(), r = u(n, b) || d(n, b, t);
+	h = e, b = n, j(), r ? (S = !0, O(s(e / m))) : m = S ? e / x : e;
+}, A = () => {
+	let e = window.devicePixelRatio;
+	e === h ? j() : k(e);
+}, j = () => {
+	M(), !(typeof window > "u" || !window.matchMedia) && (E = window.matchMedia(`(min-resolution: ${h - p}dppx) and (max-resolution: ${h + p}dppx)`), E.addEventListener("change", A));
+}, M = () => {
+	E?.removeEventListener("change", A), E = void 0;
+}, N = () => {
+	let e = window.devicePixelRatio;
+	if (e !== h) {
+		k(e);
+		return;
+	}
+	if (S) return;
+	let t = window.innerWidth, n = window.innerHeight, r = window.outerWidth, i = window.outerHeight;
+	if (Math.abs(r - v) > f || Math.abs(i - y) > f) {
+		v = r, y = i, g = t * x, _ = n * x;
+		return;
+	}
+	let o = () => {
+		g = t * x, _ = n * x;
+	}, c = Math.abs(t - g / x), l = Math.abs(n - _ / x);
+	if (c < f && l < f) return;
+	if (c < f || l < f) return o();
+	let u = s(g / t);
+	if (u !== s(_ / n) || !a.includes(u)) return o();
+	O(u);
+}, P = 0;
+function F(e) {
+	if (typeof window > "u") return () => {};
+	T.add(e), P++ === 0 && (j(), window.addEventListener("resize", N));
+	let t = !1;
+	return () => {
+		t || (t = !0, T.delete(e), --P === 0 && (M(), window.removeEventListener("resize", N)));
+	};
+}
+function I() {
+	typeof window > "u" || (m = window.devicePixelRatio || 1, h = m, g = window.innerWidth, _ = window.innerHeight, v = window.outerWidth, y = window.outerHeight, b = l(), P > 0 && j(), O(1));
+}
+//#endregion
+export { e as CLASSIC_DPI, t as CSS_REFERENCE_DPI, n as SYSTEM_PX_IN_CSS_PX, a as ZOOM_LADDER, c as devicePxPerSystemPx, C as getZoom, F as onZoomChange, s as quantizeZoom, I as resetZoomBaseline, w as truePixelRatio };