vintage-frames 0.12.8 → 0.14.0

package/dist/styles/recipes/title-bar.js

@@ -1,20 +1,27 @@
 import { vfDisplayDecls as e } from "./display-face.js";
-import { css as t } from "lit";
+import { vfStrokeDecls as t, vfStrokeInset as n } from "./stroke.js";
+import { css as r } from "lit";
 //#region src/styles/recipes/title-bar.ts
-var n = t`
+var i = r`
   .vf-title-bar {
     position: relative;
     /* Inert unless the frame is a flex column (vf-window); on vf-dialog's plain
        block frame the shorthand simply doesn't apply. */
     flex: none;
     height: calc(var(--vf-scale, 1) * var(--vf-titlebar-height, 18px));
-    border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
     display: flex;
     /* flex-start, not center: the title states its own whole-pixel row (see
        the margin below); centering 16 into 17 would land it on a half. */
     align-items: flex-start;
     justify-content: center;
     overflow: hidden;
+    ${t({ edges: ["bottom"] })}
+  }
+  .vf-title-bar > .vf-stripes {
+    bottom: ${n(3)};
+  }
+  .vf-title-bar > .vf-dots {
+    bottom: ${n(2)};
   }
   .vf-title {
     /* Chicago-style title (chrome); slotted body copy keeps the body face. */
@@ -36,7 +43,7 @@ var n = t`
     overflow: hidden;
     text-overflow: ellipsis;
   }
-`, r = t`
+`, a = r`
   .box {
     position: absolute;
     /* 11×11 box with 3px of clear white above and below it (title-bar
@@ -45,21 +52,18 @@ var n = t`
     z-index: 1;
     width: calc(var(--vf-scale, 1) * 11px);
     height: calc(var(--vf-scale, 1) * 11px);
-    padding: 0;
     margin: 0;
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
     background: var(--vf-white, #ffffff);
-    /* A 1px white patch ring that interrupts the stripes around the
-       box (no bevel — flat 1-bit), same buffer the stripes keep from the
-       frame edges. --vf-widget-ring is internal geometry, not a theming
-       knob: vf-window's utility variant widens it to 2px, the clearance
-       the windoid sheet cuts into its dither. */
-    box-shadow: 0 0 0 calc(var(--vf-scale, 1) * var(--vf-widget-ring, 1px))
-      var(--vf-white, #ffffff);
     font: inherit;
     cursor: var(--vf-cursor, default);
     -webkit-appearance: none;
     appearance: none;
+    /* After the stroke, a 1px white patch ring that interrupts the stripes
+       around the box (no bevel — flat 1-bit), same buffer the stripes keep
+       from the frame edges. --vf-widget-ring is internal geometry, not a
+       theming knob: vf-window's utility variant widens it to 2px, the
+       clearance the windoid sheet cuts into its dither. */
+    ${t({ shadows: "0 0 0 calc(var(--vf-scale, 1) * var(--vf-widget-ring, 1px)) var(--vf-white, #ffffff)" })}
   }
   .close {
     left: calc(var(--vf-scale, 1) * 8px);
@@ -73,7 +77,7 @@ var n = t`
      traced pixel-for-pixel from the UI kit's close-button-active-state
      sprite. Both widgets flash the identical graphic while pressed. That
      sprite is the whole 11×11 box; its outer ring is this element's own 1px
-     border, so the SVG draws just the 9×9 interior into the padding box. */
+     stroke, so the SVG draws just the 9×9 interior, centered in the box. */
   .box:active {
     background-color: var(--vf-white, #ffffff);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4 0h1v1h-1zM1 1h1v1h-1zM4 1h1v1h-1zM7 1h1v1h-1zM2 2h1v1h-1zM4 2h1v1h-1zM6 2h1v1h-1zM0 4h3v1h-3zM6 4h3v1h-3zM2 6h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM7 7h1v1h-1zM4 8h1v1h-1z'/%3E%3C/svg%3E");
@@ -85,17 +89,16 @@ var n = t`
     content: '';
     position: absolute;
     /* A small box nested in the TOP-LEFT corner of the widget (classic
-       System 7 zoom box). It shares the widget's own top and left border, so
-       only its right and bottom edges are drawn: a 6×6 box anchored at the
-       padding-box origin whose 1px right/bottom borders land the vertical at
+       System 7 zoom box). It shares the widget's own top and left line, so
+       only its right and bottom edges are drawn: a 6×6 box anchored inside
+       the widget's stroke whose 1px right/bottom strokes land the vertical at
        sprite col 6 and the horizontal at row 6. Traced from the UI kit
        zoom-button rest sprite. */
-    top: 0;
-    left: 0;
+    top: ${n(0)};
+    left: ${n(0)};
     width: calc(var(--vf-scale, 1) * 6px);
     height: calc(var(--vf-scale, 1) * 6px);
-    border-right: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
-    border-bottom: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+    ${t({ edges: ["right", "bottom"] })}
   }
   /* While pressed the zoom box shows the same sunburst as the close box, so
      its inner detail square gives way to it. */
@@ -131,4 +134,4 @@ var n = t`
   }
 `;
 //#endregion
-export { n as vfTitleBar, r as vfWindowWidgets };
+export { i as vfTitleBar, a as vfWindowWidgets };

package/dist/styles/recipes/toggle.js

@@ -7,7 +7,7 @@ var t = e`
     gap: calc(var(--vf-scale, 1) * 6px);
     cursor: var(--vf-cursor, default);
   }
-  /* The well PAINTS 3 system px below the row top. Centering the 13px well
+  /* The radio's 13px well PAINTS 3 system px below the row top. Centering it
      in the 20px row is the layout — kept, because the host's height and its
      exported baseline are consumer-visible (moving them off the well's
      centered bottom reflowed every line holding a toggle) — but centering
@@ -18,8 +18,8 @@ var t = e`
      compose the variable), landing the ink on row 3: ties resolve toward the
      start, as QuickDraw's "div 2" did — the title-bar and vf-stack
      convention. The half-pixel gap between layout box and painted box is the
-     documented snap idiom, not a fault. */
-  .box,
+     documented snap idiom, not a fault. The checkbox's 12px box centers on
+     row 4 exactly and needs no step; both wells end on row 15. */
   .circle {
     top: calc(var(--vf-snap-dy, 0px) - var(--vf-scale, 1) * 0.5px);
   }

package/dist/tile-grid.d.ts

@@ -1,51 +1,39 @@
-import { type CSSResult, type TemplateResult } from 'lit';
+import { type CSSResult, type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
 import { type TileRect } from './styles/recipes/tile.js';
 /**
- * The tiled-fill machinery that replaces CSS `background-repeat` on the kit's
- * convertible tiled surfaces (the desktop dither, the windoid dots, the swatch
- * checker, the barber stripes).
+ * The tiled-fill machinery behind the kit's patterned surfaces — the desktop
+ * and container patterns, the windoid dots, the swatch checker, the barber
+ * stripes and the scroll trough.
  *
- * A CSS repeating fill is ONE paint-snapped box holding N *unsnapped* repeats,
- * each placed at `k × tileSize` where the tile size is a single stored length
- * the engine quantizes to its layout grid (Chromium 1/64 CSS px, Gecko 1/60).
- * The error compounds linearly with `k` until a motif boundary has walked a
- * whole device pixel and the 1-bit art smears to gray. The span construction
- * (`tileSpan`, src/styles/recipes/tile.ts) makes the stored length exact for
- * every scale the *density* ladder derives — but zoom mints scales with
- * arbitrary prime denominators (20/17 at Safari's 85%, 30/23 at its 115%),
- * and no finite lattice can hold those. ZOOM-TILE-DRIFT.md is the analysis;
- * TILE-GRID-PLAN.md the plan this module implements.
+ * **Kit art is a CSS repeat of one pre-scaled tile** ({@link repeatTile}):
+ * the motif laid over {@link REPEAT_TILE} system px square and drawn at n
+ * image px per system px, n = `--vf-scale × trueDpr` — whole by the scale
+ * contract — so the engine copies the tile to the device grid 1:1 and has no
+ * filtering to choose. The surface states the tile's size as
+ * {@link vfRepeatTileSize}, a length every engine holds exactly at every
+ * density and zoom, so each repeat lands exactly. The tile depends only on
+ * the art and n: it is encoded once per pair for the whole page, drawn again
+ * when zoom or the display changes n, and never on a resize.
+ * {@link RepeatTileController} keeps a box's tile current.
  *
- * Two rendering paths, chosen by whether the surface's pattern token is
- * overridden ({@link patternOverride}):
+ * Why 120, and why pre-scaled (TILE-REPEAT-PLAN.md, in git history at
+ * commit 5bc45c2, has the measurements): Safari smooths a repeated image it
+ * has to magnify, whatever
+ * `image-rendering` says, so the image must already be at device
+ * resolution; and WebKit on a 3× display now and then draws one small tile a
+ * device px narrow and resamples it, which tiles of 192 device px and up
+ * never showed. The repeat replaced one raster the size of the whole surface,
+ * re-encoded as it was resized.
  *
- * **Kit art (token unset): one whole-surface raster** — a single `.vf-tile-raster`
- * element carrying the motif tiled over the surface's declared system-px size
- * as a raster image at one image px per system px (`tileRaster`), stretched
- * `background-size: 100% 100%` under `image-rendering: pixelated`. Exact at
- * every scale, holdable or not, for two measured reasons: nearest-neighbor
- * sampling can only produce source colors, and ONE box has no interior
- * boundaries — Chromium paints an image background to the box's *unsnapped*
- * layout rect with antialiased edges, so any fill assembled from several
- * boxes blends a one-device-px line at every interior seam at a zoom-minted
- * scale, no matter how exactly the boxes were placed. (That measurement is
- * what buried both this plan's original per-tile form and SVG art of any
- * kind: Chromium rasterizes SVG images at the fractional layout size and
- * ignores `image-rendering` for them.) The box's own edge is the one place a
- * partial device pixel remains — the same status every component box already
- * has. The sampling stays exact because the box's stored length errs at most
- * 1/128 CSS px over the WHOLE surface: the relative error shrinks as the
- * surface grows, so the nearest-neighbor grid cannot slip a pixel at any
- * realistic size.
- *
- * **Consumer art (token set): the placed tile grid** — a flat set of
- * absolutely positioned `.vf-tile` boxes, each `T × T` system px at
+ * **Consumer art (a pattern token set): the placed tile grid** — a flat set
+ * of absolutely positioned `.vf-tile` boxes, each `T × T` system px at
  * `left: calc(var(--vf-scale, 1) * kT px)`: one single-multiplication length
  * per tile, quantized once, so each box paint-snaps onto the device grid
  * independently and the documented tile geometry (`--vf-*-pattern` art on a
- * 30- or 60-system-px tile) renders verbatim. Positions never accumulate
- * error; at a zoom-minted scale what remains is the bounded per-seam blend
- * above — a hairline per tile boundary, never surface-wide smear. Raster
+ * 30- or 60-system-px tile) renders verbatim. A token is any CSS image —
+ * SVG included — so it cannot be pre-scaled the way kit art is. Positions
+ * never accumulate error; at a scale the layout grid cannot hold, what
+ * remains is a hairline per tile boundary, never surface-wide smear. Raster
  * consumer art additionally magnifies nearest-neighbor (the `vf-img` idiom).
  *
  * The trap that must not come back: NEVER lay tiles out with CSS grid,
@@ -55,22 +43,18 @@ import { type TileRect } from './styles/recipes/tile.js';
  * returns. Flat absolute placement with one multiplication per tile is the
  * correctness, not a style choice.
  *
- * Wiring: the *container* — the layer the fill used to paint on, or a
+ * Wiring the grid: the *container* — the layer the fill paints on, or a
  * dedicated child filling it — takes the `vf-tile-grid` class (clip and
  * pointer transparency; it must be positioned, which every kit layer already
- * is). For the grid path it resolves `--_vf-tile-image` — the pattern-token
- * `var()` each tile stretches over its box, stated once so no data URI is
- * repeated per tile — and {@link tileGrid} renders the tiles. For the raster
- * path the component renders a `.vf-tile-raster` child whose
- * `background-image` it writes from `tileRaster(...)`, regenerated only when
- * the declared system-px size changes (density and zoom re-render nothing:
- * the box lengths are live against `--vf-scale`).
+ * is). It resolves `--_vf-tile-image` — the pattern-token `var()` each tile
+ * stretches over its box, stated once so no data URI is repeated per tile —
+ * and {@link tileGrid} renders the tiles.
  *
- * Forced colors keeps each surface's existing layer-level branches (flat
- * Canvas desktop, span-masked dots and barber, the swatch's
- * forced-color-adjust) — no mask pipeline rasterizes exactly at a zoom-minted
- * scale (image-rendering does not reach masks), so forced-colors-plus-zoom
- * remains the one accepted residual, unchanged from before this work.
+ * Forced colors keeps each surface's existing branches (flat Canvas desktop,
+ * span-masked dots, barber and trough, the swatch's forced-color-adjust) — no
+ * mask pipeline rasterizes exactly at a zoom-minted scale (image-rendering
+ * does not reach masks), so forced-colors-plus-zoom remains the one accepted
+ * residual.
  */
 export declare const vfTileGrid: CSSResult;
 /**
@@ -89,9 +73,9 @@ export declare function tileGrid({ cols, rows, tile, }: {
 }): TemplateResult[];
 /**
  * The consumer's override of a pattern token, or `''` when the token is unset
- * and the surface should paint its own art — how a converted surface picks
- * between its whole-surface raster (kit art) and its placed tile grid
- * (consumer art at the documented tile geometry).
+ * and the surface should paint its own art — how a surface picks between its
+ * repeating kit tile and its placed tile grid (consumer art at the
+ * documented tile geometry).
  *
  * Read with `getComputedStyle` at update time, not observed live: a pattern
  * token swapped at runtime without touching the component wants a nudge (any
@@ -99,15 +83,65 @@ export declare function tileGrid({ cols, rows, tile, }: {
  * contract the component's other measured inputs follow.
  */
 export declare function patternOverride(el: Element, token: string): string;
+/** A motif as rect data over the cell it tiles at, in system px. */
+export interface TileMotif {
+    readonly width: number;
+    readonly height: number;
+    readonly rects: readonly TileRect[];
+}
+/**
+ * The side of a kit repeat tile in system px: a whole number of every motif
+ * the kit draws (8 × 15 — the 2-, 4-, 8- and 12-px cells all divide it), and
+ * a whole number of layout px in every engine at every density and zoom
+ * (120n device px over the engine's ratio: 40n at 3×, 60n at 2×).
+ */
+export declare const REPEAT_TILE = 120;
+/**
+ * `background-size` for a {@link repeatTile}: {@link REPEAT_TILE} system px
+ * square, live against `--vf-scale`.
+ */
+export declare const vfRepeatTileSize: CSSResult;
 /**
- * A one-entry cache for a surface's whole-surface raster, keyed by its
- * system-px size — so every render with an unchanged size (all of them except
- * a declared-size change) reuses the encoded image instead of re-running
- * `tileRaster`'s canvas encode. A surface whose *art* can change under the
- * same size (a `pattern` attribute, src/pattern-fill.ts) passes an `id` for
- * it — the fixed-motif surfaces leave it empty.
+ * The motif laid over {@link REPEAT_TILE} system px square and drawn at `n`
+ * image px per system px, as a CSS `url()` — the image a
+ * {@link vfRepeatTileSize} repeat copies 1:1 at that density. Cached for the
+ * page by the motif's content and `n`.
+ */
+export declare function repeatTile(motif: TileMotif, n: number): string;
+/**
+ * Device px per system px at `el`: its `--vf-scale` (a consumer override
+ * included) times the true device pixel ratio — the `n` a {@link repeatTile}
+ * shown there is drawn at.
+ */
+export declare function devicePxAt(el: Element): number;
+/** What a component hands {@link RepeatTileController}. */
+export interface RepeatTileOptions {
+    /** The element the tile's custom property is written on. */
+    getBox: () => HTMLElement | null | undefined;
+    /** The art to tile, or null to write nothing (a consumer token owns the
+     *  surface, or the component isn't showing it). Return the same object for
+     *  the same art: an unchanged motif and density cost nothing. */
+    getArt: () => TileMotif | null | undefined;
+    /** The custom property the surface's `background-image` reads. */
+    property: string;
+}
+/**
+ * Keeps a box's {@link repeatTile} current: writes it as a custom property on
+ * the box's inline style after each host update, drawn for the density at
+ * the box, and again when zoom or the display changes that density
+ * ({@link onScaleChange}); removes it the moment there is nothing to paint.
+ * A custom-property channel rather than `background-image` itself, so a
+ * surface's forced-colors rule can out-cascade it without `!important`.
+ *
+ * The surface's stylesheet does the rest: `background-image` from the
+ * property, {@link vfRepeatTileSize}, `background-repeat: repeat`, and
+ * `image-rendering: pixelated` for the frame between a zoom and the new
+ * tile.
  */
-export declare class TileRasterCache {
+export declare class RepeatTileController implements ReactiveController {
     #private;
-    for(motifWidth: number, motifHeight: number, rects: readonly TileRect[], width: number, height: number, id?: string): string;
+    constructor(host: ReactiveControllerHost, opts: RepeatTileOptions);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
 }

package/dist/tile-grid.js

@@ -1,53 +1,86 @@
-import { sysLength as e } from "./scale.js";
-import { tileRaster as t } from "./styles/recipes/tile.js";
-import { css as n, html as r } from "lit";
+import { truePixelRatio as e } from "./zoom.js";
+import { effectiveScale as t, onScaleChange as n, sysLength as r } from "./scale.js";
+import { tileRaster as i } from "./styles/recipes/tile.js";
+import { css as a, html as o } from "lit";
 //#region src/tile-grid.ts
-var i = n`
+var s = a`
   .vf-tile-grid {
     /* Clip the overdraw: a fill overdrawn past a box that is not a whole
-       number of tiles (or a raster ceiled up to one) crops here. */
+       number of tiles crops here. */
     overflow: hidden;
     pointer-events: none;
   }
-  .vf-tile,
-  .vf-tile-raster {
+  .vf-tile {
     position: absolute;
     /* The box IS the size — never the image's intrinsic size, and never an
        intra-box repeat: a consumer tile smaller than its box repeating
        inside it would re-import the accumulation this module removes. */
+    background-image: var(--_vf-tile-image);
     background-size: 100% 100%;
     background-repeat: no-repeat;
-    /* Raster art samples nearest-neighbor — the exactness mechanism for the
-       kit's own tiles and the vf-img idiom for consumer raster art. A no-op
-       for SVG (which is why kit art is raster; see tileRaster). */
+    /* Consumer raster art samples nearest-neighbor — the vf-img idiom. A
+       no-op for SVG. */
     image-rendering: pixelated;
   }
-  .vf-tile {
-    background-image: var(--_vf-tile-image);
-  }
-  .vf-tile-raster {
-    top: 0;
-    left: 0;
-  }
 `;
-function a({ cols: t, rows: n, tile: i }) {
-	let a = e(i), o = [];
-	for (let s = 0; s < n; s++) for (let n = 0; n < t; n++) o.push(r`<span
+function c({ cols: e, rows: t, tile: n }) {
+	let i = r(n), a = [];
+	for (let s = 0; s < t; s++) for (let t = 0; t < e; t++) a.push(o`<span
           class="vf-tile"
-          style="left:${e(n * i)};top:${e(s * i)};width:${a};height:${a}"
+          style="left:${r(t * n)};top:${r(s * n)};width:${i};height:${i}"
         ></span>`);
-	return o;
+	return a;
 }
-function o(e, t) {
+function l(e, t) {
 	return typeof getComputedStyle > "u" ? "" : getComputedStyle(e).getPropertyValue(t).trim();
 }
-var s = class {
-	#e = "";
-	#t = "";
-	for(e, n, r, i, a, o = "") {
-		let s = `${o}|${i}x${a}`;
-		return this.#e !== s && (this.#e = s, this.#t = t(e, n, r, i, a)), this.#t;
+var u = 120, d = a`
+  background-size: calc(var(--vf-scale, 1) * ${120}px)
+    calc(var(--vf-scale, 1) * ${120}px);
+`, f = /* @__PURE__ */ new Map();
+function p(e, t) {
+	let n = `${e.width}×${e.height}|${t}|${e.rects.join(";")}`, r = f.get(n);
+	return r || (r = i(e.width, e.height, e.rects, 120, 120, t), f.set(n, r)), r;
+}
+function m(n) {
+	return Math.max(1, Math.round(t(n) * e()));
+}
+var h = class {
+	#e;
+	#t;
+	#n = null;
+	#r = null;
+	#i = 0;
+	#a = "";
+	constructor(e, t) {
+		this.#e = t, e.addController(this);
+	}
+	hostConnected() {
+		this.#t = n(() => this.#o());
+	}
+	hostDisconnected() {
+		this.#t?.(), this.#t = void 0;
+	}
+	hostUpdated() {
+		this.#o();
+	}
+	#o() {
+		let e = this.#e.getBox() ?? null;
+		e !== this.#n && (this.#s(), this.#n = e);
+		let t = this.#e.getArt() ?? null;
+		if (!e || !t) {
+			this.#s();
+			return;
+		}
+		let n = m(e);
+		if (t === this.#r && n === this.#i && this.#a) return;
+		this.#r = t, this.#i = n;
+		let r = p(t, n);
+		r !== this.#a && (this.#a = r, e.style.setProperty(this.#e.property, r));
+	}
+	#s() {
+		this.#r = null, this.#i = 0, this.#a && (this.#a = "", this.#n?.style.removeProperty(this.#e.property));
 	}
 };
 //#endregion
-export { s as TileRasterCache, o as patternOverride, a as tileGrid, i as vfTileGrid };
+export { u as REPEAT_TILE, h as RepeatTileController, m as devicePxAt, l as patternOverride, p as repeatTile, c as tileGrid, d as vfRepeatTileSize, s as vfTileGrid };

package/dist/track-width.d.ts

@@ -22,8 +22,7 @@ import type { ReactiveController, ReactiveControllerHost } from 'lit';
  * runs on every update.
  *
  * The height comes along from the same observation, for a box measured on
- * both axes: `PatternFillController` (src/pattern-fill.ts) sizes a pattern
- * raster to a box whose extent nobody declared.
+ * both axes.
  */
 export declare class TrackWidthController implements ReactiveController {
     private readonly host;

package/dist/zoom.d.ts

@@ -17,9 +17,9 @@
  *
  * 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:
+ * report it: Chrome, Firefox and Safari 27 fold it into `devicePixelRatio`;
+ * older 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
@@ -31,7 +31,7 @@
  *      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
+ *      older 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
@@ -170,12 +170,12 @@ 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:
+ * only in engines that fold zoom into it; older 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
+ *   Chrome/Firefox/Safari 27 (latched)   dpr already includes zoom  →  dpr
+ *   older 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