vintage-frames 0.4.0 → 0.5.1

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

package/dist/patterns.js

@@ -0,0 +1,477 @@
+//#region src/patterns.ts
+var e = {
+	black: [
+		255,
+		255,
+		255,
+		255,
+		255,
+		255,
+		255,
+		255
+	],
+	"gray-50": [
+		170,
+		85,
+		170,
+		85,
+		170,
+		85,
+		170,
+		85
+	],
+	white: [
+		0,
+		0,
+		0,
+		0,
+		0,
+		0,
+		0,
+		0
+	],
+	"gray-88": [
+		119,
+		255,
+		221,
+		255,
+		119,
+		255,
+		221,
+		255
+	],
+	"gray-75": [
+		221,
+		119,
+		221,
+		119,
+		221,
+		119,
+		221,
+		119
+	],
+	"gray-75-striped": [
+		85,
+		255,
+		85,
+		255,
+		85,
+		255,
+		85,
+		255
+	],
+	"gray-75-diagonal": [
+		187,
+		119,
+		238,
+		221,
+		187,
+		119,
+		238,
+		221
+	],
+	dots: [
+		170,
+		0,
+		170,
+		0,
+		170,
+		0,
+		170,
+		0
+	],
+	pinpoint: [
+		0,
+		0,
+		128,
+		0,
+		0,
+		0,
+		0,
+		0
+	],
+	"dots-sparse": [
+		8,
+		0,
+		128,
+		0,
+		8,
+		0,
+		128,
+		0
+	],
+	speckle: [
+		64,
+		4,
+		128,
+		16,
+		2,
+		32,
+		1,
+		8
+	],
+	"gray-12": [
+		34,
+		0,
+		136,
+		0,
+		34,
+		0,
+		136,
+		0
+	],
+	"gray-25": [
+		136,
+		34,
+		136,
+		34,
+		136,
+		34,
+		136,
+		34
+	],
+	"stripes-vertical": [
+		170,
+		170,
+		170,
+		170,
+		170,
+		170,
+		170,
+		170
+	],
+	"stripes-horizontal": [
+		255,
+		0,
+		255,
+		0,
+		255,
+		0,
+		255,
+		0
+	],
+	diagonal: [
+		68,
+		136,
+		17,
+		34,
+		68,
+		136,
+		17,
+		34
+	],
+	grid: [
+		136,
+		136,
+		255,
+		136,
+		136,
+		136,
+		255,
+		136
+	],
+	weave: [
+		12,
+		141,
+		177,
+		48,
+		3,
+		27,
+		216,
+		192
+	],
+	"lines-vertical": [
+		136,
+		136,
+		136,
+		136,
+		136,
+		136,
+		136,
+		136
+	],
+	"lines-horizontal": [
+		0,
+		0,
+		255,
+		0,
+		0,
+		0,
+		255,
+		0
+	],
+	"diagonal-wide": [
+		64,
+		128,
+		1,
+		2,
+		4,
+		8,
+		16,
+		32
+	],
+	"grid-wide": [
+		128,
+		128,
+		255,
+		128,
+		128,
+		128,
+		128,
+		128
+	],
+	zigzag: [
+		8,
+		0,
+		128,
+		64,
+		32,
+		0,
+		2,
+		4
+	],
+	arrows: [
+		5,
+		2,
+		32,
+		80,
+		136,
+		136,
+		136,
+		136
+	],
+	chevrons: [
+		170,
+		0,
+		136,
+		20,
+		34,
+		65,
+		136,
+		0
+	],
+	shingles: [
+		4,
+		8,
+		16,
+		32,
+		84,
+		170,
+		255,
+		2
+	],
+	"dotted-grid": [
+		128,
+		0,
+		170,
+		0,
+		128,
+		0,
+		136,
+		0
+	],
+	birds: [
+		0,
+		0,
+		64,
+		160,
+		0,
+		0,
+		4,
+		10
+	],
+	waves: [
+		1,
+		1,
+		3,
+		132,
+		72,
+		48,
+		12,
+		2
+	],
+	bricks: [
+		8,
+		8,
+		255,
+		128,
+		128,
+		128,
+		255,
+		8
+	],
+	scales: [
+		2,
+		4,
+		8,
+		28,
+		34,
+		193,
+		128,
+		1
+	],
+	"basket-weave": [
+		176,
+		176,
+		191,
+		0,
+		191,
+		191,
+		176,
+		176
+	],
+	lattice: [
+		1,
+		1,
+		130,
+		68,
+		57,
+		68,
+		130,
+		1
+	],
+	twigs: [
+		16,
+		16,
+		85,
+		130,
+		1,
+		1,
+		85,
+		40
+	],
+	hexagons: [
+		20,
+		227,
+		128,
+		128,
+		65,
+		62,
+		8,
+		8
+	],
+	pyramids: [
+		34,
+		113,
+		248,
+		116,
+		34,
+		71,
+		143,
+		23
+	],
+	mesh: [
+		20,
+		8,
+		0,
+		8,
+		20,
+		42,
+		85,
+		42
+	],
+	stones: [
+		248,
+		248,
+		119,
+		137,
+		143,
+		143,
+		119,
+		152
+	]
+}, t = Object.keys(e), n = 8;
+function r(t) {
+	if (t == null) return null;
+	let n = t.trim();
+	if (n === "") return null;
+	if (Object.prototype.hasOwnProperty.call(e, n)) return e[n];
+	let r = n.replace(/\s+/g, "");
+	if (!/^[0-9a-f]{16}$/i.test(r)) return null;
+	let i = [];
+	for (let e = 0; e < 8; e++) i.push(parseInt(r.slice(2 * e, 2 * e + 2), 16));
+	return i;
+}
+function i(e) {
+	return e.map((e) => e.toString(16).padStart(2, "0").toUpperCase()).join("");
+}
+var a = (e, t, n) => !!((e[n % 8] ?? 0) & 128 >> t % 8);
+function o(e) {
+	let t = 8, n = 8;
+	for (let n of [
+		1,
+		2,
+		4
+	]) {
+		let r = !0;
+		for (let t = 0; t < 8 && r; t++) for (let i = 0; i < 8 - n; i++) if (a(e, i, t) !== a(e, i + n, t)) {
+			r = !1;
+			break;
+		}
+		if (r) {
+			t = n;
+			break;
+		}
+	}
+	for (let t of [
+		1,
+		2,
+		4
+	]) {
+		let r = !0;
+		for (let n = 0; n < 8 - t; n++) if (e[n] !== e[n + t]) {
+			r = !1;
+			break;
+		}
+		if (r) {
+			n = t;
+			break;
+		}
+	}
+	return {
+		x: t,
+		y: n
+	};
+}
+function s(e, t, n, r, i) {
+	let o = [];
+	i !== void 0 && o.push([
+		0,
+		0,
+		t,
+		n,
+		i
+	]);
+	for (let i = 0; i < n; i++) {
+		let n = 0;
+		for (; n < t;) {
+			if (!a(e, n, i)) {
+				n++;
+				continue;
+			}
+			let s = 1;
+			for (; n + s < t && a(e, n + s, i);) s++;
+			o.push([
+				n,
+				i,
+				s,
+				1,
+				r
+			]), n += s;
+		}
+	}
+	return o;
+}
+function c(e, t = "#000000", n) {
+	let { x: r, y: i } = o(e);
+	return {
+		width: r,
+		height: i,
+		rects: s(e, r, i, t, n)
+	};
+}
+function l(e, t = "#000000", n) {
+	return s(e, 8, 8, t, n);
+}
+//#endregion
+export { e as PATTERNS, t as PATTERN_NAMES, n as PATTERN_SIZE, r as parsePattern, i as patternHex, c as patternMotif, l as patternRects };

