vintage-frames 0.1.0

package/dist/glyphs.js

@@ -0,0 +1,100 @@
+import { html as e } from "lit";
+//#region src/glyphs.ts
+var t = {
+	w: 12,
+	h: 12,
+	d: "M1 1h1v1h-1zM10 1h1v1h-1zM2 2h1v1h-1zM9 2h1v1h-1zM3 3h1v1h-1zM8 3h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM5 5h2v1h-2zM5 6h2v1h-2zM4 7h1v1h-1zM7 7h1v1h-1zM3 8h1v1h-1zM8 8h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1zM1 10h1v1h-1zM10 10h1v1h-1z"
+}, n = {
+	w: 12,
+	h: 12,
+	d: "M4 0h4v1h-4zM2 1h8v1h-8zM1 2h10v1h-10zM1 3h10v1h-10zM0 4h12v1h-12zM0 5h12v1h-12zM0 6h12v1h-12zM0 7h12v1h-12zM1 8h10v1h-10zM1 9h10v1h-10zM2 10h8v1h-8zM4 11h4v1h-4z"
+}, r = {
+	w: 12,
+	h: 12,
+	d: "M4 0h4v1h-4zM2 1h2v1h-2zM8 1h2v1h-2zM1 2h1v1h-1zM10 2h1v1h-1zM1 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM11 4h1v1h-1zM0 5h1v1h-1zM11 5h1v1h-1zM0 6h1v1h-1zM11 6h1v1h-1zM0 7h1v1h-1zM11 7h1v1h-1zM1 8h1v1h-1zM10 8h1v1h-1zM1 9h1v1h-1zM10 9h1v1h-1zM2 10h2v1h-2zM8 10h2v1h-2zM4 11h4v1h-4z"
+}, i = {
+	w: 12,
+	h: 12,
+	d: "M4 0h4v1h-4zM2 1h8v1h-8zM1 2h3v1h-3zM8 2h3v1h-3zM1 3h2v1h-2zM9 3h2v1h-2zM0 4h2v1h-2zM10 4h2v1h-2zM0 5h2v1h-2zM10 5h2v1h-2zM0 6h2v1h-2zM10 6h2v1h-2zM0 7h2v1h-2zM10 7h2v1h-2zM1 8h2v1h-2zM9 8h2v1h-2zM1 9h3v1h-3zM8 9h3v1h-3zM2 10h8v1h-8zM4 11h4v1h-4z"
+}, a = {
+	w: 12,
+	h: 12,
+	d: "M4 3h4v1h-4zM3 4h6v1h-6zM3 5h6v1h-6zM3 6h6v1h-6zM3 7h6v1h-6zM4 8h4v1h-4z"
+}, o = {
+	w: 9,
+	h: 9,
+	d: "M8 0h1v1h-1zM7 1h2v1h-2zM6 2h2v1h-2zM5 3h2v1h-2zM0 4h1v1h-1zM4 4h2v1h-2zM0 5h2v1h-2zM3 5h2v1h-2zM1 6h3v1h-3zM2 7h1v1h-1z"
+}, s = {
+	w: 11,
+	h: 6,
+	d: "M0 0h11v1h-11zM1 1h9v1h-9zM2 2h7v1h-7zM3 3h5v1h-5zM4 4h3v1h-3zM5 5h1v1h-1z"
+}, c = {
+	w: 11,
+	h: 6,
+	d: "M5 0h1v1h-1zM4 1h3v1h-3zM3 2h5v1h-5zM2 3h7v1h-7zM1 4h9v1h-9zM0 5h11v1h-11z"
+}, l = {
+	w: 15,
+	h: 25,
+	d: "M2 0h11v1h-11zM1 1h1v1h-1zM13 1h1v1h-1zM0 2h1v1h-1zM14 2h1v1h-1zM0 3h1v1h-1zM7 3h1v1h-1zM14 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM8 4h1v1h-1zM14 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM9 5h1v1h-1zM14 5h1v1h-1zM0 6h1v1h-1zM4 6h1v1h-1zM10 6h1v1h-1zM14 6h1v1h-1zM0 7h1v1h-1zM3 7h3v1h-3zM9 7h3v1h-3zM14 7h1v1h-1zM0 8h1v1h-1zM5 8h1v1h-1zM9 8h1v1h-1zM14 8h1v1h-1zM0 9h1v1h-1zM5 9h1v1h-1zM9 9h1v1h-1zM14 9h1v1h-1zM0 10h1v1h-1zM5 10h5v1h-5zM14 10h1v1h-1zM0 11h1v1h-1zM14 11h1v1h-1zM0 12h1v1h-1zM14 12h1v1h-1zM0 13h1v1h-1zM14 13h1v1h-1zM0 14h1v1h-1zM5 14h5v1h-5zM14 14h1v1h-1zM0 15h1v1h-1zM5 15h1v1h-1zM9 15h1v1h-1zM14 15h1v1h-1zM0 16h1v1h-1zM5 16h1v1h-1zM9 16h1v1h-1zM14 16h1v1h-1zM0 17h1v1h-1zM3 17h3v1h-3zM9 17h3v1h-3zM14 17h1v1h-1zM0 18h1v1h-1zM4 18h1v1h-1zM10 18h1v1h-1zM14 18h1v1h-1zM0 19h1v1h-1zM5 19h1v1h-1zM9 19h1v1h-1zM14 19h1v1h-1zM0 20h1v1h-1zM6 20h1v1h-1zM8 20h1v1h-1zM14 20h1v1h-1zM0 21h1v1h-1zM7 21h1v1h-1zM14 21h1v1h-1zM0 22h1v1h-1zM14 22h1v1h-1zM1 23h1v1h-1zM13 23h1v1h-1zM2 24h11v1h-11z"
+}, u = {
+	w: 11,
+	h: 12,
+	d: "M1 0h9v1h-9zM0 1h1v1h-1zM10 1h1v1h-1zM0 2h1v1h-1zM10 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM7 3h1v1h-1zM10 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM10 4h1v1h-1zM0 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM7 5h1v1h-1zM10 5h1v1h-1zM0 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM10 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM5 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM1 8h1v1h-1zM9 8h1v1h-1zM2 9h1v1h-1zM8 9h1v1h-1zM3 10h1v1h-1zM7 10h1v1h-1zM4 11h3v1h-3z"
+}, d = {
+	w: 11,
+	h: 12,
+	d: "M1 0h9v1h-9zM0 1h11v1h-11zM0 2h11v1h-11zM0 3h11v1h-11zM0 4h11v1h-11zM0 5h11v1h-11zM0 6h11v1h-11zM0 7h11v1h-11zM1 8h9v1h-9zM2 9h7v1h-7zM3 10h5v1h-5zM4 11h3v1h-3z"
+}, f = {
+	w: 15,
+	h: 25,
+	d: "M7 3h1v1h-1zM6 4h3v1h-3zM5 5h5v1h-5zM4 6h7v1h-7zM3 7h9v1h-9zM5 8h5v1h-5zM5 9h5v1h-5zM5 10h5v1h-5z"
+}, p = {
+	w: 15,
+	h: 25,
+	d: "M5 14h5v1h-5zM5 15h5v1h-5zM5 16h5v1h-5zM3 17h9v1h-9zM4 18h7v1h-7zM5 19h5v1h-5zM6 20h3v1h-3zM7 21h1v1h-1z"
+}, m = {
+	w: 16,
+	h: 16,
+	d: "M7 3h2v1h-2zM6 4h1v1h-1zM9 4h1v1h-1zM5 5h1v1h-1zM10 5h1v1h-1zM4 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM2 8h4v1h-4zM10 8h4v1h-4zM5 9h1v1h-1zM10 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM5 11h1v1h-1zM10 11h1v1h-1zM5 12h6v1h-6z"
+}, h = {
+	w: 16,
+	h: 16,
+	d: "M7 3h2v1h-2zM6 4h4v1h-4zM5 5h6v1h-6zM4 6h8v1h-8zM3 7h10v1h-10zM2 8h12v1h-12zM5 9h6v1h-6zM5 10h6v1h-6zM5 11h6v1h-6zM5 12h6v1h-6z"
+}, g = {
+	w: 16,
+	h: 16,
+	d: "M5 3h6v1h-6zM5 4h1v1h-1zM10 4h1v1h-1zM5 5h1v1h-1zM10 5h1v1h-1zM5 6h1v1h-1zM10 6h1v1h-1zM2 7h4v1h-4zM10 7h4v1h-4zM3 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM11 9h1v1h-1zM5 10h1v1h-1zM10 10h1v1h-1zM6 11h1v1h-1zM9 11h1v1h-1zM7 12h2v1h-2z"
+}, _ = {
+	w: 16,
+	h: 16,
+	d: "M5 3h6v1h-6zM5 4h6v1h-6zM5 5h6v1h-6zM5 6h6v1h-6zM2 7h12v1h-12zM3 8h10v1h-10zM4 9h8v1h-8zM5 10h6v1h-6zM6 11h4v1h-4zM7 12h2v1h-2z"
+}, v = {
+	w: 16,
+	h: 16,
+	d: "M8 2h1v1h-1zM7 3h2v1h-2zM6 4h1v1h-1zM8 4h1v1h-1zM5 5h1v1h-1zM8 5h5v1h-5zM4 6h1v1h-1zM12 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM12 8h1v1h-1zM4 9h1v1h-1zM12 9h1v1h-1zM5 10h1v1h-1zM8 10h5v1h-5zM6 11h1v1h-1zM8 11h1v1h-1zM7 12h2v1h-2zM8 13h1v1h-1z"
+}, y = {
+	w: 16,
+	h: 16,
+	d: "M8 2h1v1h-1zM7 3h2v1h-2zM6 4h3v1h-3zM5 5h8v1h-8zM4 6h9v1h-9zM3 7h10v1h-10zM3 8h10v1h-10zM4 9h9v1h-9zM5 10h8v1h-8zM6 11h3v1h-3zM7 12h2v1h-2zM8 13h1v1h-1z"
+}, b = {
+	w: 16,
+	h: 16,
+	d: "M7 2h1v1h-1zM7 3h2v1h-2zM7 4h1v1h-1zM9 4h1v1h-1zM3 5h5v1h-5zM10 5h1v1h-1zM3 6h1v1h-1zM11 6h1v1h-1zM3 7h1v1h-1zM12 7h1v1h-1zM3 8h1v1h-1zM12 8h1v1h-1zM3 9h1v1h-1zM11 9h1v1h-1zM3 10h5v1h-5zM10 10h1v1h-1zM7 11h1v1h-1zM9 11h1v1h-1zM7 12h2v1h-2zM7 13h1v1h-1z"
+}, x = {
+	w: 16,
+	h: 16,
+	d: "M7 2h1v1h-1zM7 3h2v1h-2zM7 4h3v1h-3zM3 5h8v1h-8zM3 6h9v1h-9zM3 7h10v1h-10zM3 8h10v1h-10zM3 9h9v1h-9zM3 10h8v1h-8zM7 11h3v1h-3zM7 12h2v1h-2zM7 13h1v1h-1z"
+};
+function S(t, n) {
+	return e`<svg
+    class=${n}
+    viewBox="0 0 ${t.w} ${t.h}"
+    fill="currentColor"
+    shape-rendering="crispEdges"
+    aria-hidden="true"
+  >
+    <path d=${t.d}></path>
+  </svg>`;
+}
+//#endregion
+export { s as CARET_DOWN, c as CARET_UP, t as CHECKBOX_X, o as CHECKMARK, a as RADIO_DOT, n as RADIO_FACE, r as RADIO_RING, i as RADIO_RING_PRESSED, g as SCROLL_ARROW_DOWN, _ as SCROLL_ARROW_DOWN_FILL, v as SCROLL_ARROW_LEFT, y as SCROLL_ARROW_LEFT_FILL, b as SCROLL_ARROW_RIGHT, x as SCROLL_ARROW_RIGHT_FILL, m as SCROLL_ARROW_UP, h as SCROLL_ARROW_UP_FILL, u as SLIDER_THUMB, d as SLIDER_THUMB_FACE, l as STEPPER, p as STEPPER_DOWN_FILL, f as STEPPER_UP_FILL, S as glyphSvg };

