vintage-frames 0.12.7 → 0.13.0

package/dist/index.js

@@ -11,65 +11,65 @@ import { vfDisplay as P, vfDisplayDecls as F } from "./styles/recipes/display-fa
 import { vfBase as I } from "./styles/recipes/host.js";
 import { vfStaticText as L } from "./styles/recipes/static-text.js";
 import { TILE_LATTICE as R, tileImage as z, tileRaster as B, tileRects as V, tileSpan as H, vfTileMaskSize as U, vfTileSize as W } from "./styles/recipes/tile.js";
-import { PATTERNS as G, PATTERN_NAMES as K, PATTERN_SIZE as q, parsePattern as J, patternHex as Y, patternMotif as X, patternRects as Z } from "./patterns.js";
-import { vfDots as Q, vfStripes as $ } from "./styles/recipes/pattern.js";
-import { vfHardShadowDecls as ee } from "./styles/recipes/shadow.js";
-import { vfChromeFrame as te, vfModalFrame as ne, vfPanel as re } from "./styles/recipes/surface.js";
-import { RULE_EDGES as ie, parseRule as ae, ruleClasses as oe, vfRule as se } from "./styles/recipes/rule.js";
-import { vfTitleBar as ce, vfWindowWidgets as le } from "./styles/recipes/title-bar.js";
-import { vfFocus as ue, vfFocusRing as de, vfFocusUnderline as fe } from "./styles/recipes/focus.js";
-import { vfToggle as pe } from "./styles/recipes/toggle.js";
-import { vfField as me } from "./styles/recipes/field.js";
-import { vfScrollRail as he } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as ge, patternOverride as _e, tileGrid as ve, vfTileGrid as ye } from "./tile-grid.js";
-import { TrackWidthController as be } from "./track-width.js";
-import { PatternFillController as xe, vfPatternFill as Se } from "./pattern-fill.js";
-import { GridSnapController as Ce, requestGridSnap as we } from "./grid-snap.js";
-import { DocumentListenersController as Te } from "./document-listeners.js";
-import { BUTTON_FACE as Ee, BUTTON_FRAME as De, RING_FRAME as Oe, RING_HOLE as ke, RING_INSET as Ae, SCREEN_CORNER as je, steppedCornerClip as Me, steppedRectClip as Ne, steppedRingClip as Pe } from "./pixel-frame.js";
-import { VfDesktop as Fe } from "./components/vf-desktop.js";
-import { VfSized as Ie } from "./size.js";
-import { DragController as Le } from "./drag.js";
-import { BLINK_FLIPS as Re, BLINK_INTERVAL_MS as ze, DRAG_SLOP_COARSE_PX as Be, DRAG_SLOP_PX as Ve, PRESS_HOLD_MS as He, RENAME_DELAY_MS as Ue, TAP_PAIR_MS as We, TAP_PAIR_SLOP_PX as Ge, WALK_BEAT_MS as Ke, WALK_STEP_MS as qe, WALK_STEP_PX as Je, WINDOW_RECTS_VISIBLE as Ye, WINDOW_RECT_RATIO as Xe, WINDOW_RECT_STEPS as Ze, WINDOW_RECT_STEP_MS as Qe, dragSlop as $e, prefersReducedMotion as et, runOutlineTravel as tt, runSelectionBlink as nt, windowRectFraction as rt } from "./motion.js";
-import { ScrollStateController as it } from "./scroll-state.js";
-import { CARET_DOWN as at, CARET_DOWN_SMALL as ot, CHECKBOX_X as st, CHECKMARK as ct, RADIO_DOT as lt, RADIO_FACE as ut, RADIO_RING as dt, RADIO_RING_PRESSED as ft, SLIDER_THUMB as pt, SLIDER_THUMB_FACE as mt, STEPPER as ht, STEPPER_DOWN_FILL as gt, STEPPER_UP_FILL as _t, glyphSvg as vt } from "./glyphs.js";
-import { ScrollRailController as yt, renderScrollRail as bt } from "./scroll-rail.js";
-import { VfScrollArea as xt } from "./components/vf-scroll-area.js";
-import { VfWindow as St } from "./components/vf-window.js";
-import { VfModalDialog as Ct, modalDialogStyles as wt } from "./modal-dialog.js";
-import { VfDialog as Tt } from "./components/vf-dialog.js";
-import { VfSeparator as Et } from "./components/vf-separator.js";
-import { VfFormControl as Dt } from "./form-control.js";
-import { VfButton as Ot } from "./components/vf-button.js";
-import { VfButtonGroup as kt } from "./components/vf-button-group.js";
-import { VfSwatch as At } from "./components/vf-swatch.js";
-import { VfToggleControl as jt } from "./toggle-control.js";
-import { VfCheckbox as Mt } from "./components/vf-checkbox.js";
-import { VfRadio as Nt } from "./components/vf-radio.js";
-import { VfRadioGroup as Pt } from "./components/vf-radio-group.js";
-import { FocusRuleController as Ft, focusModality as It, trackFocusModality as Lt } from "./focus-modality.js";
-import { VfTextControlBase as Rt } from "./text-control.js";
-import { VfTextField as zt } from "./components/vf-text-field.js";
-import { VfTextArea as Bt } from "./components/vf-text-area.js";
-import { VfNumberField as Vt } from "./components/vf-number-field.js";
-import { VfOption as Ht } from "./components/vf-option.js";
-import { VfSelect as Ut } from "./components/vf-select.js";
-import { VfProgressBar as Wt } from "./components/vf-progress-bar.js";
-import { VfSlider as Gt } from "./components/vf-slider.js";
-import { VfLabel as Kt } from "./components/vf-label.js";
-import { VfParagraph as qt } from "./components/vf-paragraph.js";
-import { VfImg as Jt } from "./components/vf-img.js";
-import { VfIcon as Yt } from "./components/vf-icon.js";
-import { VfIconField as Xt } from "./components/vf-icon-field.js";
-import { VfMenuBar as Zt } from "./components/vf-menu-bar.js";
-import { VfMenu as Qt } from "./components/vf-menu.js";
-import { VfMenuItem as $t } from "./components/vf-menu-item.js";
-import { VfList as en } from "./components/vf-list.js";
-import { VfListItem as tn } from "./components/vf-list-item.js";
-import { VfFieldset as nn } from "./components/vf-fieldset.js";
-import { VfGrid as rn } from "./components/vf-grid.js";
-import { VfStack as an } from "./components/vf-stack.js";
-import { VfContainer as on } from "./components/vf-container.js";
-import { CURSOR_ARROW as sn, CURSOR_CROSSHAIR as cn, CURSOR_I_BEAM as ln, CURSOR_WAIT as un } from "./cursor-art.js";
-import { applyCursor as dn } from "./cursor.js";
-export { Re as BLINK_FLIPS, ze as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, at as CARET_DOWN, ot as CARET_DOWN_SMALL, st as CHECKBOX_X, ct as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, sn as CURSOR_ARROW, cn as CURSOR_CROSSHAIR, ln as CURSOR_I_BEAM, un as CURSOR_WAIT, Be as DRAG_SLOP_COARSE_PX, Ve as DRAG_SLOP_PX, Te as DocumentListenersController, Le as DragController, Ft as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, He as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, lt as RADIO_DOT, ut as RADIO_FACE, dt as RADIO_RING, ft as RADIO_RING_PRESSED, Ue as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, pt as SLIDER_THUMB, mt as SLIDER_THUMB_FACE, ht as STEPPER, gt as STEPPER_DOWN_FILL, _t as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, yt as ScrollRailController, it as ScrollStateController, We as TAP_PAIR_MS, Ge as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, ge as TileRasterCache, be as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, Ot as VfButton, kt as VfButtonGroup, Mt as VfCheckbox, on as VfContainer, Fe as VfDesktop, Tt as VfDialog, nn as VfFieldset, Dt as VfFormControl, rn as VfGrid, Yt as VfIcon, Xt as VfIconField, Jt as VfImg, Kt as VfLabel, en as VfList, tn as VfListItem, Qt as VfMenu, Zt as VfMenuBar, $t as VfMenuItem, Ct as VfModalDialog, Vt as VfNumberField, Ht as VfOption, qt as VfParagraph, E as VfPositioned, Wt as VfProgressBar, Nt as VfRadio, Pt as VfRadioGroup, xt as VfScrollArea, Ut as VfSelect, Et as VfSeparator, Ie as VfSized, Gt as VfSlider, an as VfStack, At as VfSwatch, Bt as VfTextArea, Rt as VfTextControlBase, zt as VfTextField, jt as VfToggleControl, St as VfWindow, Ke as WALK_BEAT_MS, qe as WALK_STEP_MS, Je as WALK_STEP_PX, Ye as WINDOW_RECTS_VISIBLE, Xe as WINDOW_RECT_RATIO, Ze as WINDOW_RECT_STEPS, Qe as WINDOW_RECT_STEP_MS, dn as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, $e as dragSlop, p as effectiveScale, e as emit, It as focusModality, m as getScale, s as getZoom, vt as glyphSvg, wt as modalDialogStyles, h as onScaleChange, c as onZoomChange, J as parsePattern, ae as parseRule, Y as patternHex, X as patternMotif, _e as patternOverride, Z as patternRects, et as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, bt as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, tt as runOutlineTravel, nt as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Me as steppedCornerClip, Ne as steppedRectClip, Pe as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, ve as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, Lt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, te as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, Q as vfDots, n as vfElement, me as vfField, ue as vfFocus, de as vfFocusRing, fe as vfFocusUnderline, ee as vfHardShadowDecls, ne as vfModalFrame, re as vfPanel, Se as vfPatternFill, se as vfRule, he as vfScrollRail, L as vfStaticText, $ as vfStripes, ye as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ce as vfTitleBar, pe as vfToggle, le as vfWindowWidgets, rt as windowRectFraction };
+import { REPEAT_TILE as G, RepeatTileController as K, devicePxAt as q, patternOverride as J, repeatTile as Y, tileGrid as X, vfRepeatTileSize as Z, vfTileGrid as Q } from "./tile-grid.js";
+import { PATTERNS as $, PATTERN_NAMES as ee, PATTERN_SIZE as te, parsePattern as ne, patternHex as re, patternMotif as ie, patternRects as ae } from "./patterns.js";
+import { vfDots as oe, vfStripes as se } from "./styles/recipes/pattern.js";
+import { vfHardShadowDecls as ce } from "./styles/recipes/shadow.js";
+import { vfChromeFrame as le, vfModalFrame as ue, vfPanel as de } from "./styles/recipes/surface.js";
+import { RULE_EDGES as fe, parseRule as pe, ruleClasses as me, vfRule as he } from "./styles/recipes/rule.js";
+import { vfTitleBar as ge, vfWindowWidgets as _e } from "./styles/recipes/title-bar.js";
+import { vfFocus as ve, vfFocusRing as ye, vfFocusUnderline as be } from "./styles/recipes/focus.js";
+import { vfToggle as xe } from "./styles/recipes/toggle.js";
+import { vfField as Se } from "./styles/recipes/field.js";
+import { vfScrollRail as Ce } from "./styles/recipes/scroll-rail.js";
+import { PatternFillController as we, vfPatternFill as Te } from "./pattern-fill.js";
+import { GridSnapController as Ee, requestGridSnap as De } from "./grid-snap.js";
+import { DocumentListenersController as Oe } from "./document-listeners.js";
+import { BUTTON_FACE as ke, BUTTON_FRAME as Ae, RING_FRAME as je, RING_HOLE as Me, RING_INSET as Ne, SCREEN_CORNER as Pe, steppedCornerClip as Fe, steppedRectClip as Ie, steppedRingClip as Le } from "./pixel-frame.js";
+import { VfDesktop as Re } from "./components/vf-desktop.js";
+import { VfSized as ze } from "./size.js";
+import { DragController as Be } from "./drag.js";
+import { BLINK_FLIPS as Ve, BLINK_INTERVAL_MS as He, DRAG_SLOP_COARSE_PX as Ue, DRAG_SLOP_PX as We, PRESS_HOLD_MS as Ge, RENAME_DELAY_MS as Ke, TAP_PAIR_MS as qe, TAP_PAIR_SLOP_PX as Je, WALK_BEAT_MS as Ye, WALK_STEP_MS as Xe, WALK_STEP_PX as Ze, WINDOW_RECTS_VISIBLE as Qe, WINDOW_RECT_RATIO as $e, WINDOW_RECT_STEPS as et, WINDOW_RECT_STEP_MS as tt, dragSlop as nt, prefersReducedMotion as rt, runOutlineTravel as it, runSelectionBlink as at, windowRectFraction as ot } from "./motion.js";
+import { ScrollStateController as st } from "./scroll-state.js";
+import { CARET_DOWN as ct, CARET_DOWN_SMALL as lt, CHECKBOX_X as ut, CHECKMARK as dt, RADIO_DOT as ft, RADIO_FACE as pt, RADIO_RING as mt, RADIO_RING_PRESSED as ht, SLIDER_THUMB as gt, SLIDER_THUMB_FACE as _t, STEPPER as vt, STEPPER_DOWN_FILL as yt, STEPPER_UP_FILL as bt, glyphSvg as xt } from "./glyphs.js";
+import { ScrollRailController as St, renderScrollRail as Ct } from "./scroll-rail.js";
+import { VfScrollArea as wt } from "./components/vf-scroll-area.js";
+import { VfWindow as Tt } from "./components/vf-window.js";
+import { VfModalDialog as Et, modalDialogStyles as Dt } from "./modal-dialog.js";
+import { VfDialog as Ot } from "./components/vf-dialog.js";
+import { VfSeparator as kt } from "./components/vf-separator.js";
+import { VfFormControl as At } from "./form-control.js";
+import { VfButton as jt } from "./components/vf-button.js";
+import { VfButtonGroup as Mt } from "./components/vf-button-group.js";
+import { VfSwatch as Nt } from "./components/vf-swatch.js";
+import { VfToggleControl as Pt } from "./toggle-control.js";
+import { VfCheckbox as Ft } from "./components/vf-checkbox.js";
+import { VfRadio as It } from "./components/vf-radio.js";
+import { VfRadioGroup as Lt } from "./components/vf-radio-group.js";
+import { FocusRuleController as Rt, focusModality as zt, trackFocusModality as Bt } from "./focus-modality.js";
+import { VfTextControlBase as Vt } from "./text-control.js";
+import { VfTextField as Ht } from "./components/vf-text-field.js";
+import { VfTextArea as Ut } from "./components/vf-text-area.js";
+import { VfNumberField as Wt } from "./components/vf-number-field.js";
+import { VfOption as Gt } from "./components/vf-option.js";
+import { VfSelect as Kt } from "./components/vf-select.js";
+import { TrackWidthController as qt } from "./track-width.js";
+import { VfProgressBar as Jt } from "./components/vf-progress-bar.js";
+import { VfSlider as Yt } from "./components/vf-slider.js";
+import { VfLabel as Xt } from "./components/vf-label.js";
+import { VfParagraph as Zt } from "./components/vf-paragraph.js";
+import { VfImg as Qt } from "./components/vf-img.js";
+import { VfIcon as $t } from "./components/vf-icon.js";
+import { VfIconField as en } from "./components/vf-icon-field.js";
+import { VfMenuBar as tn } from "./components/vf-menu-bar.js";
+import { VfMenu as nn } from "./components/vf-menu.js";
+import { VfMenuItem as rn } from "./components/vf-menu-item.js";
+import { VfList as an } from "./components/vf-list.js";
+import { VfListItem as on } from "./components/vf-list-item.js";
+import { VfFieldset as sn } from "./components/vf-fieldset.js";
+import { VfGrid as cn } from "./components/vf-grid.js";
+import { VfStack as ln } from "./components/vf-stack.js";
+import { VfContainer as un } from "./components/vf-container.js";
+import { CURSOR_ARROW as dn, CURSOR_CROSSHAIR as fn, CURSOR_I_BEAM as pn, CURSOR_WAIT as mn } from "./cursor-art.js";
+import { applyCursor as hn } from "./cursor.js";
+export { Ve as BLINK_FLIPS, He as BLINK_INTERVAL_MS, ke as BUTTON_FACE, Ae as BUTTON_FRAME, ct as CARET_DOWN, lt as CARET_DOWN_SMALL, ut as CHECKBOX_X, dt as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, dn as CURSOR_ARROW, fn as CURSOR_CROSSHAIR, pn as CURSOR_I_BEAM, mn as CURSOR_WAIT, Ue as DRAG_SLOP_COARSE_PX, We as DRAG_SLOP_PX, Oe as DocumentListenersController, Be as DragController, Rt as FocusRuleController, Ee as GridSnapController, $ as PATTERNS, ee as PATTERN_NAMES, te as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ge as PRESS_HOLD_MS, we as PatternFillController, T as PlacementController, ft as RADIO_DOT, pt as RADIO_FACE, mt as RADIO_RING, ht as RADIO_RING_PRESSED, Ke as RENAME_DELAY_MS, G as REPEAT_TILE, je as RING_FRAME, Me as RING_HOLE, Ne as RING_INSET, fe as RULE_EDGES, K as RepeatTileController, Pe as SCREEN_CORNER, gt as SLIDER_THUMB, _t as SLIDER_THUMB_FACE, vt as STEPPER, yt as STEPPER_DOWN_FILL, bt as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, St as ScrollRailController, st as ScrollStateController, qe as TAP_PAIR_MS, Je as TAP_PAIR_SLOP_PX, R as TILE_LATTICE, qt as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, jt as VfButton, Mt as VfButtonGroup, Ft as VfCheckbox, un as VfContainer, Re as VfDesktop, Ot as VfDialog, sn as VfFieldset, At as VfFormControl, cn as VfGrid, $t as VfIcon, en as VfIconField, Qt as VfImg, Xt as VfLabel, an as VfList, on as VfListItem, nn as VfMenu, tn as VfMenuBar, rn as VfMenuItem, Et as VfModalDialog, Wt as VfNumberField, Gt as VfOption, Zt as VfParagraph, E as VfPositioned, Jt as VfProgressBar, It as VfRadio, Lt as VfRadioGroup, wt as VfScrollArea, Kt as VfSelect, kt as VfSeparator, ze as VfSized, Yt as VfSlider, ln as VfStack, Nt as VfSwatch, Ut as VfTextArea, Vt as VfTextControlBase, Ht as VfTextField, Pt as VfToggleControl, Tt as VfWindow, Ye as WALK_BEAT_MS, Xe as WALK_STEP_MS, Ze as WALK_STEP_PX, Qe as WINDOW_RECTS_VISIBLE, $e as WINDOW_RECT_RATIO, et as WINDOW_RECT_STEPS, tt as WINDOW_RECT_STEP_MS, hn as applyCursor, f as applyScale, t as defineElement, q as devicePxAt, o as devicePxPerSystemPx, nt as dragSlop, p as effectiveScale, e as emit, zt as focusModality, m as getScale, s as getZoom, xt as glyphSvg, Dt as modalDialogStyles, h as onScaleChange, c as onZoomChange, ne as parsePattern, pe as parseRule, re as patternHex, ie as patternMotif, J as patternOverride, ae as patternRects, rt as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, Ct as renderScrollRail, Y as repeatTile, De as requestGridSnap, l as resetZoomBaseline, me as ruleClasses, it as runOutlineTravel, at as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, Fe as steppedCornerClip, Ie as steppedRectClip, Le as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, X as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, Bt as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, le as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, oe as vfDots, n as vfElement, Se as vfField, ve as vfFocus, ye as vfFocusRing, be as vfFocusUnderline, ce as vfHardShadowDecls, ue as vfModalFrame, de as vfPanel, Te as vfPatternFill, Z as vfRepeatTileSize, he as vfRule, Ce as vfScrollRail, L as vfStaticText, se as vfStripes, Q as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, ge as vfTitleBar, xe as vfToggle, _e as vfWindowWidgets, ot as windowRectFraction };

