vintage-frames 0.3.0 → 0.5.0

package/dist/modal-dialog.js

@@ -1,6 +1,6 @@
-import { ScaleController as e, onScaleChange as t, snapSys as n, sysLength as r, toSysExact as i } from "./scale.js";
-import a from "./_virtual/_@oxc-project_runtime@0.143.0/helpers/esm/decorate.js";
-import { emit as o } from "./events.js";
+import { emit as e } from "./events.js";
+import { ScaleController as t, onScaleChange 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 { LitElement as s, css as c } from "lit";
 import { property as l, query as u } from "lit/decorators.js";
 var d = 24, f = c`
@@ -43,13 +43,13 @@ var d = 24, f = c`
     cursor: var(--vf-cursor, default);
   }
 `, p = class extends s {
-	constructor(...t) {
-		super(...t), this.scale = new e(this), this.open = !1, this.#e = !1, this.#n = null, this.#r = null, this.#l = () => this.settle();
+	constructor(...e) {
+		super(...e), this.scale = new t(this), this.open = !1, this.#e = !1, this.#n = null, this.#r = null, this.#l = () => this.settle();
 	}
 	get dialogSize() {
 		return {
-			width: r(this.width ?? 260),
-			height: this.height === void 0 ? null : r(this.height)
+			width: i(this.width ?? 260),
+			height: this.height === void 0 ? null : i(this.height)
 		};
 	}
 	#e;
@@ -75,12 +75,12 @@ var d = 24, f = c`
 	#i() {
 		let e = document.documentElement;
 		return {
-			width: i(e.clientWidth || window.innerWidth, this),
-			height: i(e.clientHeight || window.innerHeight, this)
+			width: a(e.clientWidth || window.innerWidth, this),
+			height: a(e.clientHeight || window.innerHeight, this)
 		};
 	}
 	#a(e, t) {
-		let n = this.#i(), r = i(this._dialog?.offsetWidth ?? 0, this);
+		let n = this.#i(), r = a(this._dialog?.offsetWidth ?? 0, this);
 		return {
 			x: Math.min(Math.max(e, d - r), n.width - d),
 			y: Math.min(Math.max(t, 0), Math.max(0, n.height - d))
@@ -89,13 +89,13 @@ var d = 24, f = c`
 	#o() {
 		let e = this.#i(), t = this._dialog?.getBoundingClientRect();
 		return {
-			x: (e.width - i(t?.width ?? 0, this)) / 2,
-			y: (e.height - i(t?.height ?? 0, this)) / 2
+			x: (e.width - a(t?.width ?? 0, this)) / 2,
+			y: (e.height - a(t?.height ?? 0, this)) / 2
 		};
 	}
 	placeAt(e, t) {
-		let r = this.#a(e, t);
-		this.left = n(r.x, this), this.top = n(r.y, this);
+		let n = this.#a(e, t);
+		this.left = r(n.x, this), this.top = r(n.y, this);
 	}
 	settle() {
 		let e = this._dialog;
@@ -103,8 +103,8 @@ var d = 24, f = c`
 		let t = this.left != null || this.top != null ? {
 			x: this.left ?? 0,
 			y: this.top ?? 0
-		} : this.#o(), i = this.#a(t.x, t.y);
-		e.style.left = r(n(i.x, this)), e.style.top = r(n(i.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
+		} : this.#o(), n = this.#a(t.x, t.y);
+		e.style.left = i(r(n.x, this)), e.style.top = i(r(n.y, this)), e.style.right = "auto", e.style.bottom = "auto", e.style.margin = "0";
 	}
 	#s() {
 		let e = this._dialog?.style;
@@ -124,7 +124,7 @@ var d = 24, f = c`
 	#u;
 	#d;
 	#f(e) {
-		typeof ResizeObserver < "u" && !this.#u && (this.#u = new ResizeObserver(this.#l), this.#u.observe(e)), window.addEventListener("resize", this.#l), this.#d ??= t(this.#l);
+		typeof ResizeObserver < "u" && !this.#u && (this.#u = new ResizeObserver(this.#l), this.#u.observe(e)), window.addEventListener("resize", this.#l), this.#d ??= n(this.#l);
 	}
 	#p() {
 		this.#u?.disconnect(), this.#u = void 0, window.removeEventListener("resize", this.#l), this.#d?.(), this.#d = void 0;
@@ -143,13 +143,13 @@ var d = 24, f = c`
 		this.#n = "escape";
 	}
 	_onNativeClose() {
-		let e = this.#n ?? "close";
-		this.#n = null, this.#r = null, this.#p(), this.open = !1, this.#s(), o(this, "vf-close", { reason: e });
+		let t = this.#n ?? "close";
+		this.#n = null, this.#r = null, this.#p(), this.open = !1, this.#s(), e(this, "vf-close", { reason: t });
 	}
 };
-a([l({
+o([l({
 	type: Boolean,
 	reflect: !0
-})], p.prototype, "open", void 0), a([l({ type: Number })], p.prototype, "width", void 0), a([l({ type: Number })], p.prototype, "height", void 0), a([l({ type: Number })], p.prototype, "top", void 0), a([l({ type: Number })], p.prototype, "left", void 0), a([u("dialog")], p.prototype, "_dialog", void 0);
+})], p.prototype, "open", void 0), o([l({ type: Number })], p.prototype, "width", void 0), o([l({ type: Number })], p.prototype, "height", void 0), o([l({ type: Number })], p.prototype, "top", void 0), o([l({ type: Number })], p.prototype, "left", void 0), o([u("dialog")], p.prototype, "_dialog", void 0);
 //#endregion
 export { p as VfModalDialog, f as modalDialogStyles };

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[];