package/dist/grid-snap.d.ts

@@ -0,0 +1,73 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+/**
+ * Snap this component's paint to the device-pixel grid. One line per
+ * component, alongside `ScaleController`:
+ *
+ * ```ts
+ * private readonly gridSnap = new GridSnapController(this)
+ * ```
+ *
+ * The component's template must put the `vf-snap` class (see `vfBase`) on its
+ * top-level painted element(s); the host box is what gets measured, so an
+ * authored offset inside it (a toggle's centered box) stays put. Dormant
+ * until the app calls {@link applyGridSnap}, and skipped per-element by a
+ * `nosnap` attribute on the host.
+ */
+export declare class GridSnapController implements ReactiveController {
+    readonly host: ReactiveControllerHost & HTMLElement;
+    /** vf-* ancestors above this host; the sweep runs in ascending order. */
+    depth: number;
+    /** Our current correction, in CSS px. */
+    private applied;
+    /** Exactly what we last wrote, so an externally rewritten style attribute
+     *  (a consumer framework re-templating `style`) is detected and rebased. */
+    private written;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /** A render can change the host's size, and therefore where its edges land. */
+    hostUpdated(): void;
+    /**
+     * Measure and correct. Runs from the shared sweep only.
+     *
+     * The HOST is what gets measured: its origin is the page's contribution,
+     * and the page's fraction is the whole fault being canceled. The paint
+     * roots consuming the variables sit at *authored* offsets inside the host —
+     * including deliberate half-pixel ones like a toggle's centered box — and
+     * measuring one of them would make the controller "correct" the component's
+     * own design. Because the host never moves from its own correction, the
+     * applied offset is folded into the error arithmetically rather than being
+     * expected in the measured rect; an ancestor's correction, which does move
+     * this host, is picked up the normal way.
+     */
+    correct(dpr: number): void;
+    /** Drop the correction: delete the two variables and forget everything. */
+    reset(): void;
+}
+/**
+ * Opt the page into automatic device-pixel-grid snapping: every mounted
+ * component (and every one mounted afterwards) holds its paint on whole device
+ * pixels, whatever the surrounding layout does. Returns a cleanup function
+ * that turns it back off. Calls share one switch: snapping stays on until
+ * every caller's cleanup has run, and running a cleanup twice releases only
+ * once — so two widgets on one page can each opt in and out without turning
+ * the other's snapping off.
+ *
+ * ```ts
+ * import { applyGridSnap } from 'vintage-frames'
+ * applyGridSnap()
+ * ```
+ *
+ * The whole footprint on your DOM is two reserved custom properties
+ * (`--vf-snap-dx`/`--vf-snap-dy`) on each corrected host's inline style; the
+ * offset they drive is applied inside the component's own shadow root. Worth
+ * knowing: a component's painted box can sit up to half a device pixel outside
+ * its layout box while corrected.
+ */
+export declare function applyGridSnap(): () => void;
+/**
+ * Re-check every component before the next paint. Call it after moving
+ * components in a way nothing observable changed size — the one case the
+ * built-in triggers can't see. Free when nothing has actually moved.
+ */
+export declare function requestGridSnap(): void;

