vintage-frames 0.12.1 → 0.12.3

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

@@ -1,5 +1,30 @@
 import { LitElement, type PropertyValues } from 'lit';
 import './vf-scroll-area.js';
+/** A box in viewport CSS px. A `DOMRect` is one; a zero-size box is a point. */
+export interface VfViewportBox {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+/** The options of {@link VfWindow.show}. */
+export interface VfWindowShowOptions {
+    /**
+     * The box the window opens from, in viewport CSS px — an icon's
+     * `cellRect()`, a button's `getBoundingClientRect()`, any rect. Unset, the
+     * window shows at once.
+     */
+    from?: VfViewportBox | null;
+}
+/** The options of {@link VfWindow.hide}. */
+export interface VfWindowHideOptions {
+    /**
+     * The box the window closes to, in viewport CSS px — an icon's
+     * `cellRect()`, a button's `getBoundingClientRect()`, any rect. Unset, the
+     * window hides at once.
+     */
+    to?: VfViewportBox | null;
+}
 declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSizedInterface) & (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
 /**
  * `<vf-window>` — the System 7 desktop-window shell.
@@ -29,6 +54,32 @@ declare const VfWindow_base: (new (...args: any[]) => import("../size.js").VfSiz
  * Unset, the window still renders — normal block layout, as before — and
  * says so once in the console.
  *
+ * **Opening from a rect.** {@link show} clears `hidden`, and given `from` — a
+ * box in viewport CSS px, an icon's `cellRect()` or a button's rect — opens
+ * the window from it: dotted rectangles grow from that box toward the
+ * window's frame, four on screen at a time, bunched at the box and opening
+ * out toward the window, drawn with the icon drag outline's XOR pen on the
+ * desktop's drag surface; the window draws once they have drained, eighteen
+ * steps later. Until then it matches `:state(opening)` and paints nothing —
+ * still laid out, focusable and a hit target, so a page can place it, raise
+ * it and focus into it at once, and a press finishes the rects and lands on
+ * the window. Under `prefers-reduced-motion`, with no `vf-desktop` on its
+ * path, or without `from`, the window shows at once.
+ *
+ * **Closing to a rect.** {@link hide} sets `hidden`, and given `to` closes
+ * the window to it: the same rectangles run the other way, from where the
+ * frame was in toward the box, the window gone from the first step. A press
+ * finishes them, and removing the window leaves them running. Under
+ * `prefers-reduced-motion`, with no `vf-desktop` on its path, or without
+ * `to`, the window hides at once. The window knows nothing about icons:
+ * `from` and `to` are any rect.
+ *
+ * **Dragging as an outline.** A `movable` window moves live under the
+ * pointer. With `outline-drag` a press on the title bar draws a dotted
+ * outline around the window on the desktop's drag surface instead, with the
+ * same pen; the drag moves the outline, held where the window can land, and
+ * the window moves there on the release. Escape cancels.
+ *
  * @slot - Default slot: window body content.
  * @slot header - Optional header content — a band between the title bar and
  *   the body, the full width of the window (the Finder window's header
@@ -101,6 +152,16 @@ export declare class VfWindow extends VfWindow_base {
     zoomable: boolean;
     /** Allow dragging the window by its title bar. */
     movable: boolean;
+    /**
+     * Drag by the title bar as an outline: a press draws a dotted one-pixel
+     * rectangle around the window on the desktop's drag surface, with the
+     * icon drag outline's pen; the drag moves it, held where the window can
+     * land, and the window moves there on the release, in one write. Escape
+     * cancels and writes nothing, as does a release that never moved it.
+     * Unset, the window moves live under the pointer; with no `vf-desktop` on
+     * its path it moves live either way. Only matters with `movable`.
+     */
+    outlineDrag: boolean;
     /**
      * Show a grow box at the bottom-right corner for resizing. The drag is
      * bounded per axis by the sizeRect below.
@@ -217,6 +278,34 @@ export declare class VfWindow extends VfWindow_base {
      * `vf-scroll-area.measure()` is.
      */
     measure(): void;
+    /**
+     * Show the window: `hidden` cleared, and with `from` the window opens from
+     * that box — the zoom rects, grown from it toward the frame at the cadence
+     * in src/motion.ts (`WINDOW_RECT_*`), the window drawn once they have
+     * drained (see the class doc). A run in flight, a `show()` or a `hide()`,
+     * is finished first; a press anywhere or Escape finishes this one, and
+     * removing the window or a `hide()` takes it down. Resolves once the
+     * window draws: `true` when the rects ran, `false` when it showed at once
+     * — no `from`, `prefers-reduced-motion`, no `vf-desktop` on its path,
+     * nothing of the rects on the screen, or not in the DOM — or never drew.
+     * It raises and activates nothing: stacking stays the page's
+     * (`vf-desktop.bringToFront`).
+     */
+    show(options?: VfWindowShowOptions): Promise<boolean>;
+    /**
+     * Hide the window: `hidden` set, and with `to` the window closes to that
+     * box — the rects of {@link show} run the other way, from where the frame
+     * is drawn at the call in toward the box, the window gone from their first
+     * step. A `show()` still opening is taken down and says `false`; a second
+     * `hide()` finishes the first; a press anywhere or Escape finishes the
+     * rects; removing the window leaves them running, so a page can remove a
+     * window as it closes it. Resolves once the rects are done: `true` when
+     * they ran, `false` when the window hid at once — no `to`,
+     * `prefers-reduced-motion`, no `vf-desktop` on its path, nothing of the
+     * rects on the screen, not in the DOM, or no frame to close from: already
+     * hidden, or still opening.
+     */
+    hide(options?: VfWindowHideOptions): Promise<boolean>;
     /**
      * Say something the first time a window is opened without a width. The size
      * itself is written by VfSized's controller, from `width`/`height` — which
@@ -231,6 +320,7 @@ export declare class VfWindow extends VfWindow_base {
      * window content follow the grow box without a ResizeObserver.
      */
     protected updated(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     /** The `.empty` gate: the strip renders only while the slot is populated. */
     private _onStatusSlotChange;

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, 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