@howells/hairline 0.0.0-stage → 0.2.0

package/lib/charts/originals/key.js

@@ -0,0 +1,26 @@
+"use client";
+import { sansWidth as e } from "../util.js";
+import { KEY as t } from "../marks.js";
+import { Label as n } from "../text.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/charts/originals/key.tsx
+var a = t.swatch, o = t.gap, s = t.entryGap, c = (t) => {
+	let c = t.items.map((t) => a + o + e(t.label, 11)), l = c.reduce((e, t) => e + t, 0) + s * Math.max(0, c.length - 1), u = t.items.map((e, n) => ({
+		at: t.right - l + c.slice(0, n).reduce((e, t) => e + t + s, 0),
+		item: e
+	}));
+	return /* @__PURE__ */ r("g", {
+		className: "fade",
+		children: u.map(({ at: e, item: s }) => /* @__PURE__ */ i("g", {
+			transform: `translate(${Math.round(e)} ${t.y})`,
+			children: [s.mark, /* @__PURE__ */ r(n, {
+				middle: !0,
+				voice: "axis",
+				x: a + o,
+				children: s.label
+			})]
+		}, s.label))
+	});
+};
+//#endregion
+export { c as Key };

package/lib/charts/originals/response-time.data.js

@@ -0,0 +1,98 @@
+"use client";
+//#region src/charts/originals/response-time.data.ts
+var e = [
+	.05,
+	.1,
+	.2,
+	.3,
+	.4,
+	.5,
+	.6,
+	.7,
+	.8,
+	.9,
+	.95
+], t = [
+	{
+		channel: "Labour",
+		q: [
+			7.7,
+			13.1,
+			23.4,
+			30.3,
+			34.7,
+			38.5,
+			41.2,
+			44.1,
+			47.1,
+			50.5,
+			53.7
+		]
+	},
+	{
+		channel: "Conservative",
+		q: [
+			5.2,
+			7.6,
+			11.9,
+			16.3,
+			21.5,
+			25.6,
+			28.7,
+			30.9,
+			33.4,
+			36.4,
+			38.5
+		]
+	},
+	{
+		channel: "Reform UK",
+		q: [
+			4.9,
+			6.3,
+			8.8,
+			11.9,
+			13.6,
+			15.5,
+			17,
+			18.9,
+			20.9,
+			23.7,
+			25.9
+		]
+	},
+	{
+		channel: "Liberal Democrat",
+		q: [
+			2.6,
+			3.1,
+			3.7,
+			4.5,
+			5.3,
+			6.4,
+			7.8,
+			10,
+			14.1,
+			37.9,
+			45.5
+		]
+	},
+	{
+		channel: "Green Party",
+		q: [
+			3.1,
+			3.5,
+			4.2,
+			4.7,
+			5.1,
+			5.7,
+			6.5,
+			7.3,
+			9.1,
+			13,
+			17.1
+		]
+	}
+];
+//#endregion
+export { e as LEVELS, t as responseTimes };

package/lib/charts/originals/response-time.js

