vintage-frames 0.4.0 → 0.5.0

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/recipes/pattern.d.ts

@@ -1,15 +1,5 @@
-import { type TileRect } from './tile.js';
-/**
- * The windoid bar's dither: a 2-system-px motif with a single black pixel at
- * its origin, stated once as rect data. Transparent ground, because the layer
- * floats over the bar and the same art doubles as the forced-colors mask,
- * where the ground would be opacity rather than paint. The SVG tile below is
- * the CSS-repeated form (the no-declared-width fallback and the forced-colors
- * mask); `vf-window` renders the exact fill — the whole-surface raster or a
- * consumer token's placed tile grid — from the same data (src/tile-grid.ts).
- */
-export declare const DOT_MOTIF = 2;
-export declare const DOT_RECTS: readonly TileRect[];
+export declare const DOT_MOTIF: number;
+export declare const DOT_RECTS: readonly import("./tile.js").TileRect[];
 /** The dots' tile size in system px (30) — the consumer token's documented box. */
 export declare const DOT_SPAN: number;
 /**

package/dist/styles/recipes/pattern.js

@@ -1,12 +1,8 @@
 import { tileImage as e, tileRects as t, tileSpan as n, vfTileMaskSize as r, vfTileSize as i } from "./tile.js";
-import { css as a, unsafeCSS as o } from "lit";
-var s = [[
-	0,
-	0,
-	1,
-	1,
-	"#000000"
-]], c = e(2, 2, t(s)), l = n(2), u = a`
+import { PATTERNS as a, patternMotif as o } from "../../patterns.js";
+import { css as s, unsafeCSS as c } from "lit";
+//#region src/styles/recipes/pattern.ts
+var l = o(a.dots), u = l.width, d = l.rects, f = e(u, u, t(d)), p = n(u), m = s`
   .vf-stripes {
     position: absolute;
     inset: calc(var(--vf-scale, 1) * 3px) calc(var(--vf-scale, 1) * 1px);
@@ -44,15 +40,15 @@ var s = [[
       background: var(--vf-black, #000000);
     }
   }
-`, d = a`
+`, h = s`
   .vf-dots {
     position: absolute;
     inset: calc(var(--vf-scale, 1) * 2px) 0;
-    background-image: var(--vf-dots-pattern, ${o(c)});
-    ${i(2)}
+    background-image: var(--vf-dots-pattern, ${c(f)});
+    ${i(u)}
     pointer-events: none;
     /* The consumer-token art channel for the placed tile grid. */
-    --_vf-tile-image: var(--vf-dots-pattern, ${o(c)});
+    --_vf-tile-image: var(--vf-dots-pattern, ${c(f)});
   }
   .vf-dots.vf-tile-grid {
     background-image: none;
@@ -69,8 +65,8 @@ var s = [[
     .vf-dots {
       background-image: none;
       background-color: var(--vf-black, #000);
-      mask-image: var(--vf-dots-pattern, ${o(c)});
-      ${r(2)}
+      mask-image: var(--vf-dots-pattern, ${c(f)});
+      ${r(u)}
     }
     .vf-dots .vf-tile,
     .vf-dots .vf-tile-raster {
@@ -79,4 +75,4 @@ var s = [[
   }
 `;
 //#endregion
-export { s as DOT_RECTS, l as DOT_SPAN, d as vfDots, u as vfStripes };
+export { u as DOT_MOTIF, d as DOT_RECTS, p as DOT_SPAN, h as vfDots, m as vfStripes };

package/dist/styles/recipes/scroll-rail.d.ts

@@ -1,15 +1,6 @@
-import { type TileRect } from './tile.js';
-/**
- * The trough's 25% lattice — a 4×2-system-px motif with a dot at (0,0) and
- * (2,1), traced from the UI kit's "Scroll bg" sprite — stated once as rect
- * data. The DOM trough renders it as a whole-surface raster
- * (`tileRaster`, written by `ScrollRailController` — 1-bit at every scale,
- * zoom-minted ones included); the SVG span tile below is the forced-colors
- * mask, which repaints the same art in the remapped ink token.
- */
-export declare const TROUGH_MOTIF_X = 4;
-export declare const TROUGH_MOTIF_Y = 2;
-export declare const TROUGH_RECTS: readonly TileRect[];
+export declare const TROUGH_MOTIF_X: number;
+export declare const TROUGH_MOTIF_Y: number;
+export declare const TROUGH_RECTS: readonly import("./tile.js").TileRect[];
 /**
  * System 7 scroll rails, drawn by the kit as ordinary shadow DOM — the skin
  * for the subtree `renderScrollRail()` (src/scroll-rail.ts) produces. The