package/dist/pattern-fill.d.ts

@@ -1,4 +1,5 @@
-import { type CSSResult, type ReactiveController, type ReactiveControllerHost } from 'lit';
+import { type CSSResult, type ReactiveControllerHost } from 'lit';
+import { RepeatTileController } from './tile-grid.js';
 import { type Pattern } from './patterns.js';
 /** What a component hands the controller. */
 export interface PatternFillOptions {
@@ -8,31 +9,14 @@ export interface PatternFillOptions {
     /** The resolved pattern, or null to paint nothing ({@link parsePattern}
      *  turns an attribute value into one). */
     getPattern: () => Pattern | null | undefined;
-    /**
-     * The box's declared size in system px, per axis. A declared axis is used
-     * as it is — exact, and free of any measurement; an axis left `null` or
-     * `undefined` is measured off the box instead (a `ResizeObserver`,
-     * `toSys`-rounded). Omit the whole option to measure both.
-     */
-    getSize?: () => {
-        width?: number | null;
-        height?: number | null;
-    } | null | undefined;
 }
 /**
  * Paints a {@link Pattern} as a box's own background — the fill behind
- * `vf-container pattern="…"` and `vf-desktop pattern="…"`.
- *
- * It is the exact-fill idiom (src/tile-grid.ts) in its background form: the
- * motif is encoded as one raster at one image px per system px
- * (`tileRaster`, cached by pattern and size), sized in system px to the box
- * ceiled up to whole pattern cells plus one cell of overdraw, and stretched
- * onto that stated size under `image-rendering: pixelated`. Nearest-neighbor
- * sampling can only emit source colors and one image has no interior seams,
- * so the fill is 1-bit at every density and zoom — the same argument the
- * desktop dither rests on. A `background-size` stated in system px is one
- * stored length quantized once over the whole image (≤ 1/128 CSS px), not a
- * repeat, and the box's background painting area crops the overdraw.
+ * `vf-container pattern="…"` and `vf-desktop pattern="…"`: the pattern's
+ * motif as a repeating tile drawn at the display's resolution
+ * ({@link RepeatTileController}, src/tile-grid.ts), 1-bit at every density
+ * and zoom, and the same cost for a box of any size — a resize encodes
+ * nothing.
  *
  * A background rather than a child element, on purpose: it paints below all
  * content by definition — no `isolation: isolate` + `z-index: -1`, so a
@@ -44,46 +28,33 @@ export interface PatternFillOptions {
  * on the box only while patterned and hands `auto` back to the slot, so
  * slotted content renders as it did.
  *
- * What it writes, all on the box's inline style and removed together the
- * moment there is nothing to paint: `--_vf-pattern-image` (the raster) and
- * `--_vf-pattern-size` (two live `sysLength`s). Custom-property channels,
- * not `background-image` itself, so the recipe's forced-colors rule can
- * out-cascade them without `!important` — an inline `background-image`
- * could not be overridden from a stylesheet. The paper is the recipe's, a
- * token: `var(--vf-white)` behind ink that is literal black, like every kit
- * raster. Density and zoom re-encode nothing: the raster is keyed on system
- * px, and the stated lengths are live against `--vf-scale`.
+ * What it writes, on the box's inline style and removed the moment there is
+ * nothing to paint: `--_vf-pattern-image`, the tile. The paper is the
+ * recipe's, a token: `var(--vf-white)` behind ink that is literal black,
+ * like every kit raster.
  *
  * Phase is anchored at the box's top-left — where the desktop, trough and
  * swatch anchor theirs. Two same-pattern boxes meeting at an offset that is
  * not a multiple of 8 show a phase seam; a port-anchored phase would be a
  * contained follow-up, not a change here.
  */
-export declare class PatternFillController implements ReactiveController {
-    #private;
+export declare class PatternFillController extends RepeatTileController {
     constructor(host: ReactiveControllerHost & HTMLElement, opts: PatternFillOptions);
-    /** The raster's current box in system px (overdraw included), or null
-     *  while nothing is painted. */
-    get size(): {
-        width: number;
-        height: number;
-    } | null;
-    hostUpdated(): void;
 }
 /**
  * The rules behind {@link PatternFillController}, for the box it paints:
  * give the box the `vf-pattern-fill` class always, and `vf-patterned` while
  * a pattern is resolved (the component's template knows).
  *
- * Painting: the raster the controller wrote, at the size it stated, once
- * (`no-repeat` — the overdraw is the repeat), nearest-neighbor. The paper
- * and the pixelation ride the `vf-patterned` state so an unpatterned box
- * paints exactly nothing and inherits nothing new. `image-rendering`
- * inherits, so the slot hands `auto` back to slotted content: a consumer's
- * own `<img>` renders as it would anywhere else, and a kit element that
- * wants nearest-neighbor (`vf-img`, a `vf-icon`) says so itself. A page
- * that set `pixelated` on an ancestor gets `auto` inside a patterned box —
- * its own declaration on the child still wins, as everywhere.
+ * Painting: the tile the controller wrote, repeated from the padding box's
+ * corner at {@link vfRepeatTileSize}, nearest-neighbor. The paper and the
+ * pixelation ride the `vf-patterned` state so an unpatterned box paints
+ * exactly nothing and inherits nothing new. `image-rendering` inherits, so
+ * the slot hands `auto` back to slotted content: a consumer's own `<img>`
+ * renders as it would anywhere else, and a kit element that wants
+ * nearest-neighbor (`vf-img`, a `vf-icon`) says so itself. A page that set
+ * `pixelated` on an ancestor gets `auto` inside a patterned box — its own
+ * declaration on the child still wins, as everywhere.
  *
  * Forced colors: the image goes, the paper is the remapped Canvas — the
  * desktop's posture, a backdrop being decoration.

package/dist/pattern-fill.js

@@ -1,61 +1,26 @@
-import { sysLength as e, toSys as t } from "./scale.js";
-import { patternHex as n, patternMotif as r } from "./patterns.js";
-import { TileRasterCache as i } from "./tile-grid.js";
-import { TrackWidthController as a } from "./track-width.js";
-import { css as o } from "lit";
+import { RepeatTileController as e, vfRepeatTileSize as t } from "./tile-grid.js";
+import { patternMotif as n } from "./patterns.js";
+import { css as r } from "lit";
 //#region src/pattern-fill.ts
-var s = class {
-	#e;
-	#t;
-	#n = new i();
-	#r;
-	#i = null;
-	#a = "";
-	#o = "";
-	#s = null;
+var i = /* @__PURE__ */ new WeakMap(), a = (e) => {
+	let t = i.get(e);
+	return t || (t = n(e), i.set(e, t)), t;
+}, o = class extends e {
 	constructor(e, t) {
-		this.#e = e, this.#t = t, this.#r = new a(e, () => {
-			if (!t.getPattern()) return null;
-			let e = t.getSize?.();
-			return e == null || e.width == null || e.height == null ? t.getBox() : null;
-		}), e.addController(this);
+		super(e, {
+			getBox: t.getBox,
+			getArt: () => {
+				let e = t.getPattern();
+				return e ? a(e) : null;
+			},
+			property: "--_vf-pattern-image"
+		});
 	}
-	get size() {
-		return this.#s;
-	}
-	hostUpdated() {
-		this.#c();
-	}
-	#c() {
-		let t = this.#t.getBox() ?? null;
-		t !== this.#i && (this.#u(), this.#i = t);
-		let i = this.#t.getPattern() ?? null;
-		if (!t || !i) {
-			this.#u();
-			return;
-		}
-		let a = this.#t.getSize?.() ?? null, o = c(a?.width) ?? this.#l(this.#r.width), s = c(a?.height) ?? this.#l(this.#r.height);
-		if (!o || !s) {
-			this.#u();
-			return;
-		}
-		let l = (e) => Math.ceil((e + 8) / 8) * 8, u = l(o), d = l(s), f = r(i), p = this.#n.for(f.width, f.height, f.rects, u, d, n(i)), m = `${e(u)} ${e(d)}`;
-		this.#s = {
-			width: u,
-			height: d
-		}, (p !== this.#a || m !== this.#o) && (this.#a = p, this.#o = m, t.style.setProperty("--_vf-pattern-image", p), t.style.setProperty("--_vf-pattern-size", m));
-	}
-	#l(e) {
-		return e > 0 ? t(e, this.#e) : 0;
-	}
-	#u() {
-		this.#s = null, !(!this.#a && !this.#o) && (this.#a = "", this.#o = "", this.#i?.style.removeProperty("--_vf-pattern-image"), this.#i?.style.removeProperty("--_vf-pattern-size"));
-	}
-}, c = (e) => typeof e == "number" && Number.isFinite(e) && e > 0 ? Math.trunc(e) : null, l = o`
+}, s = r`
   .vf-pattern-fill {
     background-image: var(--_vf-pattern-image, none);
-    background-size: var(--_vf-pattern-size, auto);
-    background-repeat: no-repeat;
+    ${t}
+    background-repeat: repeat;
   }
   .vf-pattern-fill.vf-patterned {
     background-color: var(--vf-white, #fff);
@@ -71,4 +36,4 @@ var s = class {
   }
 `;
 //#endregion
-export { s as PatternFillController, l as vfPatternFill };
+export { o as PatternFillController, s as vfPatternFill };

package/dist/scroll-rail.d.ts

@@ -30,9 +30,10 @@ export interface ScrollRailOptions {
  *   whole-system-px translate, so the art is crisp mid-scroll; accepts the
  *   ≤1-frame lag behind compositor wheel scrolling every scripted scrollbar
  *   has (at 1-bit there is no smooth motion to betray it — no rAF loop, no
- *   polling). The same pass sizes the trough's whole-surface dither raster
- *   (the exact-tile idiom, `tileRaster`) and writes the degenerate-track
- *   state the recipe's decision table styles.
+ *   polling). The same pass writes the trough's repeating dither tile for
+ *   the density at the rail (`repeatTile`, src/tile-grid.ts — again on a
+ *   zoom or display change) and the degenerate-track state the recipe's
+ *   decision table styles.
  * - **Thumb drag** — pointer-captured and axis-locked, live scrolling (the
  *   modern expectation; System 7's dotted-outline drag is a possible later
  *   opt-in). The thumb's paint position always snaps to whole system px.
@@ -59,8 +60,7 @@ export declare class ScrollRailController implements ReactiveController {
     private press;
     private holdTimer;
     private repeatTimer;
-    /** One raster per axis, re-encoded only when the track's size changes. */
-    private readonly troughCache;
+    private stopScale?;
     constructor(host: ReactiveControllerHost & HTMLElement & {
         readonly renderRoot: HTMLElement | DocumentFragment;
     }, opts: ScrollRailOptions);
@@ -81,7 +81,7 @@ export declare class ScrollRailController implements ReactiveController {
     private unwire;
     private readonly onScroll;
     /**
-     * Re-derive every measured output: thumb position, trough raster,
+     * Re-derive every measured output: thumb position, trough tile,
      * degenerate state. Safe to call any time; components hit it imperatively
      * when content changes without a box resize (a `<textarea>` on input —
      * the same moments they call `ScrollStateController.measure()`).

package/dist/scroll-rail.js

@@ -1,20 +1,17 @@
-import { effectiveScale as e, sysLength as t } from "./scale.js";
-import { TROUGH_MOTIF_X as n, TROUGH_MOTIF_Y as r, TROUGH_RECTS as i } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as a } from "./tile-grid.js";
+import { effectiveScale as e, onScaleChange as t, sysLength as n } from "./scale.js";
+import { devicePxAt as r, repeatTile as i } from "./tile-grid.js";
+import { TROUGH as a } from "./styles/recipes/scroll-rail.js";
 import "./motion.js";
 import { SCROLL_ARROW_DOWN as o, SCROLL_ARROW_DOWN_FILL as s, SCROLL_ARROW_LEFT as c, SCROLL_ARROW_LEFT_FILL as l, SCROLL_ARROW_RIGHT as u, SCROLL_ARROW_RIGHT_FILL as d, SCROLL_ARROW_UP as f, SCROLL_ARROW_UP_FILL as p } from "./glyphs.js";
 import { html as m } from "lit";
 //#region src/scroll-rail.ts
-var h = 16, g = 16, _ = 14, v = 66, y = class {
+var h = 16, g = 16, _ = 66, v = class {
 	constructor(t, n) {
-		this.host = t, this.opts = n, this.scroller = null, this.press = null, this.troughCache = {
-			vertical: new a(),
-			horizontal: new a()
-		}, this.onScroll = () => this.sync(), this.onPointerDown = (t) => {
+		this.host = t, this.opts = n, this.scroller = null, this.press = null, this.onScroll = () => this.sync(), this.onPointerDown = (t) => {
 			if (t.button !== 0 || this.press !== null) return;
 			let n = t.currentTarget, r = this.opts.getScroll();
 			if (!r) return;
-			let i = b(n), a = i === "vertical" ? "data-overflow-y" : "data-overflow-x";
+			let i = y(n), a = i === "vertical" ? "data-overflow-y" : "data-overflow-x";
 			if (r.getAttribute(a) === "false" || r.hasAttribute("data-window-inactive") || n.getAttribute("data-degenerate") === "rail") return;
 			let o = t.target, s = i === "vertical" ? t.clientY : t.clientX, c = e(this.host) || 1, l = o.closest(".vf-rail-thumb"), u = o.closest(".vf-rail-button--decrement"), d = o.closest(".vf-rail-button--increment");
 			if (l) {
@@ -78,13 +75,13 @@ var h = 16, g = 16, _ = 14, v = 66, y = class {
 		}, t.addController(this);
 	}
 	hostConnected() {
-		this.wire(), this.sync();
+		this.wire(), this.sync(), this.stopScale = t(() => this.sync());
 	}
 	hostUpdated() {
 		this.wire(), this.sync();
 	}
 	hostDisconnected() {
-		this.clearRepeat(), this.press = null, this.unwire();
+		this.clearRepeat(), this.press = null, this.unwire(), this.stopScale?.(), this.stopScale = void 0;
 	}
 	wire() {
 		let e = this.opts.getScroll() ?? null;
@@ -101,17 +98,17 @@ var h = 16, g = 16, _ = 14, v = 66, y = class {
 		let e = this.scroller ?? this.opts.getScroll(), t = this.host.renderRoot;
 		if (!(!e || !t)) for (let n of t.querySelectorAll(".vf-rail")) this.syncRail(n, e);
 	}
-	syncRail(a, o) {
-		let s = b(a), c = a.querySelector(".vf-rail-track"), l = a.querySelector(".vf-rail-thumb");
+	syncRail(t, o) {
+		let s = y(t), c = t.querySelector(".vf-rail-track"), l = t.querySelector(".vf-rail-thumb");
 		if (!c || !l) return;
 		let u = e(this.host) || 1, d = c.getBoundingClientRect(), f = (s === "vertical" ? d.height : d.width) / u, p = f < 1 ? "rail" : f < g ? "thumb" : null;
-		if (p ? a.setAttribute("data-degenerate", p) : a.removeAttribute("data-degenerate"), p === "rail") return;
-		let m = this.scrollRange(o, s), h = s === "vertical" ? o.scrollTop : o.scrollLeft, v = f - g, y = m > 0 && v > 0 ? Math.max(0, Math.min(Math.floor(v), Math.round(h / m * v))) : 0;
-		l.style.translate = s === "vertical" ? `0 ${t(y)}` : `${t(y)} 0`;
-		let x = a.querySelector(".vf-rail-trough-art");
-		if (x) {
-			let e = Math.ceil((f + (s === "vertical" ? r : n)) / (s === "vertical" ? r : n)) * (s === "vertical" ? r : n), a = s === "vertical" ? _ : e, o = s === "vertical" ? e : _;
-			x.style.width = t(a), x.style.height = t(o), x.style.backgroundImage = this.troughCache[s].for(n, r, i, a, o);
+		if (p ? t.setAttribute("data-degenerate", p) : t.removeAttribute("data-degenerate"), p === "rail") return;
+		let m = this.scrollRange(o, s), h = s === "vertical" ? o.scrollTop : o.scrollLeft, _ = f - g, v = m > 0 && _ > 0 ? Math.max(0, Math.min(Math.floor(_), Math.round(h / m * _))) : 0;
+		l.style.translate = s === "vertical" ? `0 ${n(v)}` : `${n(v)} 0`;
+		let b = t.querySelector(".vf-rail-trough");
+		if (b) {
+			let e = i(a, r(b));
+			b.style.getPropertyValue("--_vf-trough-tile") !== e && b.style.setProperty("--_vf-trough-tile", e);
 		}
 	}
 	scrollRange(e, t) {
@@ -141,13 +138,13 @@ var h = 16, g = 16, _ = 14, v = 66, y = class {
 	}
 	armRepeat(e) {
 		this.clearRepeat(), this.holdTimer = window.setTimeout(() => {
-			this.repeatTimer = window.setInterval(e, v);
+			this.repeatTimer = window.setInterval(e, _);
 		}, 200);
 	}
 	clearRepeat() {
 		this.holdTimer !== void 0 && window.clearTimeout(this.holdTimer), this.repeatTimer !== void 0 && window.clearInterval(this.repeatTimer), this.holdTimer = void 0, this.repeatTimer = void 0;
 	}
-}, b = (e) => e.classList.contains("vf-rail--horizontal") ? "horizontal" : "vertical", x = (e, t) => m`<svg
+}, y = (e) => e.classList.contains("vf-rail--horizontal") ? "horizontal" : "vertical", b = (e, t) => m`<svg
     class="vf-rail-arrow vf-rail-arrow--${t}"
     viewBox="1 1 14 14"
     fill="currentColor"
@@ -156,7 +153,7 @@ var h = 16, g = 16, _ = 14, v = 66, y = class {
   >
     <path d=${e.d}></path>
   </svg>`;
-function S(e, t) {
+function x(e, t) {
 	let [n, r, i, a] = t === "vertical" ? [
 		f,
 		p,
@@ -179,19 +176,17 @@ function S(e, t) {
       @lostpointercapture=${e.onPointerUp}
     >
       <div class="vf-rail-button vf-rail-button--decrement">
-        ${x(n, "rest")}${x(r, "fill")}
+        ${b(n, "rest")}${b(r, "fill")}
       </div>
       <div class="vf-rail-track">
-        <div class="vf-rail-trough">
-          <div class="vf-rail-trough-art"></div>
-        </div>
+        <div class="vf-rail-trough"></div>
         <div class="vf-rail-thumb"></div>
       </div>
       <div class="vf-rail-button vf-rail-button--increment">
-        ${x(i, "rest")}${x(a, "fill")}
+        ${b(i, "rest")}${b(a, "fill")}
       </div>
     </div>
   `;
 }
 //#endregion
-export { y as ScrollRailController, S as renderScrollRail };
+export { v as ScrollRailController, x as renderScrollRail };

package/dist/styles/recipes/pattern.d.ts

@@ -1,5 +1,13 @@
-export declare const DOT_MOTIF: number;
-export declare const DOT_RECTS: readonly import("./tile.js").TileRect[];
+/**
+ * The windoid bar's dither is the library's `dots` on its minimal cell: a
+ * 2-system-px motif with a single black pixel at its origin. Transparent
+ * ground, because the layer floats over the bar and the same art doubles as
+ * the forced-colors mask, where the ground would be opacity rather than
+ * paint. `vf-window` keeps the layer's repeating tile drawn from this motif
+ * (src/tile-grid.ts); the SVG tile below is the forced-colors mask and the
+ * consumer token's documented geometry.
+ */
+export declare const DOTS: import("../../patterns.js").PatternMotif;
 /** The dots' tile size in system px (30) — the consumer token's documented box. */
 export declare const DOT_SPAN: number;
 /**
@@ -58,13 +66,14 @@ export declare const vfStripes: import("lit").CSSResult;
  * runs the dots all the way into the side borders (the Windows/ sheet hand-
  * insets them 2px, which the close-up shows is not the bar's own geometry).
  *
- * The layer's own CSS-repeated tile (a crisp 1-bit SVG on the 30-system-px
- * span, overridable via `--vf-dots-pattern`) is the fallback for a window
- * with no declared width. A `vf-window` that knows its width renders the
- * exact fill INTO the layer instead — the whole-surface raster, or a consumer
- * token's placed tile grid (src/tile-grid.ts) — and marks the layer
- * `vf-tile-grid`, which switches the repeat off: the dot art is transparent-
- * grounded, so a drifting CSS-repeated copy underneath would show through
- * between the exactly-placed dots.
+ * The kit dots are the layer's own background: the repeating tile
+ * `vf-window` writes as `--_vf-dots-tile` (src/tile-grid.ts), at any window
+ * width. A consumer `--vf-dots-pattern` takes over in one of two ways. A
+ * window that knows its width renders the token's placed tile grid INTO the
+ * layer and marks it `vf-tile-grid`, which switches the layer's background
+ * off: the dot art is transparent-grounded, so a drifting CSS-repeated copy
+ * underneath would show through between the exactly placed dots. A window
+ * with no declared width marks the layer `vf-dots-token`, and the token
+ * repeats in CSS on its documented 30-system-px span.
  */
 export declare const vfDots: import("lit").CSSResult;

package/dist/styles/recipes/pattern.js

@@ -1,8 +1,9 @@
 import { tileImage as e, tileRects as t, tileSpan as n, vfTileMaskSize as r, vfTileSize as i } from "./tile.js";
-import { PATTERNS as a, patternMotif as o } from "../../patterns.js";
-import { css as s, unsafeCSS as c } from "lit";
+import { vfRepeatTileSize as a } from "../../tile-grid.js";
+import { PATTERNS as o, patternMotif as s } from "../../patterns.js";
+import { css as c, unsafeCSS as l } from "lit";
 //#region src/styles/recipes/pattern.ts
-var l = o(a.dots), u = l.width, d = l.rects, f = e(u, u, t(d)), p = n(u), m = s`
+var u = s(o.dots), d = u.width, f = e(d, d, t(u.rects)), p = n(d), m = c`
   .vf-stripes {
     position: absolute;
     inset: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 1px);
@@ -40,15 +41,21 @@ var l = o(a.dots), u = l.width, d = l.rects, f = e(u, u, t(d)), p = n(u), m = s`
       background: var(--vf-black, #000000);
     }
   }
-`, h = s`
+`, h = c`
   .vf-dots {
     position: absolute;
     inset: calc(var(--vf-scale, 1) * 2px) 0;
-    background-image: var(--vf-dots-pattern, ${c(f)});
-    ${i(u)}
+    background-image: var(--_vf-dots-tile, none);
+    ${a}
+    image-rendering: pixelated;
     pointer-events: none;
     /* The consumer-token art channel for the placed tile grid. */
-    --_vf-tile-image: var(--vf-dots-pattern, ${c(f)});
+    --_vf-tile-image: var(--vf-dots-pattern, ${l(f)});
+  }
+  .vf-dots.vf-dots-token {
+    background-image: var(--vf-dots-pattern);
+    ${i(d)}
+    image-rendering: auto;
   }
   .vf-dots.vf-tile-grid {
     background-image: none;
@@ -56,23 +63,25 @@ var l = o(a.dots), u = l.width, d = l.rects, f = e(u, u, t(d)), p = n(u), m = s`
   /* Forced colors preserves url() tiles verbatim, so the dots would stay
      literal black — invisible on a dark high-contrast theme. Repainted as the
      ink token through the same tile as a mask (the vf-grid rules idiom), so
-     the windoid bar's signature follows the user's palette. The exact-fill
-     children hide here and the span mask takes over — no mask pipeline
-     rasterizes exactly at a zoom-minted scale anyway (image-rendering does
-     not reach masks), so forced-colors keeps the span approach and its zoom
-     caveat, unchanged. */
+     the windoid bar's signature follows the user's palette. The tile and the
+     token's placed tiles hide here and the span mask takes over — no mask
+     pipeline rasterizes exactly at a zoom-minted scale anyway
+     (image-rendering does not reach masks), so forced colors keeps the span
+     approach and its zoom caveat. */
   @media (forced-colors: active) {
-    .vf-dots {
+    .vf-dots,
+    .vf-dots.vf-dots-token {
       background-image: none;
+    }
+    .vf-dots {
       background-color: var(--vf-black, #000);
-      mask-image: var(--vf-dots-pattern, ${c(f)});
-      ${r(u)}
+      mask-image: var(--vf-dots-pattern, ${l(f)});
+      ${r(d)}
     }
-    .vf-dots .vf-tile,
-    .vf-dots .vf-tile-raster {
+    .vf-dots .vf-tile {
       display: none;
     }
   }
 `;
 //#endregion
-export { u as DOT_MOTIF, d as DOT_RECTS, p as DOT_SPAN, h as vfDots, m as vfStripes };
+export { u as DOTS, p as DOT_SPAN, h as vfDots, m as vfStripes };