vintage-frames 0.4.0 → 0.5.0

package/dist/components/vf-window.js

@@ -4,28 +4,28 @@ import { ScaleController as n, snapSys as r, sysLength as i, toSysExact as a } f
 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_RECTS as d, DOT_SPAN as f, vfDots as p, vfStripes as m } from "../styles/recipes/pattern.js";
-import { vfChromeFrame as h } from "../styles/recipes/surface.js";
-import { vfTitleBar as g, vfWindowWidgets as _ } from "../styles/recipes/title-bar.js";
-import { vfFocus as v } from "../styles/recipes/focus.js";
-import { TileRasterCache as y, patternOverride as b, tileGrid as x, vfTileGrid as S } from "../tile-grid.js";
-import { GridSnapController as C } from "../grid-snap.js";
-import { VfSized as w } from "../size.js";
-import { DragController as T } from "../drag.js";
-import { TitleCenterController as E, chromeTitleBar as D, closeBox as O, widgetLabel as k, zoomBox as A } from "../chrome.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 w(c(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 n(this), this.gridSnap = new C(this), this.titleCenter = new E(this), this._dotsPattern = "", this.#e = new y(), this.#t = (e, t, n) => {
+		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 s(this, (e, t, n) => this.#t(e, t, n)), this._drag = new T(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;
@@ -33,14 +33,14 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	static {
 		this.styles = [
 			u,
-			m,
-			p,
-			S,
-			v,
 			h,
+			m,
+			C,
+			y,
 			g,
 			_,
-			M`
+			v,
+			N`
       :host {
         display: block;
         position: relative;
@@ -281,20 +281,20 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	}
 	#e;
 	willUpdate(e) {
-		super.willUpdate(e), this.variant === "utility" && (this._dotsPattern = b(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 x({
-			cols: Math.ceil(e / f),
+		if (this._dotsPattern) return S({
+			cols: Math.ceil(e / p),
 			rows: 1,
-			tile: f
+			tile: p
 		});
-		let t = Math.ceil((e + 2) / f) * f, 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:${i(t)};height:${i(n)};background-image:${this.#e.for(2, 2, d, t, n)}"
+      style="width:${i(t)};height:${i(n)};background-image:${this.#e.for(d, d, f, t, n)}"
     ></div>`;
 	}
 	#t;
@@ -346,7 +346,7 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 	_onGrowPointerMove(e) {
 		let t = this._resizeState;
 		if (!t || e.pointerId !== t.pointerId) return;
-		let n = r(Math.max(L, t.baseWidth + a(e.clientX - t.startX, this)), this), i = r(Math.max(R, t.baseHeight + a(e.clientY - t.startY, this)), this);
+		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(t) {
@@ -361,34 +361,34 @@ var L = 80, R = 54, z = 24, B = 8, V = class extends w(c(j)) {
 		});
 	}
 	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}
       >
-        ${D(this._drag, N`
-            ${this.closable ? O(k("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 ? A(k("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 w(c(j)) {
                 @pointercancel=${this._onGrowPointerEnd}
                 @lostpointercapture=${this._onGrowPointerEnd}
               ></div>
-            ` : P}
+            ` : F}
       </div>
     `;
 	}
 };
-o([F({ reflect: !0 })], V.prototype, "variant", void 0), o([F()], V.prototype, "heading", void 0), o([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), o([F({
+})], H.prototype, "active", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "closable", void 0), o([F({
+})], H.prototype, "closable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "zoomable", void 0), o([F({
+})], H.prototype, "zoomable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "movable", void 0), o([F({
+})], H.prototype, "movable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "resizable", void 0), o([F({
+})], H.prototype, "resizable", void 0), o([I({
 	type: Boolean,
 	reflect: !0
-})], V.prototype, "flush", void 0), o([F({ reflect: !0 })], V.prototype, "scrollbars", void 0), o([I()], V.prototype, "_hasStatus", void 0), V = o([t("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

@@ -11,61 +11,63 @@ import { vfDisplay as P, vfDisplayDecls as F } from "./styles/recipes/display-fa
 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 { vfDots as G, vfStripes as K } from "./styles/recipes/pattern.js";
-import { vfHardShadowDecls as q } from "./styles/recipes/shadow.js";
-import { vfChromeFrame as J, vfModalFrame as Y, vfPanel as X } from "./styles/recipes/surface.js";
-import { vfTitleBar as Z, vfWindowWidgets as Q } from "./styles/recipes/title-bar.js";
-import { vfFocus as $, vfFocusRing as ee, vfFocusUnderline as te } from "./styles/recipes/focus.js";
-import { vfToggle as ne } from "./styles/recipes/toggle.js";
-import { vfField as re } from "./styles/recipes/field.js";
-import { vfScrollRail as ie } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as ae, patternOverride as oe, tileGrid as se, vfTileGrid as ce } from "./tile-grid.js";
-import { GridSnapController 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 { 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, fe as BUTTON_FACE, pe as BUTTON_FRAME, je as CARET_DOWN, Me as CHECKBOX_X, Ne as CHECKMARK, r as CLASSIC_DPI, i as CSS_REFERENCE_DPI, jt as CURSOR_ARROW, Mt as CURSOR_CROSSHAIR, Nt as CURSOR_I_BEAM, Pt as CURSOR_WAIT, de as DocumentListenersController, Ce as DragController, ot as FocusRuleController, le as GridSnapController, D as PIXEL_GRID_METRICS, De as PRESS_HOLD_MS, T as PlacementController, Pe as RADIO_DOT, Fe as RADIO_FACE, Ie as RADIO_RING, Le as RADIO_RING_PRESSED, Oe as RENAME_DELAY_MS, me as RING_FRAME, he as RING_HOLE, ge as RING_INSET, _e 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, a as SYSTEM_PX_IN_CSS_PX, d as ScaleController, We as ScrollRailController, we as ScrollStateController, R as TILE_LATTICE, ae as TileRasterCache, ht as TrackWidthController, k as VF_BODY_FAMILY, M as VF_DISPLAY_FAMILY, et as VfButton, Xe as VfButtonGroup, rt as VfCheckbox, At as VfContainer, xe 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, E as VfPositioned, gt as VfProgressBar, it as VfRadio, at as VfRadioGroup, Ke as VfScrollArea, mt as VfSelect, Qe as VfSeparator, Se 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, f as applyScale, t as defineElement, o as devicePxPerSystemPx, p as effectiveScale, e as emit, st as focusModality, m as getScale, s as getZoom, Ue as glyphSvg, Ye as modalDialogStyles, h as onScaleChange, c as onZoomChange, oe as patternOverride, ke as prefersReducedMotion, A as registerBodyFace, N as registerDisplayFace, O as registerEmbeddedFont, Ge as renderScrollRail, ue as requestGridSnap, l as resetZoomBaseline, Ae as runSelectionBlink, g as snapSys, _ as snapToDevicePx, v as snapToSystemPx, ve as steppedCornerClip, ye as steppedRectClip, be as steppedRingClip, y as sys, b as sysLength, x as sysLengths, S as systemPxQuantum, se as tileGrid, z as tileImage, B as tileRaster, V as tileRects, H as tileSpan, C as toSys, w as toSysExact, ct as trackFocusModality, u as truePixelRatio, I as vfBase, j as vfBodyDecls, J as vfChromeFrame, P as vfDisplay, F as vfDisplayDecls, G as vfDots, n as vfElement, re as vfField, $ as vfFocus, ee as vfFocusRing, te as vfFocusUnderline, q as vfHardShadowDecls, Y as vfModalFrame, X as vfPanel, ie as vfScrollRail, L as vfStaticText, K as vfStripes, ce as vfTileGrid, U as vfTileMaskSize, W as vfTileSize, Z as vfTitleBar, ne as vfToggle, Q as vfWindowWidgets };
+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 };

package/dist/pattern-fill.d.ts

@@ -0,0 +1,91 @@
+import { type CSSResult, type ReactiveController, type ReactiveControllerHost } from 'lit';
+import { type Pattern } from './patterns.js';
+/** What a component hands the controller. */
+export interface PatternFillOptions {
+    /** The element whose background the pattern paints — a component's own
+     *  snapped box, so the fill rides the grid-snap correction with it. */
+    getBox: () => HTMLElement | null | undefined;
+    /** The resolved pattern, or null to paint nothing ({@link parsePattern}
+     *  turns an attribute value into one). */
+    getPattern: () => Pattern | null | undefined;
+    /**
+     * The box's declared size in system px, per axis. A declared axis is used
+     * as it is — exact, and free of any measurement; an axis left `null` or
+     * `undefined` is measured off the box instead (a `ResizeObserver`,
+     * `toSys`-rounded). Omit the whole option to measure both.
+     */
+    getSize?: () => {
+        width?: number | null;
+        height?: number | null;
+    } | null | undefined;
+}
+/**
+ * Paints a {@link Pattern} as a box's own background — the fill behind
+ * `vf-container pattern="…"` and `vf-desktop pattern="…"`.
+ *
+ * It is the exact-fill idiom (src/tile-grid.ts) in its background form: the
+ * motif is encoded as one raster at one image px per system px
+ * (`tileRaster`, cached by pattern and size), sized in system px to the box
+ * ceiled up to whole pattern cells plus one cell of overdraw, and stretched
+ * onto that stated size under `image-rendering: pixelated`. Nearest-neighbor
+ * sampling can only emit source colors and one image has no interior seams,
+ * so the fill is 1-bit at every density and zoom — the same argument the
+ * desktop dither rests on. A `background-size` stated in system px is one
+ * stored length quantized once over the whole image (≤ 1/128 CSS px), not a
+ * repeat, and the box's background painting area crops the overdraw.
+ *
+ * A background rather than a child element, on purpose: it paints below all
+ * content by definition — no `isolation: isolate` + `z-index: -1`, so a
+ * patterned box never becomes a stacking context that traps a slotted
+ * control's drop-open panel under a later sibling — and it clips itself, so
+ * the box keeps `overflow: visible` (a container's outgrowing content
+ * overflows by contract). The one thing a background costs is that
+ * `image-rendering` is an inherited property: {@link vfPatternFill} sets it
+ * on the box only while patterned and hands `auto` back to the slot, so
+ * slotted content renders as it did.
+ *
+ * What it writes, all on the box's inline style and removed together the
+ * moment there is nothing to paint: `--_vf-pattern-image` (the raster) and
+ * `--_vf-pattern-size` (two live `sysLength`s). Custom-property channels,
+ * not `background-image` itself, so the recipe's forced-colors rule can
+ * out-cascade them without `!important` — an inline `background-image`
+ * could not be overridden from a stylesheet. The paper is the recipe's, a
+ * token: `var(--vf-white)` behind ink that is literal black, like every kit
+ * raster. Density and zoom re-encode nothing: the raster is keyed on system
+ * px, and the stated lengths are live against `--vf-scale`.
+ *
+ * Phase is anchored at the box's top-left — where the desktop, trough and
+ * swatch anchor theirs. Two same-pattern boxes meeting at an offset that is
+ * not a multiple of 8 show a phase seam; a port-anchored phase would be a
+ * contained follow-up, not a change here.
+ */
+export declare class PatternFillController implements ReactiveController {
+    #private;
+    constructor(host: ReactiveControllerHost & HTMLElement, opts: PatternFillOptions);
+    /** The raster's current box in system px (overdraw included), or null
+     *  while nothing is painted. */
+    get size(): {
+        width: number;
+        height: number;
+    } | null;
+    hostUpdated(): void;
+}
+/**
+ * The rules behind {@link PatternFillController}, for the box it paints:
+ * give the box the `vf-pattern-fill` class always, and `vf-patterned` while
+ * a pattern is resolved (the component's template knows).
+ *
+ * Painting: the raster the controller wrote, at the size it stated, once
+ * (`no-repeat` — the overdraw is the repeat), nearest-neighbor. The paper
+ * and the pixelation ride the `vf-patterned` state so an unpatterned box
+ * paints exactly nothing and inherits nothing new. `image-rendering`
+ * inherits, so the slot hands `auto` back to slotted content: a consumer's
+ * own `<img>` renders as it would anywhere else, and a kit element that
+ * wants nearest-neighbor (`vf-img`, a `vf-icon`) says so itself. A page
+ * that set `pixelated` on an ancestor gets `auto` inside a patterned box —
+ * its own declaration on the child still wins, as everywhere.
+ *
+ * Forced colors: the image goes, the paper is the remapped Canvas — the
+ * desktop's posture, a backdrop being decoration.
+ */
+export declare const vfPatternFill: CSSResult;

package/dist/pattern-fill.js

@@ -0,0 +1,74 @@
+import { sysLength as e, toSys as t } from "./scale.js";
+import { patternHex as n, patternMotif as r } from "./patterns.js";
+import { TileRasterCache as i } from "./tile-grid.js";
+import { TrackWidthController as a } from "./track-width.js";
+import { css as o } from "lit";
+//#region src/pattern-fill.ts
+var s = class {
+	#e;
+	#t;
+	#n = new i();
+	#r;
+	#i = null;
+	#a = "";
+	#o = "";
+	#s = null;
+	constructor(e, t) {
+		this.#e = e, this.#t = t, this.#r = new a(e, () => {
+			if (!t.getPattern()) return null;
+			let e = t.getSize?.();
+			return e == null || e.width == null || e.height == null ? t.getBox() : null;
+		}), e.addController(this);
+	}
+	get size() {
+		return this.#s;
+	}
+	hostUpdated() {
+		this.#c();
+	}
+	#c() {
+		let t = this.#t.getBox() ?? null;
+		t !== this.#i && (this.#u(), this.#i = t);
+		let i = this.#t.getPattern() ?? null;
+		if (!t || !i) {
+			this.#u();
+			return;
+		}
+		let a = this.#t.getSize?.() ?? null, o = c(a?.width) ?? this.#l(this.#r.width), s = c(a?.height) ?? this.#l(this.#r.height);
+		if (!o || !s) {
+			this.#u();
+			return;
+		}
+		let l = (e) => Math.ceil((e + 8) / 8) * 8, u = l(o), d = l(s), f = r(i), p = this.#n.for(f.width, f.height, f.rects, u, d, n(i)), m = `${e(u)} ${e(d)}`;
+		this.#s = {
+			width: u,
+			height: d
+		}, (p !== this.#a || m !== this.#o) && (this.#a = p, this.#o = m, t.style.setProperty("--_vf-pattern-image", p), t.style.setProperty("--_vf-pattern-size", m));
+	}
+	#l(e) {
+		return e > 0 ? t(e, this.#e) : 0;
+	}
+	#u() {
+		this.#s = null, !(!this.#a && !this.#o) && (this.#a = "", this.#o = "", this.#i?.style.removeProperty("--_vf-pattern-image"), this.#i?.style.removeProperty("--_vf-pattern-size"));
+	}
+}, c = (e) => typeof e == "number" && Number.isFinite(e) && e > 0 ? Math.trunc(e) : null, l = o`
+  .vf-pattern-fill {
+    background-image: var(--_vf-pattern-image, none);
+    background-size: var(--_vf-pattern-size, auto);
+    background-repeat: no-repeat;
+  }
+  .vf-pattern-fill.vf-patterned {
+    background-color: var(--vf-white, #fff);
+    image-rendering: pixelated;
+  }
+  .vf-pattern-fill.vf-patterned > slot {
+    image-rendering: auto;
+  }
+  @media (forced-colors: active) {
+    .vf-pattern-fill {
+      background-image: none;
+    }
+  }
+`;
+//#endregion
+export { s as PatternFillController, l as vfPatternFill };

package/dist/patterns.d.ts

@@ -0,0 +1,80 @@
+import type { TileRect } from './styles/recipes/tile.js';
+/**
+ * The standard Macintosh pattern set — the 38 fills of MacPaint's pattern
+ * bar and the System file's `PAT#` 0 — as 8-byte bitmaps, with the helpers
+ * that turn one into the art the kit's exact-fill machinery draws
+ * (src/pattern-fill.ts paints one as a box's background; src/tile-grid.ts
+ * is the raster mechanism under it).
+ *
+ * A {@link Pattern} is the QuickDraw type: eight rows, top row first, each a
+ * byte whose bit 7 is the leftmost pixel and whose set bits are ink. That is
+ * also what a `pattern` attribute spells as a custom value — sixteen hex
+ * digits, the way a PAT resource read in ResEdit — so the library, the
+ * attribute and the data model are one representation.
+ *
+ * Transcribed 2026-08-22 from a 2× capture of the tear-off pattern palette
+ * (a windoid over a 5×8 grid of 19×16 cells on a 20×17 pitch, the first two
+ * merged into the current-pattern well; native pixel (x, y) at image
+ * (2x+1, 2y+1), cell (c, r) at (5 + 20c, 15 + 17r)) and normalized to the
+ * palette window's port origin (5, 4) — the phase QuickDraw drew them at.
+ * Under it the three toolbox constants come out byte-for-byte (`gray` AA55,
+ * `ltGray` 8822, `dkGray` DD77), and so do the kit's own desktop dither,
+ * scroll trough and windoid dots, which are those three patterns. Designed
+ * at Apple for MacPaint and the System; stated here as data, the way
+ * `fonts/VF-*.glyphs.txt` states the strikes. The capture is not in the
+ * repo. docs/PATTERNS.md is the consumer table.
+ */
+export type Pattern = readonly [
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number,
+    number
+];
+/** The library's names, in palette order. */
+export type PatternName = 'black' | 'gray-50' | 'white' | 'gray-88' | 'gray-75' | 'gray-75-striped' | 'gray-75-diagonal' | 'dots' | 'pinpoint' | 'dots-sparse' | 'speckle' | 'gray-12' | 'gray-25' | 'stripes-vertical' | 'stripes-horizontal' | 'diagonal' | 'grid' | 'weave' | 'lines-vertical' | 'lines-horizontal' | 'diagonal-wide' | 'grid-wide' | 'zigzag' | 'arrows' | 'chevrons' | 'shingles' | 'dotted-grid' | 'birds' | 'waves' | 'bricks' | 'scales' | 'basket-weave' | 'lattice' | 'twigs' | 'hexagons' | 'pyramids' | 'mesh' | 'stones';
+/**
+ * The 38 standard patterns, in palette order (row-major from the cell after
+ * the well — insertion order is the order). The ordered-dither ramp is named
+ * `gray-N` by ink percentage; everything else for what it reads as.
+ */
+export declare const PATTERNS: Readonly<Record<PatternName, Pattern>>;
+/** The names in palette order — a chooser's iteration order. */
+export declare const PATTERN_NAMES: readonly PatternName[];
+/** A pattern's side in system px — what a custom literal states. */
+export declare const PATTERN_SIZE = 8;
+/**
+ * The value a `pattern` attribute takes, resolved: a library name, or
+ * sixteen hex digits (two per row, top row first; whitespace between bytes
+ * and either case allowed — `"DD 77 DD 77 DD 77 DD 77"`). Anything else,
+ * including an empty string, is `null`: the caller paints nothing.
+ */
+export declare function parsePattern(value: string | null | undefined): Pattern | null;
+/** The attribute form of a pattern: sixteen upper-case hex digits, no spaces. */
+export declare function patternHex(pattern: Pattern): string;
+/**
+ * A pattern's art as the rect data the tile machinery takes
+ * (`tileRaster`, `tileImage` via `tileRects`): `width × height` is the cell
+ * the rects cover and tile at.
+ */
+export interface PatternMotif {
+    readonly width: number;
+    readonly height: number;
+    readonly rects: readonly TileRect[];
+}
+/**
+ * A pattern's art on its **minimal** cell — the smallest period along each
+ * axis — as ink runs over a transparent ground, or over an opaque `paper`
+ * rect when one is given. This is how the kit's own surfaces state their
+ * dithers from the library: `gray-50` comes back as the 2×2 cell with two
+ * black pixels the desktop always had.
+ */
+export declare function patternMotif(pattern: Pattern, ink?: string, paper?: string): PatternMotif;
+/**
+ * A pattern's art on the full 8×8 cell, as {@link patternMotif}'s rects —
+ * for a caller that wants the literal QuickDraw cell regardless of period.
+ */
+export declare function patternRects(pattern: Pattern, ink?: string, paper?: string): TileRect[];