vintage-frames 0.12.2 → 0.12.3

package/dist/components/vf-icon.js

@@ -10,20 +10,20 @@ import { GridSnapController as p } from "../grid-snap.js";
 import { DocumentListenersController as m } from "../document-listeners.js";
 import { DragController as h } from "../drag.js";
 import { dragSlop as g, prefersReducedMotion as _, runOutlineTravel as v } from "../motion.js";
-import { FocusRuleController as y } from "../focus-modality.js";
-import { deriveDragOutline as b, deriveOpenArt as x, dotOutline as S, penPhase as C } from "../open-art.js";
-import { LitElement as w, css as T, html as E, nothing as D } from "lit";
-import { property as O, state as k } from "lit/decorators.js";
+import { deriveDragOutline as y, deriveOpenArt as b, dotOutline as x, penPhase as S, xorPenCanvas as C } from "../open-art.js";
+import { FocusRuleController as w } from "../focus-modality.js";
+import { LitElement as T, css as E, html as D, nothing as O } from "lit";
+import { property as k, state as A } from "lit/decorators.js";
 //#region src/components/vf-icon.ts
-var A, j = {
+var j, M = {
 	large: 32,
 	small: 16
-}, M = 1, N = 8, P = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), F = class extends c(w) {
+}, N = 1, P = 8, F = (e, t) => t <= 0 ? Math.max(e, 0) : Math.min(Math.max(e, 0), t), I = class extends c(T) {
 	static {
-		A = this;
+		j = this;
 	}
 	constructor(...t) {
-		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new p(this), this.focusRule = new y(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = !1, this.#d = null, this.#f = null, this.#p = new m(this, () => [[
+		super(...t), this.label = "", this.size = "large", this.selectable = !1, this.selected = !1, this.target = !1, this.color = !1, this.open = !1, this.movable = !1, this.editable = !1, this.maxlength = 31, this.scale = new n(this), this.gridSnap = new p(this), this.focusRule = new w(this), this._editing = !1, this._draft = "", this.#e = 0, this._ghost = null, this.#t = null, this.#n = this.attachInternals(), this.#a = !1, this.#o = "", this.#s = "", this.#c = 0, this.#l = -Infinity, this.#u = !1, this.#d = null, this.#f = null, this.#p = new m(this, () => [[
 			document,
 			"pointerdown",
 			this.#te,
@@ -32,8 +32,8 @@ var A, j = {
 			x: Math.max(e, 0),
 			y: Math.max(t, 0)
 		} : {
-			x: P(e, n.width - a(this.offsetWidth, this)),
-			y: P(t, n.height - a(this.offsetHeight, this))
+			x: F(e, n.width - a(this.offsetWidth, this)),
+			y: F(t, n.height - a(this.offsetHeight, this))
 		}, this.#g = new s(this, (e, t, n) => this.#m(e, t, n)), this.#_ = null, this.#v = new h(this, {
 			onDragStart: (e) => {
 				if (!this.movable || e.button !== 0 || this._editing) return null;
@@ -119,7 +119,7 @@ var A, j = {
 			if (t.includes(this) || (this.#G(), this.#f = null, e.shiftKey || e.metaKey)) return;
 			let n = this.#i;
 			if (n !== null) {
-				let e = t.find((e) => e instanceof A);
+				let e = t.find((e) => e instanceof j);
 				if (e?.selected && e.#i === n) return;
 			}
 			this.#X(!1);
@@ -158,7 +158,7 @@ var A, j = {
 					case "ArrowDown": {
 						if (!this.movable) return;
 						t.preventDefault(), this.focusRule.reveal();
-						let e = t.shiftKey ? N : M, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
+						let e = t.shiftKey ? P : N, n = t.key === "ArrowLeft" ? -e : t.key === "ArrowRight" ? e : 0, r = t.key === "ArrowUp" ? -e : t.key === "ArrowDown" ? e : 0;
 						this.#L();
 						let i = this.#g.seed();
 						this.#g.moveTo(i.x + n, i.y + r);
@@ -168,7 +168,7 @@ var A, j = {
 		};
 	}
 	static {
-		this.styles = [d, T`
+		this.styles = [d, E`
       :host {
         display: inline-block;
         cursor: var(--vf-cursor, default);
@@ -553,7 +553,7 @@ var A, j = {
 			y: Math.round((e.top - u) / o),
 			width: Math.round(e.width / o),
 			height: Math.round(e.height / o)
-		}), m = Math.round((d - l) / o), h = Math.round((f - u) / o), g = this.open && this._ghost ? this._ghost : this.#t, _ = g != null && (g instanceof HTMLCanvasElement ? g.width > 0 : g.complete && g.naturalWidth > 0), v = _ ? g.getBoundingClientRect() : null, y = b(_ ? g : null, {
+		}), m = Math.round((d - l) / o), h = Math.round((f - u) / o), g = this.open && this._ghost ? this._ghost : this.#t, _ = g != null && (g instanceof HTMLCanvasElement ? g.width > 0 : g.complete && g.naturalWidth > 0), v = _ ? g.getBoundingClientRect() : null, b = y(_ ? g : null, {
 			width: m,
 			height: h,
 			art: v && v.width > 0 ? p(v) : null,
@@ -565,27 +565,25 @@ var A, j = {
 			},
 			plate: c ? p(c) : null
 		});
-		if (!y) return null;
-		let x = document.createElement("canvas");
-		x.className = "drag-outline";
-		let S = x.style;
-		S.position = "absolute", S.display = "block", S.pointerEvents = "none", S.filter = "invert(1)", S.mixBlendMode = "difference", S.imageRendering = "pixelated", S.width = i(y.width), S.height = i(y.height);
-		let C = t ?? a, w = t ? t.getBoundingClientRect() : e, T = {
-			x: Math.round((l - w.left) / o),
-			y: Math.round((u - w.top) / o)
+		if (!b) return null;
+		let x = C("drag-outline"), S = x.style;
+		S.position = "absolute", S.width = i(b.width), S.height = i(b.height);
+		let w = t ?? a, T = t ? t.getBoundingClientRect() : e, E = {
+			x: Math.round((l - T.left) / o),
+			y: Math.round((u - T.top) / o)
 		};
-		return C.append(x), {
-			ring: y,
+		return w.append(x), {
+			ring: b,
 			canvas: x,
-			base: T,
+			base: E,
 			phase: -1
 		};
 	}
 	#P(e, t, n) {
 		let r = e.base.x + t, a = e.base.y + n;
 		e.canvas.style.left = i(r), e.canvas.style.top = i(a);
-		let o = C(r, a);
-		o !== e.phase && (e.phase = o, S(e.ring, e.canvas, o));
+		let o = S(r, a);
+		o !== e.phase && (e.phase = o, x(e.ring, e.canvas, o));
 	}
 	#F(e) {
 		let { left: t, top: n } = e.proposal ?? {
@@ -636,7 +634,7 @@ var A, j = {
 			n.selectNodeContents(e), t = n.getBoundingClientRect().width, n.detach();
 		}
 		let n = t / r(this) + 2, i = Math.max(2, Math.ceil(n / 2) * 2);
-		this.#e = this._editing && t === 0 ? Math.max(i, j[this.size]) : i, e.style.width = this.#z;
+		this.#e = this._editing && t === 0 ? Math.max(i, M[this.size]) : i, e.style.width = this.#z;
 	}
 	get #z() {
 		return this.#e ? `calc(var(--vf-scale, 1) * ${this.#e}px)` : "";
@@ -662,7 +660,7 @@ var A, j = {
 		}
 		let n = e instanceof HTMLImageElement ? `${this.size} ${e.currentSrc}` : "";
 		if (n !== "" && n === this.#o && this._ghost) return;
-		let r = x(e);
+		let r = b(e);
 		if (r) {
 			r.className = "ghost", r.style.width = `calc(var(--vf-scale, 1) * ${r.width}px)`, r.style.height = `calc(var(--vf-scale, 1) * ${r.height}px)`;
 			let t = e instanceof HTMLImageElement ? e.alt : "";
@@ -703,7 +701,7 @@ var A, j = {
 	}
 	render() {
 		let e = this._editing, t = e ? this._draft : this.label, n = this.focusRule.marked && !e, r = t !== "" || e, i = `caption${e ? " editing" : ""}${n && t ? " focus-rule" : ""}`, a = `art${this.open && this._ghost ? " open" : ""}${n && !t ? " focus-rule" : ""}`, o = this.width ? `width: calc(var(--vf-scale, 1) * ${this.width}px)` : "";
-		return E`<div
+		return D`<div
       class="frame vf-snap"
       part="frame"
       style=${o}
@@ -714,9 +712,9 @@ var A, j = {
       @dblclick=${this.#Q}
     >
       <div class=${a} part="icon">
-        ${this.size === "small" ? E`<slot name="small" @slotchange=${this.#B}></slot>` : E`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? D}
+        ${this.size === "small" ? D`<slot name="small" @slotchange=${this.#B}></slot>` : D`<slot name="large" @slotchange=${this.#B}></slot>`}${this._ghost ?? O}
       </div>
-      ${r ? E`<div class=${i}>
+      ${r ? D`<div class=${i}>
             <!-- No whitespace around the span: it is the measured run, and a
                  stray space would widen it. -->
             <div class="label" part="label"><span
@@ -725,7 +723,7 @@ var A, j = {
               style=${this.#e ? `width: ${this.#z}` : ""}
               >${t}</span
             ></div>
-            ${e ? E`<div class="rename-box">
+            ${e ? D`<div class="rename-box">
                   <input
                     class="rename"
                     part="input"
@@ -737,8 +735,8 @@ var A, j = {
                     @keydown=${this.#ae}
                     @blur=${this.commitEditing}
                   />
-                </div>` : D}
-          </div>` : D}
+                </div>` : O}
+          </div>` : O}
     </div>`;
 	}
 	#K() {
@@ -778,6 +776,9 @@ var A, j = {
 		}
 		return !1;
 	}
+	cellRect() {
+		return this.checkVisibility() ? this.renderRoot?.querySelector(".art")?.getBoundingClientRect() ?? this.getBoundingClientRect() : null;
+	}
 	moveTo(e, t) {
 		this.#x?.finish(), this.#L(), this.#g.seed(), this.#g.moveTo(e, t);
 	}
@@ -816,27 +817,27 @@ var A, j = {
 	#ae;
 	#oe;
 };
-o([O()], F.prototype, "label", void 0), o([O({ reflect: !0 })], F.prototype, "size", void 0), o([O({
+o([k()], I.prototype, "label", void 0), o([k({ reflect: !0 })], I.prototype, "size", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "selectable", void 0), o([O({
+})], I.prototype, "selectable", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "selected", void 0), o([O({
+})], I.prototype, "selected", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "target", void 0), o([O({
+})], I.prototype, "target", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "color", void 0), o([O({
+})], I.prototype, "color", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "open", void 0), o([O({
+})], I.prototype, "open", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "movable", void 0), o([O({
+})], I.prototype, "movable", void 0), o([k({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "editable", void 0), o([O({ type: Number })], F.prototype, "width", void 0), o([O({ type: Number })], F.prototype, "maxlength", void 0), o([k()], F.prototype, "_editing", void 0), o([k()], F.prototype, "_draft", void 0), o([k()], F.prototype, "_ghost", void 0), F = A = o([t("vf-icon")], F);
+})], I.prototype, "editable", void 0), o([k({ type: Number })], I.prototype, "width", void 0), o([k({ type: Number })], I.prototype, "maxlength", void 0), o([A()], I.prototype, "_editing", void 0), o([A()], I.prototype, "_draft", void 0), o([A()], I.prototype, "_ghost", void 0), I = j = o([t("vf-icon")], I);
 //#endregion
-export { F as VfIcon };
+export { I as VfIcon };

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;