@@ -0,0 +1,187 @@
+"use client";
+import { useHover as e } from "../hooks.js";
+import { Plot as t, Tooltip as n } from "../core.js";
+import { sansWidth as r, stagger as i } from "../util.js";
+import { DimGroup as a, HitRect as o, TipText as s } from "../hover.js";
+import "../marks.js";
+import { Stem as c, VRule as l } from "../rules.js";
+import { ChartSvg as u } from "../svg.js";
+import { Label as d } from "../text.js";
+import { HALFTONE_R as f, TEXTURE_PITCH as p, paint as m, useTextureIds as h } from "../texture-ids.js";
+import { DotScreen as g, KeySwatch as _ } from "../texture.js";
+import { Key as v } from "./key.js";
+import { fmtPercent as y } from "./format.js";
+import { LEVELS as b, responseTimes as x } from "./response-time.data.js";
+import { scaleLinear as S } from "d3-scale";
+import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+//#region src/charts/originals/response-time.tsx
+var E = 30, D = 80, O = 16, k = 14, A = 18, j = [0, 60], M = f, N = 11, P = [
+	0,
+	10,
+	20,
+	30,
+	40,
+	50,
+	60
+], F = [
+	0,
+	20,
+	40,
+	60
+], I = (e, t) => e.slice(0, -1).map((n, r) => (b[r + 1] - b[r]) / Math.max(1, t(e[r + 1]) - t(n))), L = (e, t) => Math.min(M.length - 1, Math.floor(e / t * M.length)), R = ({ datum: e, dense: t, dim: n, frame: r, hero: s, k: l, onEnter: u, width: f }) => {
+	let h = r.rowY(l), g = e.q[5], _ = e.q.slice(1, -1).filter((e, t) => t + 1 !== 5), v = Math.round(r.x(e.q[0])), x = Math.round(h) - N, S = Math.round(r.x(e.q.at(-1) ?? 1)) - v, C = Math.floor((S - 3) / p.screen) * p.screen;
+	return /* @__PURE__ */ T(a, {
+		dim: n,
+		onPointerEnter: u,
+		children: [
+			/* @__PURE__ */ w(o, {
+				height: D,
+				width: f,
+				x: 0,
+				y: h - D / 2
+			}),
+			/* @__PURE__ */ w(d, {
+				middle: !0,
+				muted: !s,
+				voice: "label",
+				x: 0,
+				y: h,
+				children: e.channel
+			}),
+			/* @__PURE__ */ w("g", {
+				className: "grow-x",
+				style: i(l, "series"),
+				children: /* @__PURE__ */ T("g", {
+					transform: `translate(${v + 1} ${x + 1})`,
+					children: [/* @__PURE__ */ w("rect", {
+						className: "fill-paper stroke-l5 shape-crisp",
+						height: 22,
+						strokeWidth: 1,
+						width: Math.max(1, S - 1),
+						x: -.5,
+						y: -.5
+					}), I(e.q, r.x).map((n, i) => {
+						let a = Math.max(0, Math.round(r.x(e.q[i])) - v - 1), o = Math.min(C, Math.round(r.x(e.q[i + 1])) - v - 1);
+						return /* @__PURE__ */ w("rect", {
+							fill: m(t.tex(String(L(n, t.max)))),
+							height: 21,
+							width: Math.max(0, o - a),
+							x: a,
+							y: 0
+						}, `${e.channel}-${b[i]}`);
+					})]
+				})
+			}),
+			_.map((t, n) => /* @__PURE__ */ w(c, {
+				className: "pop stroke-l2",
+				style: i(l * 10 + n, "fine"),
+				x: r.x(t),
+				y0: Math.round(h) - k,
+				y1: Math.round(h) + k + 1
+			}, `${e.channel}-${t}`)),
+			/* @__PURE__ */ w(c, {
+				className: `pop ${s ? "stroke-ink" : "stroke-l1"}`,
+				hero: !0,
+				style: i(l * 10 + 9, "fine"),
+				x: r.x(g),
+				y0: Math.round(h) - A,
+				y1: Math.round(h) + A + 1
+			}),
+			/* @__PURE__ */ w(d, {
+				anchor: "end",
+				middle: !0,
+				muted: !s,
+				order: l + 4,
+				voice: "value",
+				x: f,
+				y: h,
+				children: y(g)
+			})
+		]
+	});
+}, z = (e, t, n) => /* @__PURE__ */ w(c, {
+	className: t,
+	hero: n === 2,
+	x: 6,
+	y0: -e,
+	y1: e
+}), B = (e) => [
+	{
+		label: "Median",
+		mark: z(6, "stroke-l1", 2)
+	},
+	{
+		label: "Deciles",
+		mark: z(4, "stroke-l2", 1)
+	},
+	{
+		label: "Seats",
+		mark: /* @__PURE__ */ w(_, {
+			fill: m(e(String(M.length - 1))),
+			x: 0,
+			y: -6
+		})
+	}
+], V = ({ tex: e }) => /* @__PURE__ */ w("defs", { children: M.map((t, n) => /* @__PURE__ */ w(g, {
+	id: e(String(n)),
+	pitch: p.screen,
+	r: t,
+	tone: "fill-l4"
+}, t)) }), H = (i) => {
+	let a = i.data ?? x, o = e(), c = h("response-time"), f = a.map((e) => e.q[5]), p = f.indexOf(Math.max(...f)), m = E + a.length * D, g = m + 26, _ = `Vote share by constituency at the 2024 general election, median: ${a.map((e) => `${e.channel} ${y(e.q[5])}`).join(", ")}`;
+	return /* @__PURE__ */ w(t, { children: (e) => {
+		let t = Math.max(...a.map((e) => r(e.channel, 12))), i = e - Math.max(...f.map((e) => r(y(e), 12))) - O, h = {
+			rowY: (e) => E + e * D + D / 2,
+			x: S().domain(j).range([t + O, i]),
+			x1: i
+		}, b = e < 480 ? F : P, x = Math.max(...a.flatMap((e) => I(e.q, h.x))), k = o.key === null ? null : a[o.key];
+		return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ T(u, {
+			height: g,
+			label: _,
+			leave: o.clear,
+			width: e,
+			children: [
+				/* @__PURE__ */ w(V, { tex: c }),
+				/* @__PURE__ */ w(v, {
+					items: B(c),
+					right: e,
+					y: 8
+				}),
+				b.map((e) => /* @__PURE__ */ T("g", { children: [/* @__PURE__ */ w(l, {
+					kind: "grid",
+					x: h.x(e),
+					y0: E,
+					y1: m
+				}), /* @__PURE__ */ w(d, {
+					anchor: "middle",
+					voice: "axis",
+					x: h.x(e),
+					y: m + 18,
+					children: y(e)
+				})] }, e)),
+				a.map((t, n) => /* @__PURE__ */ w(R, {
+					datum: t,
+					dense: {
+						max: x,
+						tex: c
+					},
+					dim: o.dim(n),
+					frame: h,
+					hero: n === p,
+					k: n,
+					onEnter: o.enter(n),
+					width: e
+				}, t.channel))
+			]
+		}), k === null || o.key === null ? null : /* @__PURE__ */ w(n, {
+			x: h.x(k.q[5]),
+			y: h.rowY(o.key) - A - 2,
+			children: /* @__PURE__ */ w(s, {
+				facts: [`median ${y(k.q[5])}`, `one in ten above ${y(k.q[9])}`],
+				lead: k.channel
+			})
+		})] });
+	} });
+};
+//#endregion
+export { H as ResponseTime };

