vintage-frames 0.1.0

package/dist/menu-press.js

@@ -0,0 +1,97 @@
+import { DocumentListenersController as e } from "./document-listeners.js";
+import "./motion.js";
+//#region src/menu-press.ts
+var t = class {
+	#e;
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	constructor(t, n) {
+		this.target = n, this.#e = !1, this.#t = !1, this.#n = !1, this.#r = null, this.#i = 0, this.#a = null, this.onPointerDown = (e) => {
+			if (e.button > 0 || !e.isPrimary) return;
+			let t = this.#p(e.clientX, e.clientY);
+			if (t) {
+				if (e.preventDefault(), this.#e = !0, this.#n = !1, this.#r = t.item ?? t.menu, this.#i = e.timeStamp, this.#t = !t.menu.open, this.#o.attach(), t.item) {
+					this.#f(t.item);
+					return;
+				}
+				t.menu.focus(), this.#t && this.target.open(t.menu);
+			}
+		}, this.#s = (e) => {
+			if (!this.#e) return;
+			e.preventDefault();
+			let t = this.#p(e.clientX, e.clientY), n = t ? t.item ?? t.menu : null;
+			!this.#n && n !== this.#r && (this.#n = !0), t && !t.item && !t.menu.open && this.target.open(t.menu), this.#f(t?.item ?? null);
+		}, this.#c = (e) => {
+			if (!this.#e) return;
+			let t = this.#p(e.clientX, e.clientY), n = this.#t, r = !this.#n, i = e.timeStamp - this.#i < 200;
+			this.#u(), !(n && r && i) && this.#d(t?.item ?? null);
+		}, this.#l = () => {
+			this.#u(), this.#f(null);
+		}, t.addController(this), this.#o = new e(t, () => [
+			[
+				document,
+				"pointermove",
+				this.#s,
+				!0
+			],
+			[
+				document,
+				"pointerup",
+				this.#c,
+				!0
+			],
+			[
+				document,
+				"pointercancel",
+				this.#l,
+				!0
+			]
+		]);
+	}
+	hostDisconnected() {
+		this.#u(), this.#f(null);
+	}
+	#s;
+	#c;
+	#l;
+	#u() {
+		this.#e && (this.#e = !1, this.#r = null, this.#o.detach());
+	}
+	#d(e) {
+		if (!e || e.disabled) {
+			this.#f(null), this.target.close();
+			return;
+		}
+		this.#f(e), this.#a = null, e.activate();
+	}
+	#f(e) {
+		let t = e && !e.disabled ? e : null;
+		t !== this.#a && (this.#a && (this.#a.active = !1), this.#a = t, t && (t.active = !0));
+	}
+	#p(e, t) {
+		let r = this.target.menus(), i = r.find((e) => e.open);
+		if (i) {
+			for (let r of i.allItems) if (n(r.getBoundingClientRect(), e, t)) return {
+				menu: i,
+				item: r
+			};
+		}
+		for (let i of r) {
+			let r = i.labelRect;
+			if (r && n(r, e, t)) return {
+				menu: i,
+				item: null
+			};
+		}
+		return null;
+	}
+};
+function n(e, t, n) {
+	return t >= e.left && t < e.right && n >= e.top && n < e.bottom;
+}
+//#endregion
+export { t as MenuPressController };

package/dist/modal-dialog.d.ts