package/dist/grid-snap.js

@@ -0,0 +1,135 @@
+import { truePixelRatio as e } from "./zoom.js";
+import { onScaleChange as t } from "./scale.js";
+//#region src/grid-snap.ts
+var n = .05, r = 1 / 64, i = () => e() || 1, a = (e, t) => {
+	let n = e * t;
+	return n - Math.round(n);
+}, o = (e) => Math.round(e / r) * r, s = new class {
+	constructor() {
+		this.controllers = /* @__PURE__ */ new Set(), this.enabled = !1, this.frame = 0, this.teardown = [];
+	}
+	register(e) {
+		if (this.controllers.add(e), !this.enabled) {
+			e.reset();
+			return;
+		}
+		this.resizes?.observe(e.host), this.request();
+	}
+	unregister(e) {
+		this.controllers.delete(e), this.resizes?.unobserve(e.host);
+	}
+	enable() {
+		this.enabled || typeof window > "u" || (this.enabled = !0, this.install(), this.request());
+	}
+	disable() {
+		if (this.enabled) {
+			this.enabled = !1, this.frame && cancelAnimationFrame(this.frame), this.frame = 0;
+			for (let e of this.teardown.splice(0)) e();
+			this.resizes?.disconnect(), this.resizes = void 0;
+			for (let e of this.controllers) e.reset();
+		}
+	}
+	request() {
+		!this.enabled || this.frame || typeof window > "u" || (this.frame = requestAnimationFrame(() => {
+			this.frame = 0, this.sweep();
+		}));
+	}
+	sweep() {
+		let e = i(), t = [...this.controllers].sort((e, t) => e.depth - t.depth);
+		for (let n of t) n.correct(e);
+	}
+	install() {
+		this.resizes = new ResizeObserver(() => this.request()), this.resizes.observe(document.documentElement);
+		for (let e of this.controllers) this.resizes.observe(e.host);
+		let e = () => this.request();
+		window.addEventListener("resize", e), window.addEventListener("orientationchange", e), window.addEventListener("scroll", e, {
+			capture: !0,
+			passive: !0
+		}), this.teardown.push(() => {
+			window.removeEventListener("resize", e), window.removeEventListener("orientationchange", e), window.removeEventListener("scroll", e, { capture: !0 });
+		});
+		let n = document.fonts;
+		n && (n.addEventListener("loadingdone", e), this.teardown.push(() => n.removeEventListener("loadingdone", e)), n.ready.then(e)), this.teardown.push(t(e));
+		let r = new MutationObserver(e);
+		r.observe(document.documentElement, {
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: ["nosnap"]
+		}), this.teardown.push(() => r.disconnect());
+	}
+}(), c = class {
+	constructor(e) {
+		this.host = e, this.depth = 0, this.applied = {
+			x: 0,
+			y: 0
+		}, this.written = {
+			x: "",
+			y: ""
+		}, e.addController(this);
+	}
+	hostConnected() {
+		this.depth = u(this.host), s.register(this);
+	}
+	hostDisconnected() {
+		s.unregister(this);
+	}
+	hostUpdated() {
+		s.request();
+	}
+	correct(e) {
+		let t = this.host;
+		if (t.hasAttribute("nosnap")) {
+			(this.written.x || this.written.y) && this.reset();
+			return;
+		}
+		let r = t.getBoundingClientRect();
+		if (!r.width && !r.height) return;
+		let i = t.style;
+		(i.getPropertyValue("--vf-snap-dx") !== this.written.x || i.getPropertyValue("--vf-snap-dy") !== this.written.y) && (this.applied = {
+			x: 0,
+			y: 0
+		}, this.written = {
+			x: "",
+			y: ""
+		});
+		let s = a(r.left + this.applied.x, e), c = a(r.top + this.applied.y, e);
+		if (Math.abs(s) <= n && Math.abs(c) <= n) return;
+		let l = {
+			x: o(this.applied.x - s / e),
+			y: o(this.applied.y - c / e)
+		};
+		(l.x !== this.applied.x || l.y !== this.applied.y) && (this.applied = l, this.written = {
+			x: `${l.x}px`,
+			y: `${l.y}px`
+		}, i.setProperty("--vf-snap-dx", this.written.x), i.setProperty("--vf-snap-dy", this.written.y));
+	}
+	reset() {
+		this.host.style.removeProperty("--vf-snap-dx"), this.host.style.removeProperty("--vf-snap-dy"), this.applied = {
+			x: 0,
+			y: 0
+		}, this.written = {
+			x: "",
+			y: ""
+		};
+	}
+}, l = (e) => {
+	if (e.parentElement) return e.parentElement;
+	let t = e.getRootNode();
+	return t instanceof ShadowRoot ? t.host : null;
+}, u = (e) => {
+	let t = 0;
+	for (let n = l(e); n; n = l(n)) n.tagName.toLowerCase().startsWith("vf-") && t++;
+	return t;
+}, d = 0;
+function f() {
+	d++, s.enable();
+	let e = !1;
+	return () => {
+		e || (e = !0, --d === 0 && s.disable());
+	};
+}
+function p() {
+	s.request();
+}
+//#endregion
+export { c as GridSnapController, f as applyGridSnap, p as requestGridSnap };