package/dist/scroll-rail.js

@@ -1,20 +1,20 @@
 import { effectiveScale as e, sysLength as t } from "./scale.js";
-import { TROUGH_RECTS as n } from "./styles/recipes/scroll-rail.js";
-import { TileRasterCache as r } from "./tile-grid.js";
+import { TROUGH_MOTIF_X as n, TROUGH_MOTIF_Y as r, TROUGH_RECTS as i } from "./styles/recipes/scroll-rail.js";
+import { TileRasterCache as a } from "./tile-grid.js";
 import "./motion.js";
-import { SCROLL_ARROW_DOWN as i, SCROLL_ARROW_DOWN_FILL as a, SCROLL_ARROW_LEFT as o, SCROLL_ARROW_LEFT_FILL as s, SCROLL_ARROW_RIGHT as c, SCROLL_ARROW_RIGHT_FILL as l, SCROLL_ARROW_UP as u, SCROLL_ARROW_UP_FILL as d } from "./glyphs.js";
-import { html as f } from "lit";
+import { SCROLL_ARROW_DOWN as o, SCROLL_ARROW_DOWN_FILL as s, SCROLL_ARROW_LEFT as c, SCROLL_ARROW_LEFT_FILL as l, SCROLL_ARROW_RIGHT as u, SCROLL_ARROW_RIGHT_FILL as d, SCROLL_ARROW_UP as f, SCROLL_ARROW_UP_FILL as p } from "./glyphs.js";
+import { html as m } from "lit";
 //#region src/scroll-rail.ts
