vintage-frames 0.12.2 → 0.12.4

package/dist/components/vf-window.js

@@ -1,58 +1,100 @@
 import { emit as e } from "../events.js";
 import { vfElement as t } from "../define.js";
-import { ScaleController as n, snapSys as r, sysLength as i, toSysExact as a } from "../scale.js";
-import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { PlacementController as s, VfPositioned as c, placementIn as l, warnMovableContract as u } from "../position.js";
-import { vfBase as d } from "../styles/recipes/host.js";
-import { DOT_MOTIF as f, DOT_RECTS as p, DOT_SPAN as m, vfDots as h, vfStripes as g } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as _ } from "../styles/recipes/surface.js";
-import { vfRule as v } from "../styles/recipes/rule.js";
-import { vfTitleBar as y, vfWindowWidgets as b } from "../styles/recipes/title-bar.js";
-import { vfFocus as x } from "../styles/recipes/focus.js";
-import { TileRasterCache as S, patternOverride as C, tileGrid as w, vfTileGrid as T } from "../tile-grid.js";
-import { GridSnapController as E } from "../grid-snap.js";
-import { VfSized as D } from "../size.js";
-import { DragController as O } from "../drag.js";
-import { TitleCenterController as k, chromeTitleBar as A, closeBox as j, widgetLabel as M, zoomBox as N } from "../chrome.js";
+import { ScaleController as n, effectiveScale as r, snapSys as i, sysLength as a, toSysExact as o } from "../scale.js";
+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 "./vf-scroll-area.js";
-import { LitElement as P, css as F, html as I, nothing as L } from "lit";
-import { property as R, query as z, state as B } from "lit/decorators.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";
 //#region src/components/vf-window.ts
-var V = 80, H = 54;
-function U(e, t, n) {
+var J = 80, Y = 54;
+function X(e, t, n) {
 	let r = Math.max(t, e);
 	return n == null ? r : Math.min(n, r);
 }
-var W = 24, G = 8, K = class extends D(c(P)) {
+var Z = 24, Q = 8, $ = class extends k(l(V)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this._hasHeader = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new E(this), this.titleCenter = new k(this), this._dotsPattern = "", this.#e = new S(), this.#t = (e, t, n) => {
-			let r = a(this.offsetWidth, this);
+		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) => {
+			let r = o(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, W - r), n.width - W),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - W))
+				x: Math.min(Math.max(e, Z - r), n.width - Z),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - Z))
 			};
