vintage-frames 0.6.2 → 0.7.0

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

@@ -55,6 +55,20 @@ declare const VfDesktop_base: (new (...args: any[]) => import("../position.js").
  * paper, one whole-surface raster at one image px per system px, 1-bit at
  * every density and zoom (src/pattern-fill.ts).
  *
+ * **The drag surface.** The Finder dragged an icon as a dotted outline drawn
+ * on the *screen*, clipped at its edge and phase-locked to its raster, so
+ * the screen hosts the layer that outline draws on: a full-bleed child of
+ * the screen, `pointer-events: none` (never a hit for the page's
+ * `elementsFromPoint`), whose children paint one tier above the menu bar
+ * and under the corner mask — the layer itself is deliberately no stacking
+ * context, since a blend inside one would composite against nothing. An
+ * icon reaches it without an import, the menu-handshake idiom: on a drag's
+ * first step it dispatches `vf-drag-surface-request` (bubbles, non-composed,
+ * `detail.surface` null), and the nearest desktop on its light-DOM path
+ * fills the detail with the layer. Not the top layer: stable Safari cannot
+ * blend an element there against the page (src/cursor.ts), and a second
+ * kit entry in the top layer would need a re-promotion handshake.
+ *
  * Custom properties:
  * - `--vf-desktop-pattern` — a consumer's own tile art in place of the
  *   pattern (the kit's default is a 1-bit 50% checker, opaque
@@ -137,6 +151,17 @@ export declare class VfDesktop extends VfDesktop_base {
         width: number;
         height: number;
     };
+    /**
+     * A viewport point (CSS px) as a placement on the screen — `{ left, top }`
+     * 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.
+     */
+    placementAt(clientX: number, clientY: number): {
+        left: number;
+        top: number;
+    };
     /** Slotted `vf-window` children (direct children only). */
     private _windows;
     /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
@@ -154,6 +179,8 @@ export declare class VfDesktop extends VfDesktop_base {
     private _desktopPattern;
     /** The screen surface the pattern paints on; exists from the first render. */
     private readonly screen;
+    /** The layer a dragged icon's outline draws on; exists from the first render. */
+    private readonly dragSurface;
     /**
      * The desktop pattern, painted as the screen's own background
      * (src/pattern-fill.ts) from the declared raster — scale-independent, so
@@ -278,6 +305,13 @@ export declare class VfDesktop extends VfDesktop_base {
      * change z but never move nodes — see {@link _raise}).
      */
     private _onGestureEnd;
+    /**
+     * A dragged icon asking for the screen's drag surface (see the class
+     * doc). Non-composed, so it reaches here only through the light-DOM path
+     * the icon is slotted on — a window body included. The nearest desktop
+     * answers; an outer one leaves a filled detail alone.
+     */
+    private _onDragSurfaceRequest;
     /**
      * Delegated focusin: raise the window keyboard focus entered, so tabbing
      * into a background window brings it to front (and reveals its close/zoom

package/dist/components/vf-desktop.js

@@ -2,28 +2,28 @@ import { emit as e } from "../events.js";
 import { vfElement as t } from "../define.js";
 import { ScaleController as n, effectiveScale as r, sysLength as i } from "../scale.js";
 import a from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as o } from "../position.js";
-import { vfBase as s } from "../styles/recipes/host.js";
-import { tileImage as c, tileRects as l, tileSpan as u } from "../styles/recipes/tile.js";
-import { PATTERNS as d, parsePattern as f, patternMotif as p } from "../patterns.js";
-import { patternOverride as m, tileGrid as h, vfTileGrid as g } from "../tile-grid.js";
-import { PatternFillController as _, vfPatternFill as v } from "../pattern-fill.js";
-import { GridSnapController as y } from "../grid-snap.js";
-import { DocumentListenersController as b } from "../document-listeners.js";
-import { SCREEN_CORNER as x, steppedCornerClip as S } from "../pixel-frame.js";
-import { LitElement as C, css as w, html as T, unsafeCSS as E } from "lit";
-import { property as D, query as O, queryAssignedElements as k } from "lit/decorators.js";
+import { VfPositioned as o, placementIn as s } from "../position.js";
+import { vfBase as c } from "../styles/recipes/host.js";
+import { tileImage as l, tileRects as u, tileSpan as d } from "../styles/recipes/tile.js";
+import { PATTERNS as f, parsePattern as p, patternMotif as m } from "../patterns.js";
+import { patternOverride as h, tileGrid as g, vfTileGrid as _ } from "../tile-grid.js";
+import { PatternFillController as v, vfPatternFill as y } from "../pattern-fill.js";
+import { GridSnapController as b } from "../grid-snap.js";
+import { DocumentListenersController as x } from "../document-listeners.js";
+import { SCREEN_CORNER as S, steppedCornerClip as C } from "../pixel-frame.js";
+import { LitElement as w, css as T, html as E, unsafeCSS as D } from "lit";
+import { property as O, query as k, queryAssignedElements as A } from "lit/decorators.js";
 //#region src/components/vf-desktop.ts
-var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000", "#ffffff"), I = c(F.width, F.height, l(F.rects)), L = u(F.width), R = class extends o(C) {
+var j = 1e6, M = 2 * j, N = 2000001, P = 512, F = 342, I = "gray-50", L = m(f[I], "#000000", "#ffffff"), R = l(L.width, L.height, u(L.rects)), z = d(L.width), B = class extends o(w) {
 	constructor(...e) {
-		super(...e), this.width = M, this.height = N, this.bezel = 0, this.pattern = P, this.scale = new n(this), this.gridSnap = new y(this), this._token = "", this._desktopPattern = d[P], this.#e = !1, this.patternFill = new _(this, {
+		super(...e), this.width = P, this.height = F, this.bezel = 0, this.pattern = I, this.scale = new n(this), this.gridSnap = new b(this), this._token = "", this._desktopPattern = f[I], this.#e = !1, this.patternFill = new v(this, {
 			getBox: () => this.screen,
 			getPattern: () => this._token ? null : this._desktopPattern,
 			getSize: () => ({
-				width: this.width ?? M,
-				height: this.height ?? N
+				width: this.width ?? P,
+				height: this.height ?? F
 			})
-		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._domSyncTimer = 0, this._gestureEnd = new b(this, () => [[
+		}), this._zCounter = 0, this._activeWindow = null, this._deactivated = !1, this._awaitingUpgrade = !1, this._pointerGesture = !1, this._restoringFocus = !1, this._domSyncTimer = 0, this._gestureEnd = new x(this, () => [[
 			document,
 			"pointerup",
 			this._onGestureEnd,
@@ -39,6 +39,9 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
 			t && this._raise(t);
 		}, this._onGestureEnd = () => {
 			this._gestureEnd.detach(), this._pointerGesture = !1, this._requestDomSync();
+		}, this._onDragSurfaceRequest = (e) => {
+			let t = e.detail;
+			!t || t.surface || (t.surface = this.dragSurface);
 		}, this._onFocusIn = (e) => {
 			if (this._restoringFocus) return;
 			let t = this._windowFromEvent(e);
@@ -47,10 +50,10 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
 	}
 	static {
 		this.styles = [
-			s,
-			g,
-			v,
-			w`
+			c,
+			_,
+			y,
+			T`
       :host {
         display: block;
         position: relative;
@@ -112,7 +115,7 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
         position: absolute;
         inset: 0;
         z-index: -1;
-        --_vf-tile-image: var(--vf-desktop-pattern, ${E(I)});
+        --_vf-tile-image: var(--vf-desktop-pattern, ${D(R)});
         /* Forced colors: hidden with the pattern, same posture. */
         @media (forced-colors: active) {
           display: none;
@@ -144,7 +147,23 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
       ::slotted(vf-menu-bar),
       ::slotted(vf-menu) {
         position: relative;
-        z-index: ${j};
+        z-index: ${M};
+      }
+      /* The drag surface (see the class doc): the box an icon's outline is
+         positioned in — the screen's own, bezel excluded — clipped with
+         everything else at the raster's edge, and never a hit. No z-index
+         and no position: relative + z-index of its own: a stacking context
+         is an isolated group, and the outline's mix-blend-mode would then
+         composite against the empty layer instead of the windows and dither
+         beneath. The z-index goes on the outline itself, which is what puts
+         it on the tier above the menu bar within .screen's own context. */
+      .drag-surface {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+      }
+      .drag-surface > * {
+        z-index: ${N};
       }
       /* With a bezel, the screen's top corners wear the SCREEN_CORNER mask,
          rounding into the surrounding black — the top pair only, because the
@@ -156,19 +175,19 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
       .corner {
         position: absolute;
         top: 0;
-        width: calc(var(--vf-scale, 1) * ${x[0]}px);
-        height: calc(var(--vf-scale, 1) * ${x.length}px);
+        width: calc(var(--vf-scale, 1) * ${S[0]}px);
+        height: calc(var(--vf-scale, 1) * ${S.length}px);
         background: var(--vf-black, #000);
         pointer-events: none;
         z-index: 2147483647;
       }
       .corner.tl {
         left: 0;
-        clip-path: ${E(S(x, "left"))};
+        clip-path: ${D(C(S, "left"))};
       }
       .corner.tr {
         right: 0;
-        clip-path: ${E(S(x, "right"))};
+        clip-path: ${D(C(S, "right"))};
       }
     `
 		];
@@ -180,12 +199,15 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
 			height: this.height
 		};
 	}
+	placementAt(e, t) {
+		return s(this.screen ?? this, e, t, this);
+	}
 	#e;
 	connectedCallback() {
-		super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("focusin", this._onFocusIn);
+		super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("vf-drag-surface-request", this._onDragSurfaceRequest);
 	}
 	disconnectedCallback() {
-		this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("focusin", this._onFocusIn), this._pointerGesture = !1, this._domSyncTimer &&= (clearTimeout(this._domSyncTimer), 0), super.disconnectedCallback();
+		this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("vf-drag-surface-request", this._onDragSurfaceRequest), this._pointerGesture = !1, this._domSyncTimer &&= (clearTimeout(this._domSyncTimer), 0), super.disconnectedCallback();
 	}
 	_isUtility(e) {
 		return e.getAttribute("variant") === "utility";
@@ -201,7 +223,7 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
 	}
 	_restack(e) {
 		let t = this._isUtility(e);
-		e.style.zIndex = String(++this._zCounter + (t ? A : 0)), t || this._setActive(e);
+		e.style.zIndex = String(++this._zCounter + (t ? j : 0)), t || this._setActive(e);
 	}
 	_requestDomSync() {
 		this._pointerGesture || this._domSyncTimer || (this._domSyncTimer = window.setTimeout(() => {
@@ -220,7 +242,7 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
 		let e = this._windows, t = null;
 		for (let n of e) if (!n.style.zIndex) {
 			let e = this._isUtility(n);
-			n.style.zIndex = String(++this._zCounter + (e ? A : 0)), e || (t = n);
+			n.style.zIndex = String(++this._zCounter + (e ? j : 0)), e || (t = n);
 		}
 		let n = e.filter((e) => !this._isUtility(e)), r = this._activeWindow && n.includes(this._activeWindow) ? this._activeWindow : null;
 		this._setActive(t ?? r ?? (this._deactivated ? null : this._topmost(n))), customElements.get("vf-window") || this._normalizeAfterUpgrade();
@@ -265,26 +287,26 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
 		r && n instanceof HTMLElement && n.isConnected && this._deepActiveElement() !== n && (this._restoringFocus = !0, n.focus({ preventScroll: !0 }), this._restoringFocus = !1);
 	}
 	willUpdate(e) {
-		if (super.willUpdate(e), this._token = m(this, "--vf-desktop-pattern"), e.has("pattern")) {
-			let e = f(this.pattern);
-			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${P}.`)), this._desktopPattern = e ?? d[P];
+		if (super.willUpdate(e), this._token = h(this, "--vf-desktop-pattern"), e.has("pattern")) {
+			let e = p(this.pattern);
+			e === null && this.pattern?.trim() && !this.#e && (this.#e = !0, console.warn(`vf-desktop: unknown pattern "${this.pattern}" — a library name (docs/PATTERNS.md) or sixteen hex digits. Keeping ${I}.`)), this._desktopPattern = e ?? f[I];
 		}
 	}
 	updated(e) {
 		if (e.has("bezel") && (this.bezel > 0 ? this.style.setProperty("--vf-desktop-bezel", i(this.bezel)) : this.style.removeProperty("--vf-desktop-bezel")), e.has("width") || e.has("height") || e.has("bezel")) {
-			let e = this.width ?? M, t = this.height ?? N;
+			let e = this.width ?? P, t = this.height ?? F;
 			this.style.width = i(e + 2 * this.bezel), this.style.height = i(t + 2 * this.bezel);
 		}
 	}
 	render() {
-		let e = this.width ?? M, t = this.height ?? N, n = this._token ? T`<div class="vf-tile-grid">
-          ${h({
-			cols: Math.ceil(e / L),
-			rows: Math.ceil(t / L),
-			tile: L
+		let e = this.width ?? P, t = this.height ?? F, n = this._token ? E`<div class="vf-tile-grid">
+          ${g({
+			cols: Math.ceil(e / z),
+			rows: Math.ceil(t / z),
+			tile: z
 		})}
         </div>` : null;
-		return T`
+		return E`
       <div class=${this.bezel > 0 ? "desktop vf-snap bezeled" : "desktop vf-snap"}>
         <div
           class="screen vf-pattern-fill${this._token ? "" : " vf-patterned"}"
@@ -292,13 +314,14 @@ var A = 1e6, j = 2 * A, M = 512, N = 342, P = "gray-50", F = p(d[P], "#000000",
         >
           ${n}
           <slot @slotchange=${this._onSlotChange}></slot>
-          ${this.bezel > 0 ? T`<div class="corner tl"></div>
+          <div class="drag-surface"></div>
+          ${this.bezel > 0 ? E`<div class="corner tl"></div>
                 <div class="corner tr"></div>` : null}
         </div>
       </div>
     `;
 	}
 };
-a([D({ type: Number })], R.prototype, "width", void 0), a([D({ type: Number })], R.prototype, "height", void 0), a([D({ type: Number })], R.prototype, "bezel", void 0), a([D()], R.prototype, "pattern", void 0), a([k({ selector: "vf-window" })], R.prototype, "_windows", void 0), a([O(".screen")], R.prototype, "screen", void 0), R = a([t("vf-desktop")], R);
+a([O({ type: Number })], B.prototype, "width", void 0), a([O({ type: Number })], B.prototype, "height", void 0), a([O({ type: Number })], B.prototype, "bezel", void 0), a([O()], B.prototype, "pattern", void 0), a([A({ selector: "vf-window" })], B.prototype, "_windows", void 0), a([k(".screen")], B.prototype, "screen", void 0), a([k(".drag-surface")], B.prototype, "dragSurface", void 0), B = a([t("vf-desktop")], B);
 //#endregion
-export { R as VfDesktop };
+export { B as VfDesktop };

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

@@ -0,0 +1,144 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { VfIconSize } from './vf-icon.js';
+declare const VfIconField_base: (new (...args: any[]) => import("../size.js").VfSizedInterface) & (new (...args: any[]) => import("../position.js").VfPositionedInterface) & typeof LitElement;
+/**
+ * `<vf-icon-field>` — the container a field of `vf-icon`s sits in: a desktop's
+ * icons, a folder window's contents.
+ *
+ * Every other set in the kit has its container — `vf-list` owns
+ * `vf-list-item`, `vf-radio-group` owns `vf-radio`, `vf-menu` owns
+ * `vf-menu-item`, `vf-select` owns `vf-option` — and `vf-icon` was the one
+ * item whose container the consumer wrote by hand: a bare
+ * `<div role="listbox" aria-multiselectable="true">`, because an `option` is
+ * only valid inside a `listbox` that owns it, and every kit container is a
+ * positioning anchor by design, so nothing in the kit was neutral enough to
+ * stand in. A consumer who forgot the role got icons that silently degraded
+ * to pictures. This is that container, as kit furniture:
+ *
+ * ```html
+ * <vf-desktop width="512" height="342">
+ *   <vf-icon-field label="Desktop" fill-width fill-height>
+ *     <vf-icon label="Macintosh HD" width="64" selectable movable editable left="16" top="24">…</vf-icon>
+ *     <vf-icon label="Trash" width="64" selectable movable editable left="16" top="280">…</vf-icon>
+ *   </vf-icon-field>
+ *   <vf-window heading="Documents" width="320" height="201" scrollbars="both" top="40" left="120">
+ *     <vf-icon-field label="Documents">
+ *       <vf-icon label="Read Me" width="64" selectable movable editable left="16" top="16">…</vf-icon>
+ *     </vf-icon-field>
+ *   </vf-window>
+ * </vf-desktop>
+ * ```
+ *
+ * ### Semantics through internals
+ *
+ * `role="listbox"` and `aria-multiselectable="true"` always — the Finder was
+ * always multi-select, so there is no attribute for it — and `label` as the
+ * accessible name, the way `vf-scroll-area` takes one. Internals values are
+ * defaults (SPEC §2): a consumer's own `role`/`aria-*` on the tag still wins.
+ * A `selectable` icon inside becomes a real `option` carrying `aria-selected`;
+ * `vf-icon` matches this tag directly, since a role written through internals
+ * never lands as an attribute for `closest()` to find.
+ *
+ * ### Layout-neutral, exactly what the div was
+ *
+ * An in-flow block with no size, no inset and no position of its own,
+ * painting nothing — the `vf-stack` posture. A field whose icons are all
+ * placed is a zero-height block, so the icons keep anchoring to the desktop's
+ * raster or the window's plane, stored coordinates mean what they meant, and
+ * a press on the bare dither still reaches the desktop. It takes `top`/`left`
+ * and `width`/`height` like the other declared-box containers, so a page that
+ * wants the field to be a box places and sizes it, at which point it becomes
+ * the anchor — the placement working, as documented for everything.
+ * `fill-width`/`fill-height` are the other way to give it a box, read about
+ * the host the way `vf-stack` and `vf-container` read them: a filled field
+ * stays in flow and static, so its icons keep their anchor, and it has a
+ * surface to press — which is what the rubber band needs.
+ *
+ * ### The rubber band
+ *
+ * A press on the field's own background — not on an icon — dragged across
+ * the field draws the Finder's dotted selection rectangle from the press to
+ * the pointer, and the selection follows it live by the Finder's one rule:
+ * **an icon is selected exactly when it was selected at the press XOR the
+ * rectangle touches it.** The press fixes that anchor: a plain press has
+ * already cleared everything (the way any press outside an icon does), so
+ * the rectangle simply selects what it touches and releases what it leaves;
+ * with Shift or ⌘ held the selection survives the press and the rectangle
+ * *toggles* against it — an icon already selected deselects while the
+ * rectangle covers it and comes back when it leaves, one that was not
+ * selects. Each change reports `vf-select` as a press would. "Touches"
+ * means the icon's art cell or its name plate ({@link VfIcon.touches}), not
+ * the empty cell beside them, so a rectangle through the gap between two
+ * icons selects neither. The release keeps the result; Escape or a
+ * `pointercancel` cancels, the rectangle vanishes and the selection goes
+ * back to the anchor. A press that never leaves its system pixel draws
+ * nothing.
+ *
+ * The rectangle is drawn with the drag outline's pen ({@link
+ * paintSelectionRect}: the dotted one-pixel outline, `filter: invert(1)`
+ * under `mix-blend-mode: difference`) at the field's own level, which is
+ * where the Finder drew its marquee — on the desktop under the windows, in a
+ * window body over that window's content and under any window above it —
+ * positioned against the viewport from the field's own shadow, since a
+ * layout-neutral field has no box of its own to anchor to. It reaches no
+ * further than the field, inside every clip above the field (a window body,
+ * a scroll viewport, the raster's edge), so it never paints outside the
+ * region the icons are visible in. Its dots are phased against the field's
+ * own box; a field at the screen's origin shares the desktop dither's phase.
+ *
+ * Only a field with a box can be pressed: fill it, or place and size it. An
+ * unplaced, unfilled field of placed icons is zero-height and draws no band.
+ * `touch-action` is left alone, so on a touch screen a drag on the
+ * background pans a scrolling window as it always did; the band is a mouse
+ * and pen gesture.
+ *
+ * ### `size` is the view's
+ *
+ * `large` or `small`, written onto every icon in the field when set and
+ * whenever it changes, so View → by Small Icon is one attribute instead of a
+ * loop over every icon. Unset, each icon keeps its own.
+ *
+ * ### The desktop uses it, and renders none
+ *
+ * A desktop's icons sit in a field slotted into `vf-desktop` beside the
+ * windows, written by the page; a folder window's icons sit in one slotted
+ * into the window body. `vf-desktop` builds no field of its own: its furniture
+ * is slotted light DOM and the page decides what it is, a desktop with no
+ * icons should carry no empty listbox, and a field inside the desktop's
+ * shadow is one `closest()` could not reach.
+ *
+ * @slot - The icons.
+ */
+export declare class VfIconField extends VfIconField_base {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Accessible name for the field — "Desktop", the folder's name — applied as
+     * the listbox's `aria-label` through internals, so a consumer's own
+     * `aria-label` on the tag still wins.
+     */
+    label: string;
+    /**
+     * The view's icon size, `large` or `small`, written onto every icon in the
+     * field — View → by Small Icon as one attribute. Unset, each icon keeps
+     * its own `size`.
+     */
+    size?: VfIconSize | null;
+    /**
+     * Default-on display scaling (true 72dpi size); see src/scale.ts. A lone
+     * field with a declared size on a plain page would otherwise resolve that
+     * size against the `var(--vf-scale, 1)` fallback while its icons
+     * self-scaled around it — the vf-stack reasoning.
+     */
+    private readonly scale;
+    constructor();
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'vf-icon-field': VfIconField;
+    }
+}
+export {};

package/dist/components/vf-icon-field.js

@@ -0,0 +1,173 @@
+import { vfElement as e } from "../define.js";
+import { ScaleController as t, effectiveScale as n } from "../scale.js";
+import r from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as i } from "../position.js";
+import { vfBase as a } from "../styles/recipes/host.js";
+import { DocumentListenersController as o } from "../document-listeners.js";
+import { VfSized as s } from "../size.js";
+import { paintSelectionRect as c } from "../open-art.js";
+import { LitElement as l, css as u, html as d } from "lit";
+import { property as f } from "lit/decorators.js";
+//#region src/components/vf-icon-field.ts
+var p = (e, t, n) => Math.min(Math.max(e, t), n), m = class extends s(i(l)) {
+	static {
+		this.styles = [a, u`
+      :host {
+        /* A block that shrink-wraps: the field is exactly as big as what it
+           holds in flow — nothing, for a field of placed icons — so it can
+           never hand a size it never declared to anything, and a zero-height
+           block intercepts no press meant for the desktop under it. A
+           declared width/height lands on the host's inline style (VfSized)
+           and beats this; top/left make it the anchor (VfPositioned). */
+        display: block;
+        width: fit-content;
+        /* Typographic transparency — the vf-stack reset, for the same
+           reason: vfBase dresses a host as chrome, and a container that
+           holds no text of its own must not change how its content reads. */
+        font: inherit;
+        -webkit-font-smoothing: inherit;
+        color: inherit;
+        user-select: inherit;
+        -webkit-user-select: inherit;
+        text-align: inherit;
+      }
+      /* The same two words a child uses, read about the host — the
+         vf-container rule. A percentage is the one fill a page can always
+         express: 100% of a desktop's screen, of a window body (a definite
+         flex item). The host stays static, so its icons keep their anchor;
+         what it gains is a surface to press. */
+      :host([fill-width]) {
+        width: 100%;
+      }
+      :host([fill-height]) {
+        height: 100%;
+      }
+    `];
+	}
+	#e;
+	#t;
+	#n;
+	constructor() {
+		super(), this.label = "", this.scale = new t(this), this.#e = this.attachInternals(), this.#t = null, this.#n = new o(this, () => [[
+			document,
+			"keydown",
+			this.#l,
+			!0
+		]]), this.#r = () => {
+			this.#i();
+		}, this.#o = (e) => {
+			if (this.#t || e.button !== 0 || e.target !== this) return;
+			let t = this.getBoundingClientRect();
+			if (t.width <= 0 || t.height <= 0) return;
+			let r = n(this), i = this.#f(t, r);
+			this.#t = {
+				pointerId: e.pointerId,
+				box: t,
+				reach: i,
+				origin: this.#d(e, t, r, i),
+				anchor: new Set(this.#a().filter((e) => e.selected)),
+				rect: null,
+				canvas: null,
+				phase: -1
+			}, this.setPointerCapture(e.pointerId), e.preventDefault();
+		}, this.#s = (e) => {
+			let t = this.#t;
+			if (!t || e.pointerId !== t.pointerId) return;
+			let r = n(this), i = this.#d(e, t.box, r, t.reach);
+			if (!t.rect && i.x === t.origin.x && i.y === t.origin.y) return;
+			let a = {
+				x: Math.min(t.origin.x, i.x),
+				y: Math.min(t.origin.y, i.y),
+				width: Math.abs(i.x - t.origin.x),
+				height: Math.abs(i.y - t.origin.y)
+			}, o = t.rect;
+			o && o.x === a.x && o.y === a.y && o.width === a.width && o.height === a.height || (o || (this.#n.attach(), t.canvas = this.#p(), this.renderRoot.append(t.canvas)), t.rect = a, this.#m(t, r), this.#h(t, r));
+		}, this.#c = (e) => {
+			let t = this.#t;
+			!t || e.pointerId !== t.pointerId || this.#u(e.type === "pointercancel");
+		}, this.#l = (e) => {
+			e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), this.#u(!0));
+		}, this.#e.role = "listbox", this.#e.ariaMultiSelectable = "true", this.addEventListener("pointerdown", this.#o), this.addEventListener("pointermove", this.#s), this.addEventListener("pointerup", this.#c), this.addEventListener("pointercancel", this.#c);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#t?.canvas?.remove(), this.#t = null;
+	}
+	updated(e) {
+		e.has("label") && (this.#e.ariaLabel = this.label || null), e.has("size") && this.#i();
+	}
+	#r;
+	#i() {
+		let e = this.size;
+		if (e != null) for (let t of this.querySelectorAll("vf-icon")) t.size !== e && (t.size = e);
+	}
+	#a() {
+		return [...this.querySelectorAll("vf-icon")].filter((e) => e.selectable);
+	}
+	#o;
+	#s;
+	#c;
+	#l;
+	#u(e) {
+		let t = this.#t;
+		if (t && (this.#t = null, this.hasPointerCapture(t.pointerId) && this.releasePointerCapture(t.pointerId), t.rect && (this.#n.detach(), t.canvas?.remove(), e))) for (let e of this.#a()) {
+			let n = t.anchor.has(e);
+			e.selected !== n && e.setSelected(n);
+		}
+	}
+	#d(e, t, n, r) {
+		return {
+			x: p(Math.round((e.clientX - t.left) / n), r.minX, r.maxX),
+			y: p(Math.round((e.clientY - t.top) / n), r.minY, r.maxY)
+		};
+	}
+	#f(e, t) {
+		let n = e.left, r = e.top, i = e.right, a = e.bottom, o = this.assignedSlot ?? this.parentNode;
+		for (; o;) if (o instanceof Element) {
+			let e = getComputedStyle(o);
+			if (e.overflowX !== "visible" || e.overflowY !== "visible") {
+				let e = o.getBoundingClientRect();
+				n = Math.max(n, e.left), r = Math.max(r, e.top), i = Math.min(i, e.right), a = Math.min(a, e.bottom);
+			}
+			o = o.assignedSlot ?? o.parentNode;
+		} else o = o instanceof ShadowRoot ? o.host : null;
+		let s = (e) => Math.round(e * 64) / 64;
+		return {
+			minX: Math.max(0, Math.ceil(s((n - e.left) / t))),
+			minY: Math.max(0, Math.ceil(s((r - e.top) / t))),
+			maxX: Math.max(0, Math.floor(s((i - e.left) / t))),
+			maxY: Math.max(0, Math.floor(s((a - e.top) / t)))
+		};
+	}
+	#p() {
+		let e = document.createElement("canvas");
+		e.className = "selection-rect";
+		let t = e.style;
+		return t.position = "fixed", t.display = "block", t.pointerEvents = "none", t.filter = "invert(1)", t.mixBlendMode = "difference", t.imageRendering = "pixelated", e;
+	}
+	#m(e, t) {
+		let { rect: n, canvas: r } = e;
+		if (!n || !r) return;
+		let i = Math.max(1, n.width), a = Math.max(1, n.height), o = ((n.x + n.y) % 2 + 2) % 2;
+		c(r, i, a, o), e.phase = o, r.style.left = `${e.box.left + n.x * t}px`, r.style.top = `${e.box.top + n.y * t}px`, r.style.width = `${i * t}px`, r.style.height = `${a * t}px`;
+	}
+	#h(e, t) {
+		let { rect: n } = e;
+		if (!n) return;
+		let r = {
+			left: e.box.left + n.x * t,
+			top: e.box.top + n.y * t,
+			right: e.box.left + (n.x + Math.max(1, n.width)) * t,
+			bottom: e.box.top + (n.y + Math.max(1, n.height)) * t
+		};
+		for (let t of this.#a()) {
+			let n = e.anchor.has(t) !== t.touches(r);
+			t.selected !== n && t.setSelected(n);
+		}
+	}
+	render() {
+		return d`<slot @slotchange=${this.#r}></slot>`;
+	}
+};
+r([f()], m.prototype, "label", void 0), r([f({ reflect: !0 })], m.prototype, "size", void 0), m = r([e("vf-icon-field")], m);
+//#endregion
+export { m as VfIconField };