package/dist/index.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Vintage Frames — Lit web components in the style of classic Mac OS System 7.
+ *
+ * Importing this module registers every element. Individual components can be
+ * imported from their own modules for finer-grained loading.
+ *
+ * Alongside the elements, the shared toolkit the components are built from is
+ * re-exported below: display scaling (`applyScale` and friends), the 1-bit
+ * style recipes, glyph sprites, pixel-stepped corner profiles, the behavior
+ * controllers, and the base classes — so an app can scale a page and author
+ * matching custom controls without reaching into `dist/` paths.
+ */
+export { VfDesktop } from './components/vf-desktop.js';
+export { VfWindow } from './components/vf-window.js';
+export { VfDialog } from './components/vf-dialog.js';
+export { VfSeparator } from './components/vf-separator.js';
+export { VfButton } from './components/vf-button.js';
+export { VfButtonGroup } from './components/vf-button-group.js';
+export { VfSwatch } from './components/vf-swatch.js';
+export { VfCheckbox } from './components/vf-checkbox.js';
+export { VfRadio } from './components/vf-radio.js';
+export { VfRadioGroup } from './components/vf-radio-group.js';
+export { VfTextField } from './components/vf-text-field.js';
+export { VfTextArea } from './components/vf-text-area.js';
+export { VfNumberField } from './components/vf-number-field.js';
+export { VfSelect } from './components/vf-select.js';
+export { VfOption } from './components/vf-option.js';
+export { VfProgressBar } from './components/vf-progress-bar.js';
+export { VfSlider } from './components/vf-slider.js';
+export { VfLabel } from './components/vf-label.js';
+export { VfParagraph } from './components/vf-paragraph.js';
+export { VfImg } from './components/vf-img.js';
+export { VfIcon } from './components/vf-icon.js';
+export type { VfIconSize } from './components/vf-icon.js';
+export { VfMenuBar } from './components/vf-menu-bar.js';
+export { VfMenu } from './components/vf-menu.js';
+export { VfMenuItem } from './components/vf-menu-item.js';
+export { VfList } from './components/vf-list.js';
+export { VfListItem } from './components/vf-list-item.js';
+export { VfScrollArea } from './components/vf-scroll-area.js';
+export { VfFieldset } from './components/vf-fieldset.js';
+export { VfGrid } from './components/vf-grid.js';
+export type { VfGridRules } from './components/vf-grid.js';
+export { VfStack } from './components/vf-stack.js';
+export type { VfStackDirection, VfStackPlace, } from './components/vf-stack.js';
+export { VfContainer } from './components/vf-container.js';
+/**
+ * Display scaling. `applyScale(document.documentElement)` is the one call an
+ * app makes to opt into true classic size (the whole device-px count nearest
+ * 1/72 inch on this display); the rest
+ * is the system↔CSS px conversion custom components need so their JS geometry
+ * stays in the same coordinate system as CSS.
+ */
+export { applyScale, ScaleController, effectiveScale, getScale, onScaleChange, sys, sysLength, sysLengths, toSys, snapToDevicePx, snapToSystemPx, snapSys, systemPxQuantum, toSysExact, CLASSIC_DPI, CSS_REFERENCE_DPI, SYSTEM_PX_IN_CSS_PX, } from './scale.js';
+/**
+ * Browser-zoom tracking, the zoom half of display scaling: the kit follows the
+ * user's zoom by default (zoom multiplies the density the target is computed
+ * from), and these are the readouts a page or custom control needs to stay on
+ * the same grid —
+ * `truePixelRatio()` is device px per CSS px *including* zoom, the number
+ * `window.devicePixelRatio` stops being in Safari at any non-100% zoom.
+ * `resetZoomBaseline()` declares the current state to be 100%, for the one
+ * change the tracker cannot classify (a display-mode switch at an identical
+ * logical size).
+ */
+export { getZoom, truePixelRatio, onZoomChange, devicePxPerSystemPx, resetZoomBaseline, } from './zoom.js';
+/**
+ * Automatic device-pixel-grid snapping. `applyGridSnap()` is the one call an
+ * app makes to have every component hold its own origin on whole device pixels
+ * whatever the surrounding layout does — the half of the layout contract the
+ * components can keep for you.
+ */
+export { applyGridSnap, requestGridSnap, GridSnapController, } from './grid-snap.js';
+/**
+ * The page-drawn cursor. `applyCursor()` is the one call an app makes to
+ * replace the native pointer with the embedded System 7 set — arrow, I-beam,
+ * crosshair and wristwatch as pixel art locked to the system-pixel grid,
+ * with the classic XOR draw and an `aria-busy`-driven wait state — hiding
+ * the native pointer everywhere via the page blanket plus the `--vf-cursor`
+ * token (SPEC §3). Each kind's art is overridable with the consumer's own;
+ * the embedded set is exported alongside for remixing.
+ */
+export { applyCursor } from './cursor.js';
+export type { VfCursorArt, VfCursorKind, VfCursorOptions } from './cursor.js';
+export { CURSOR_ARROW, CURSOR_I_BEAM, CURSOR_CROSSHAIR, CURSOR_WAIT, } from './cursor-art.js';
+/**
+ * The 1-bit style recipes. Compose them into a custom element's
+ * `static styles` to inherit the kit's type, panel frame, window chrome, focus
+ * ring, field well and System 7 scroll-rail skin.
+ */
+export { vfBase, vfBodyDecls, vfDisplay, vfDisplayDecls, vfStaticText, vfPanel, vfChromeFrame, vfModalFrame, vfTitleBar, vfWindowWidgets, vfHardShadowDecls, vfStripes, vfDots, vfFocus, vfFocusRing, vfFocusUnderline, vfToggle, vfField, vfScrollRail, vfTileSize, vfTileMaskSize, tileImage, tileRaster, tileRects, tileSpan, TILE_LATTICE, } from './styles/base.js';
+export type { TileRect } from './styles/base.js';
+/**
+ * The exact tiled fill (TILE-GRID-PLAN.md): a surface's own art as one
+ * whole-surface raster (`tileRaster` + the `vf-tile-raster` rules), and a
+ * consumer pattern token as a flat grid of absolutely placed tiles
+ * (`tileGrid()`), each box paint-snapped to the device grid on its own — so
+ * the fill stays 1-bit at the zoom-minted scales a CSS `background-repeat`
+ * length cannot hold. `vfTileGrid` carries the container and tile rules;
+ * `patternOverride` reads whether a token is in play; `TileRasterCache`
+ * memoizes the encoded raster against its size.
+ */
+export { vfTileGrid, tileGrid, patternOverride, TileRasterCache } from './tile-grid.js';
+/** Glyph sprites (`glyphSvg(CHECKMARK, 'check')`) and their pixel geometry. */
+export { glyphSvg, CHECKBOX_X, RADIO_FACE, RADIO_RING, RADIO_RING_PRESSED, RADIO_DOT, CHECKMARK, CARET_DOWN, STEPPER, STEPPER_UP_FILL, STEPPER_DOWN_FILL, SLIDER_THUMB, SLIDER_THUMB_FACE, } from './glyphs.js';
+export type { Glyph } from './glyphs.js';
+/** Pixel-stepped corner profiles and the clip-paths traced from them. */
+export { steppedRectClip, steppedRingClip, steppedCornerClip, BUTTON_FRAME, BUTTON_FACE, RING_FRAME, RING_HOLE, RING_INSET, SCREEN_CORNER, } from './pixel-frame.js';
+export type { SteppedProfile } from './pixel-frame.js';
+/** Behavior helpers: pointer drag, overflow reporting, event dispatch, motion. */
+export { DragController } from './drag.js';
+export type { DragTarget } from './drag.js';
+export { ScrollStateController } from './scroll-state.js';
+export { ScrollRailController, renderScrollRail } from './scroll-rail.js';
+export type { RailAxis, ScrollRailOptions } from './scroll-rail.js';
+export { TrackWidthController } from './track-width.js';
+export { DocumentListenersController } from './document-listeners.js';
+export type { DocumentListenerSpec } from './document-listeners.js';
+export { focusModality, trackFocusModality, FocusRuleController } from './focus-modality.js';
+export type { FocusModality } from './focus-modality.js';
+export { emit } from './events.js';
+export { prefersReducedMotion, runSelectionBlink, BLINK_INTERVAL_MS, BLINK_FLIPS, PRESS_HOLD_MS, RENAME_DELAY_MS, } from './motion.js';
+export type { BlinkHandle } from './motion.js';
+/**
+ * Element registration. `vfElement` is the kit's `@customElement`: it registers
+ * through `defineElement`, which skips (and warns) rather than throwing when a
+ * second copy of the library claims a tag the page already has.
+ */
+export { defineElement, vfElement } from './define.js';
+/** Base classes — extend these to author a custom `vf-*` control. */
+export { VfFormControl } from './form-control.js';
+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 { VfSized } from './size.js';
+export type { VfSizedInterface } from './size.js';
+export { VfModalDialog, modalDialogStyles } from './modal-dialog.js';
+export type { VfCloseReason } from './modal-dialog.js';
+/** The embedded System 7 bitmap faces and the registration helper. */
+export { registerEmbeddedFont, PIXEL_GRID_METRICS } from './styles/register-embedded-font.js';
+export type { EmbeddedFontMetrics } from './styles/register-embedded-font.js';
+export { registerDisplayFace, VF_DISPLAY_FAMILY } from './styles/display-font.js';
+export { registerBodyFace, VF_BODY_FAMILY } from './styles/body-font.js';

