vintage-frames 0.12.8 → 0.13.0

package/dist/components/vf-swatch.js

@@ -3,17 +3,17 @@ import { ScaleController as t, sysLength as n } from "../scale.js";
 import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { VfPositioned as i } from "../position.js";
 import { vfBase as a } from "../styles/recipes/host.js";
-import { tileImage as o, tileRects as s, tileSpan as c, vfTileSize as l } from "../styles/recipes/tile.js";
-import { vfHardShadowDecls as u } from "../styles/recipes/shadow.js";
-import { vfFocusUnderline as d } from "../styles/recipes/focus.js";
-import { TileRasterCache as f, patternOverride as p, tileGrid as m, vfTileGrid as h } from "../tile-grid.js";
+import { tileImage as o, tileRects as s, tileSpan as c } from "../styles/recipes/tile.js";
+import { RepeatTileController as l, patternOverride as u, tileGrid as d, vfRepeatTileSize as f, vfTileGrid as p } from "../tile-grid.js";
+import { vfHardShadowDecls as m } from "../styles/recipes/shadow.js";
+import { vfFocusUnderline as h } from "../styles/recipes/focus.js";
 import { GridSnapController as g } from "../grid-snap.js";
 import { VfShadowRoleControl as _ } from "../form-control.js";
 import { css as v, html as y, unsafeCSS as b } from "lit";
 import { property as x } from "lit/decorators.js";
 import { styleMap as S } from "lit/directives/style-map.js";
 //#region src/components/vf-swatch.ts
