vintage-frames 0.7.2 → 0.9.0

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

@@ -156,9 +156,11 @@ export declare class VfDesktop extends VfDesktop_base {
      * in whole system px on the placement lattice, measured from the raster's
      * corner with the bezel excluded: the pair a child dropped onto the desktop
      * is written with. The screen sits in the shadow tree, which is why the
-     * conversion is a method here.
+     * conversion is a method here. With `child`, the pair to write to that
+     * element: the offset its `origin` adds is folded in, so its box's corner
+     * lands on the point.
      */
-    placementAt(clientX: number, clientY: number): {
+    placementAt(clientX: number, clientY: number, child?: Element): {
         left: number;
         top: number;
     };

package/dist/components/vf-desktop.js

@@ -199,8 +199,8 @@ var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I]
 			height: this.height
 		};
 	}
-	placementAt(e, t) {
-		return s(this.screen ?? this, e, t, this);
+	placementAt(e, t, n) {
+		return s(this.screen ?? this, e, t, this, n);
 	}
 	#e;
 	connectedCallback() {

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

@@ -1,5 +1,4 @@
 import { VfModalDialog } from '../modal-dialog.js';
-import './vf-button-group.js';
 /**
  * `<vf-dialog>` — the System 7 modal dialog shell.
  *
@@ -16,9 +15,8 @@ import './vf-button-group.js';
  *   say no), so the component enables either reading rather than enforcing
  *   one.
  * - **`frame="plain"`:** the modal dialog box — the bare frame, no title bar —
- *   and immovable, like the original. A `heading` renders as a centered
- *   display-face heading at the top of the body (the reference art's "Dialog
- *   title"); `closable` is ignored, there being no bar to carry the widget.
+ *   and immovable, like the original. With no bar, `heading` only names the
+ *   dialog and `closable` is ignored.
  *
  * Open it with `show()` (or set the `open` attribute/property); close with
  * `close()`. Escape closes it and fires `vf-close` with
@@ -36,21 +34,20 @@ import './vf-button-group.js';
  * multi-line editor Return inserts the newline while the keypad's Enter
  * activates the button.
  *
- * @slot - Default slot: dialog body content.
- * @slot buttons - Optional action buttons. Rendered as a bottom-right
- *   `vf-button-group` (equal-width, faces aligned); the footer only takes
- *   space when the slot is populated.
+ * Slotted children placed with `top`/`left` measure from the content region's
+ * corner — the frame's inner edge, below the title bar — and flow content
+ * starts at the same corner.
+ *
+ * @slot - Default slot: the dialog's content.
  * @csspart frame - The outer frame (the double frame's 1px rule; the bar and
  *   the inner band sit inside it).
  * @csspart title-bar - The striped title bar (default chrome only).
- * @csspart title - The centered title patch (or the plain-frame heading).
+ * @csspart title - The centered title patch (default chrome only).
  * @csspart close-box - The close widget (`closable`, default chrome only).
- * @csspart body - The white content area.
- * @csspart content - The scrolling region inside the body (heading + slotted
- *   content, not the footer). Inert while the content fits; over-stuffed, it
- *   scrolls under a System 7 rail and becomes a keyboard stop.
- * @csspart footer - The action row wrapping the buttons.
- * @csspart buttons - The button group inside the footer.
+ * @csspart body - The white content region.
+ * @csspart content - The scrolling region inside the body (the slotted
+ *   content). Inert while the content fits; over-stuffed, it scrolls under a
+ *   System 7 rail and becomes a keyboard stop.
  * @fires vf-close - Dialog closed. Detail `{ reason: 'escape' | 'close' |
  *   'outside' }` — `'outside'` only under `light-dismiss`.
  * @cssprop --vf-dots-pattern - the windoid bar's dot-grid dither — a 2×2 tile,
@@ -75,12 +72,15 @@ export declare class VfDialog extends VfModalDialog {
     private readonly _drag;
     /** Holds the centered title patch on the placement lattice (src/chrome.ts). */
     private readonly _titleCenter;
-    /** Title text: the bar's centered patch, or the plain frame's heading. */
+    /**
+     * Title text: the bar's centered patch, and the dialog's accessible name.
+     * With `frame="plain"`, which has no bar, it only names the dialog.
+     */
     heading: string;
     /**
      * Accessible name for the dialog (`aria-label`), for a dialog with no
      * `heading` — an untitled title bar has no text to be named by. Ignored when
-     * empty and a `heading` is set (the title patch names the dialog then);
+     * empty and a `heading` is set (the heading names the dialog then);
      * defaults to `'Dialog'` when neither is given.
      */
     label: string;
@@ -96,8 +96,6 @@ export declare class VfDialog extends VfModalDialog {
      * box (the bare double frame, no bar).
      */
     frame?: 'plain';
-    /** Whether the `buttons` slot has assigned content (drives the footer). */
-    private _hasButtons;
     private _content;
     /** Whether the body content overflows its box (drives the content stop). */
     private _scrollable;
@@ -112,7 +110,6 @@ export declare class VfDialog extends VfModalDialog {
     private _onBodySlotChange;
     private _onCloseClick;
     protected render(): unknown;
-    private _onButtonsSlotChange;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/vf-dialog.js

@@ -1,26 +1,24 @@
 import { vfElement as e } from "../define.js";
 import { snapSys as t, toSysExact as n } from "../scale.js";
 import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { vfDisplayDecls as i } from "../styles/recipes/display-face.js";
-import { vfBase as a } from "../styles/recipes/host.js";
-import { vfStripes as o } from "../styles/recipes/pattern.js";
-import { vfModalFrame as s } from "../styles/recipes/surface.js";
-import { vfTitleBar as c, vfWindowWidgets as l } from "../styles/recipes/title-bar.js";
-import { vfFocus as u, vfFocusRing as d } from "../styles/recipes/focus.js";
-import { vfScrollRail as f } from "../styles/recipes/scroll-rail.js";
-import { DragController as p } from "../drag.js";
-import { TitleCenterController as m, chromeTitleBar as h, closeBox as g, widgetLabel as _ } from "../chrome.js";
-import { ScrollStateController as v } from "../scroll-state.js";
-import { ScrollRailController as y, renderScrollRail as b } from "../scroll-rail.js";
-import { VfModalDialog as x, modalDialogStyles as S } from "../modal-dialog.js";
-import "./vf-button-group.js";
-import { css as C, html as w, nothing as T } from "lit";
-import { property as E, query as D, state as O } from "lit/decorators.js";
-import { styleMap as k } from "lit/directives/style-map.js";
+import { vfBase as i } from "../styles/recipes/host.js";
+import { vfStripes as a } from "../styles/recipes/pattern.js";
+import { vfModalFrame as o } from "../styles/recipes/surface.js";
+import { vfTitleBar as s, vfWindowWidgets as c } from "../styles/recipes/title-bar.js";
+import { vfFocus as l, vfFocusRing as u } from "../styles/recipes/focus.js";
+import { vfScrollRail as d } from "../styles/recipes/scroll-rail.js";
+import { DragController as f } from "../drag.js";
+import { TitleCenterController as p, chromeTitleBar as m, closeBox as h, widgetLabel as g } from "../chrome.js";
+import { ScrollStateController as _ } from "../scroll-state.js";
+import { ScrollRailController as v, renderScrollRail as y } from "../scroll-rail.js";
+import { VfModalDialog as b, modalDialogStyles as x } from "../modal-dialog.js";
+import { css as S, html as C, nothing as w } from "lit";
+import { property as T, query as E, state as D } from "lit/decorators.js";
+import { styleMap as O } from "lit/directives/style-map.js";
 //#region src/components/vf-dialog.ts
-var A = class extends x {
+var k = class extends b {
 	constructor(...e) {
-		super(...e), this._drag = new p(this, {
+		super(...e), this._drag = new f(this, {
 			onDragStart: (e) => {
 				if (e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box"))) return null;
 				let r = this._dialog;
@@ -36,21 +34,21 @@ var A = class extends x {
 				};
 			},
 			onDrag: (e, t) => this.placeAt(e, t)
-		}), this._titleCenter = new m(this), this.heading = "", this.label = "", this.closable = !1, this._hasButtons = !1, this._scrollable = !1, this._scrollState = new v(this, () => this._content, void 0, (e) => {
+		}), this._titleCenter = new p(this), this.heading = "", this.label = "", this.closable = !1, this._scrollable = !1, this._scrollState = new _(this, () => this._content, void 0, (e) => {
 			this._scrollable = e.y;
-		}), this._rail = new y(this, { getScroll: () => this._content });
+		}), this._rail = new v(this, { getScroll: () => this._content });
 	}
 	static {
 		this.styles = [
+			i,
 			a,
+			l,
 			o,
-			u,
 			s,
 			c,
-			l,
-			f,
-			S,
-			C`
+			d,
+			x,
+			S`
       :host {
         display: contents;
       }
@@ -86,34 +84,27 @@ var A = class extends x {
       :host([closable]) .vf-title {
         --vf-title-inset: 60px;
       }
-      /* Takes the slack under the title bar. A modal is a fixed box — the
-         frame never grows with its body — but content taller than the box is
-         no longer silently clipped: the .content region below scrolls it
-         under a System 7 rail, with the footer pinned outside the scroll so
-         the action buttons stay reachable. overflow: hidden stays as the
-         frame-level backstop. A slotted vf-select's list still escapes: it is
-         position:fixed off the control's own rect (see vf-select.ts). */
+      /* The content region: takes the slack under the title bar, and is the
+         positioning anchor for slotted children placed with top/left
+         (src/position.ts) — coordinates measure from the frame's inner edge,
+         exactly the DITL convention. No inset of its own: flow content starts
+         at the same corner a placed child does. A modal is a fixed box — the
+         frame never grows with its body — but flow content taller than the
+         box is not silently clipped: the .content region below scrolls it
+         under a System 7 rail. Placed children anchor here, outside that
+         scroller, so they hold still while it scrolls. overflow: hidden stays
+         as the frame-level backstop. A slotted vf-select's list still
+         escapes: it is position:fixed off the control's own rect (see
+         vf-select.ts). */
       .body {
         --vf-surface: var(--vf-white, #ffffff);
         background: var(--vf-white, #ffffff);
+        position: relative;
         display: flex;
         flex-direction: column;
         flex: 1 1 auto;
         min-height: 0;
         overflow: hidden;
-        padding: calc(var(--vf-scale, 1) * 16px);
-      }
-      /* The scroll region's positioned wrapper (the .scroll-frame overlay and
-         the rail overlay anchor against it). Shrink-only (flex-grow 0): with
-         slack in the box the footer sits right after the content, exactly
-         where block flow put it before this wrapper existed — the wrap only
-         gives height back when the content doesn't fit. */
-      .content-wrap {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex: 0 1 auto;
-        min-height: 0;
       }
       /* hidden, not auto, until the controller says otherwise — the two have
          to agree on what "overflowing" means or the dialog scrolls without a
@@ -134,73 +125,38 @@ var A = class extends x {
         overflow-y: hidden;
       }
       /* Only while genuinely over-stuffed (ScrollStateController's measured
-         signal) does the region scroll — reserving the 16px channel as its
-         own padding (what the native gutter used to reserve) — and only then
-         do the rail and the 1px frame boxing it appear. While the content
-         fits, none of this matches and the body renders exactly as it always
-         has. */
+         signal) does the region scroll — reserving the rail's 15px as its
+         own padding — and only then does the rail appear. While the content
+         fits, none of this matches. */
       .content[data-overflow-y='true'] {
         overflow-y: scroll;
-        padding-right: calc(var(--vf-scale, 1) * 16px);
-      }
-      /* The rail rides the wrapper as an OVERLAY pinned to its right edge,
-         inside the boxing frame's lines (the 1px insets; the fourth side is
-         its own divider) — deliberately out of the layout flow: a rail
-         column's two fixed 15px arrow cells would hand the region a 32px
-         minimum height, and a short dialog would then measure as fitting
-         with the rail shown and overflowing without it, flip-flopping
-         forever. An overlay cannot move the box; the channel the content
-         pays for is the padding above. Hidden until the region actually
-         scrolls. */
-      .content-wrap .vf-rail {
+        padding-right: calc(var(--vf-scale, 1) * 15px);
+      }
+      /* The rail rides the body as an OVERLAY pinned to its right edge, flush
+         against the frame's inner band — the band is the classic 16px cell's
+         outer line on three sides; the fourth is the rail's own divider —
+         deliberately out of the layout flow: a rail column's two fixed 15px
+         arrow cells would hand the region a 32px minimum height, and a short
+         dialog would then measure as fitting with the rail shown and
+         overflowing without it, flip-flopping forever. An overlay cannot move
+         the box; the channel the content pays for is the padding above.
+         Hidden until the region actually scrolls. */
+      .body > .vf-rail {
         position: absolute;
-        top: calc(var(--vf-scale, 1) * 1px);
-        right: calc(var(--vf-scale, 1) * 1px);
-        bottom: calc(var(--vf-scale, 1) * 1px);
+        top: 0;
+        right: 0;
+        bottom: 0;
         display: none;
       }
       .content[data-overflow-y='true'] ~ .vf-rail {
         display: grid;
       }
-      /* The 1px frame boxing the scrolling region and its rail — an overlay
-         (spanning both grid columns via inset 0) so the fitting dialog keeps
-         no reserved line. */
-      .scroll-frame {
-        position: absolute;
-        inset: 0;
-        border: calc(var(--vf-scale, 1) * 1px) solid var(--vf-black, #000);
-        pointer-events: none;
-        display: none;
-      }
-      .content[data-overflow-y='true'] ~ .scroll-frame {
-        display: block;
-      }
       /* A scrollable region is a keyboard stop (tabindex in the template);
          mark it with the kit's dotted ring, inset to stay in-box — the same
          treatment as vf-scroll-area's viewport. */
       .content:focus-visible {
         --vf-focus-offset: -2px;
-        ${d}
-      }
-      /* The plain frame's heading: centered chrome type at the top of the
-         body, the way dBoxProc dialogs drew their title in content (see
-         Windows/modal dialog.png). No patch, no ellipsis — it's body-top
-         text, not a bar. */
-      .plain-heading {
-        ${i}
-        display: block;
-        text-align: center;
-        margin-bottom: calc(var(--vf-scale, 1) * 16px);
-      }
-      /* Optional action row (slot="buttons"): a right-aligned vf-button-group
-         that only takes space when populated. */
-      .footer {
-        display: flex;
-        justify-content: flex-end;
-        margin-top: calc(var(--vf-scale, 1) * 16px);
-      }
-      .footer.empty {
-        display: none;
+        ${u}
       }
     `
 		];
@@ -212,44 +168,30 @@ var A = class extends x {
 		this.close();
 	}
 	render() {
-		let e = !this.label && this.heading !== "", t = this.frame === "plain", n = w`
+		let e = this.frame === "plain", t = !e && !this.label && this.heading !== "", n = C`
       <div class="body" part="body">
-        <div class="content-wrap">
-          <div
-            class="content vf-scroll"
-            part="content"
-            tabindex=${this._scrollable ? "0" : T}
-            role=${this._scrollable ? "group" : T}
-          >
-            ${t && this.heading !== "" ? w`<span class="plain-heading" part="title" id="title"
-                  >${this.heading}</span
-                >` : T}
-            <slot @slotchange=${this._onBodySlotChange}></slot>
-          </div>
-          ${b(this._rail, "vertical")}
-          <div class="scroll-frame" aria-hidden="true"></div>
-        </div>
-        <div class="footer ${this._hasButtons ? "" : "empty"}" part="footer">
-          <vf-button-group class="buttons" part="buttons">
-            <slot
-              name="buttons"
-              @slotchange=${this._onButtonsSlotChange}
-            ></slot>
-          </vf-button-group>
+        <div
+          class="content vf-scroll"
+          part="content"
+          tabindex=${this._scrollable ? "0" : w}
+          role=${this._scrollable ? "group" : w}
+        >
+          <slot @slotchange=${this._onBodySlotChange}></slot>
         </div>
+        ${y(this._rail, "vertical")}
       </div>
     `;
-		return w`
+		return C`
       <dialog
-        style=${k(this.dialogSize)}
-        aria-labelledby=${e ? "title" : T}
-        aria-label=${e ? T : this.label || "Dialog"}
+        style=${O(this.dialogSize)}
+        aria-labelledby=${t ? "title" : w}
+        aria-label=${t ? w : this.label || this.heading || "Dialog"}
         @cancel=${this._onNativeCancel}
         @close=${this._onNativeClose}
       >
         <div class="vf-modal-frame" part="frame">
-          ${t ? T : h(this._drag, w`
-                  ${this.closable ? g(_("Close", this.heading), this._onCloseClick) : T}
+          ${e ? w : m(this._drag, C`
+                  ${this.closable ? h(g("Close", this.heading), this._onCloseClick) : w}
                   <span class="vf-title" part="title" id="title"
                     >${this.heading}</span
                   >
@@ -259,14 +201,10 @@ var A = class extends x {
       </dialog>
     `;
 	}
-	_onButtonsSlotChange(e) {
-		let t = e.target;
-		this._hasButtons = t.assignedElements().length > 0;
-	}
 };
-r([E()], A.prototype, "heading", void 0), r([E()], A.prototype, "label", void 0), r([E({
+r([T()], k.prototype, "heading", void 0), r([T()], k.prototype, "label", void 0), r([T({
 	type: Boolean,
 	reflect: !0
-})], A.prototype, "closable", void 0), r([E({ reflect: !0 })], A.prototype, "frame", void 0), r([O()], A.prototype, "_hasButtons", void 0), r([D(".content")], A.prototype, "_content", void 0), r([O()], A.prototype, "_scrollable", void 0), A = r([e("vf-dialog")], A);
+})], k.prototype, "closable", void 0), r([T({ reflect: !0 })], k.prototype, "frame", void 0), r([E(".content")], k.prototype, "_content", void 0), r([D()], k.prototype, "_scrollable", void 0), k = r([e("vf-dialog")], k);
 //#endregion
-export { A as VfDialog };
+export { k as VfDialog };

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

@@ -45,6 +45,11 @@ export interface VfIconDragFollower {
         x: number;
         y: number;
     };
+    /** How far that origin sits from the follower's box corner (its `origin`). */
+    offset: {
+        x: number;
+        y: number;
+    };
     /** The follower's box, system px, for the group clamp. */
     size: {
         width: number;
@@ -183,10 +188,14 @@ declare const VfIcon_base: (new (...args: any[]) => import("../position.js").VfP
  * the name's rectangle — drawn over everything with the XOR pen, the icon
  * itself staying put until the drop. The kit draws it from what it already
  * has: {@link deriveDragOutline} finds the ring the way the open ghost does
- * (the silhouette from the art's alpha, eroded by one pixel, the ring the
- * erosion removes), adds the plate's rectangle, and {@link dotOutline} dots
- * it against a 2×2 checker — compositing only, so cross-origin art derives
- * too, and art the pipeline cannot draw falls back to the cell's rectangle.
+ * (the silhouette from the art's alpha, the plate's rectangle united with
+ * it, the whole inset by one pixel as `FrameRgn` inset a region, the ring
+ * the inset removes — so where the art and the plate abut, the outline
+ * wraps around both), and {@link dotOutline} dots it against a 2×2 checker
+ * — compositing only, so cross-origin art derives too, and art the
+ * pipeline cannot draw falls back to the cell's rectangle. The canvas
+ * covers the frame widened to the plate, since a name wider than a
+ * declared `width` overhangs the frame.
  * The canvas paints with the cursor's XOR recipe, `filter: invert(1)` under
  * `mix-blend-mode: difference`: a dotted black line over a white window
  * body, and over the desktop dither a black line, the composition
@@ -374,7 +383,8 @@ declare const VfIcon_base: (new (...args: any[]) => import("../position.js").VfP
  * @csspart plate - The inked run behind the name, which each wrapped line gets
  *   its own of (inverts when selected).
  * @csspart input - The rename field, while editing.
- * @cssprop --vf-icon-gap - Space between the art cell and the name plate
+ * @cssprop --vf-icon-gap - Space between the art cell and the name plate;
+ *   0 by default, the plate directly under the cell as the Finder drew it
  * @cssprop --vf-icon-label-height - The name plate's line box
  * @fires vf-select - Selection changed by user interaction. `detail: { selected: boolean }`.
  * @fires vf-change - The name was committed. `detail: { label: string, previous: string }`.

package/dist/components/vf-icon.js

@@ -213,7 +213,7 @@ var D, O = {
          centring below is still a whole number of system px. */
       .caption {
         position: relative;
-        margin-top: calc(var(--vf-scale, 1) * var(--vf-icon-gap, 2px));
+        margin-top: calc(var(--vf-scale, 1) * var(--vf-icon-gap, 0px));
       }
       .label {
         ${u}
@@ -395,6 +395,7 @@ var D, O = {
 		return {
 			icon: this,
 			origin: t,
+			offset: this.#f.offset,
 			size: this.#v(),
 			move: (e, t) => {
 				n && this.#E(n, e, t);
@@ -469,19 +470,22 @@ var D, O = {
 			this.#f.moveTo(t.left, t.top);
 			return;
 		}
-		let n = this.#f.bounds, r = [{
-			origin: e.origin,
+		let n = this.#f.bounds, r = (e, t) => ({
+			x: e.x - t.x,
+			y: e.y - t.y
+		}), i = [{
+			corner: r(e.origin, this.#f.offset),
 			size: e.size
 		}, ...e.followers.map((e) => ({
-			origin: e.origin,
+			corner: r(e.origin, e.offset),
 			size: e.size
-		}))], i = (e, t, n, i) => {
+		}))], a = (e, t, n, r) => {
 			let a = -Infinity, o = Infinity;
-			for (let e of r) a = Math.max(a, -t(e)), o = Math.min(o, i - n(e) - t(e));
+			for (let e of i) a = Math.max(a, -t(e)), o = Math.min(o, r - n(e) - t(e));
 			return o < a && (o = Infinity), Math.min(Math.max(e, a), o);
-		}, a = i(t.left - e.origin.x, (e) => e.origin.x, (e) => e.size.width, n.width), o = i(t.top - e.origin.y, (e) => e.origin.y, (e) => e.size.height, n.height);
-		this.#f.moveTo(e.origin.x + a, e.origin.y + o);
-		for (let t of e.followers) t.drop(a, o);
+		}, o = a(t.left - e.origin.x, (e) => e.corner.x, (e) => e.size.width, n.width), s = a(t.top - e.origin.y, (e) => e.corner.y, (e) => e.size.height, n.height);
+		this.#f.moveTo(e.origin.x + o, e.origin.y + s);
+		for (let t of e.followers) t.drop(o, s);
 	}
 	#w() {
 		let t = { surface: null };
@@ -490,43 +494,36 @@ var D, O = {
 	#T(e, t) {
 		let n = this.renderRoot, a = n?.querySelector(".frame");
 		if (!a) return null;
-		let o = r(this), s = (t) => ({
-			x: Math.round((t.left - e.left) / o),
-			y: Math.round((t.top - e.top) / o),
-			width: Math.round(t.width / o),
-			height: Math.round(t.height / o)
-		}), c = Math.round(e.width / o), l = Math.round(e.height / o), u = n.querySelector(".art"), d = n.querySelector(".name"), f = this.open && this._ghost ? this._ghost : this.#t, p = f != null && (f instanceof HTMLCanvasElement ? f.width > 0 : f.complete && f.naturalWidth > 0), m = p ? f.getBoundingClientRect() : null, h = _(p ? f : null, {
-			width: c,
-			height: l,
-			art: m && m.width > 0 ? s(m) : null,
-			cell: u ? s(u.getBoundingClientRect()) : {
+		let o = r(this), s = n.querySelector(".art"), c = n.querySelector(".name")?.getBoundingClientRect() ?? null, l = c ? Math.min(e.left, c.left) : e.left, u = c ? Math.min(e.top, c.top) : e.top, d = c ? Math.max(e.right, c.right) : e.right, f = c ? Math.max(e.bottom, c.bottom) : e.bottom, p = (e) => ({
+			x: Math.round((e.left - l) / o),
+			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, v = g != null && (g instanceof HTMLCanvasElement ? g.width > 0 : g.complete && g.naturalWidth > 0), y = v ? g.getBoundingClientRect() : null, b = _(v ? g : null, {
+			width: m,
+			height: h,
+			art: y && y.width > 0 ? p(y) : null,
+			cell: s ? p(s.getBoundingClientRect()) : {
 				x: 0,
 				y: 0,
-				width: c,
-				height: l
+				width: m,
+				height: h
 			},
-			plate: d ? s(d.getBoundingClientRect()) : null
+			plate: c ? p(c) : null
 		});
-		if (!h) return null;
-		let g = document.createElement("canvas");
-		g.className = "drag-outline";
-		let v = g.style;
-		v.position = "absolute", v.display = "block", v.pointerEvents = "none", v.filter = "invert(1)", v.mixBlendMode = "difference", v.imageRendering = "pixelated", v.width = i(h.width), v.height = i(h.height);
-		let y = {
-			x: 0,
-			y: 0
+		if (!b) 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(b.width), S.height = i(b.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 (t) {
-			let n = t.getBoundingClientRect();
-			y = {
-				x: Math.round((e.left - n.left) / o),
-				y: Math.round((e.top - n.top) / o)
-			}, t.append(g);
-		} else a.append(g);
-		return {
-			ring: h,
-			canvas: g,
-			base: y,
+		return C.append(x), {
+			ring: b,
+			canvas: x,
+			base: T,
 			phase: -1
 		};
 	}

package/dist/components/vf-scroll-area.d.ts

@@ -89,9 +89,11 @@ export declare class VfScrollArea extends VfScrollArea_base {
      * `{ left, top }` in whole system px on the placement lattice, the pair a
      * child dropped here is written with. The plane travels with the scroll,
      * so its box already carries the scroll offset and the border-floor
-     * padding; nothing is left for the caller to add.
+     * padding; nothing is left for the caller to add. With `child`, the pair
+     * to write to that element: the offset its `origin` adds is folded in, so
+     * its box's corner lands on the point.
      */
-    placementAt(clientX: number, clientY: number): {
+    placementAt(clientX: number, clientY: number, child?: Element): {
         left: number;
         top: number;
     };

package/dist/components/vf-scroll-area.js

@@ -23,8 +23,8 @@ var y = class extends r(f) {
 		}, this.addEventListener("vf-placement-change", this.#e);
 	}
 	#e;
-	placementAt(e, t) {
-		return i(this.content ?? this, e, t, this);
+	placementAt(e, t, n) {
+		return i(this.content ?? this, e, t, this, n);
 	}
 	focus(e) {
 		this.viewport?.focus(e);

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

@@ -201,9 +201,11 @@ export declare class VfWindow extends VfWindow_base {
      * child dropped into this window is written with: the body's corner, or
      * under `scrollbars` the scrolled plane, scroll offset included. The anchor
      * sits in the shadow tree, which is why the conversion is a method here
-     * rather than the page's own `toSysExact` against a rect.
+     * rather than the page's own `toSysExact` against a rect. With `child`,
+     * the pair to write to that element: the offset its `origin` adds is
+     * folded in, so its box's corner lands on the point.
      */
-    placementAt(clientX: number, clientY: number): {
+    placementAt(clientX: number, clientY: number, child?: Element): {
         left: number;
         top: number;
     };

package/dist/components/vf-window.js

@@ -329,9 +329,9 @@ var W = 24, G = 8, K = class extends D(c(P)) {
     ></div>`;
 	}
 	#t;
-	placementAt(e, t) {
-		let n = this.scrollArea;
-		return n ? n.placementAt(e, t) : l(this.body ?? this, e, t, this);
+	placementAt(e, t, n) {
+		let r = this.scrollArea;
+		return r ? r.placementAt(e, t, n) : l(this.body ?? this, e, t, this, n);
 	}
 	measure() {
 		this.scrollArea?.measure();

package/dist/index.d.ts

@@ -155,7 +155,7 @@ export { VfTextControlBase } from './text-control.js';
 export { VfToggleControl } from './toggle-control.js';
 export type { VfToggleControlInterface } from './toggle-control.js';
 export { PlacementController, VfPositioned } from './position.js';
-export type { PlacementBounds, PlacementClamp, VfPositionedInterface } from './position.js';
+export type { PlacementBounds, PlacementClamp, PlacementOrigin, VfPositionedInterface, } from './position.js';
 export { VfSized } from './size.js';
 export type { VfSizedInterface } from './size.js';
 export { VfModalDialog, modalDialogStyles } from './modal-dialog.js';