-		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new O(this, {
-			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
-			onDrag: (e, t) => this._placement.moveTo(e, t)
-		}), this._resizeState = null, this.#n = !1, this.#r = !1;
+		}, this._placement = new c(this, (e, t, n) => this.#t(e, t, n)), this._drag = new A(this, {
+			onDragStart: (e) => {
+				if (!this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
+				this.#S();
+				let t = this._placement.seed();
+				return this.#h(t), t;
+			},
+			onDrag: (e, t) => {
+				this.#f ? this.#g(e, t) : this._placement.moveTo(e, t);
+			},
+			onDragEnd: (e, t) => {
+				this.#y(t);
+			}
+		}), this._resizeState = null, this.#n = this.attachInternals(), this.#r = null, this.#i = new O(this, () => [[
+			document,
+			"pointerdown",
+			this.#a,
+			!0
+		], [
+			document,
+			"keydown",
+			this.#o,
+			!0
+		]]), this.#a = () => {
+			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, () => [[
+			document,
+			"keydown",
+			this.#m,
+			!0
+		]]), this.#m = (e) => {
+			e.key !== "Escape" || !this.#f || (e.preventDefault(), e.stopPropagation(), this._drag.cancel());
+		}, this.#b = !1, this.#x = !1;
 	}
 	static {
 		this.styles = [
-			d,
-			g,
-			h,
-			T,
-			x,
+			f,
 			_,
+			g,
+			E,
+			S,
 			v,
 			y,
 			b,
-			F`
+			x,
+			H`
       :host {
         display: block;
         position: relative;
         --vf-surface: var(--vf-white, #ffffff);
       }
+      /* Opening from a rect (show): laid out, focusable and a hit target,
+         painting nothing until the rects have drained. Opacity rather than
+         visibility, which would drop focus and hand a press to whatever is
+         under the window. A rule of its own, never in an :is() list: an
+         engine that cannot parse :state() drops the whole list. */
+      :host(:state(opening)) {
+        opacity: 0;
+      }
       /* Skin from vfChromeFrame; the layout is the window's own — a full-size
          flex column so the body takes the slack the title bar and grow box
          don't. */
@@ -312,32 +354,152 @@ var W = 24, G = 8, K = class extends D(c(P)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = C(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = w(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
 		if (this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return w({
-			cols: Math.ceil(e / m),
+		if (this._dotsPattern) return T({
+			cols: Math.ceil(e / h),
 			rows: 1,
-			tile: m
+			tile: h
 		});
-		let t = Math.ceil((e + f) / m) * m, n = G + f;
-		return I`<div
+		let t = Math.ceil((e + p) / h) * h, n = Q + p;
+		return U`<div
       class="vf-tile-raster"
-      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(f, f, p, t, n)}"
+      style="width:${a(t)};height:${a(n)};background-image:${this.#e.for(p, p, m, t, n)}"
     ></div>`;
 	}
 	#t;
 	placementAt(e, t, n) {
 		let r = this.scrollArea;
-		return r ? r.placementAt(e, t, n) : l(this.body ?? this, e, t, this, n);
+		return r ? r.placementAt(e, t, n) : u(this.body ?? this, e, t, this, n);
 	}
 	measure() {
 		this.scrollArea?.measure();
 	}
+	async show(e = {}) {
+		this.#s("finish"), this.hidden = !1;
+		let t = e.from;
+		if (!t || I()) return !1;
+		let n = {
+			closing: !1,
+			animations: []
+		};
+		this.#r = n, this.#n.states?.add("opening"), this.#i.attach();
+		do
+			await this.updateComplete;
+		while (this.isUpdatePending && this.#r === n);
+		if (this.#r !== n) return !1;
+		let r = this.isConnected ? this.#u(t, this.getBoundingClientRect(), !1) : null;
+		return r ? (n.animations = r.animations, this.#l(n, r)) : (this.#c(), !1);
+	}
+	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;
+		if (this.hidden = !0, !i) return !1;
+		let a = {
+			closing: !0,
+			animations: i.animations
+		};
+		return this.#r = a, this.#i.attach(), this.#l(a, i);
+	}
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s(e) {
+		let t = this.#r;
+		if (t) {
+			this.#c();
+			for (let n of t.animations) n[e]();
+		}
+	}
+	#c() {
+		this.#r = null, this.#n.states?.delete("opening"), this.#i.detach();
+	}
+	async #l(e, t) {
+		let n = await Promise.all(t.animations.map((e) => e.finished)).then(() => !0, () => !1);
+		for (let e of t.canvases) e.remove();
+		return this.#r === e && this.#c(), n;
+	}
+	#u(e, t, n) {
+		let i = this.#d();
+		if (!i) return null;
+		let o = r(this), s = i.getBoundingClientRect(), c = (e) => ({
+			left: Math.round((e.left - s.left) / o),
+			top: Math.round((e.top - s.top) / o),
+			right: Math.round((e.right - s.left) / o),
+			bottom: Math.round((e.bottom - s.top) / o)
+		}), l = c(e), u = c(t);
+		if (Math.max(l.right, u.right) <= 0 || Math.max(l.bottom, u.bottom) <= 0 || Math.min(l.left, u.left) >= Math.round(s.width / o) || Math.min(l.top, u.top) >= Math.round(s.height / o)) return null;
+		let d = {
+			canvases: [],
+			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 h = n ? 13 - e : e;
+			d.animations.push(p.animate([{ visibility: "visible" }, { visibility: "visible" }], {
+				delay: h * 17,
+				duration: 68,
+				endDelay: (14 - h) * 17
+			}));
+		}
+		return d;
+	}
+	#d() {
+		let t = { surface: null };
+		return e(this, "vf-drag-surface-request", t, { composed: !1 }), t.surface;
+	}
+	#f;
+	#p;
+	#m;
+	#h(e) {
+		if (this.#y(!0), !this.outlineDrag) return;
+		let t = this.#v(this.getBoundingClientRect());
+		t && (this.#f = {
+			origin: e,
+			outline: t,
+			landing: null
+		}, this.#_(t, 0, 0), this.#p.attach());
+	}
+	#g(e, t) {
+		let n = this.#f;
+		if (!n) return;
+		let r = this._placement.resolve(e, t);
+		n.landing = r, this.#_(n.outline, r.x - n.origin.x, r.y - n.origin.y);
+	}
+	#_(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));
+	}
+	#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;
+		return l.position = "absolute", l.width = a(o), l.height = a(s), t.append(c), {
+			canvas: c,
+			base: {
+				x: Math.round((e.left - i.left) / n),
+				y: Math.round((e.top - i.top) / n)
+			},
+			width: o,
+			height: s,
+			phase: -1
+		};
+	}
+	#y(e) {
+		let t = this.#f;
+		this.#f = null, t && (this.#p.detach(), t.outline.canvas.remove(), !e && t.landing && this._placement.moveTo(t.landing.x, t.landing.y));
+	}
 	updated() {
-		this.#a();
+		this.#C();
 		let t = this._resizeState;
 		t?.emitPending && (t.emitPending = !1, e(this, "vf-resize", {
 			width: this.width,
@@ -345,18 +507,23 @@ var W = 24, G = 8, K = class extends D(c(P)) {
 			commit: !1
 		}));
 	}
-	#n;
-	#r;
-	#i() {
-		this.#r ||= u(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
+	#b;
+	#x;
+	#S() {
+		this.#x ||= d(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
 	}
-	#a() {
-		if (this.#n) return;
+	#C() {
+		if (this.#b) return;
 		let e = [];
-		this.width == null && this.style.width === "" && e.push("width (falling back to block layout)"), this.height == null && this.style.height === "" && e.push("height (falling back to the content)"), e.length !== 0 && (this.#n = !0, console.warn(`vf-window${this.heading ? ` ("${this.heading}")` : ""}: no ${e.join(", no ")}. A window owns its whole box — declare both in system px: <vf-window width="240" height="176">.`));
+		this.width == null && this.style.width === "" && e.push("width (falling back to block layout)"), this.height == null && this.style.height === "" && e.push("height (falling back to the content)"), e.length !== 0 && (this.#b = !0, console.warn(`vf-window${this.heading ? ` ("${this.heading}")` : ""}: no ${e.join(", no ")}. A window owns its whole box — declare both in system px: <vf-window width="240" height="176">.`));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#r && this.#i.attach();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._resizeState = null;
+		super.disconnectedCallback(), this._resizeState = null, this.#f?.outline.canvas.remove(), this.#f = null, this.#r && !this.#r.closing && queueMicrotask(() => {
+			!this.isConnected && this.#r?.closing === !1 && this.#s("cancel");
+		});
 	}
 	_onStatusSlotChange(e) {
 		let t = e.target;
@@ -379,8 +546,8 @@ var W = 24, G = 8, K = class extends D(c(P)) {
 			pointerId: e.pointerId,
 			startX: e.clientX,
 			startY: e.clientY,
-			baseWidth: a(t.width, this),
-			baseHeight: a(t.height, this),
+			baseWidth: o(t.width, this),
+			baseHeight: o(t.height, this),
 			emitPending: !1,
 			resized: !1
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault();
@@ -388,8 +555,8 @@ var W = 24, G = 8, K = class extends D(c(P)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = U(r(t.baseWidth + a(e.clientX - t.startX, this), this), this.minWidth ?? V, this.maxWidth), i = U(r(t.baseHeight + a(e.clientY - t.startY, this), this), this.minHeight ?? H, this.maxHeight);
-		(n !== this.width || i !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = i;
+		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);
+		(n !== this.width || r !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = r;
 	}
 	_onGrowPointerEnd(t) {
 		let n = this._resizeState;
@@ -403,42 +570,42 @@ var W = 24, G = 8, K = class extends D(c(P)) {
 		});
 	}
 	render() {
-		return I`
+		return U`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : L}
+        aria-labelledby=${this.heading ? "title" : W}
       >
-        ${A(this._drag, I`
-            ${this.closable ? j(M("Close", this.heading), this._onCloseClick) : L}
+        ${M(this._drag, U`
+            ${this.closable ? N(P("Close", this.heading), this._onCloseClick) : W}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? N(M("Zoom", this.heading), this._onZoomClick) : L}
+            ${this.zoomable ? F(P("Zoom", this.heading), this._onZoomClick) : W}
           `, this.variant === "utility" ? "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 ? L : `height:${i(this.headerHeight)}`}
+          style=${this.headerHeight == null ? W : `height:${a(this.headerHeight)}`}
         >
           <slot name="header" @slotchange=${this._onHeaderSlotChange}></slot>
         </div>
         <div class="body" part="body">
-          ${this.scrollbars ? I`
+          ${this.scrollbars ? U`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
                   ?corner=${this.resizable && !this._hasStatus}
-                  label=${this.heading || L}
+                  label=${this.heading || W}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : I`<slot></slot>`}
+              ` : U`<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 ? I`
+        ${this.resizable ? U`
               <div
                 class="grow"
                 part="grow-box"
@@ -448,41 +615,45 @@ var W = 24, G = 8, K = class extends D(c(P)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : L}
+            ` : W}
       </div>
     `;
 	}
 };
-o([R({ reflect: !0 })], K.prototype, "variant", void 0), o([R()], K.prototype, "heading", void 0), o([R({
+s([G({ reflect: !0 })], $.prototype, "variant", void 0), s([G()], $.prototype, "heading", void 0), s([G({
 	type: Boolean,
 	reflect: !0
-})], K.prototype, "active", void 0), o([R({
+})], $.prototype, "active", void 0), s([G({
 	type: Boolean,
 	reflect: !0
-})], K.prototype, "closable", void 0), o([R({
+})], $.prototype, "closable", void 0), s([G({
 	type: Boolean,
 	reflect: !0
-})], K.prototype, "zoomable", void 0), o([R({
+})], $.prototype, "zoomable", void 0), s([G({
 	type: Boolean,
 	reflect: !0
-})], K.prototype, "movable", void 0), o([R({
+})], $.prototype, "movable", void 0), s([G({
+	type: Boolean,
+	reflect: !0,
+	attribute: "outline-drag"
+})], $.prototype, "outlineDrag", void 0), s([G({
 	type: Boolean,
 	reflect: !0
-})], K.prototype, "resizable", void 0), o([R({
+})], $.prototype, "resizable", void 0), s([G({
 	type: Number,
 	attribute: "min-width"
-})], K.prototype, "minWidth", void 0), o([R({
+})], $.prototype, "minWidth", void 0), s([G({
 	type: Number,
 	attribute: "min-height"
-})], K.prototype, "minHeight", void 0), o([R({
+})], $.prototype, "minHeight", void 0), s([G({
 	type: Number,
 	attribute: "max-width"
-})], K.prototype, "maxWidth", void 0), o([R({
+})], $.prototype, "maxWidth", void 0), s([G({
 	type: Number,
 	attribute: "max-height"
-})], K.prototype, "maxHeight", void 0), o([R({ reflect: !0 })], K.prototype, "scrollbars", void 0), o([R({
+})], $.prototype, "maxHeight", void 0), s([G({ reflect: !0 })], $.prototype, "scrollbars", void 0), s([G({
 	type: Number,
 	attribute: "header-height"
-})], K.prototype, "headerHeight", void 0), o([B()], K.prototype, "_hasHeader", void 0), o([B()], K.prototype, "_hasStatus", void 0), o([z(".body")], K.prototype, "body", void 0), o([z("vf-scroll-area")], K.prototype, "scrollArea", void 0), K = o([t("vf-window")], K);
+})], $.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")], $);
 //#endregion
-export { K as VfWindow };
+export { $ as VfWindow };

package/dist/index.d.ts

@@ -12,6 +12,7 @@
  */
 export { VfDesktop } from './components/vf-desktop.js';
 export { VfWindow } from './components/vf-window.js';
+export type { VfViewportBox, VfWindowHideOptions, VfWindowShowOptions, } from './components/vf-window.js';
 export { VfDialog } from './components/vf-dialog.js';
 export { VfSeparator } from './components/vf-separator.js';
 export { VfButton } from './components/vf-button.js';
@@ -143,7 +144,7 @@ export type { DocumentListenerSpec } from './document-listeners.js';
 export { focusModality, trackFocusModality, FocusRuleController } from './focus-modality.js';
 export type { FocusModality } from './focus-modality.js';
 export { emit } from './events.js';
-export { prefersReducedMotion, runSelectionBlink, runOutlineTravel, BLINK_INTERVAL_MS, BLINK_FLIPS, PRESS_HOLD_MS, RENAME_DELAY_MS, TAP_PAIR_MS, TAP_PAIR_SLOP_PX, DRAG_SLOP_PX, DRAG_SLOP_COARSE_PX, dragSlop, WALK_STEP_PX, WALK_STEP_MS, WALK_BEAT_MS, } from './motion.js';
+export { prefersReducedMotion, runSelectionBlink, runOutlineTravel, BLINK_INTERVAL_MS, BLINK_FLIPS, PRESS_HOLD_MS, RENAME_DELAY_MS, TAP_PAIR_MS, TAP_PAIR_SLOP_PX, DRAG_SLOP_PX, DRAG_SLOP_COARSE_PX, dragSlop, WALK_STEP_PX, WALK_STEP_MS, WALK_BEAT_MS, windowRectFraction, WINDOW_RECT_STEPS, WINDOW_RECTS_VISIBLE, WINDOW_RECT_RATIO, WINDOW_RECT_STEP_MS, } from './motion.js';
 export type { BlinkHandle, TravelHandle } from './motion.js';
 /**
  * Element registration. `vfElement` is the kit's `@customElement`: it registers

package/dist/index.js

@@ -30,46 +30,46 @@ import { BUTTON_FACE as Ee, BUTTON_FRAME as De, RING_FRAME as Oe, RING_HOLE as k
 import { VfDesktop as Fe } from "./components/vf-desktop.js";
 import { VfSized as Ie } from "./size.js";
 import { DragController as Le } from "./drag.js";
-import { ScrollStateController as Re } from "./scroll-state.js";
-import { BLINK_FLIPS as ze, BLINK_INTERVAL_MS as Be, DRAG_SLOP_COARSE_PX as Ve, DRAG_SLOP_PX as He, PRESS_HOLD_MS as Ue, RENAME_DELAY_MS as We, TAP_PAIR_MS as Ge, TAP_PAIR_SLOP_PX as Ke, WALK_BEAT_MS as qe, WALK_STEP_MS as Je, WALK_STEP_PX as Ye, dragSlop as Xe, prefersReducedMotion as Ze, runOutlineTravel as Qe, runSelectionBlink as $e } from "./motion.js";
-import { CARET_DOWN as et, CARET_DOWN_SMALL as tt, CHECKBOX_X as nt, CHECKMARK as rt, RADIO_DOT as it, RADIO_FACE as at, RADIO_RING as ot, RADIO_RING_PRESSED as st, SLIDER_THUMB as ct, SLIDER_THUMB_FACE as lt, STEPPER as ut, STEPPER_DOWN_FILL as dt, STEPPER_UP_FILL as ft, glyphSvg as pt } from "./glyphs.js";
-import { ScrollRailController as mt, renderScrollRail as ht } from "./scroll-rail.js";
-import { VfScrollArea as gt } from "./components/vf-scroll-area.js";
-import { VfWindow as _t } from "./components/vf-window.js";
-import { VfModalDialog as vt, modalDialogStyles as yt } from "./modal-dialog.js";
-import { VfDialog as bt } from "./components/vf-dialog.js";
-import { VfSeparator as xt } from "./components/vf-separator.js";
-import { VfFormControl as St } from "./form-control.js";
-import { VfButton as Ct } from "./components/vf-button.js";
-import { VfButtonGroup as wt } from "./components/vf-button-group.js";
-import { VfSwatch as Tt } from "./components/vf-swatch.js";
-import { VfToggleControl as Et } from "./toggle-control.js";
-import { VfCheckbox as Dt } from "./components/vf-checkbox.js";
-import { VfRadio as Ot } from "./components/vf-radio.js";
-import { VfRadioGroup as kt } from "./components/vf-radio-group.js";
-import { FocusRuleController as At, focusModality as jt, trackFocusModality as Mt } from "./focus-modality.js";
-import { VfTextControlBase as Nt } from "./text-control.js";
-import { VfTextField as Pt } from "./components/vf-text-field.js";
-import { VfTextArea as Ft } from "./components/vf-text-area.js";
-import { VfNumberField as It } from "./components/vf-number-field.js";
-import { VfOption as Lt } from "./components/vf-option.js";
-import { VfSelect as Rt } from "./components/vf-select.js";
-import { VfProgressBar as zt } from "./components/vf-progress-bar.js";
-import { VfSlider as Bt } from "./components/vf-slider.js";
-import { VfLabel as Vt } from "./components/vf-label.js";
-import { VfParagraph as Ht } from "./components/vf-paragraph.js";
-import { VfImg as Ut } from "./components/vf-img.js";
-import { VfIcon as Wt } from "./components/vf-icon.js";
-import { VfIconField as Gt } from "./components/vf-icon-field.js";
-import { VfMenuBar as Kt } from "./components/vf-menu-bar.js";
-import { VfMenu as qt } from "./components/vf-menu.js";
-import { VfMenuItem as Jt } from "./components/vf-menu-item.js";
-import { VfList as Yt } from "./components/vf-list.js";
-import { VfListItem as Xt } from "./components/vf-list-item.js";
-import { VfFieldset as Zt } from "./components/vf-fieldset.js";
-import { VfGrid as Qt } from "./components/vf-grid.js";
-import { VfStack as $t } from "./components/vf-stack.js";
-import { VfContainer as en } from "./components/vf-container.js";
-import { CURSOR_ARROW as tn, CURSOR_CROSSHAIR as nn, CURSOR_I_BEAM as rn, CURSOR_WAIT as an } from "./cursor-art.js";
-import { applyCursor as on } from "./cursor.js";
-export { ze as BLINK_FLIPS, Be as BLINK_INTERVAL_MS, Ee as BUTTON_FACE, De as BUTTON_FRAME, et as CARET_DOWN, tt as CARET_DOWN_SMALL, nt as CHECKBOX_X, rt as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, tn as CURSOR_ARROW, nn as CURSOR_CROSSHAIR, rn as CURSOR_I_BEAM, an as CURSOR_WAIT, Ve as DRAG_SLOP_COARSE_PX, He as DRAG_SLOP_PX, Te as DocumentListenersController, Le as DragController, At as FocusRuleController, Ce as GridSnapController, G as PATTERNS, K as PATTERN_NAMES, q as PATTERN_SIZE, D as PIXEL_GRID_METRICS, Ue as PRESS_HOLD_MS, xe as PatternFillController, T as PlacementController, it as RADIO_DOT, at as RADIO_FACE, ot as RADIO_RING, st as RADIO_RING_PRESSED, We as RENAME_DELAY_MS, Oe as RING_FRAME, ke as RING_HOLE, Ae as RING_INSET, ie as RULE_EDGES, je as SCREEN_CORNER, ct as SLIDER_THUMB, lt as SLIDER_THUMB_FACE, ut as STEPPER, dt as STEPPER_DOWN_FILL, ft as STEPPER_UP_FILL, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, mt as ScrollRailController, Re as ScrollStateController, Ge as TAP_PAIR_MS, Ke 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, Ct as VfButton, wt as VfButtonGroup, Dt as VfCheckbox, en as VfContainer, Fe as VfDesktop, bt as VfDialog, Zt as VfFieldset, St as VfFormControl, Qt as VfGrid, Wt as VfIcon, Gt as VfIconField, Ut as VfImg, Vt as VfLabel, Yt as VfList, Xt as VfListItem, qt as VfMenu, Kt as VfMenuBar, Jt as VfMenuItem, vt as VfModalDialog, It as VfNumberField, Lt as VfOption, Ht as VfParagraph, E as VfPositioned, zt as VfProgressBar, Ot as VfRadio, kt as VfRadioGroup, gt as VfScrollArea, Rt as VfSelect, xt as VfSeparator, Ie as VfSized, Bt as VfSlider, $t as VfStack, Tt as VfSwatch, Ft as VfTextArea, Nt as VfTextControlBase, Pt as VfTextField, Et as VfToggleControl, _t as VfWindow, qe as WALK_BEAT_MS, Je as WALK_STEP_MS, Ye as WALK_STEP_PX, on as applyCursor, f as applyScale, t as defineElement, o as devicePxPerSystemPx, Xe as dragSlop, p as effectiveScale, e as emit, jt as focusModality, m as getScale, s as getZoom, pt as glyphSvg, yt 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, Ze as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, ht as renderScrollRail, we as requestGridSnap, l as resetZoomBaseline, oe as ruleClasses, Qe as runOutlineTravel, $e 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, Mt 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 };
+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 };

package/dist/motion.d.ts

@@ -124,3 +124,24 @@ export interface TravelHandle {
  * `prefers-reduced-motion`, where it runs at once and the handle is a no-op.
  */
 export declare function runOutlineTravel(distance: number, setProgress: (t: number) => void, onDone: () => void): TravelHandle;
+/**
+ * The zoom rects a window opens with (`vf-window.show({ from })`): how many
+ * rects are drawn, how many are on screen at once, the ratio between the
+ * fractions of the way consecutive rects sit, and the milliseconds a step
+ * lasts. A fixed count rather than the walk's constant speed: every
+ * distance takes the same eighteen steps — one per rect, then four as the
+ * trail drains. Provisional. verify:window computes its expected frames
+ * from the first three; nothing asserts the step's length.
+ */
+export declare const WINDOW_RECT_STEPS = 14;
+export declare const WINDOW_RECTS_VISIBLE = 4;
+export declare const WINDOW_RECT_RATIO = 0.7;
+export declare const WINDOW_RECT_STEP_MS = 17;
+/**
+ * How far window rect `k` (0 … {@link WINDOW_RECT_STEPS} − 1) sits from the
+ * small rect toward the big one, as a fraction of the way:
+ * `WINDOW_RECT_RATIO ** (WINDOW_RECT_STEPS − k)`, 0.007 for the first and
+ * 0.7 for the last. The rects bunch at the small rect and open out toward
+ * the big one, and the last stops seven tenths of the way.
+ */
+export declare function windowRectFraction(k: number): number;

package/dist/motion.js

@@ -36,5 +36,9 @@ function m(t, n, r) {
 	};
 	return s = window.setTimeout(l, 25), { finish: c };
 }
+var h = 14, g = 4, _ = .7, v = 17;
+function y(e) {
+	return _ ** (14 - e);
+}
 //#endregion
-export { l as BLINK_FLIPS, c as BLINK_INTERVAL_MS, o as DRAG_SLOP_COARSE_PX, a as DRAG_SLOP_PX, t as PRESS_HOLD_MS, n as RENAME_DELAY_MS, r as TAP_PAIR_MS, i as TAP_PAIR_SLOP_PX, p as WALK_BEAT_MS, f as WALK_STEP_MS, d as WALK_STEP_PX, s as dragSlop, e as prefersReducedMotion, m as runOutlineTravel, u as runSelectionBlink };
+export { l as BLINK_FLIPS, c as BLINK_INTERVAL_MS, o as DRAG_SLOP_COARSE_PX, a as DRAG_SLOP_PX, t as PRESS_HOLD_MS, n as RENAME_DELAY_MS, r as TAP_PAIR_MS, i as TAP_PAIR_SLOP_PX, p as WALK_BEAT_MS, f as WALK_STEP_MS, d as WALK_STEP_PX, g as WINDOW_RECTS_VISIBLE, _ as WINDOW_RECT_RATIO, h as WINDOW_RECT_STEPS, v as WINDOW_RECT_STEP_MS, s as dragSlop, e as prefersReducedMotion, m as runOutlineTravel, u as runSelectionBlink, y as windowRectFraction };