vintage-frames 0.12.8 → 0.14.0

package/dist/components/vf-window.js

@@ -4,37 +4,42 @@ 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 { vfStrokeDecls as x, vfStrokeInset as S } from "../styles/recipes/stroke.js";
+import { vfChromeFrame as C } from "../styles/recipes/surface.js";
+import { vfRule as w } from "../styles/recipes/rule.js";
+import { vfTitleBar as T, vfWindowWidgets as E } from "../styles/recipes/title-bar.js";
+import { vfFocus as D } from "../styles/recipes/focus.js";
+import { GridSnapController as O } from "../grid-snap.js";
+import { DocumentListenersController as k } from "../document-listeners.js";
+import { VfSized as A } from "../size.js";
+import { DragController as j } from "../drag.js";
+import { TitleCenterController as M, chromeTitleBar as N, closeBox as P, widgetLabel as F, zoomBox as I } from "../chrome.js";
+import { prefersReducedMotion as L, windowRectFraction as R } from "../motion.js";
+import { paintSelectionRect as z, penPhase as B, xorPenCanvas as V } 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 H, css as U, html as W, nothing as G } from "lit";
+import { property as K, query as q, state as J } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var J = 80, Y = 54;
-function X(e, t, n) {
+var Y = 80, X = 54;
+function Z(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 Q = 24, $ = class extends A(l(H)) {
 	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 O(this), this.titleCenter = new M(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, Q - r), n.width - Q),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - Q))
 			};
