vintage-frames 0.3.0 → 0.5.0

package/dist/components/vf-slider.js

@@ -1,16 +1,16 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController as t, sys as n, toSys as r } from "../scale.js";
-import i from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { VfPositioned as a } from "../position.js";
-import { vfBase as o } from "../styles/recipes/host.js";
-import { vfFocusUnderline as s } from "../styles/recipes/focus.js";
-import { GridSnapController as c } from "../grid-snap.js";
-import { emit as l, emitNative as u } from "../events.js";
-import { SLIDER_THUMB as d, SLIDER_THUMB_FACE as f } from "../glyphs.js";
-import { VfFormControl as p } from "../form-control.js";
-import { FocusRuleController as m } from "../focus-modality.js";
-import { decimalsOf as h } from "../number.js";
-import { TrackWidthController as g } from "../track-width.js";
+import { emit as e, emitNative as t } from "../events.js";
+import { vfElement as n } from "../define.js";
+import { ScaleController as r, sys as i, toSys as a } from "../scale.js";
+import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { VfPositioned as s } from "../position.js";
+import { vfBase as c } from "../styles/recipes/host.js";
+import { vfFocusUnderline as l } from "../styles/recipes/focus.js";
+import { TrackWidthController as u } from "../track-width.js";
+import { GridSnapController as d } from "../grid-snap.js";
+import { SLIDER_THUMB as f, SLIDER_THUMB_FACE as p } from "../glyphs.js";
+import { VfFormControl as m } from "../form-control.js";
+import { FocusRuleController as h } from "../focus-modality.js";
+import { decimalsOf as g } from "../number.js";
 import { css as _, html as v } from "lit";
 import { property as y, query as b } from "lit/decorators.js";
 //#region src/components/vf-slider.ts
@@ -21,9 +21,9 @@ function D(e, t) {
 	};
 	return r(1, 0, e - 2, 1), r(1, 3, e - 2, 1), r(0, 1, 1, 2), r(e - 1, 1, 1, 2), r(1, 1, Math.min(Math.max(t, 0), e - 1) - 1, 2), n.join("");
 }