package/lib/charts/originals/revenue-by-plan.data.js

@@ -0,0 +1,26 @@
+"use client";
+//#region src/charts/originals/revenue-by-plan.data.ts
+var e = [
+	{
+		plan: "Lager",
+		prior: 3.37,
+		revenue: 4.77
+	},
+	{
+		plan: "Tea",
+		prior: 1.97,
+		revenue: 2.62
+	},
+	{
+		plan: "Loaf",
+		prior: 1.16,
+		revenue: 1.4
+	},
+	{
+		plan: "Milk",
+		prior: .462,
+		revenue: .651
+	}
+];
+//#endregion
+export { e as planRevenue };

package/lib/charts/originals/revenue-by-plan.js

@@ -0,0 +1,248 @@
+"use client";
+import { fmtSignedPct as e } from "../../lib/format.js";
+import { useHover as t } from "../hooks.js";
+import { Plot as n, Tooltip as r } from "../core.js";
+import { clamp as i, sansWidth as a, stagger as o, sum as s } from "../util.js";
+import { DimGroup as c, HitRect as l, TipText as u } from "../hover.js";
+import { TICK as d } from "../marks.js";
+import { HRule as f, Stem as p, VRule as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { TEXTURE_PITCH as _, paint as v, useTextureIds as y } from "../texture-ids.js";
+import { CrossHatch as b, DotScreen as x, EngravedRect as S, Hatch as C } from "../texture.js";
+import { planRevenue as w } from "./revenue-by-plan.data.js";
+import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
+//#region src/charts/originals/revenue-by-plan.tsx
+var O = 10, k = 24, A = k + d.xl + 6, j = 4, M = 34, N = 51, P = 67, F = 16, I = 112, L = 20, R = 22, z = [
+	"stroke-ink",
+	"stroke-l2",
+	"stroke-l3",
+	"stroke-l4"
+], B = (e) => e === 0 ? "start" : e === 1 ? "end" : "middle", V = ({ tex: e }) => /* @__PURE__ */ D("defs", { children: [
+	/* @__PURE__ */ E(b, {
+		id: e("0"),
+		tone: "fill-hero"
+	}),
+	/* @__PURE__ */ E(C, {
+		angle: "rising",
+		id: e("1"),
+		tone: "fill-l2"
+	}),
+	/* @__PURE__ */ E(C, {
+		angle: "falling",
+		id: e("2"),
+		tone: "fill-l3"
+	}),
+	/* @__PURE__ */ E(x, {
+		id: e("3"),
+		r: 1,
+		tone: "fill-l3"
+	})
+] }), H = (e) => `${Math.round(e * 100)}%`, U = (e) => `£${e.toFixed(2)}`, W = (e) => {
+	let t = s(e.map((e) => e.revenue)), n = 0;
+	return e.toSorted((e, t) => t.revenue - e.revenue).map((e, r) => {
+		let i = e.revenue / t, a = {
+			...e,
+			end: n + i,
+			growth: e.revenue / e.prior - 1,
+			k: r,
+			share: i,
+			start: n
+		};
+		return n += i, a;
+	});
+}, G = (e) => {
+	let t = e - 1, n = i(Math.round(e / 16), 28, 40), r = A + n, a = i(Math.round(e * .82), 380, 470);
+	return {
+		barH: n,
+		base: r,
+		floor: a - R,
+		height: a,
+		x: (e) => e * t
+	};
+}, K = (e, t) => Array.from({ length: 101 }, (e, t) => t).filter((n) => {
+	let r = (Math.min(n, 99) + .5) / 100;
+	return r >= e.start && (t || r < e.end);
+}), q = ({ fill: t, gMax: n, lay: r, left: i, outline: s, seg: c, tone: l, width: u }) => {
+	let d = e(c.growth * 100), f = i + a(d, 13) > u, p = r.base + I, h = Math.max(4, Math.round((r.floor - p) * c.growth / n)), v = r.floor - h;
+	return /* @__PURE__ */ D(T, { children: [
+		/* @__PURE__ */ E(m, {
+			className: "grow-y from-top",
+			kind: "rule",
+			style: o(c.k + 4),
+			x: i,
+			y0: r.base + P + 10,
+			y1: v - L
+		}),
+		/* @__PURE__ */ E(g, {
+			anchor: f ? "end" : "start",
+			className: l,
+			order: c.k + 6,
+			voice: "value",
+			x: f ? u : i,
+			y: v - 7,
+			children: d
+		}),
+		/* @__PURE__ */ E(S, {
+			className: `grow-y ${s}`,
+			fill: t,
+			height: h + 1,
+			style: o(c.k + 4, "series"),
+			whole: c.k >= 3 ? {
+				clear: 1,
+				pitch: _.screen
+			} : void 0,
+			width: F,
+			x: i,
+			y: v
+		})
+	] });
+}, J = ({ dim: e, fill: t, gMax: n, lay: r, onEnter: i, seg: s, ticks: u, width: f }) => {
+	let { base: m, x: h } = r, v = s.k === 0, y = Math.round(h(s.start)) + (v ? 0 : 2), b = v ? "" : "fill-muted", x = v ? "stroke-ink" : "stroke-l5", C = y + Math.max(a(s.plan, 13), a(H(s.share), 13), a(U(s.revenue), 13)) > f, w = C ? f : y, T = C ? "end" : "start";
+	return /* @__PURE__ */ D(c, {
+		dim: e,
+		onPointerEnter: i,
+		children: [
+			/* @__PURE__ */ E(l, {
+				height: r.height,
+				width: Math.max(1, h(s.end) - h(s.start)),
+				x: h(s.start),
+				y: 0
+			}),
+			u.map((e) => /* @__PURE__ */ E(p, {
+				className: `grow-y from-top ${z[Math.min(s.k, 3)]}`,
+				style: o(e, "dense"),
+				x: h(e / 100),
+				y0: k,
+				y1: k + (e % 10 == 0 ? d.xl : d.lg)
+			}, e)),
+			/* @__PURE__ */ E(S, {
+				className: `grow-x ${x}`,
+				fill: t,
+				height: r.barH,
+				style: o(s.k, "series"),
+				whole: s.k >= 3 ? {
+					clear: 1,
+					pitch: _.screen
+				} : void 0,
+				width: Math.max(2, Math.round(h(s.end)) - y),
+				x: y,
+				y: A
+			}),
+			/* @__PURE__ */ E(p, {
+				className: `grow-y from-top ${v ? "stroke-ink" : "stroke-l4"}`,
+				style: o(s.k + 2),
+				x: y,
+				y0: m + j,
+				y1: m + j + d.xl
+			}),
+			/* @__PURE__ */ D("g", {
+				className: "fade",
+				style: o(s.k + 4),
+				children: [
+					/* @__PURE__ */ E(g, {
+						anchor: T,
+						muted: !v,
+						voice: "label",
+						x: w,
+						y: m + M,
+						children: s.plan
+					}),
+					/* @__PURE__ */ E(g, {
+						anchor: T,
+						muted: !v,
+						voice: "value",
+						x: w,
+						y: m + N,
+						children: H(s.share)
+					}),
+					/* @__PURE__ */ E(g, {
+						anchor: T,
+						muted: !0,
+						voice: "value",
+						x: w,
+						y: m + P,
+						children: U(s.revenue)
+					})
+				]
+			}),
+			/* @__PURE__ */ E(q, {
+				fill: t,
+				gMax: n,
+				lay: r,
+				left: y,
+				outline: x,
+				seg: s,
+				tone: b,
+				width: f
+			})
+		]
+	});
+}, Y = ({ x: e, x1: t }) => /* @__PURE__ */ D(T, { children: [[
+	0,
+	.5,
+	1
+].map((t) => /* @__PURE__ */ E(g, {
+	anchor: B(t),
+	voice: "axis",
+	x: e(t),
+	y: O,
+	children: H(t)
+}, t)), /* @__PURE__ */ E(f, {
+	x0: 0,
+	x1: t,
+	y: 23
+})] }), X = (i) => {
+	let a = W(i.data ?? w), o = t(), s = y("revenue-by-plan"), c = Math.max(...a.map((e) => e.growth)), l = `Average shop prices in 2024 as shares of the four, with the rise on 2014: ${a.map((t) => `${t.plan} ${H(t.share)}, ${e(t.growth * 100)} on 2014`).join("; ")}`;
+	return /* @__PURE__ */ E(n, { children: (t) => {
+		let n = G(t), i = o.key === null ? null : a[o.key];
+		return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D(h, {
+			height: n.height,
+			label: l,
+			leave: o.clear,
+			width: t,
+			children: [
+				/* @__PURE__ */ E(V, { tex: s }),
+				/* @__PURE__ */ E(Y, {
+					x: n.x,
+					x1: t - 1
+				}),
+				/* @__PURE__ */ E(f, {
+					x0: 0,
+					x1: t - 1,
+					y: n.floor
+				}),
+				/* @__PURE__ */ E(g, {
+					anchor: "end",
+					voice: "axis",
+					x: t,
+					y: n.floor + 16,
+					children: "Rise on 2014"
+				}),
+				a.map((e) => /* @__PURE__ */ E(J, {
+					dim: o.dim(e.k),
+					fill: v(s(String(Math.min(e.k, 3)))),
+					gMax: c,
+					lay: n,
+					onEnter: o.enter(e.k),
+					seg: e,
+					ticks: K(e, e.k === a.length - 1),
+					width: t
+				}, e.plan))
+			]
+		}), i === null ? null : /* @__PURE__ */ E(r, {
+			x: n.x((i.start + i.end) / 2),
+			y: 22,
+			children: /* @__PURE__ */ E(u, {
+				facts: [
+					U(i.revenue),
+					`${(i.share * 100).toFixed(1)}%`,
+					`${e(i.growth * 100)} on 2014`
+				],
+				lead: i.plan
+			})
+		})] });
+	} });
+};
+//#endregion
+export { X as RevenueByPlan };