-		}, 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 j(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 +52,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 k(this, () => [[
 			document,
 			"pointerdown",
 			this.#a,
@@ -61,7 +66,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 k(this, () => [[
 			document,
 			"keydown",
 			this.#m,
@@ -73,15 +78,15 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	static {
 		this.styles = [
 			f,
-			_,
+			b,
+			y,
 			g,
+			D,
+			C,
+			w,
+			T,
 			E,
-			S,
-			v,
-			y,
-			b,
-			x,
-			H`
+			U`
       :host {
         display: block;
         position: relative;
@@ -143,12 +148,12 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
          a focused widget out of the tree, so focus can't be dropped to
          <body> by a click on another window. */
       :host(:not([active])) .box {
-        border-color: transparent;
+        --_vf-stroke-ink: transparent;
         background-color: transparent;
         box-shadow: none;
       }
       :host(:not([active])) .zoom::after {
-        border-color: transparent;
+        --_vf-stroke-ink: transparent;
       }
 
       /* --- Utility (windoid) variant --------------------------------- */
@@ -191,7 +196,7 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
          a white (invisible, over the patch ring) borderline — rather than the
          big bar's 9×9 sunburst, which cannot land whole on a 5×5 interior. */
       :host([variant='utility']) .box:active {
-        border-color: var(--vf-white, #ffffff);
+        --_vf-stroke-ink: var(--vf-white, #ffffff);
         background-color: var(--vf-black, #000000);
         background-image: none;
       }
@@ -268,11 +273,19 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
          vertical rail's arrows begin under it. Takes no space until the slot
          is populated. Clipped like the body; a drop-open panel still escapes
          (see the body's note). A div with a class, never a <header>: that
-         element maps to a banner landmark (see render()). */
+         element maps to a banner landmark (see render()).
+
+         The rule is a stroke, so the header's own box runs under it: the
+         slot is the box content lays out, places and clips in, above the
+         rule. */
       .header {
-        position: relative;
         flex: none;
         background: var(--vf-white, #ffffff);
+      }
+      .header > slot {
+        display: block;
+        position: relative;
+        height: 100%;
         overflow: hidden;
       }
       .header.empty {
@@ -292,7 +305,6 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
       .status {
         flex: none;
         display: flex;
-        align-items: center;
         height: calc(var(--vf-scale, 1) * var(--vf-status-bar-height, 15px));
         /* The rule is vfRule's vf-rule-top on the element. */
         background: var(--vf-white, #ffffff);
@@ -301,6 +313,16 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
         white-space: nowrap;
         overflow: hidden;
       }
+      /* The rule is a stroke, so the strip's own box runs under it: the slot
+         centers the content in the 14px below the rule and clips it there.
+         Sideways it still runs to the strip's edges, as before. */
+      .status > slot {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        min-width: 0;
+        overflow-y: clip;
+      }
       /* Clear the grow box: its 15px cell plus the strip's own 6px inset. */
       :host([resizable]) .status {
         padding-inline-end: calc(var(--vf-scale, 1) * 21px);
@@ -310,18 +332,20 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
       }
 
       /* --- Grow box --------------------------------------------------- */
+      /* Flush inside the frame's stroke, which is padding (vfChromeFrame);
+         the two nested squares place against the box the same way, the
+         lower-right one clear of its top/left stroke. */
       .grow {
         position: absolute;
-        right: 0;
-        bottom: 0;
+        right: ${S(0)};
+        bottom: ${S(0)};
         z-index: 1;
         width: calc(var(--vf-scale, 1) * 15px);
         height: calc(var(--vf-scale, 1) * 15px);
-        border-top: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
-        border-left: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
         background: var(--vf-white, #ffffff);
         touch-action: none;
         cursor: var(--vf-cursor, default);
+        ${x({ edges: ["top", "left"] })}
       }
       .grow::before {
         content: '';
@@ -330,17 +354,17 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
         bottom: calc(var(--vf-scale, 1) * 1px);
         width: calc(var(--vf-scale, 1) * 9px);
         height: calc(var(--vf-scale, 1) * 9px);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
+        ${x()}
       }
       .grow::after {
         content: '';
         position: absolute;
-        top: calc(var(--vf-scale, 1) * 2px);
-        left: calc(var(--vf-scale, 1) * 2px);
+        top: ${S(2)};
+        left: ${S(2)};
         width: calc(var(--vf-scale, 1) * 7px);
         height: calc(var(--vf-scale, 1) * 7px);
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000000);
         background: var(--vf-white, #ffffff);
+        ${x()}
       }
       /* Inactive window: the size box empties with the scroll rails (the same
          HIG no-interactive-UX treatment ScrollStateController drives for the
@@ -354,21 +378,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 +400,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 || L()) return !1;
 		let n = {
 			closing: !1,
 			animations: []
@@ -397,7 +416,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 && !L() ? this.#u(r, this.getBoundingClientRect(), !0) : null;
 		if (this.hidden = !0, !i) return !1;
 		let a = {
 			closing: !0,
@@ -440,8 +459,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 = R(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 = V("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", z(p, c, f, B(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 +495,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 = B(r, i);
+		o !== e.phase && (e.phase = o, z(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 = V("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 +574,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 = Z(i(t.baseWidth + o(e.clientX - t.startX, this), this), this.minWidth ?? Y, this.maxWidth), r = Z(i(t.baseHeight + o(e.clientY - t.startY, this), this), this.minHeight ?? X, this.maxHeight);
 		(n !== this.width || r !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = r;
 	}
 	_onGrowPointerEnd(t) {
@@ -570,42 +589,42 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
 		});
 	}
 	render() {
-		return U`
+		return W`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : W}
+        aria-labelledby=${this.heading ? "title" : G}
       >
-        ${M(this._drag, U`
-            ${this.closable ? N(P("Close", this.heading), this._onCloseClick) : W}
+        ${N(this._drag, W`
+            ${this.closable ? P(F("Close", this.heading), this._onCloseClick) : G}
             <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 ? I(F("Zoom", this.heading), this._onZoomClick) : G}
+          `, 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 ? G : `height:${a(this.headerHeight)}`}
         >
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
         <div class="body" part="body">
-          ${this.scrollbars ? U`
+          ${this.scrollbars ? W`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
                   ?corner=${this.resizable && !this._hasStatus}
-                  label=${this.heading || W}
+                  label=${this.heading || G}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : U`<slot></slot>`}
+              ` : W`<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 ? W`
               <div
                 class="grow"
                 part="grow-box"
@@ -615,45 +634,45 @@ var Z = 24, Q = 8, $ = class extends k(l(V)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : W}
+            ` : G}
       </div>
     `;
 	}
 };
-s([G({ reflect: !0 })], $.prototype, "variant", void 0), s([G()], $.prototype, "heading", void 0), s([G({
+s([K({ reflect: !0 })], $.prototype, "variant", void 0), s([K()], $.prototype, "heading", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "active", void 0), s([G({
+})], $.prototype, "active", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "closable", void 0), s([G({
+})], $.prototype, "closable", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "zoomable", void 0), s([G({
+})], $.prototype, "zoomable", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "movable", void 0), s([G({
+})], $.prototype, "movable", void 0), s([K({
 	type: Boolean,
 	reflect: !0,
 	attribute: "outline-drag"
-})], $.prototype, "outlineDrag", void 0), s([G({
+})], $.prototype, "outlineDrag", void 0), s([K({
 	type: Boolean,
 	reflect: !0
-})], $.prototype, "resizable", void 0), s([G({
+})], $.prototype, "resizable", void 0), s([K({
 	type: Number,
 	attribute: "min-width"
-})], $.prototype, "minWidth", void 0), s([G({
+})], $.prototype, "minWidth", void 0), s([K({
 	type: Number,
 	attribute: "min-height"
-})], $.prototype, "minHeight", void 0), s([G({
+})], $.prototype, "minHeight", void 0), s([K({
 	type: Number,
 	attribute: "max-width"
-})], $.prototype, "maxWidth", void 0), s([G({
+})], $.prototype, "maxWidth", void 0), s([K({
 	type: Number,
 	attribute: "max-height"
-})], $.prototype, "maxHeight", void 0), s([G({ reflect: !0 })], $.prototype, "scrollbars", void 0), s([G({
+})], $.prototype, "maxHeight", void 0), s([K({ reflect: !0 })], $.prototype, "scrollbars", void 0), s([K({
 	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")], $);
+})], $.prototype, "headerHeight", void 0), s([J()], $.prototype, "_hasHeader", void 0), s([J()], $.prototype, "_hasStatus", void 0), s([q(".body")], $.prototype, "body", void 0), s([q("vf-scroll-area")], $.prototype, "scrollArea", void 0), $ = s([t("vf-window")], $);
 //#endregion
 export { $ as VfWindow };

package/dist/index.d.ts

@@ -92,7 +92,7 @@ export { CURSOR_ARROW, CURSOR_I_BEAM, CURSOR_CROSSHAIR, CURSOR_WAIT, } from './c
  * `static styles` to inherit the kit's type, panel frame, window chrome, focus
  * ring, field well and System 7 scroll-rail skin.
  */
-export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfRule, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
+export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfRule, vfTitleBar, vfWindowWidgets, vfHardShadow, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
 export type { TileRect } from './styles/base.js';
 /**
  * The 1px rule's attribute grammar (`vf-container rule="top bottom"`): the
@@ -102,16 +102,26 @@ 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.
+ * A 1-bit stroke for a box of your own: `vfStrokeDecls()` draws the line as
+ * padding plus an inset shadow, the way every kit frame is drawn, because a
+ * CSS `border` of `calc(var(--vf-scale, 1) * 1px)` renders thin under Safari's
+ * page zoom. `vfStrokeInset()` offsets a child placed against the box, and
+ * `vfStrokeShadow()` restates the painted width alone.
  */
-export { vfTileGrid, tileGrid, patternOverride, TileRasterCache } from './tile-grid.js';
+export { vfStrokeDecls, vfStrokeInset, vfStrokeShadow } from './styles/base.js';
+export type { VfStrokeOptions } from './styles/base.js';
+/**
+ * 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, 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

package/dist/index.js

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