-var p = 16, m = 16, h = 14, g = 66, _ = class {
+var h = 16, g = 16, _ = 14, v = 66, y = class {
 	constructor(t, n) {
 		this.host = t, this.opts = n, this.scroller = null, this.press = null, this.troughCache = {
-			vertical: new r(),
-			horizontal: new r()
+			vertical: new a(),
+			horizontal: new a()
 		}, this.onScroll = () => this.sync(), this.onPointerDown = (t) => {
 			if (t.button !== 0 || this.press !== null) return;
 			let n = t.currentTarget, r = this.opts.getScroll();
 			if (!r) return;
-			let i = v(n), a = i === "vertical" ? "data-overflow-y" : "data-overflow-x";
+			let i = b(n), a = i === "vertical" ? "data-overflow-y" : "data-overflow-x";
 			if (r.getAttribute(a) === "false" || r.hasAttribute("data-window-inactive") || n.getAttribute("data-degenerate") === "rail") return;
 			let o = t.target, s = i === "vertical" ? t.clientY : t.clientX, c = e(this.host) || 1, l = o.closest(".vf-rail-thumb"), u = o.closest(".vf-rail-button--decrement"), d = o.closest(".vf-rail-button--increment");
 			if (l) {
@@ -30,7 +30,7 @@ var p = 16, m = 16, h = 14, g = 66, _ = class {
 					button: null,
 					startCoord: s,
 					startScroll: i === "vertical" ? r.scrollTop : r.scrollLeft,
-					travelCss: o - m * c,
+					travelCss: o - g * c,
 					lastCoord: s
 				};
 			} else if (u || d) {
@@ -98,17 +98,17 @@ var p = 16, m = 16, h = 14, g = 66, _ = class {
 		let e = this.scroller ?? this.opts.getScroll(), t = this.host.renderRoot;
 		if (!(!e || !t)) for (let n of t.querySelectorAll(".vf-rail")) this.syncRail(n, e);
 	}
-	syncRail(r, i) {
-		let a = v(r), o = r.querySelector(".vf-rail-track"), s = r.querySelector(".vf-rail-thumb");
-		if (!o || !s) return;
-		let c = e(this.host) || 1, l = o.getBoundingClientRect(), u = (a === "vertical" ? l.height : l.width) / c, d = u < 1 ? "rail" : u < m ? "thumb" : null;
-		if (d ? r.setAttribute("data-degenerate", d) : r.removeAttribute("data-degenerate"), d === "rail") return;
-		let f = this.scrollRange(i, a), p = a === "vertical" ? i.scrollTop : i.scrollLeft, g = u - m, _ = f > 0 && g > 0 ? Math.max(0, Math.min(Math.floor(g), Math.round(p / f * g))) : 0;
-		s.style.translate = a === "vertical" ? `0 ${t(_)}` : `${t(_)} 0`;
-		let y = r.querySelector(".vf-rail-trough-art");
-		if (y) {
-			let e = Math.ceil((u + (a === "vertical" ? 2 : 4)) / (a === "vertical" ? 2 : 4)) * (a === "vertical" ? 2 : 4), r = a === "vertical" ? h : e, i = a === "vertical" ? e : h;
-			y.style.width = t(r), y.style.height = t(i), y.style.backgroundImage = this.troughCache[a].for(4, 2, n, r, i);
+	syncRail(a, o) {
+		let s = b(a), c = a.querySelector(".vf-rail-track"), l = a.querySelector(".vf-rail-thumb");
+		if (!c || !l) return;
+		let u = e(this.host) || 1, d = c.getBoundingClientRect(), f = (s === "vertical" ? d.height : d.width) / u, p = f < 1 ? "rail" : f < g ? "thumb" : null;
+		if (p ? a.setAttribute("data-degenerate", p) : a.removeAttribute("data-degenerate"), p === "rail") return;
+		let m = this.scrollRange(o, s), h = s === "vertical" ? o.scrollTop : o.scrollLeft, v = f - g, y = m > 0 && v > 0 ? Math.max(0, Math.min(Math.floor(v), Math.round(h / m * v))) : 0;
+		l.style.translate = s === "vertical" ? `0 ${t(y)}` : `${t(y)} 0`;
+		let x = a.querySelector(".vf-rail-trough-art");
+		if (x) {
+			let e = Math.ceil((f + (s === "vertical" ? r : n)) / (s === "vertical" ? r : n)) * (s === "vertical" ? r : n), a = s === "vertical" ? _ : e, o = s === "vertical" ? e : _;
+			x.style.width = t(a), x.style.height = t(o), x.style.backgroundImage = this.troughCache[s].for(n, r, i, a, o);
 		}
 	}
 	scrollRange(e, t) {
@@ -117,13 +117,13 @@ var p = 16, m = 16, h = 14, g = 66, _ = class {
 	stepBy(t, n) {
 		let r = this.opts.getScroll();
 		if (!r) return;
-		let i = t * p * (e(this.host) || 1);
+		let i = t * h * (e(this.host) || 1);
 		n === "vertical" ? r.scrollTop += i : r.scrollLeft += i;
 	}
 	pageBy(t, n) {
 		let r = this.opts.getScroll();
 		if (!r) return;
-		let i = p * (e(this.host) || 1), a = n === "vertical" ? r.clientHeight : r.clientWidth, o = Math.max(i, a - i);
+		let i = h * (e(this.host) || 1), a = n === "vertical" ? r.clientHeight : r.clientWidth, o = Math.max(i, a - i);
 		n === "vertical" ? r.scrollTop += t * o : r.scrollLeft += t * o;
 	}
 	pageTowardPointer() {
@@ -138,13 +138,13 @@ var p = 16, m = 16, h = 14, g = 66, _ = class {
 	}
 	armRepeat(e) {
 		this.clearRepeat(), this.holdTimer = window.setTimeout(() => {
-			this.repeatTimer = window.setInterval(e, g);
+			this.repeatTimer = window.setInterval(e, v);
 		}, 200);
 	}
 	clearRepeat() {
 		this.holdTimer !== void 0 && window.clearTimeout(this.holdTimer), this.repeatTimer !== void 0 && window.clearInterval(this.repeatTimer), this.holdTimer = void 0, this.repeatTimer = void 0;
 	}
-}, v = (e) => e.classList.contains("vf-rail--horizontal") ? "horizontal" : "vertical", y = (e, t) => f`<svg
+}, b = (e) => e.classList.contains("vf-rail--horizontal") ? "horizontal" : "vertical", x = (e, t) => m`<svg
     class="vf-rail-arrow vf-rail-arrow--${t}"
     viewBox="1 1 14 14"
     fill="currentColor"
@@ -153,19 +153,19 @@ var p = 16, m = 16, h = 14, g = 66, _ = class {
   >
     <path d=${e.d}></path>
   </svg>`;
-function b(e, t) {
-	let [n, r, p, m] = t === "vertical" ? [
-		u,
-		d,
-		i,
-		a
-	] : [
+function S(e, t) {
+	let [n, r, i, a] = t === "vertical" ? [
+		f,
+		p,
 		o,
-		s,
+		s
+	] : [
 		c,
-		l
+		l,
+		u,
+		d
 	];
-	return f`
+	return m`
     <div
       class="vf-rail vf-rail--${t}"
       aria-hidden="true"
@@ -176,7 +176,7 @@ function b(e, t) {
       @lostpointercapture=${e.onPointerUp}
     >
       <div class="vf-rail-button vf-rail-button--decrement">
-        ${y(n, "rest")}${y(r, "fill")}
+        ${x(n, "rest")}${x(r, "fill")}
       </div>
       <div class="vf-rail-track">
         <div class="vf-rail-trough">
@@ -185,10 +185,10 @@ function b(e, t) {
         <div class="vf-rail-thumb"></div>
       </div>
       <div class="vf-rail-button vf-rail-button--increment">
-        ${y(p, "rest")}${y(m, "fill")}
+        ${x(i, "rest")}${x(a, "fill")}
       </div>
     </div>
   `;
 }
 //#endregion
-export { _ as ScrollRailController, b as renderScrollRail };
+export { y as ScrollRailController, S as renderScrollRail };

package/dist/styles/base.d.ts

@@ -29,6 +29,8 @@ export { vfStaticText } from './recipes/static-text.js';
 export { vfDots, vfStripes } from './recipes/pattern.js';
 export { vfHardShadowDecls } from './recipes/shadow.js';
 export { vfChromeFrame, vfModalFrame, vfPanel } from './recipes/surface.js';
+export { RULE_EDGES, parseRule, ruleClasses, vfRule } from './recipes/rule.js';
+export type { RuleEdge } from './recipes/rule.js';
 export { vfTitleBar, vfWindowWidgets } from './recipes/title-bar.js';
 export { vfFocus, vfFocusRing, vfFocusUnderline } from './recipes/focus.js';
 export { vfToggle } from './recipes/toggle.js';