@@ -0,0 +1,148 @@
+import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
+import { ScaleController } from './scale.js';
+/** Reason a modal closed, carried by the `vf-close` event's detail. */
+export type VfCloseReason = 'escape' | 'close';
+/**
+ * The width an undeclared modal falls back to, in system px — a classic
+ * dialog's own measure, wide enough for a line of chrome text and a button row.
+ * It exists so an unsized modal still renders, and still owns a *definite*
+ * width so dragging cannot squeeze it; the console says what to declare.
+ */
+export declare const MODAL_FALLBACK_WIDTH = 260;
+/**
+ * Shared native-`<dialog>` styles for the modal shells: a chromeless top-layer
+ * dialog (the frame is drawn by the subclass) with a fully transparent
+ * backdrop — pure System 7, no dimming.
+ */
+export declare const modalDialogStyles: import("lit").CSSResult;
+/**
+ * Base class for the modal shell `vf-dialog` — and for a consumer's own
+ * modal (an alert box, say) authored against the kit.
+ *
+ * Owns the native `<dialog>` lifecycle every modal shares: `open` sync, `show()` /
+ * `close()`, the {@link top}/{@link left} placement (stated or centered) and the
+ * single `close` funnel that drops the written origin and fires `vf-close` with
+ * the reason. Because every close path — Escape, `close()`, backdrop — routes
+ * through the native `close` event, an Escape-close no longer leaves a stale
+ * origin behind, so the next open re-derives it.
+ *
+ * Removing an open modal from the DOM is a close path too. HTML's dialog
+ * *removing steps* take the element out of the top layer **without** running
+ * the close algorithm — no `close` event, no focus restoration — which is
+ * exactly what the standard framework pattern of unmounting a dialog instead
+ * of calling `close()` does. `disconnectedCallback` routes that path through
+ * the same funnel: the removed element still fires `vf-close` (heard by
+ * listeners on the element itself — it has left the tree, so nothing
+ * bubbles), `open` and the pinned margins reconcile so a re-append mounts it
+ * closed and re-centered, and focus returns to the element that was focused
+ * when the modal opened.
+ *
+ * Subclasses supply only the frame chrome: a `render()` returning
+ * `<dialog @cancel=${this._onNativeCancel} @close=${this._onNativeClose}>` with
+ * their role/ARIA and body, and {@link modalDialogStyles} in `static styles`.
+ *
+ * @fires vf-close - The modal closed. `detail: { reason: 'escape' | 'close' }`.
+ */
+export declare class VfModalDialog extends LitElement {
+    #private;
+    /** Default-on display scaling (true 72dpi size); see src/scale.ts. */
+    protected readonly scale: ScaleController;
+    /** Whether the modal is open. Kept in sync with the native `<dialog>`. */
+    open: boolean;
+    /**
+     * Modal width in whole system px — the art's own unit, so the box holds its
+     * proportion to the chrome inside it at every display density.
+     *
+     * **Declare it.** A modal owns its width; it is not a shape its content
+     * happens to fall into. The platform's own default is `fit-content` measured
+     * against the space *left over* beside its offsets — and stating an offset is
+     * exactly how the box is placed and dragged ({@link top}), so an undeclared
+     * modal squeezes itself and reflows its text as it moves toward an edge.
+     * Unset, it falls back to {@link MODAL_FALLBACK_WIDTH} and says so once in
+     * the console.
+     */
+    width?: number;
+    /**
+     * Modal height in whole system px.
+     *
+     * **Declare it,** with {@link width}. A modal is a fixed box in both axes —
+     * the same rule `vf-window` follows, for the same reason: the classic shells
+     * carried both dimensions in the resource, and a box that grows with its body
+     * is one whose buttons move under the pointer as its text changes. Unset, the
+     * body sizes to its content — the old behavior — and it says so once in the
+     * console.
+     *
+     * Content taller than the declared box is clipped at the frame.
+     */
+    height?: number;
+    /**
+     * Offset from the top of the **viewport**, in whole system px — the same
+     * `top`/`left` pair every other component takes ({@link VfPositioned}), in
+     * the same unit, with one difference the platform forces: `showModal()` puts
+     * the box in the top layer, whose containing block is the viewport rather
+     * than the nearest positioned ancestor. So these coordinates are screen
+     * coordinates, not the parent's.
+     *
+     * Leave both unset and the modal is **centered** — recomputed on open, and
+     * again whenever its own box or the viewport changes, which is what keeps a
+     * dialog whose slotted content upgrades after `showModal()` from opening at
+     * the offset its smaller first render centered at. Dragging the title bar
+     * states the pair; setting either back to `null` returns the modal to
+     * centering.
+     */
+    top?: number | null;
+    /** Offset from the left of the viewport, in whole system px. See {@link top}. */
+    left?: number | null;
+    protected _dialog: HTMLDialogElement;
+    /**
+     * The declared box as inline styles for the subclass's `<dialog>`:
+     * `style=${styleMap(this.dialogSize)}`. Width always resolves to something
+     * definite — the declaration or the fallback — because that is what keeps a
+     * drag from squeezing the box.
+     */
+    protected get dialogSize(): Record<string, string | null>;
+    /** Open the modal (native `showModal()`), pinned onto the device grid. */
+    show(): void;
+    /** Close the modal. Fires `vf-close` with `{ reason: 'close' }`. */
+    close(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    /**
+     * State the origin, in system px — clamped on screen and snapped onto the
+     * placement lattice, so what `top`/`left` report is what you can see. This is
+     * what a title-bar drag calls; a modal that has been placed this way stays
+     * placed, and re-centers only if the pair is cleared.
+     */
+    protected placeAt(x: number, y: number): void;
+    /**
+     * Write the origin onto the top-layer box: the stated one, or the centered
+     * one while the pair is unset. Both go on as a live `calc()` in system px
+     * ({@link sysLength}), so a zoom re-resolves the offset with every other
+     * metric instead of leaving the box behind at a stale CSS-px constant — and
+     * both are re-clamped here, which is what catches a viewport that shrank
+     * (zooming in leaves fewer system px on the screen) without forgetting where
+     * the modal was put.
+     *
+     * `position` is deliberately untouched: the UA already makes an open modal
+     * `position: fixed`, and the four inset/margin declarations are what turn its
+     * `inset: 0; margin: auto` centering into a stated origin.
+     */
+    protected settle(): void;
+    /**
+     * Torn out of the DOM while open (the framework-unmount path — see the
+     * class doc). `close()` routes the teardown through the same native-`close`
+     * funnel every other path uses; the focus restore is ours to do, since the
+     * removing steps already dropped focus to `<body>` before this ran.
+     */
+    disconnectedCallback(): void;
+    /** Native `cancel` (Escape): remember the reason; `close` follows. */
+    protected _onNativeCancel(): void;
+    /**
+     * Native `close` — the single teardown funnel for every close path. Drops
+     * the written origin so the next open re-derives it from the box it will
+     * actually have (a stated `top`/`left` is the author's or the user's and
+     * survives, and is re-applied by that open), syncs `open`, and fires
+     * `vf-close` with the reason.
+     */
+    protected _onNativeClose(): void;
+}

package/dist/modal-dialog.js

@@ -0,0 +1,155 @@
+import { ScaleController as e, onScaleChange as t, snapSys as n, sysLength as r, toSysExact as i } from "./scale.js";
+import a from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { emit as o } from "./events.js";
+import { LitElement as s, css as c } from "lit";
+import { property as l, query as u } from "lit/decorators.js";
+var d = 24, f = c`
+  dialog {
+    padding: 0;
+    margin: auto;
+    border: none;
+    background: transparent;
+    overflow: visible;
+    color: inherit;
+    font: inherit;
+    /* showModal()'s focusing steps fall back to focusing the dialog itself
+       when no descendant is chosen as the focus delegate — WebKit and Firefox
+       reach that with the kit's controls hidden inside shadow roots — and
+       both then draw their native ring around the top-layer box. The modal
+       frame already announces the surface, and focus marks inside it are the
+       kit's own (1-bit, on the controls), so the UA ring is suppressed rather
+       than restyled. */
+    outline: none;
+  }
+  /* Scoped to [open]: an unqualified display here would out-cascade the UA's
+     dialog:not([open]) { display: none } (author origin beats UA origin) and
+     paint every closed dialog. Flex, so the frame child can resolve against
+     the dialog's real box even when no height is declared and the UA's
+     dialog:modal max-height is what caps it — a percentage height resolves
+     to auto against that (indefinite) box, which left the frame content-tall
+     and spilling past the border with its buttons unreachable; a flex child
+     with min-height: 0 shrinks to the capped box instead, and the shells'
+     inner scroll region takes over from there. */
+  dialog[open] {
+    display: flex;
+    flex-direction: column;
+  }
+  dialog::backdrop {
+    background: transparent;
+    /* The backdrop is top-layer: no page cursor rule can reach it, so the
+       kit-wide cursor token (SPEC §3) is read here — \`::backdrop\` inherits
+       custom properties from its dialog in current engines; where it doesn't,
+       the fallback is the arrow it always showed. */
+    cursor: var(--vf-cursor, default);
+  }
+`, p = class extends s {
+	constructor(...t) {
+		super(...t), this.scale = new e(this), this.open = !1, this.#e = !1, this.#n = null, this.#r = null, this.#l = () => this.settle();
+	}
+	get dialogSize() {
+		return {
+			width: r(this.width ?? 260),
+			height: this.height === void 0 ? null : r(this.height)
+		};
+	}
+	#e;
+	#t() {
+		if (this.#e || !this.open) return;
+		let e = [];
+		if (this.width === void 0 && e.push("width (falling back to 260 system px)"), this.height === void 0 && e.push("height (falling back to the content)"), e.length === 0) return;
+		this.#e = !0;
+		let t = this.getAttribute("heading") ?? this.getAttribute("label") ?? "";
+		console.warn(`${this.localName}${t ? ` ("${t}")` : ""}: no ${e.join(", no ")}. A modal owns its whole box — declare both in system px: <${this.localName} width="320" height="140">.`);
+	}
+	#n;
+	#r;
+	show() {
+		this.open = !0, this.hasUpdated && this.#c();
+	}
+	close() {
+		this.open = !1, this.hasUpdated && this.#c();
+	}
+	updated(e) {
+		e.has("open") && this.#c(), (e.has("top") || e.has("left")) && this.settle(), this.#t();
+	}
+	#i() {
+		let e = document.documentElement;
+		return {
+			width: i(e.clientWidth || window.innerWidth, this),
+			height: i(e.clientHeight || window.innerHeight, this)
+		};
+	}
+	#a(e, t) {
+		let n = this.#i(), r = i(this._dialog?.offsetWidth ?? 0, this);
+		return {
+			x: Math.min(Math.max(e, d - r), n.width - d),
+			y: Math.min(Math.max(t, 0), Math.max(0, n.height - d))
+		};
+	}
+	#o() {
+		let e = this.#i(), t = this._dialog?.getBoundingClientRect();
+		return {
+			x: (e.width - i(t?.width ?? 0, this)) / 2,
+			y: (e.height - i(t?.height ?? 0, this)) / 2
+		};
+	}
+	placeAt(e, t) {
+		let r = this.#a(e, t);
+		this.left = n(r.x, this), this.top = n(r.y, this);
+	}
+	settle() {
+		let e = this._dialog;
+		if (!e?.open) return;
+		let t = this.left != null || this.top != null ? {
+			x: this.left ?? 0,
+			y: this.top ?? 0
+		} : this.#o(), i = this.#a(t.x, t.y);
+		e.style.left = r(n(i.x, this)), e.style.top = r(n(i.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
+	}
+	#s() {
+		let e = this._dialog?.style;
+		if (e) for (let t of [
+			"left",
+			"top",
+			"right",
+			"bottom",
+			"margin"
+		]) e.removeProperty(t);
+	}
+	#c() {
+		let e = this._dialog;
+		e && (this.open && !e.open ? (this.#r = document.activeElement, e.showModal(), this.settle(), this.#f(e)) : !this.open && e.open && e.close());
+	}
+	#l;
+	#u;
+	#d;
+	#f(e) {
+		typeof ResizeObserver < "u" && !this.#u && (this.#u = new ResizeObserver(this.#l), this.#u.observe(e)), window.addEventListener("resize", this.#l), this.#d ??= t(this.#l);
+	}
+	#p() {
+		this.#u?.disconnect(), this.#u = void 0, window.removeEventListener("resize", this.#l), this.#d?.(), this.#d = void 0;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#p();
+		let e = this._dialog;
+		if (e?.open) {
+			e.close();
+			let t = this.#r, n = document.activeElement;
+			t instanceof HTMLElement && t.isConnected && (n === null || n === document.body) && t.focus();
+		}
+		this.#r = null;
+	}
+	_onNativeCancel() {
+		this.#n = "escape";
+	}
+	_onNativeClose() {
+		let e = this.#n ?? "close";
+		this.#n = null, this.#r = null, this.#p(), this.open = !1, this.#s(), o(this, "vf-close", { reason: e });
+	}
+};
+a([l({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "open", void 0), a([l({ type: Number })], p.prototype, "width", void 0), a([l({ type: Number })], p.prototype, "height", void 0), a([l({ type: Number })], p.prototype, "top", void 0), a([l({ type: Number })], p.prototype, "left", void 0), a([u("dialog")], p.prototype, "_dialog", void 0);
+//#endregion
+export { p as VfModalDialog, f as modalDialogStyles };

package/dist/motion.d.ts

@@ -0,0 +1,72 @@
+/**
+ * Accessibility: honor the user's "reduce motion" preference.
+ *
+ * Components use this to skip non-essential animation — chiefly the classic
+ * ~250ms selection "blink" on menu items and popup options — and act instantly
+ * instead, so keyboard and assistive-tech users aren't made to wait through an
+ * effect they've asked the system to suppress. Guarded for SSR / environments
+ * without `matchMedia`, where it reports `false` (no reduction).
+ */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * How long (ms) an *in-place* press may last and still read as a modern
+ * click-to-open tap rather than a completed System 7 press.
+ *
+ * Shared by the two surfaces that offer the classic press-drag-release gesture
+ * — `vf-select`'s popup and the pull-down menus (`src/menu-press.ts`) — so the
+ * one timing a user can feel across both can't drift between them. Only an
+ * in-place release consults it: a press that travels to another row is a
+ * drag-pick regardless of duration.
+ */
+export declare const PRESS_HOLD_MS = 200;
+/**
+ * How long (ms) a press on a selected icon's name waits before it opens the
+ * rename box — long enough that a double-click has already declared itself.
+ *
+ * The Finder's two pointer gestures on a name are the same press: click once
+ * and it renames, click twice and it opens. Only the *second* press tells them
+ * apart, so the rename cannot commit to opening until the window for one has
+ * passed — which is what makes this a delay rather than an immediate response.
+ * A press landing inside the window calls the pending rename off outright, so
+ * the number is only an upper bound on how slow a double-click may be and still
+ * read as one.
+ *
+ * No API reports what the *browser* counts as a double-click: it follows a
+ * platform setting the user can move (Windows offers up to 900 ms, macOS a
+ * comparable slider, both defaulting near 500). Overshooting it costs a wait
+ * before a rename box appears; undershooting it renames when the user meant to
+ * open. So the number leans long deliberately.
+ */
+export declare const RENAME_DELAY_MS = 800;
+/**
+ * Milliseconds per row while the pointer rests on a menu scroll arrow — the
+ * pace a clipped popup rolls its list through the panel at (~15 rows/s).
+ *
+ * Deliberately *not* gated on `prefers-reduced-motion`, unlike the blink below.
+ * The blink is decoration played at the kit's discretion; this stepping is the
+ * interaction itself — user-held, discrete, and stopped the moment the pointer
+ * leaves — and suppressing it would leave the clipped rows unreachable by
+ * pointer. Same reasoning the drag gestures are ungated.
+ */
+export declare const MENU_SCROLL_INTERVAL_MS = 66;
+/** Milliseconds between selection-blink phase flips. */
+export declare const BLINK_INTERVAL_MS = 42;
+/** Phase flips in one selection blink (6 = three off/on cycles, ~250ms). */
+export declare const BLINK_FLIPS = 6;
+/** Handle for an in-flight {@link runSelectionBlink}; {@link cancel} stops it. */
+export interface BlinkHandle {
+    cancel(): void;
+}
+/**
+ * The classic System 7 selection "blink": the highlighted row inverts on/off a
+ * few times (~250ms) before the action commits. Owns the shared timing
+ * ({@link BLINK_INTERVAL_MS}/{@link BLINK_FLIPS}) and the reduced-motion
+ * short-circuit so `vf-menu-item` and `vf-select` can't drift apart on either.
+ *
+ * `setPhase(on)` is invoked with the highlight state for each frame — the caller
+ * maps it onto its own representation (a CSS class, an option's `active` flag).
+ * The blink starts in the OFF phase and finishes by calling `onDone()`; under
+ * `prefers-reduced-motion` it skips straight to `onDone()` and returns a no-op
+ * handle. `setPhase` is never called after `onDone()`.
+ */
+export declare function runSelectionBlink(setPhase: (on: boolean) => void, onDone: () => void): BlinkHandle;

package/dist/motion.js

@@ -0,0 +1,22 @@
+//#region src/motion.ts
+function e() {
+	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+var t = 200, n = 800, r = 42, i = 6;
+function a(t, n) {
+	if (e()) return n(), { cancel() {} };
+	let r = 0;
+	t(!1);
+	let i = window.setInterval(() => {
+		if (r += 1, r >= 6) {
+			window.clearInterval(i), n();
+			return;
+		}
+		t(r % 2 == 1);
+	}, 42);
+	return { cancel() {
+		window.clearInterval(i);
+	} };
+}
+//#endregion
+export { i as BLINK_FLIPS, r as BLINK_INTERVAL_MS, t as PRESS_HOLD_MS, n as RENAME_DELAY_MS, e as prefersReducedMotion, a as runSelectionBlink };

package/dist/number.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Shared numeric helpers for the stepped controls (`vf-number-field`,
+ * `vf-slider`), which both snap a value to a `step` grid and then fix the
+ * floating-point residue with `toFixed()`.
+ */
+/**
+ * Fraction digits implied by a `step`, i.e. the precision a stepped value
+ * should be rounded to.
+ *
+ * Naively counting the digits after `String(step)`'s decimal point is wrong for
+ * steps the runtime stringifies in exponential notation: `String(1e-7)` is
+ * `'1e-7'`, which has no dot at all, so a digit count reports 0 and
+ * `toFixed(0)` then snaps every stepped value to a whole number. Steps at or
+ * below `1e-7` (and, in the other direction, at or above `1e21`) take that
+ * form, so both branches are handled here:
+ *
+ *   0.25   → 2      1e-7    → 7
+ *   1      → 0      1.5e-7  → 8
+ *   0.001  → 3      1e21    → 0
+ *
+ * The result is clamped to `[0, MAX_DECIMALS]` so a subnormal step (down to
+ * `5e-324`) can't hand `toFixed()` an out-of-range argument.
+ */
+export declare function decimalsOf(step: number): number;

package/dist/number.js

@@ -0,0 +1,12 @@
+function e(e) {
+	if (!Number.isFinite(e)) return 0;
+	let t = String(Math.abs(e)), n = t.indexOf("e");
+	if (n < 0) {
+		let e = t.indexOf(".");
+		return e < 0 ? 0 : Math.min(100, t.length - e - 1);
+	}
+	let r = t.slice(0, n), i = Number(t.slice(n + 1)), a = r.indexOf("."), o = a < 0 ? 0 : r.length - a - 1;
+	return Math.min(100, Math.max(0, o - i));
+}
+//#endregion
+export { e as decimalsOf };

package/dist/open-art.d.ts

@@ -0,0 +1,40 @@
+/**
+ * The Finder "open" ghost — an icon's art redrawn as outline plus dither,
+ * derived from the art itself in the client.
+ *
+ * When a folder or application is open, the Finder redraws its icon as a
+ * ghost: the outline stays, and everything inside it becomes pattern. The kit
+ * ships no second raster for that state and asks the consumer for none — a
+ * System 7 icon's alpha channel IS its mask resource, so both halves of the
+ * ghost are derivable from the art already slotted: the outline is the mask's
+ * boundary, the fill is the mask's interior.
+ *
+ * Everything here is draw-and-composite — never `getImageData`, deliberately.
+ * A canvas that has drawn a cross-origin image is *tainted*, which forbids
+ * reading pixels back but not drawing or displaying them, so a pipeline built
+ * purely from `drawImage` and `globalCompositeOperation` behaves identically
+ * for data URIs, same-origin files and CORS-less CDN images. Taint propagates
+ * through the layers below and none of it matters: the result is only ever
+ * displayed. (`ctx.filter` is avoided the same way — compositing operators
+ * are universal where canvas filters are Safari's shaky corner.)
+ *
+ * The one "smart" step, finding the outline, is a 1px erosion, and erosion is
+ * expressible as compositing: `destination-in` keeps the destination only
+ * where the source is opaque, so intersecting the silhouette with itself
+ * shifted one pixel each way leaves exactly the pixels whose neighbors are
+ * all opaque — the interior. The ring the erosion removes is the outline.
+ */
+/**
+ * Derive the open ghost from an icon's art: a canvas at the art's natural
+ * size holding its outline in solid black over an interior of dither on
+ * opaque white, with the transparent surround untouched.
+ *
+ * Opaque white matters as much as the black: it keeps the ghost exactly the
+ * shape selection expects — ink and opaque fill on a transparent surround —
+ * so `filter: invert(1)` produces the selected-open appearance with no
+ * second treatment.
+ *
+ * Returns null when there is nothing to derive: art with no pixels yet, or
+ * an environment refusing a 2d context.
+ */
+export declare function deriveOpenArt(art: HTMLImageElement | HTMLCanvasElement): HTMLCanvasElement | null;

package/dist/open-art.js

@@ -0,0 +1,35 @@
+//#region src/open-art.ts
+var e = (e, t) => {
+	let n = document.createElement("canvas");
+	n.width = e, n.height = t;
+	let r = n.getContext("2d");
+	return r ? (r.imageSmoothingEnabled = !1, {
+		canvas: n,
+		ctx: r
+	}) : null;
+}, t = null, n = () => {
+	if (!t) {
+		let n = e(4, 2);
+		if (!n) return null;
+		n.ctx.fillStyle = "#000", n.ctx.fillRect(0, 0, 1, 1), n.ctx.fillRect(2, 1, 1, 1), t = n.canvas;
+	}
+	return t;
+};
+function r(t) {
+	let r = t instanceof HTMLImageElement ? t.naturalWidth : t.width, i = t instanceof HTMLImageElement ? t.naturalHeight : t.height;
+	if (!r || !i) return null;
+	let a = e(r, i), o = e(r, i), s = n();
+	if (!a || !o || !s) return null;
+	a.ctx.drawImage(t, 0, 0), a.ctx.globalCompositeOperation = "source-in", a.ctx.fillStyle = "#000", a.ctx.fillRect(0, 0, r, i), o.ctx.drawImage(a.canvas, 0, 0), o.ctx.globalCompositeOperation = "destination-in";
+	for (let [e, t] of [
+		[1, 0],
+		[-1, 0],
+		[0, 1],
+		[0, -1]
+	]) o.ctx.drawImage(a.canvas, e, t);
+	o.ctx.globalCompositeOperation = "source-in", o.ctx.fillStyle = "#fff", o.ctx.fillRect(0, 0, r, i);
+	let c = o.ctx.createPattern(s, "repeat");
+	return c && (o.ctx.globalCompositeOperation = "source-atop", o.ctx.fillStyle = c, o.ctx.fillRect(0, 0, r, i)), a.ctx.globalCompositeOperation = "source-over", a.ctx.drawImage(o.canvas, 0, 0), a.canvas;
+}
+//#endregion
+export { r as deriveOpenArt };