package/dist/index.js

@@ -0,0 +1,71 @@
+import { defineElement as e, vfElement as t } from "./define.js";
+import { CLASSIC_DPI as n, CSS_REFERENCE_DPI as r, SYSTEM_PX_IN_CSS_PX as i, devicePxPerSystemPx as a, getZoom as o, onZoomChange as s, resetZoomBaseline as c, truePixelRatio as l } from "./zoom.js";
+import { ScaleController as u, applyScale as d, effectiveScale as f, getScale as p, onScaleChange as m, snapSys as h, snapToDevicePx as g, snapToSystemPx as _, sys as v, sysLength as y, sysLengths as b, systemPxQuantum as x, toSys as S, toSysExact as C } from "./scale.js";
+import { PlacementController as w, VfPositioned as T } from "./position.js";
+import { PIXEL_GRID_METRICS as E, registerEmbeddedFont as D } from "./styles/register-embedded-font.js";
+import { VF_BODY_FAMILY as O, registerBodyFace as k } from "./styles/body-font.js";
+import { vfBodyDecls as A } from "./styles/recipes/body-face.js";
+import { VF_DISPLAY_FAMILY as j, registerDisplayFace as M } from "./styles/display-font.js";
+import { vfDisplay as N, vfDisplayDecls as P } from "./styles/recipes/display-face.js";
+import { vfBase as F } from "./styles/recipes/host.js";
+import { vfStaticText as I } from "./styles/recipes/static-text.js";
+import { TILE_LATTICE as L, tileImage as R, tileRaster as z, tileRects as B, tileSpan as V, vfTileMaskSize as H, vfTileSize as U } from "./styles/recipes/tile.js";
+import { vfDots as W, vfStripes as G } from "./styles/recipes/pattern.js";
+import { vfHardShadowDecls as K } from "./styles/recipes/shadow.js";
+import { vfChromeFrame as q, vfModalFrame as J, vfPanel as Y } from "./styles/recipes/surface.js";
+import { vfTitleBar as X, vfWindowWidgets as Z } from "./styles/recipes/title-bar.js";
+import { vfFocus as Q, vfFocusRing as $, vfFocusUnderline as ee } from "./styles/recipes/focus.js";
+import { vfToggle as te } from "./styles/recipes/toggle.js";
+import { vfField as ne } from "./styles/recipes/field.js";
+import { vfScrollRail as re } from "./styles/recipes/scroll-rail.js";
+import { TileRasterCache as ie, patternOverride as ae, tileGrid as oe, vfTileGrid as se } from "./tile-grid.js";
+import { GridSnapController as ce, applyGridSnap as le, requestGridSnap as ue } from "./grid-snap.js";
+import { DocumentListenersController as de } from "./document-listeners.js";
+import { BUTTON_FACE as fe, BUTTON_FRAME as pe, RING_FRAME as me, RING_HOLE as he, RING_INSET as ge, SCREEN_CORNER as _e, steppedCornerClip as ve, steppedRectClip as ye, steppedRingClip as be } from "./pixel-frame.js";
+import { VfDesktop as xe } from "./components/vf-desktop.js";
+import { VfSized as Se } from "./size.js";
+import { DragController as Ce } from "./drag.js";
+import { emit as we } from "./events.js";
+import { ScrollStateController as Te } from "./scroll-state.js";
+import { BLINK_FLIPS as Ee, BLINK_INTERVAL_MS as De, PRESS_HOLD_MS as Oe, RENAME_DELAY_MS as ke, prefersReducedMotion as Ae, runSelectionBlink as je } from "./motion.js";
+import { CARET_DOWN as Me, CHECKBOX_X as Ne, CHECKMARK as Pe, RADIO_DOT as Fe, RADIO_FACE as Ie, RADIO_RING as Le, RADIO_RING_PRESSED as Re, SLIDER_THUMB as ze, SLIDER_THUMB_FACE as Be, STEPPER as Ve, STEPPER_DOWN_FILL as He, STEPPER_UP_FILL as Ue, glyphSvg as We } from "./glyphs.js";
+import { ScrollRailController as Ge, renderScrollRail as Ke } from "./scroll-rail.js";
+import { VfScrollArea as qe } from "./components/vf-scroll-area.js";
+import { VfWindow as Je } from "./components/vf-window.js";
+import { VfModalDialog as Ye, modalDialogStyles as Xe } from "./modal-dialog.js";
+import { VfButtonGroup as Ze } from "./components/vf-button-group.js";
+import { VfDialog as Qe } from "./components/vf-dialog.js";
+import { VfSeparator as $e } from "./components/vf-separator.js";
+import { VfFormControl as et } from "./form-control.js";
+import { VfButton as tt } from "./components/vf-button.js";
+import { VfSwatch as nt } from "./components/vf-swatch.js";
+import { VfToggleControl as rt } from "./toggle-control.js";
+import { VfCheckbox as it } from "./components/vf-checkbox.js";
+import { VfRadio as at } from "./components/vf-radio.js";
+import { VfRadioGroup as ot } from "./components/vf-radio-group.js";
+import { FocusRuleController as st, focusModality as ct, trackFocusModality as lt } from "./focus-modality.js";
+import { VfTextControlBase as ut } from "./text-control.js";
+import { VfTextField as dt } from "./components/vf-text-field.js";
+import { VfTextArea as ft } from "./components/vf-text-area.js";
+import { VfNumberField as pt } from "./components/vf-number-field.js";
+import { VfOption as mt } from "./components/vf-option.js";
+import { VfSelect as ht } from "./components/vf-select.js";
+import { TrackWidthController as gt } from "./track-width.js";
+import { VfProgressBar as _t } from "./components/vf-progress-bar.js";
+import { VfSlider as vt } from "./components/vf-slider.js";
+import { VfLabel as yt } from "./components/vf-label.js";
+import { VfParagraph as bt } from "./components/vf-paragraph.js";
+import { VfImg as xt } from "./components/vf-img.js";
+import { VfIcon as St } from "./components/vf-icon.js";
+import { VfMenuBar as Ct } from "./components/vf-menu-bar.js";
+import { VfMenu as wt } from "./components/vf-menu.js";
+import { VfMenuItem as Tt } from "./components/vf-menu-item.js";
+import { VfList as Et } from "./components/vf-list.js";
+import { VfListItem as Dt } from "./components/vf-list-item.js";
+import { VfFieldset as Ot } from "./components/vf-fieldset.js";
+import { VfGrid as kt } from "./components/vf-grid.js";
+import { VfStack as At } from "./components/vf-stack.js";
+import { VfContainer as jt } from "./components/vf-container.js";
+import { CURSOR_ARROW as Mt, CURSOR_CROSSHAIR as Nt, CURSOR_I_BEAM as Pt, CURSOR_WAIT as Ft } from "./cursor-art.js";
+import { applyCursor as It } from "./cursor.js";
+export { Ee as BLINK_FLIPS, De as BLINK_INTERVAL_MS, fe as BUTTON_FACE, pe as BUTTON_FRAME, Me as CARET_DOWN, Ne as CHECKBOX_X, Pe as CHECKMARK, n as CLASSIC_DPI, r as CSS_REFERENCE_DPI, Mt as CURSOR_ARROW, Nt as CURSOR_CROSSHAIR, Pt as CURSOR_I_BEAM, Ft as CURSOR_WAIT, de as DocumentListenersController, Ce as DragController, st as FocusRuleController, ce as GridSnapController, E as PIXEL_GRID_METRICS, Oe as PRESS_HOLD_MS, w as PlacementController, Fe as RADIO_DOT, Ie as RADIO_FACE, Le as RADIO_RING, Re as RADIO_RING_PRESSED, ke as RENAME_DELAY_MS, me as RING_FRAME, he as RING_HOLE, ge as RING_INSET, _e as SCREEN_CORNER, ze as SLIDER_THUMB, Be as SLIDER_THUMB_FACE, Ve as STEPPER, He as STEPPER_DOWN_FILL, Ue as STEPPER_UP_FILL, i as SYSTEM_PX_IN_CSS_PX, u as ScaleController, Ge as ScrollRailController, Te as ScrollStateController, L as TILE_LATTICE, ie as TileRasterCache, gt as TrackWidthController, O as VF_BODY_FAMILY, j as VF_DISPLAY_FAMILY, tt as VfButton, Ze as VfButtonGroup, it as VfCheckbox, jt as VfContainer, xe as VfDesktop, Qe as VfDialog, Ot as VfFieldset, et as VfFormControl, kt as VfGrid, St as VfIcon, xt as VfImg, yt as VfLabel, Et as VfList, Dt as VfListItem, wt as VfMenu, Ct as VfMenuBar, Tt as VfMenuItem, Ye as VfModalDialog, pt as VfNumberField, mt as VfOption, bt as VfParagraph, T as VfPositioned, _t as VfProgressBar, at as VfRadio, ot as VfRadioGroup, qe as VfScrollArea, ht as VfSelect, $e as VfSeparator, Se as VfSized, vt as VfSlider, At as VfStack, nt as VfSwatch, ft as VfTextArea, ut as VfTextControlBase, dt as VfTextField, rt as VfToggleControl, Je as VfWindow, It as applyCursor, le as applyGridSnap, d as applyScale, e as defineElement, a as devicePxPerSystemPx, f as effectiveScale, we as emit, ct as focusModality, p as getScale, o as getZoom, We as glyphSvg, Xe as modalDialogStyles, m as onScaleChange, s as onZoomChange, ae as patternOverride, Ae as prefersReducedMotion, k as registerBodyFace, M as registerDisplayFace, D as registerEmbeddedFont, Ke as renderScrollRail, ue as requestGridSnap, c as resetZoomBaseline, je as runSelectionBlink, h as snapSys, g as snapToDevicePx, _ as snapToSystemPx, ve as steppedCornerClip, ye as steppedRectClip, be as steppedRingClip, v as sys, y as sysLength, b as sysLengths, x as systemPxQuantum, oe as tileGrid, R as tileImage, z as tileRaster, B as tileRects, V as tileSpan, S as toSys, C as toSysExact, lt as trackFocusModality, l as truePixelRatio, F as vfBase, A as vfBodyDecls, q as vfChromeFrame, N as vfDisplay, P as vfDisplayDecls, W as vfDots, t as vfElement, ne as vfField, Q as vfFocus, $ as vfFocusRing, ee as vfFocusUnderline, K as vfHardShadowDecls, J as vfModalFrame, Y as vfPanel, re as vfScrollRail, I as vfStaticText, G as vfStripes, se as vfTileGrid, H as vfTileMaskSize, U as vfTileSize, X as vfTitleBar, te as vfToggle, Z as vfWindowWidgets };

