vintage-frames 0.12.8 → 0.14.0

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/base.d.ts

@@ -27,7 +27,9 @@ export { vfDisplay, vfDisplayDecls } from './recipes/display-face.js';
 export { vfBase } from './recipes/host.js';
 export { vfStaticText } from './recipes/static-text.js';
 export { vfDots, vfStripes } from './recipes/pattern.js';
-export { vfHardShadowDecls } from './recipes/shadow.js';
+export { vfHardShadow, vfHardShadowDecls } from './recipes/shadow.js';
+export { vfStrokeDecls, vfStrokeInset, vfStrokeShadow } from './recipes/stroke.js';
+export type { VfStrokeOptions } from './recipes/stroke.js';
 export { vfChromeFrame, vfModalFrame, vfPanel } from './recipes/surface.js';
 export { RULE_EDGES, parseRule, ruleClasses, vfRule } from './recipes/rule.js';
 export type { RuleEdge } from './recipes/rule.js';

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

@@ -1,13 +1,17 @@
 /**
  * The System 7 editable-field skin (SPEC §1/§5): a white well with a 1px black
- * border, no corner radius, Chicago-style display type, and the kit's dashed
+ * frame, no corner radius, Chicago-style display type, and the kit's dashed
  * keyboard-focus rule under the well (no dotted ring). Add the `vf-field`
  * class to the inner native `<input>`/`<textarea>` and wrap it in a
- * `.vf-field-well` element; the host supplies layout (width, height, padding)
- * around it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that
- * turns the rule on. Shared by vf-text-field, vf-text-area and
- * vf-number-field so the well, focus and disabled treatment stay identical
- * across all three.
+ * `.vf-field-well` element; the host supplies layout (width, height) around
+ * it, and `VfTextControlBase` supplies the `.vf-focus-rule` class that turns
+ * the rule on. Shared by vf-text-field, vf-text-area and vf-number-field so
+ * the well, focus and disabled treatment stay identical across all three.
+ *
+ * The frame is a stroke ({@link vfStrokeDecls}), so the recipe owns the
+ * input's padding and box-shadow: a host that insets the text restates the
+ * padding with `vfStrokeInset` (`padding: ${vfStrokeInset(0)}
+ * ${vfStrokeInset(6)}`) in a rule that outranks `.vf-field`.
  *
  * Why the wrapper: the rule is a pseudo-element, and a replaced element
  * generates none — neither `<input>` nor `<textarea>` can draw its own

package/dist/styles/recipes/field.js

@@ -1,11 +1,12 @@
 import { vfDisplayDecls as e } from "./display-face.js";
-import { vfFocusUnderline as t } from "./focus.js";
-import { css as n } from "lit";
+import { vfStrokeDecls as t } from "./stroke.js";
+import { vfFocusUnderline as n } from "./focus.js";
+import { css as r } from "lit";
 //#region src/styles/recipes/field.ts
-var r = n`
+var i = r`
   .vf-field {
     background: var(--vf-white, #fff);
-    border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
+    ${t()}
     border-radius: 0;
     /* Editable text is set in the Chicago-style display face. */
     ${e}
@@ -36,7 +37,7 @@ var r = n`
      VfTextControlBase adds .vf-focus-rule for a keyboard focus only. */
   .vf-field-well.vf-focus-rule::after {
     --vf-focus-underline-offset: -2px;
-    ${t}
+    ${n}
   }
   /* Its own token, deliberately not --vf-disabled: the disabled rule below is
      an inactive control and exempt from contrast requirements, but a
@@ -50,7 +51,7 @@ var r = n`
     font-weight: inherit;
     opacity: 1;
   }
-  /* Disabled: the text dims to gray; the solid black box border stays. The
+  /* Disabled: the text dims to gray; the solid black frame stays. The
      cursor returns to the arrow — a well that can't take input isn't text. */
   .vf-field:disabled {
     color: var(--vf-disabled, #c0c0c0);
@@ -65,4 +66,4 @@ var r = n`
   }
 `;
 //#endregion
-export { r as vfField };
+export { i as vfField };

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

@@ -64,13 +64,17 @@ export declare const vfFocus: import("lit").CSSResult;
  *   the box continues 6px past it (2px half-leading from vfBase's 1.25 line box
  *   over the 16px em, plus the face's 4px descent): 6 − 2 = 4.
  * - `-2px` is a well whose ink runs to its own bottom edge — the radio's circle,
- *   a field's wrapper — putting the rule in the second row below it.
- * - `-3px` adds a 1px border the pseudo-element sits inside of (vf-checkbox).
+ *   a field's wrapper, a box framed by a stroke (vf-checkbox), whose line is
+ *   inside the padding box — putting the rule in the second row below it.
  * - past that, the rule also clears a hard shadow, which is ink no box the
- *   pseudo-element can size to contains: `-4px` for vf-select's 1px one, and
+ *   pseudo-element can size to contains: `-3px` for vf-select's 1px one, and
  *   for vf-swatch an offset that composes `--vf-shadow-offset` rather than
  *   hard-coding a depth its consumer can retheme.
  *
+ * Under forced colors a stroke is a border again and the padding box sits
+ * inside it, so a stroked carrier states its offset and sides with
+ * `vfStrokeInset`, which adds the stroke back there.
+ *
  * Drawn in `currentColor`, so it inverts with the label on a pressed face.
  */
 export declare const vfFocusUnderline: import("lit").CSSResult;

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 };

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

@@ -9,15 +9,18 @@ export type RuleEdge = (typeof RULE_EDGES)[number];
  * floor is `.vf-rule-bottom`, a window's status strip's ceiling is
  * `.vf-rule-top`, and `vf-container rule="…"` takes the edges by name.
  *
- * A border, not a pseudo-element or a painted line, so it lives inside the
- * box's own `border-box` size (vfBase) and insets the padding box the way
- * FrameRect insets a rectangle's interior: content, percentage fills and
- * children placed against the box all begin inside the rule. Scales with
- * `--vf-scale`, so it is one system px at every density, and paints in
- * `--vf-black`, so it remaps under forced colors with the rest of the ink.
+ * A stroke (see {@link vfStrokeDecls}), inside the box's own `border-box`
+ * size (vfBase): the rule's row is padding and an inset shadow paints it
+ * black, so it is one system px at every density and zoom, and in-flow
+ * content begins inside it. Children placed against the box, and percentage
+ * fills, measure from the box's outer edge; a component whose contract puts
+ * them inside the rule gives them an inner box to lay out in (vf-container
+ * uses its slot). Paints in `--vf-black`, and under forced colors turns back
+ * into a border, so it remaps with the rest of the ink.
  *
- * One declaration per edge, so the kit cannot grow two rules — the
- * {@link vfHardShadowDecls} principle, applied to the line.
+ * The classes compose on one element: each edge's shadow goes through its
+ * own private property and one rule paints all four, so the classes own the
+ * element's `box-shadow`, and its padding on their edges.
  *
  * `npm run verify:rule` asserts a container's rule against the menu bar's.
  */