package/lib/charts/playback.js

@@ -0,0 +1,68 @@
+"use client";
+import { useMotionPreference as e, useReveal as t } from "./hooks.js";
+import { useEffect as n, useLayoutEffect as r, useRef as i, useState as a } from "react";
+//#region src/charts/playback.ts
+var o = 64, s = (e, t = .1) => {
+	let [r, i] = a(!1);
+	return n(() => {
+		let n = new IntersectionObserver(([e]) => {
+			i(e.isIntersecting);
+		}, { threshold: t });
+		return e.current !== null && n.observe(e.current), () => {
+			n.disconnect();
+		};
+	}, [e, t]), r;
+}, c = (e) => {
+	let n = t(e), r = s(e);
+	return n && r;
+}, l = (e, t) => {
+	let a = i(t);
+	r(() => {
+		a.current = t;
+	}), n(() => {
+		let t = 0, n = performance.now(), r = (e) => {
+			let i = Math.min(o, e - n);
+			n = e, a.current(i), t = requestAnimationFrame(r);
+		};
+		return e && (t = requestAnimationFrame(r)), () => {
+			cancelAnimationFrame(t);
+		};
+	}, [e]);
+}, u = (e, t, a) => {
+	let o = i(a);
+	r(() => {
+		o.current = a;
+	}), n(() => {
+		let n = 0;
+		return e && (n = window.setInterval(() => {
+			o.current();
+		}, t)), () => {
+			window.clearInterval(n);
+		};
+	}, [e, t]);
+}, d = (e, t) => t ? e.reduced === "end" ? e.end : e.start ?? 0 : 0, f = (t) => {
+	let n = c(t.box), r = e(), i = r ?? !0, [o, s] = a(r !== null), [f, p] = a(() => d(t, i)), [m, h] = a(() => !i);
+	!o && r !== null && (s(!0), p(d(t, i)), h(!i));
+	let g = f >= t.end, _ = m && n && !g, v = t.step?.unit ?? 1;
+	return l(_ && !i, (e) => {
+		p((n) => Math.min(t.end, n + e / t.rate));
+	}), u(_ && i, t.step?.every ?? 0, () => {
+		p((e) => Math.min(t.end, (Math.floor(e / v) + 1) * v));
+	}), {
+		done: g,
+		handleReplay: () => {
+			p(0), h(!0);
+		},
+		handleSeek: (e) => {
+			h(!1), p(e);
+		},
+		handleToggle: () => {
+			g ? (p(0), h(!0)) : h((e) => !e);
+		},
+		playing: m && !g,
+		reduced: i,
+		t: f
+	};
+};
+//#endregion
+export { l as useFrame, s as useInView, c as useLive, f as usePlayhead };