-var O = class extends a(p) {
+var O = class extends s(m) {
 	static {
-		this.styles = [o, _`
+		this.styles = [c, _`
       :host {
         /* Padding just leaves room for the thumb's focus ring; the thumb itself
            stays within the rail (its travel is inset by half its width). */
@@ -102,7 +102,7 @@ var O = class extends a(p) {
       }
       .track.vf-focus-rule::after {
         --vf-focus-underline-offset: ${3}px;
-        ${s}
+        ${l}
       }
     `];
 	}
@@ -110,7 +110,7 @@ var O = class extends a(p) {
 	#t;
 	#n;
 	constructor() {
-		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new g(this, () => this.track), this.scale = new t(this), this.gridSnap = new c(this), this.selfManagedTabIndex = !1, this.#e = new m(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
+		super(), this.value = 0, this.min = 0, this.max = 100, this.step = 1, this.name = "", this.label = "", this.trackSize = new u(this, () => this.track), this.scale = new r(this), this.gridSnap = new d(this), this.selfManagedTabIndex = !1, this.#e = new h(this), this.#t = 0, this.#n = !1, this.#f = (e) => {
 			if (!(this.isDisabled || e.button !== 0)) {
 				e.preventDefault(), this.#e.suppress(), this.focus(), this.#n = !0, this.#t = this.value;
 				try {
@@ -181,7 +181,7 @@ var O = class extends a(p) {
 	}
 	#o(e) {
 		let t = this.#i, n = Math.round((e - this.min) / t), r = this.#a(this.min + n * t);
-		return Number(r.toFixed(h(t)));
+		return Number(r.toFixed(g(t)));
 	}
 	get #s() {
 		let e = Number.isFinite(this.value) ? this.value : this.min;
@@ -193,16 +193,16 @@ var O = class extends a(p) {
 	#l(e) {
 		e !== this.value && (this.value = e, this.#u("vf-input"));
 	}
-	#u(e) {
-		l(this, e, { value: this.value }), u(this, e === "vf-input" ? "input" : "change");
+	#u(n) {
+		e(this, n, { value: this.value }), t(this, n === "vf-input" ? "input" : "change");
 	}
 	#d(e) {
 		let t = this.track?.getBoundingClientRect();
 		if (!t) return this.value;
-		let r = t.width - n(x, this);
-		if (r <= 0) return this.value;
-		let i = Math.min(Math.max((e - t.left - n(w, this)) / r, 0), 1);
-		return this.#o(this.min + i * this.#r);
+		let n = t.width - i(x, this);
+		if (n <= 0) return this.value;
+		let r = Math.min(Math.max((e - t.left - i(w, this)) / n, 0), 1);
+		return this.#o(this.min + r * this.#r);
 	}
 	#f;
 	#p;
@@ -213,7 +213,7 @@ var O = class extends a(p) {
 		(n || t) && this.syncFormValue(String(this.#s)), e.has("min") && (this.internals.ariaValueMin = String(this.min)), e.has("max") && (this.internals.ariaValueMax = String(this.max)), n && (this.internals.ariaValueNow = String(this.#s)), e.has("label") && (this.internals.ariaLabel = this.label || null), t && (this.internals.ariaDisabled = this.isDisabled ? "true" : "false", this.selfManagedTabIndex && (this.tabIndex = this.isDisabled ? -1 : 0));
 	}
 	render() {
-		let e = r(this.trackSize.width, this), t = Math.round(this.#c * Math.max(0, e - x)), i = n(t, this), a = t + C;
+		let e = a(this.trackSize.width, this), t = Math.round(this.#c * Math.max(0, e - x)), n = i(t, this), r = t + C;
 		return v`
       <div
         class="track vf-snap ${this.#e.marked ? "vf-focus-rule" : ""} ${this.isDisabled ? "disabled" : ""}"
@@ -227,29 +227,29 @@ var O = class extends a(p) {
         ${e >= 2 ? v`<svg
               class="rail"
               part="rail"
-              width=${n(e, this)}
-              height=${n(T, this)}
+              width=${i(e, this)}
+              height=${i(T, this)}
               viewBox="0 0 ${e} ${T}"
               shape-rendering="crispEdges"
               aria-hidden="true"
             >
-              <path d=${D(e, a)}></path>
+              <path d=${D(e, r)}></path>
             </svg>` : null}
-        <span class="thumb" part="thumb" style="left: ${i}px">
+        <span class="thumb" part="thumb" style="left: ${n}px">
           <svg
             class="thumb-glyph"
             viewBox="0 0 ${x} ${S}"
             shape-rendering="crispEdges"
             aria-hidden="true"
           >
-            <path class="thumb-face" d=${f.d}></path>
-            <path class="thumb-outline" d=${d.d}></path>
+            <path class="thumb-face" d=${p.d}></path>
+            <path class="thumb-outline" d=${f.d}></path>
           </svg>
         </span>
       </div>
     `;
 	}
 };
-i([y({ type: Number })], O.prototype, "value", void 0), i([y({ type: Number })], O.prototype, "min", void 0), i([y({ type: Number })], O.prototype, "max", void 0), i([y({ type: Number })], O.prototype, "step", void 0), i([y({ reflect: !0 })], O.prototype, "name", void 0), i([y()], O.prototype, "label", void 0), i([b(".track")], O.prototype, "track", void 0), O = i([e("vf-slider")], O);
+o([y({ type: Number })], O.prototype, "value", void 0), o([y({ type: Number })], O.prototype, "min", void 0), o([y({ type: Number })], O.prototype, "max", void 0), o([y({ type: Number })], O.prototype, "step", void 0), o([y({ reflect: !0 })], O.prototype, "name", void 0), o([y()], O.prototype, "label", void 0), o([b(".track")], O.prototype, "track", void 0), O = o([n("vf-slider")], O);
 //#endregion
 export { O as VfSlider };

package/dist/components/vf-window.js

@@ -1,46 +1,46 @@
-import { vfElement as e } from "../define.js";
-import { ScaleController 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 { PlacementController as o, VfPositioned as s, warnMovableContract as c } from "../position.js";
-import { vfBase as l } from "../styles/recipes/host.js";
-import { DOT_RECTS as u, DOT_SPAN as d, vfDots as f, vfStripes as p } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as m } from "../styles/recipes/surface.js";
-import { vfTitleBar as h, vfWindowWidgets as g } from "../styles/recipes/title-bar.js";
-import { vfFocus as _ } from "../styles/recipes/focus.js";
-import { TileRasterCache as v, patternOverride as y, tileGrid as b, vfTileGrid as x } from "../tile-grid.js";
-import { GridSnapController as S } from "../grid-snap.js";
-import { VfSized as C } from "../size.js";
-import { DragController as w } from "../drag.js";
-import { TitleCenterController as T, chromeTitleBar as E, closeBox as D, widgetLabel as O, zoomBox as k } from "../chrome.js";
-import { emit as A } from "../events.js";
+import { emit as e } from "../events.js";
+import { vfElement as t } from "../define.js";
+import { ScaleController as n, snapSys as r, sysLength as i, toSysExact as a } from "../scale.js";
+import o from "../_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
+import { PlacementController as s, VfPositioned as c, warnMovableContract as l } from "../position.js";
+import { vfBase as u } from "../styles/recipes/host.js";
+import { DOT_MOTIF as d, DOT_RECTS as f, DOT_SPAN as p, vfDots as m, vfStripes as h } from "../styles/recipes/pattern.js";
+import { vfChromeFrame as g } from "../styles/recipes/surface.js";
+import { vfTitleBar as _, vfWindowWidgets as v } from "../styles/recipes/title-bar.js";
+import { vfFocus as y } from "../styles/recipes/focus.js";
+import { TileRasterCache as b, patternOverride as x, tileGrid as S, vfTileGrid as C } from "../tile-grid.js";
+import { GridSnapController as w } from "../grid-snap.js";
+import { VfSized as T } from "../size.js";
+import { DragController as E } from "../drag.js";
+import { TitleCenterController as D, chromeTitleBar as O, closeBox as k, widgetLabel as A, zoomBox as j } from "../chrome.js";
 import "./vf-scroll-area.js";
-import { LitElement as j, css as M, html as N, nothing as P } from "lit";
-import { property as F, state as I } from "lit/decorators.js";
+import { LitElement as M, css as N, html as P, nothing as F } from "lit";
+import { property as I, state as L } from "lit/decorators.js";
 //#region src/components/vf-window.ts
-var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
+var R = 80, z = 54, B = 24, V = 8, H = class extends T(c(M)) {
 	constructor(...e) {
-		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new t(this), this.gridSnap = new S(this), this.titleCenter = new T(this), this._dotsPattern = "", this.#e = new v(), this.#t = (e, t, n) => {
-			let r = i(this.offsetWidth, this);
+		super(...e), this.heading = "", this.active = !0, this.closable = !0, this.zoomable = !1, this.movable = !1, this.resizable = !1, this.flush = !1, this._hasStatus = !1, this.scale = new n(this), this.gridSnap = new w(this), this.titleCenter = new D(this), this._dotsPattern = "", this.#e = new b(), this.#t = (e, t, n) => {
+			let r = a(this.offsetWidth, this);
 			return {
-				x: Math.min(Math.max(e, z - r), n.width - z),
-				y: Math.min(Math.max(t, 0), Math.max(0, n.height - z))
+				x: Math.min(Math.max(e, B - r), n.width - B),
+				y: Math.min(Math.max(t, 0), Math.max(0, n.height - B))
 			};
-		}, this._placement = new o(this, (e, t, n) => this.#t(e, t, n)), this._drag = new w(this, {
+		}, this._placement = new s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new E(this, {
 			onDragStart: (e) => !this.movable || e.button !== 0 || e.composedPath().some((e) => e instanceof HTMLElement && e.classList.contains("box")) ? null : (this.#i(), this._placement.seed()),
 			onDrag: (e, t) => this._placement.moveTo(e, t)
 		}), this._resizeState = null, this.#n = !1, this.#r = !1;
 	}
 	static {
 		this.styles = [
-			l,
-			p,
-			f,
-			x,
-			_,
-			m,
+			u,
 			h,
+			m,
+			C,
+			y,
 			g,
-			M`
+			_,
+			v,
+			N`
       :host {
         display: block;
         position: relative;
@@ -281,27 +281,27 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = y(this, "--vf-dots-pattern"));
+		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = x(this, "--vf-dots-pattern"));
 	}
 	_dotsTexture() {
 		if (this.width == null) return;
 		let e = Math.max(1, this.width - 2);
-		if (this._dotsPattern) return b({
-			cols: Math.ceil(e / d),
+		if (this._dotsPattern) return S({
+			cols: Math.ceil(e / p),
 			rows: 1,
-			tile: d
+			tile: p
 		});
-		let t = Math.ceil((e + 2) / d) * d, n = B + 2;
-		return N`<div
+		let t = Math.ceil((e + d) / p) * p, n = V + d;
+		return P`<div
       class="vf-tile-raster"
-      style="width:${r(t)};height:${r(n)};background-image:${this.#e.for(2, 2, u, t, n)}"
+      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(d, d, f, t, n)}"
     ></div>`;
 	}
 	#t;
 	updated() {
 		this.#a();
-		let e = this._resizeState;
-		e?.emitPending && (e.emitPending = !1, A(this, "vf-resize", {
+		let t = this._resizeState;
+		t?.emitPending && (t.emitPending = !1, e(this, "vf-resize", {
 			width: this.width,
 			height: this.height,
 			commit: !1
@@ -310,7 +310,7 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 	#n;
 	#r;
 	#i() {
-		this.#r ||= c(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
+		this.#r ||= l(this, `vf-window${this.heading ? ` ("${this.heading}")` : ""}`, "<vf-window movable top=\"30\" left=\"40\" width=\"240\" height=\"176\">");
 	}
 	#a() {
 		if (this.#n) return;
@@ -325,10 +325,10 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 		this._hasStatus = t.assignedElements().length > 0;
 	}
 	_onCloseClick() {
-		A(this, "vf-close", { reason: "close" });
+		e(this, "vf-close", { reason: "close" });
 	}
 	_onZoomClick() {
-		A(this, "vf-zoom", {});
+		e(this, "vf-zoom", {});
 	}
 	_onGrowPointerDown(e) {
 		if (!this.resizable || e.button !== 0) return;
@@ -337,8 +337,8 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 			pointerId: e.pointerId,
 			startX: e.clientX,
 			startY: e.clientY,
-			baseWidth: i(t.width, this),
-			baseHeight: i(t.height, this),
+			baseWidth: a(t.width, this),
+			baseHeight: a(t.height, this),
 			emitPending: !1,
 			resized: !1
 		}, e.currentTarget.setPointerCapture(e.pointerId), e.preventDefault();
@@ -346,49 +346,49 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let r = n(Math.max(L, t.baseWidth + i(e.clientX - t.startX, this)), this), a = n(Math.max(R, t.baseHeight + i(e.clientY - t.startY, this)), this);
-		(r !== this.width || a !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = r, this.height = a;
+		let n = r(Math.max(R, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(z, t.baseHeight + a(e.clientY - t.startY, this)), this);
+		(n !== this.width || i !== this.height) && (t.emitPending = !0, t.resized = !0), this.width = n, this.height = i;
 	}
-	_onGrowPointerEnd(e) {
-		let t = this._resizeState;
-		if (!t || e.pointerId !== t.pointerId) return;
+	_onGrowPointerEnd(t) {
+		let n = this._resizeState;
+		if (!n || t.pointerId !== n.pointerId) return;
 		this._resizeState = null;
-		let n = e.currentTarget;
-		n.hasPointerCapture(e.pointerId) && n.releasePointerCapture(e.pointerId), t.resized && A(this, "vf-resize", {
+		let r = t.currentTarget;
+		r.hasPointerCapture(t.pointerId) && r.releasePointerCapture(t.pointerId), n.resized && e(this, "vf-resize", {
 			width: this.width,
 			height: this.height,
 			commit: !0
 		});
 	}
 	render() {
-		return N`
+		return P`
       <div
         class="vf-frame vf-snap"
         part="frame"
         role="group"
-        aria-labelledby=${this.heading ? "title" : P}
+        aria-labelledby=${this.heading ? "title" : F}
       >
-        ${E(this._drag, N`
-            ${this.closable ? D(O("Close", this.heading), this._onCloseClick) : P}
+        ${O(this._drag, P`
+            ${this.closable ? k(A("Close", this.heading), this._onCloseClick) : F}
             <span class="vf-title" part="title" id="title">${this.heading}</span>
-            ${this.zoomable ? k(O("Zoom", this.heading), this._onZoomClick) : P}
+            ${this.zoomable ? j(A("Zoom", this.heading), this._onZoomClick) : F}
           `, this.variant === "utility" ? "vf-dots" : "vf-stripes", this.variant === "utility" ? this._dotsTexture() : void 0)}
         <div class="body" part="body">
-          ${this.scrollbars ? N`
+          ${this.scrollbars ? P`
                 <vf-scroll-area
                   class="edge-scroll"
                   axis=${this.scrollbars}
-                  label=${this.heading || P}
+                  label=${this.heading || F}
                   exportparts="viewport"
                 >
                   <slot></slot>
                 </vf-scroll-area>
-              ` : N`<slot></slot>`}
+              ` : P`<slot></slot>`}
         </div>
         <div class="status ${this._hasStatus ? "" : "empty"}" part="status-bar">
           <slot name="status" @slotchange=${this._onStatusSlotChange}></slot>
         </div>
-        ${this.resizable ? N`
+        ${this.resizable ? P`
               <div
                 class="grow"
                 part="grow-box"
@@ -398,29 +398,29 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends C(s(j)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : P}
+            ` : F}
       </div>
     `;
 	}
 };
-a([F({ reflect: !0 })], V.prototype, "variant", void 0), a([F()], V.prototype, "heading", void 0), a([F({
+o([I({ reflect: !0 })], H.prototype, "variant", void 0), o([I()], H.prototype, "heading", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "active", void 0), a([F({
+})], H.prototype, "active", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "closable", void 0), a([F({
+})], H.prototype, "closable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "zoomable", void 0), a([F({
+})], H.prototype, "zoomable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "movable", void 0), a([F({
+})], H.prototype, "movable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "resizable", void 0), a([F({
+})], H.prototype, "resizable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "flush", void 0), a([F({ reflect: !0 })], V.prototype, "scrollbars", void 0), a([I()], V.prototype, "_hasStatus", void 0), V = a([e("vf-window")], V);
+})], H.prototype, "flush", void 0), o([I({ reflect: !0 })], H.prototype, "scrollbars", void 0), o([L()], H.prototype, "_hasStatus", void 0), H = o([t("vf-window")], H);
 //#endregion
-export { V as VfWindow };
+export { H as VfWindow };

package/dist/index.d.ts

@@ -101,6 +101,20 @@ export type { TileRect } from './styles/base.js';
  * memoizes the encoded raster against its size.
  */
 export { vfTileGrid, tileGrid, patternOverride, TileRasterCache } from './tile-grid.js';
+/**
+ * The standard pattern set — the 38 MacPaint fills as 8-byte QuickDraw
+ * patterns (`PATTERNS`, named; `PATTERN_NAMES` in palette order), the
+ * attribute grammar (`parsePattern` reads a name or sixteen hex digits,
+ * `patternHex` writes one back), and the adapters onto the tile machinery
+ * (`patternMotif` on the minimal cell, `patternRects` on the full 8×8). The
+ * fill itself is `PatternFillController` + `vfPatternFill`: a pattern
+ * painted as a box's own background, exact at every density and zoom — what
+ * `vf-container pattern="…"` does.
+ */
+export { PATTERNS, PATTERN_NAMES, PATTERN_SIZE, parsePattern, patternHex, patternMotif, patternRects, } from './patterns.js';
+export type { Pattern, PatternMotif, PatternName } from './patterns.js';
+export { PatternFillController, vfPatternFill } from './pattern-fill.js';
+export type { PatternFillOptions } from './pattern-fill.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';

package/dist/index.js

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