-var C = 4, w = [
+var C = [
 	[
 		0,
 		0,
@@ -35,9 +35,17 @@ var C = 4, w = [
 		2,
 		"#c0c0c0"
 	]
-], T = o(C, C, s(w)), E = c(C), D = class extends i(_) {
+], w = {
+	width: 4,
+	height: 4,
+	rects: C
+}, T = o(w.width, w.height, s(C)), E = c(w.width), D = class extends i(_) {
 	constructor(...e) {
-		super(...e), this.width = 24, this.height = 18, this.shadow = !1, this.label = "", this.disabled = !1, this.scale = new t(this), this.gridSnap = new g(this), this._pattern = "", this.#e = new f();
+		super(...e), this.width = 24, this.height = 18, this.shadow = !1, this.label = "", this.disabled = !1, this.scale = new t(this), this.gridSnap = new g(this), this._pattern = "", this.#e = new l(this, {
+			getBox: () => this.renderRoot?.querySelector(".fill"),
+			getArt: () => this._pattern ? null : w,
+			property: "--_vf-checker-tile"
+		});
 	}
 	static {
 		this.shadowRootOptions = {
@@ -48,19 +56,15 @@ var C = 4, w = [
 	static {
 		this.styles = [
 			a,
-			h,
+			p,
 			v`
       :host {
         display: inline-flex;
         cursor: var(--vf-cursor, default);
-        /* The transparency checker: 2×2-system-px white/#c0c0c0 checks on a
-           4×4 motif. Resolved into a private property once so the underlay
-           rule and the tile grid's art channel below share one definition;
-           override the public token to retheme the whole tile. What actually
-           shows is the exact fill rendered into .fill (see src/tile-grid.ts):
-           the whole-surface raster for the kit checker, or the placed tile
-           grid at the token's documented 60-px tile geometry for a consumer
-           override. */
+        /* The consumer's checker token, as the art channel of the placed
+           tile grid .fill renders for it at the token's documented 60-px
+           tile geometry (src/tile-grid.ts). The kit checker is .fill's own
+           repeating tile instead. */
         --_checker: var(--vf-swatch-checker, ${b(T)});
         /* How deep a shadow this swatch actually casts — nothing unless the
            shadow attribute is set. Resolved here once so the focus rule below
@@ -88,7 +92,7 @@ var C = 4, w = [
       /* Opt-in depth: the kit's one hard shadow, painted outside the border
          box like every raised surface's. */
       :host([shadow]) button {
-        ${u}
+        ${m}
       }
       /* Pressed: the white inset inverts to black — instant 1-bit feedback. */
       button:active:not(:disabled) {
@@ -112,37 +116,35 @@ var C = 4, w = [
       }
       button:focus-visible::after {
         --vf-focus-underline-offset: calc(-3px - var(--_shadow-depth));
-        ${d}
+        ${h}
         left: calc(var(--vf-scale, 1) * -1px);
         right: calc(var(--vf-scale, 1) * -1px);
       }
       .fill {
         display: block;
-        /* The containing block for the exact fill and the tint. */
+        /* The containing block for the token's tile grid and the tint. */
         position: relative;
         width: 100%;
         height: 100%;
-        /* The CSS-repeated underlay, occluded by the (opaque) kit raster —
-           belt-and-braces paint only, like vf-desktop's. */
-        background-image: var(--_checker);
-        ${l(C)}
+        /* The kit checker: the repeating tile the swatch writes
+           (src/tile-grid.ts). */
+        background-image: var(--_vf-checker-tile, none);
+        ${f}
+        image-rendering: pixelated;
         /* Forced colors would delete the color layer and keep the checker,
            showing "transparent" for every color. The fill is CONTENT, not
            chrome — the color is the one thing the control exists to show,
            the case forced-color-adjust's own spec exempts (its example is a
-           color picker). It inherits to the raster, tiles and tint. Frame,
-           inset and press feedback stay on the forced palette like every
-           other control's. */
+           color picker). It inherits to the tiles and tint. Frame, inset
+           and press feedback stay on the forced palette like every other
+           control's. */
         @media (forced-colors: active) {
           forced-color-adjust: none;
         }
       }
-      /* A consumer checker token switches the fill to the placed tile grid;
-         the underlay must not paint beneath it — a translucent consumer tile
-         would show the underlay's drifting copy of itself. The grid's tiles
-         resolve the token through the shared private property. */
+      /* A consumer checker token switches the fill to the placed tile grid,
+         whose tiles resolve the token through the shared private property. */
       .fill.patterned {
-        background-image: none;
         --_vf-tile-image: var(--_checker);
       }
       /* The color, painted over the checker so a translucent value reads as
@@ -156,17 +158,14 @@ var C = 4, w = [
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this._pattern = p(this, "--vf-swatch-checker");
+		super.willUpdate(e), this._pattern = u(this, "--vf-swatch-checker");
 	}
 	render() {
-		let e = Math.max(1, (this.width ?? 24) - 4), t = Math.max(1, (this.height ?? 18) - 4), r = (e) => Math.ceil((e + C) / C) * C, i = this._pattern ? m({
+		let e = Math.max(1, (this.width ?? 24) - 4), t = Math.max(1, (this.height ?? 18) - 4), r = this._pattern ? d({
 			cols: Math.ceil(e / E),
 			rows: Math.ceil(t / E),
 			tile: E
-		}) : y`<span
-          class="vf-tile-raster"
-          style="width:${n(r(e))};height:${n(r(t))};background-image:${this.#e.for(C, C, w, r(e), r(t))}"
-        ></span>`, a = this.color ? y`<span
+		}) : null, i = this.color ? y`<span
           class="tint"
           style=${S({ "background-color": this.color })}
         ></span>` : null;
@@ -183,7 +182,7 @@ var C = 4, w = [
         <span
           class="fill vf-tile-grid${this._pattern ? " patterned" : ""}"
           part="fill"
-          >${i}${a}</span
+          >${r}${i}</span
         >
       </button>
       ${this.renderDescription()}

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

@@ -227,20 +227,17 @@ export declare class VfWindow extends VfWindow_base {
     private readonly titleCenter;
     /**
      * The consumer's `--vf-dots-pattern` override, or `''` for the kit dots —
-     * which exact-fill path the utility bar takes (src/tile-grid.ts). Re-read
-     * every update; a runtime token swap wants a `requestUpdate()`.
+     * which path the utility bar takes (src/tile-grid.ts). Re-read every
+     * update; a runtime token swap wants a `requestUpdate()`.
      */
     private _dotsPattern;
     protected willUpdate(changed: PropertyValues<this>): void;
     /**
-     * The exact dots fill rendered into the utility bar's `.vf-dots` layer
+     * A consumer `--vf-dots-pattern`'s placed tile grid, rendered into the
+     * utility bar's `.vf-dots` layer at the token's documented 30-px geometry
      * (src/tile-grid.ts): the bar interior is the declared width minus the
-     * frame borders. The kit raster is ceiled to whole 30-px tiles so a
-     * grow-box resize only re-encodes the image when it crosses a tile
-     * boundary — the layer's clip crops the overdraw; a consumer
-     * `--vf-dots-pattern` renders the placed tile grid at the token's
-     * documented 30-px geometry instead. A window with no declared width
-     * renders neither and the layer keeps its CSS-repeated tile.
+     * frame borders. A window with no declared width renders none, and the
+     * layer repeats the token in CSS instead (`vf-dots-token`).
      */
     private _dotsTexture;
     /**

package/dist/components/vf-window.js

@@ -4,37 +4,41 @@ import { ScaleController as n, effectiveScale as r, snapSys as i, sysLength as a
 import s from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
 import { PlacementController as c, VfPositioned as l, placementIn as u, warnMovableContract as d } from "../position.js";
 import { vfBase as f } from "../styles/recipes/host.js";
-import { DOT_MOTIF as p, DOT_RECTS as m, DOT_SPAN as h, vfDots as g, vfStripes as _ } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as v } from "../styles/recipes/surface.js";
-import { vfRule as y } from "../styles/recipes/rule.js";
-import { vfTitleBar as b, vfWindowWidgets as x } from "../styles/recipes/title-bar.js";
-import { vfFocus as S } from "../styles/recipes/focus.js";
-import { TileRasterCache as C, patternOverride as w, tileGrid as T, vfTileGrid as E } from "../tile-grid.js";
-import { GridSnapController as D } from "../grid-snap.js";
-import { DocumentListenersController as O } from "../document-listeners.js";
-import { VfSized as k } from "../size.js";
-import { DragController as A } from "../drag.js";
-import { TitleCenterController as j, chromeTitleBar as M, closeBox as N, widgetLabel as P, zoomBox as F } from "../chrome.js";
-import { prefersReducedMotion as I, windowRectFraction as L } from "../motion.js";
-import { paintSelectionRect as R, penPhase as z, xorPenCanvas as B } from "../open-art.js";
+import { RepeatTileController as p, patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
+import { DOTS as _, DOT_SPAN as v, vfDots as y, vfStripes as b } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as x } from "../styles/recipes/surface.js";
+import { vfRule as S } from "../styles/recipes/rule.js";
+import { vfTitleBar as C, vfWindowWidgets as w } from "../styles/recipes/title-bar.js";
+import { vfFocus as T } from "../styles/recipes/focus.js";
+import { GridSnapController as E } from "../grid-snap.js";
+import { DocumentListenersController as D } from "../document-listeners.js";
+import { VfSized as O } from "../size.js";
+import { DragController as k } from "../drag.js";
+import { TitleCenterController as A, chromeTitleBar as j, closeBox as M, widgetLabel as N, zoomBox as P } from "../chrome.js";
+import { prefersReducedMotion as F, windowRectFraction as I } from "../motion.js";
+import { paintSelectionRect as L, penPhase as R, xorPenCanvas as z } from "../open-art.js";
 import "./vf-scroll-area.js";
-import { LitElement as V, css as H, html as U, nothing as W } from "lit";
-import { property as G, query as K, state as q } from "lit/decorators.js";
+import { LitElement as B, css as V, html as H, nothing as U } from "lit";
+import { property as W, query as G, state as K } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var J = 80, Y = 54;
-function X(e, t, n) {
+var q = 80, J = 54;
+function Y(e, t, n) {
 	let r = Math.max(t, e);
 	return n == null ? r : Math.min(n, r);
 }
-var Z = 24, Q = 8, $ = class extends k(l(V)) {
+var X = 24, Z = class extends O(l(B)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.outlineDrag = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new D(this), this.titleCenter = new j(this), this._dotsPattern = "", this.#e = new C(), this.#t = (e, t, n) => {
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.outlineDrag = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new E(this), this.titleCenter = new A(this), this._dotsPattern = "", this.#e = new p(this, {
+			getBox: () => this.renderRoot?.querySelector(".vf-dots"),
+			getArt: () => this.variant === "utility" && !this._dotsPattern ? _ : null,
+			property: "--_vf-dots-tile"
+		}), this.#t = (e, t, n) => {
 			let r = o(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, Z - r), n.width - Z),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - Z))
+				x: Math.min(Math.max(e, X - r), n.width - X),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - X))
 			};
-		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new A(this, {
+		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new k(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
 				this.#S();
@@ -47,7 +51,7 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 			onDragEnd: (e, t) => {
 				this.#y(t);
 			}
-		}), this._resizeState = null, this.#n = this.attachInternals(), this.#r = null, this.#i = new O(this, () => [[
+		}), this._resizeState = null, this.#n = this.attachInternals(), this.#r = null, this.#i = new D(this, () => [[
 			document,
 			"pointerdown",
 			this.#a,
@@ -61,7 +65,7 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 			this.#s("finish");
 		}, this.#o = (e) => {
 			e.key !== "Escape" || !this.#r || (e.preventDefault(), e.stopPropagation(), this.#s("finish"));
-		}, this.#f = null, this.#p = new O(this, () => [[
+		}, this.#f = null, this.#p = new D(this, () => [[
 			document,
 			"keydown",
 			this.#m,
@@ -73,15 +77,15 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	static {
 		this.styles = [
 			f,
-			_,
-			g,
-			E,
-			S,
-			v,
-			y,
 			b,
+			y,
+			g,
+			T,
 			x,
-			H`
+			S,
+			C,
+			w,
+			V`
       :host {
         display: block;
         position: relative;
@@ -354,21 +358,16 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = w(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = m(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
-		if (this.width == null) return;
+		if (!this._dotsPattern || this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return T({
-			cols: Math.ceil(e / h),
+		return h({
+			cols: Math.ceil(e / v),
 			rows: 1,
-			tile: h
+			tile: v
 		});
-		let t = Math.ceil((e + p) / h) * h, n = Q + p;
-		return U`<div
-      class="vf-tile-raster"
-      style="width:${a(t)};height:${a(n)};background-image:${this.#e.for(p, p, m, t, n)}"
-    ></div>`;
 	}
 	#t;
 	placementAt(e, t, n) {
@@ -381,7 +380,7 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	async show(e = {}) {
 		this.#s("finish"), this.hidden = !1;
 		let t = e.from;
-		if (!t || I()) return !1;
+		if (!t || F()) return !1;
 		let n = {
 			closing: !1,
 			animations: []
@@ -397,7 +396,7 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	async hide(e = {}) {
 		let t = this.#r?.closing === !1, n = !this.hidden && !t;
 		this.#s(t ? "cancel" : "finish");
-		let r = e.to, i = r && n && this.isConnected && !I() ? this.#u(r, this.getBoundingClientRect(), !0) : null;
+		let r = e.to, i = r && n && this.isConnected && !F() ? this.#u(r, this.getBoundingClientRect(), !0) : null;
 		if (this.hidden = !0, !i) return !1;
 		let a = {
 			closing: !0,
@@ -440,8 +439,8 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 			animations: []
 		};
 		for (let e = 0; e < 14; e++) {
-			let t = L(e), r = (e, n) => e + Math.trunc((n - e) * t), o = r(l.left, u.left), s = r(l.top, u.top), c = Math.max(1, r(l.right, u.right) - o), f = Math.max(1, r(l.bottom, u.bottom) - s), p = B("window-rect"), m = p.style;
-			m.position = "absolute", m.left = a(o), m.top = a(s), m.width = a(c), m.height = a(f), m.visibility = "hidden", R(p, c, f, z(o, s)), i.append(p), d.canvases.push(p);
+			let t = I(e), r = (e, n) => e + Math.trunc((n - e) * t), o = r(l.left, u.left), s = r(l.top, u.top), c = Math.max(1, r(l.right, u.right) - o), f = Math.max(1, r(l.bottom, u.bottom) - s), p = z("window-rect"), m = p.style;
+			m.position = "absolute", m.left = a(o), m.top = a(s), m.width = a(c), m.height = a(f), m.visibility = "hidden", L(p, c, f, R(o, s)), i.append(p), d.canvases.push(p);
 			let h = n ? 13 - e : e;
 			d.animations.push(p.animate([{ visibility: "visible" }, { visibility: "visible" }], {
 				delay: h * 17,
@@ -476,13 +475,13 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	#_(e, t, n) {
 		let r = e.base.x + t, i = e.base.y + n;
 		e.canvas.style.left = a(r), e.canvas.style.top = a(i);
-		let o = z(r, i);
-		o !== e.phase && (e.phase = o, R(e.canvas, e.width, e.height, o));
+		let o = R(r, i);
+		o !== e.phase && (e.phase = o, L(e.canvas, e.width, e.height, o));
 	}
 	#v(e) {
 		let t = this.#d();
 		if (!t) return null;
-		let n = r(this), i = t.getBoundingClientRect(), o = Math.max(1, Math.round(e.width / n)), s = Math.max(1, Math.round(e.height / n)), c = B("drag-outline"), l = c.style;
+		let n = r(this), i = t.getBoundingClientRect(), o = Math.max(1, Math.round(e.width / n)), s = Math.max(1, Math.round(e.height / n)), c = z("drag-outline"), l = c.style;
 		return l.position = "absolute", l.width = a(o), l.height = a(s), t.append(c), {
 			canvas: c,
 			base: {
@@ -555,7 +554,7 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = X(i(t.baseWidth + o(e.clientX - t.startX, this), this), this.minWidth ?? J, this.maxWidth), r = X(i(t.baseHeight + o(e.clientY - t.startY, this), this), this.minHeight ?? Y, this.maxHeight);
+		let n = Y(i(t.baseWidth + o(e.clientX - t.startX, this), this), this.minWidth ?? q, this.maxWidth), r = Y(i(t.baseHeight + o(e.clientY - t.startY, this), this), this.minHeight ?? J, this.maxHeight);
 		(n !== this.width || r !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = r;
 	}
 	_onGrowPointerEnd(t) {
@@ -570,42 +569,42 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 		});
 	}
 	render() {
-		return U`
+		return H`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : W}
+        aria-labelledby=${this.heading ? "title" : U}
       >
-        ${M(this._drag, U`
-            ${this.closable ? N(P("Close", this.heading), this._onCloseClick) : W}
+        ${j(this._drag, H`
+            ${this.closable ? M(N("Close", this.heading), this._onCloseClick) : U}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? F(P("Zoom", this.heading), this._onZoomClick) : W}
-          `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
+            ${this.zoomable ? P(N("Zoom", this.heading), this._onZoomClick) : U}
+          `, this.variant === "utility" ? this._dotsPattern ? "vf-dots vf-dots-token" : "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div
           class="header vf-rule-bottom ${this._hasHeader ? "" : "empty"}"
           part="header"
-          style=${this.headerHeight == null ? W : `height:${a(this.headerHeight)}`}
+          style=${this.headerHeight == null ? U : `height:${a(this.headerHeight)}`}
         >
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
         <div class="body" part="body">
-          ${this.scrollbars ? U`
+          ${this.scrollbars ? H`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
                   ?corner=${this.resizable && !this._hasStatus}
-                  label=${this.heading || W}
+                  label=${this.heading || U}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : U`<slot></slot>`}
+              ` : H`<slot></slot>`}
         </div>
         <div class="status vf-rule-top ${this._hasStatus ? "" : "empty"}" part="status-bar">
           <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
         </div>
-        ${this.resizable ? U`
+        ${this.resizable ? H`
               <div
                 class="grow"
                 part="grow-box"
@@ -615,45 +614,45 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : W}
+            ` : U}
       </div>
     `;
 	}
 };
-s([G({ reflect: !0 })], $.prototype, "variant", void 0), s([G()], $.prototype, "heading", void 0), s([G({
+s([W({ reflect: !0 })], Z.prototype, "variant", void 0), s([W()], Z.prototype, "heading", void 0), s([W({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "active", void 0), s([G({
+})], Z.prototype, "active", void 0), s([W({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "closable", void 0), s([G({
+})], Z.prototype, "closable", void 0), s([W({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "zoomable", void 0), s([G({
+})], Z.prototype, "zoomable", void 0), s([W({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "movable", void 0), s([G({
+})], Z.prototype, "movable", void 0), s([W({
 	type: Boolean,
 	reflect: !0,
 	attribute: "outline-drag"
-})], $.prototype, "outlineDrag", void 0), s([G({
+})], Z.prototype, "outlineDrag", void 0), s([W({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "resizable", void 0), s([G({
+})], Z.prototype, "resizable", void 0), s([W({
 	type: Number,
 	attribute: "min-width"
-})], $.prototype, "minWidth", void 0), s([G({
+})], Z.prototype, "minWidth", void 0), s([W({
 	type: Number,
 	attribute: "min-height"
-})], $.prototype, "minHeight", void 0), s([G({
+})], Z.prototype, "minHeight", void 0), s([W({
 	type: Number,
 	attribute: "max-width"
-})], $.prototype, "maxWidth", void 0), s([G({
+})], Z.prototype, "maxWidth", void 0), s([W({
 	type: Number,
 	attribute: "max-height"
-})], $.prototype, "maxHeight", void 0), s([G({ reflect: !0 })], $.prototype, "scrollbars", void 0), s([G({
+})], Z.prototype, "maxHeight", void 0), s([W({ reflect: !0 })], Z.prototype, "scrollbars", void 0), s([W({
 	type: Number,
 	attribute: "header-height"
-})], $.prototype, "headerHeight", void 0), s([q()], $.prototype, "_hasHeader", void 0), s([q()], $.prototype, "_hasStatus", void 0), s([K(".body")], $.prototype, "body", void 0), s([K("vf-scroll-area")], $.prototype, "scrollArea", void 0), $ = s([t("vf-window")], $);
+})], Z.prototype, "headerHeight", void 0), s([K()], Z.prototype, "_hasHeader", void 0), s([K()], Z.prototype, "_hasStatus", void 0), s([G(".body")], Z.prototype, "body", void 0), s([G("vf-scroll-area")], Z.prototype, "scrollArea", void 0), Z = s([t("vf-window")], Z);
 //#endregion
-export { $ as VfWindow };
+export { Z as VfWindow };

package/dist/index.d.ts

@@ -102,16 +102,17 @@ export type { TileRect } from './styles/base.js';
 export { RULE_EDGES, parseRule, ruleClasses } from './styles/base.js';
 export type { RuleEdge } from './styles/base.js';
 /**
- * The exact tiled fill (TILE-GRID-PLAN.md): a surface's own art as one
- * whole-surface raster (`tileRaster` + the `vf-tile-raster` rules), and a
- * consumer pattern token as a flat grid of absolutely placed tiles
- * (`tileGrid()`), each box paint-snapped to the device grid on its own — so
- * the fill stays 1-bit at the zoom-minted scales a CSS `background-repeat`
- * length cannot hold. `vfTileGrid` carries the container and tile rules;
- * `patternOverride` reads whether a token is in play; `TileRasterCache`
- * memoizes the encoded raster against its size.
+ * The exact tiled fill (src/tile-grid.ts): a surface's own art as a CSS
+ * repeat of one tile drawn at the display's resolution — `repeatTile()` for
+ * the image at `devicePxAt()` a box, `vfRepeatTileSize` for its
+ * `background-size`, `RepeatTileController` to keep a box's tile current —
+ * and a consumer pattern token as a flat grid of absolutely placed tiles
+ * (`tileGrid()`, with `vfTileGrid`'s container and tile rules), each box
+ * paint-snapped to the device grid on its own. `patternOverride` reads
+ * whether a token is in play.
  */
-export { vfTileGrid, tileGrid, patternOverride, TileRasterCache } from './tile-grid.js';
+export { vfTileGrid, tileGrid, patternOverride, REPEAT_TILE, vfRepeatTileSize, repeatTile, devicePxAt, RepeatTileController, } from './tile-grid.js';
+export type { TileMotif, RepeatTileOptions } from './tile-grid.js';
 /**
  * The standard pattern set — the 38 MacPaint fills as 8-byte QuickDraw
  * patterns (`PATTERNS`, named; `PATTERN_NAMES` in palette order), the