package/lib/charts/plot-note.js

@@ -0,0 +1,27 @@
+"use client";
+import { noteLines as e, stagger as t } from "./util.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/charts/plot-note.tsx
+var r = (r) => {
+	let i = e(r.text, r.width, r.metrics);
+	return i.length === 0 ? null : /* @__PURE__ */ n("g", {
+		className: "fade",
+		style: t(r.order ?? 6),
+		children: i.map((e, t) => /* @__PURE__ */ n("text", {
+			className: "t-axis",
+			textAnchor: r.anchor ?? "middle",
+			x: r.x,
+			y: r.y - (i.length - 1 - t) * 12,
+			children: e
+		}, e))
+	});
+}, i = (e) => /* @__PURE__ */ n(r, {
+	metrics: e.metrics,
+	order: e.order,
+	text: e.text,
+	width: e.width - 2 * (e.gutter ?? 8),
+	x: e.width / 2,
+	y: e.height - 6
+});
+//#endregion
+export { i as FootNote, r as PlotNote };

package/lib/charts/roles.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/charts/roles.ts
+var e = "relative min-w-0 rounded-xs bg-panel px-2 py-3 [&_svg]:block [&_svg]:overflow-visible [&_svg]:select-none [&_svg:focus]:outline-none [&_svg:focus-visible]:outline-1 [&_svg:focus-visible]:outline-offset-4 [&_svg:focus-visible]:outline-muted [&_svg:focus-visible]:outline-solid", t = "t-value", n = "grid-line", r = "grid-line", i = "hairline", a = "stroke-l3 dash-rule shape-crisp", o = "stroke-faint shape-crisp";
+//#endregion
+export { o as CURSOR, n as GRID_H, r as GRID_V, e as PANEL, a as RULE_TARGET, i as RULE_ZERO, t as VALUE };