package/dist/menu-press.d.ts

@@ -0,0 +1,60 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import type { VfMenu } from './components/vf-menu.js';
+/**
+ * The coordinating side of a menu press — supplied by whoever owns the set of
+ * menus the gesture may travel across: `vf-menu-bar` for a bar of menus, the
+ * `vf-menu` itself when it stands alone. The controller never reaches for a
+ * parent or a sibling itself, so the bar keeps owning open state exactly as it
+ * does for click and keyboard input.
+ */
+export interface MenuPressTarget {
+    /** The menus the press may travel between, in bar order. */
+    menus(): readonly VfMenu[];
+    /** Drop `menu`'s panel, closing any sibling (the bar's single-open rule). */
+    open(menu: VfMenu): void;
+    /** Close the open menu with no selection. */
+    close(): void;
+}
+/**
+ * The System 7 press-drag-release gesture for pull-down menus — the same
+ * mechanic `vf-select` uses for its popup, and the way the real menu bar was
+ * driven: **press a title, keep the button down, slide onto a command, release
+ * over it to run it.** Sliding sideways onto another title switches menus
+ * mid-press; releasing over a disabled row, a separator, the title, or off the
+ * menu entirely closes with nothing chosen (the classic "release outside"
+ * cancel).
+ *
+ * The modern click-to-open style coexists, disambiguated by the gesture itself
+ * and resolved at the first release: a quick in-place tap on a title (under
+ * {@link PRESS_HOLD_MS}) leaves the menu dropped for a second, independent
+ * click, while a held in-place press closes it. Time is consulted *only* for an
+ * in-place release — any press that travels to another title or row is a
+ * drag-pick however long it took.
+ *
+ * Everything is hit-tested by **coordinates**, not by event target, for the
+ * same reason `vf-select` is: under touch, the pointer is implicitly captured
+ * by the element the gesture started on, so every move and the release itself
+ * are delivered to the pressed title no matter what they are actually over.
+ *
+ * The host binds {@link onPointerDown} to a `pointerdown` on itself — presses
+ * on titles and rows both bubble up composed — and supplies a
+ * {@link MenuPressTarget}. Everything else (tracking to the release anywhere on
+ * the page, the row highlight, classification) lives here.
+ */
+export declare class MenuPressController implements ReactiveController {
+    #private;
+    private readonly target;
+    constructor(host: ReactiveControllerHost, target: MenuPressTarget);
+    /**
+     * Host torn down mid-gesture. The listener controller detaches itself; drop
+     * the press state and any highlight it stamped on a row, which the normal
+     * close path is no longer going to run for.
+     */
+    hostDisconnected(): void;
+    /**
+     * Starts a press: drops the menu under the pointer if it isn't already, then
+     * tracks the press to its release. Both interaction styles begin here; the
+     * gesture is classified in {@link #onPointerUp}.
+     */
+    onPointerDown: (event: PointerEvent) => void;
+}