@vscada/primitives 0.0.1

package/dist/valves.js

@@ -0,0 +1,424 @@
+import { Fsm as e, Tween as t, resolveMediumStyle as n } from "@vscada/core";
+//#region src/valves/base.ts
+var r = 1, i = "linear";
+function a(e) {
+	return Math.min(Math.max(e, 0), 1);
+}
+function o(n) {
+	let { element: o, renderer: s, tokens: c, visuals: l, arrowControl: u, arrowVisual: d, onFraction: f, onWarning: p } = n, m = o.bindings.find((e) => e.type === "position"), h = o.bindings.find((e) => e.type === "state"), g = {}, _ = new t(0), v, y, b = !1, x;
+	function S(e) {
+		let t = c.states[e];
+		t && (s.setAttr(l.indicator, "fill", t.indicatorColor), s.setText(l.label, t.label), s.setAttr(d, "opacity", t.blink ? "1" : "0"), t.blink ? u.resume() : u.pause());
+	}
+	function C(e, t) {
+		t !== x && (x = t, e.setTransform(l.fill, `scaleX(${t})`), f(e, t));
+	}
+	function w(e, t) {
+		_.retarget(e, t, r, i), _.snap(e);
+	}
+	if (m) {
+		let e = m.max - m.min, t = {
+			kind: "numeric",
+			write(t, n, r) {
+				if (typeof n != "number") return;
+				let s = e === 0 ? 0 : a((n - m.min) / e);
+				if (!b) {
+					b = !0, w(r, s), y = s, C(t, s), h || (v = s <= 0 ? "closed" : s >= 1 ? "open" : "opening", S(v));
+					return;
+				}
+				if (s === y) return;
+				let l = y === void 0 || s > y;
+				y = s;
+				let u = o.transitions["closed→open"], d = o.transitions["open→closed"], f = (l ? u : d) ?? {
+					duration: c.defaultStrokeMs,
+					easing: i
+				};
+				_.retarget(r, s, f.duration, f.easing), h || (v = l ? "opening" : "closing", S(v));
+			}
+		};
+		g[m.tag] = t;
+	}
+	if (h) {
+		let t = new e(h.map, o.transitions, {
+			duration: c.defaultStrokeMs,
+			easing: i
+		}, p), n = {
+			kind: "state",
+			write(e, n, r) {
+				let i = t.resolve(n, h.tag), a = i.state, o = v;
+				if (v = a, S(a), m || a === "fault") return;
+				let s = +(a === "open" || a === "opening");
+				if (o === void 0) {
+					w(r, s), y = s, C(e, s);
+					return;
+				}
+				s !== y && (y = s, _.retarget(r, s, i.transition.duration, i.transition.easing));
+			}
+		};
+		g[h.tag] = n;
+	}
+	let T = {
+		kind: "tween",
+		tick(e, t) {
+			if (C(e, _.valueAt(t)), !h && _.isSettled(t)) {
+				let e = _.valueAt(t), n = e >= 1 ? "open" : e <= 0 ? "closed" : void 0;
+				n && n !== v && (v = n, S(n));
+			}
+		},
+		snap(e, t) {
+			_.snap(t), C(e, _.valueAt(t));
+		}
+	};
+	g[`__valve-tween-${o.id}`] = T;
+	let E = {
+		kind: "animation",
+		pause() {
+			u.pause();
+		},
+		resume() {
+			v && c.states[v]?.blink && u.resume();
+		},
+		seek(e) {
+			u.seek(e);
+		}
+	};
+	return g[`__valve-animations-${o.id}`] = E, {
+		handles: g,
+		getCurrentState: () => v
+	};
+}
+//#endregion
+//#region src/valves/gate/index.ts
+var s = "http://www.w3.org/2000/svg", c = 600;
+function l(e, t, r) {
+	let i = t.tokens.valve, a = document.createElementNS(s, "g");
+	if (a.setAttribute("data-element-id", e.id), a.setAttribute("class", "vscada-valve-gate"), !i) return {
+		svg: a,
+		handles: {}
+	};
+	let { w: l, h: u } = e, d = n(t.tokens.medium, e.medium)?.color ?? i.openColor, f = document.createElementNS(s, "rect");
+	f.setAttribute("class", "vscada-valve-body"), f.setAttribute("width", String(l)), f.setAttribute("height", String(u)), f.setAttribute("fill", "none"), f.setAttribute("stroke", i.bodyOutlineColor), f.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(f);
+	let p = document.createElementNS(s, "rect");
+	p.setAttribute("class", "vscada-valve-fill"), p.setAttribute("width", String(l)), p.setAttribute("height", String(u)), p.setAttribute("fill", d), p.style.transformOrigin = "0px 0px", a.appendChild(p);
+	let m = l * .3, h = u * .6, g = document.createElementNS(s, "rect");
+	g.setAttribute("class", "vscada-valve-gate-bonnet"), g.setAttribute("x", String(l / 2 - m / 2)), g.setAttribute("y", String(-h)), g.setAttribute("width", String(m)), g.setAttribute("height", String(h)), g.setAttribute("fill", "none"), g.setAttribute("stroke", i.bodyOutlineColor), g.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(g);
+	let _ = l * .24, v = document.createElementNS(s, "rect");
+	v.setAttribute("class", "vscada-valve-gate-wedge"), v.setAttribute("x", String(l / 2 - _ / 2)), v.setAttribute("y", "0"), v.setAttribute("width", String(_)), v.setAttribute("height", String(u)), v.setAttribute("fill", i.discColor), v.style.transformOrigin = `${l / 2}px 0px`, a.appendChild(v);
+	let y = document.createElementNS(s, "g");
+	y.setAttribute("class", "vscada-valve-arrows"), y.setAttribute("opacity", "0");
+	let b = document.createElementNS(s, "path");
+	b.setAttribute("d", `M ${l * .1} ${u + 10} l -6 -4 l 0 8 z`), b.setAttribute("fill", i.arrowColor);
+	let x = document.createElementNS(s, "path");
+	x.setAttribute("d", `M ${l * .9} ${u + 10} l 6 -4 l 0 8 z`), x.setAttribute("fill", i.arrowColor), y.appendChild(b), y.appendChild(x), y.style.transformOrigin = `${l / 2}px ${u + 10}px`, a.appendChild(y);
+	let S = r.animateTransform(y, [
+		"scale(1)",
+		"scale(1.3)",
+		"scale(1)"
+	], c), C = document.createElementNS(s, "circle");
+	C.setAttribute("class", "vscada-valve-indicator"), C.setAttribute("cx", String(l * .5)), C.setAttribute("cy", String(-h - 10)), C.setAttribute("r", "5"), a.appendChild(C);
+	let w = document.createElementNS(s, "text");
+	return w.setAttribute("class", "vscada-valve-label"), w.setAttribute("x", "0"), w.setAttribute("y", String(u + 22)), w.setAttribute("font-size", "9"), w.setAttribute("fill", i.arrowColor), a.appendChild(w), {
+		svg: a,
+		handles: o({
+			element: e,
+			renderer: r,
+			tokens: i,
+			visuals: {
+				fill: p,
+				indicator: C,
+				label: w
+			},
+			arrowControl: S,
+			arrowVisual: y,
+			onFraction(e, t) {
+				e.setTransform(v, `translateY(${-t * (u + h)}px)`);
+			}
+		}).handles
+	};
+}
+var u = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({ "valve-gate": { build: l } })
+}), d = "http://www.w3.org/2000/svg", f = 600, p = 90;
+function m(e, t, r) {
+	let i = t.tokens.valve, a = document.createElementNS(d, "g");
+	if (a.setAttribute("data-element-id", e.id), a.setAttribute("class", "vscada-valve-ball"), !i) return {
+		svg: a,
+		handles: {}
+	};
+	let { w: s, h: c } = e, l = n(t.tokens.medium, e.medium)?.color ?? i.openColor, u = s / 2, m = c / 2, h = Math.min(s, c) * .45, g = document.createElementNS(d, "circle");
+	g.setAttribute("class", "vscada-valve-body"), g.setAttribute("cx", String(u)), g.setAttribute("cy", String(m)), g.setAttribute("r", String(h)), g.setAttribute("fill", "none"), g.setAttribute("stroke", i.bodyOutlineColor), g.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(g);
+	let _ = document.createElementNS(d, "rect");
+	_.setAttribute("class", "vscada-valve-fill"), _.setAttribute("width", String(s)), _.setAttribute("height", String(c)), _.setAttribute("fill", l), _.style.transformOrigin = "0px 0px", a.appendChild(_);
+	let v = document.createElementNS(d, "ellipse");
+	v.setAttribute("class", "vscada-valve-ball-bore"), v.setAttribute("cx", String(u)), v.setAttribute("cy", String(m)), v.setAttribute("rx", String(h * .7)), v.setAttribute("ry", String(h * .22)), v.setAttribute("fill", i.discColor), v.style.transformOrigin = `${u}px ${m}px`, a.appendChild(v);
+	let y = document.createElementNS(d, "g");
+	y.setAttribute("class", "vscada-valve-arrows"), y.setAttribute("opacity", "0");
+	let b = document.createElementNS(d, "path");
+	b.setAttribute("d", `M ${s * .1} ${c + 10} l -6 -4 l 0 8 z`), b.setAttribute("fill", i.arrowColor);
+	let x = document.createElementNS(d, "path");
+	x.setAttribute("d", `M ${s * .9} ${c + 10} l 6 -4 l 0 8 z`), x.setAttribute("fill", i.arrowColor), y.appendChild(b), y.appendChild(x), y.style.transformOrigin = `${u}px ${c + 10}px`, a.appendChild(y);
+	let S = r.animateTransform(y, [
+		"scale(1)",
+		"scale(1.3)",
+		"scale(1)"
+	], f), C = document.createElementNS(d, "circle");
+	C.setAttribute("class", "vscada-valve-indicator"), C.setAttribute("cx", String(u)), C.setAttribute("cy", "-10"), C.setAttribute("r", "5"), a.appendChild(C);
+	let w = document.createElementNS(d, "text");
+	return w.setAttribute("class", "vscada-valve-label"), w.setAttribute("x", "0"), w.setAttribute("y", String(c + 22)), w.setAttribute("font-size", "9"), w.setAttribute("fill", i.arrowColor), a.appendChild(w), {
+		svg: a,
+		handles: o({
+			element: e,
+			renderer: r,
+			tokens: i,
+			visuals: {
+				fill: _,
+				indicator: C,
+				label: w
+			},
+			arrowControl: S,
+			arrowVisual: y,
+			onFraction(e, t) {
+				let n = (1 - t) * p;
+				e.setTransform(v, `rotate(${n}deg)`);
+			}
+		}).handles
+	};
+}
+var h = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({ "valve-ball": { build: m } })
+}), g = "http://www.w3.org/2000/svg", _ = 600, v = .12;
+function y(e, t, r) {
+	let i = t.tokens.valve, a = document.createElementNS(g, "g");
+	if (a.setAttribute("data-element-id", e.id), a.setAttribute("class", "vscada-valve-butterfly"), !i) return {
+		svg: a,
+		handles: {}
+	};
+	let { w: s, h: c } = e, l = n(t.tokens.medium, e.medium)?.color ?? i.openColor, u = s / 2, d = c / 2, f = Math.min(s, c) * .45, p = document.createElementNS(g, "circle");
+	p.setAttribute("class", "vscada-valve-body"), p.setAttribute("cx", String(u)), p.setAttribute("cy", String(d)), p.setAttribute("r", String(f)), p.setAttribute("fill", "none"), p.setAttribute("stroke", i.bodyOutlineColor), p.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(p);
+	let m = document.createElementNS(g, "rect");
+	m.setAttribute("class", "vscada-valve-fill"), m.setAttribute("width", String(s)), m.setAttribute("height", String(c)), m.setAttribute("fill", l), m.style.transformOrigin = "0px 0px", a.appendChild(m);
+	let h = document.createElementNS(g, "ellipse");
+	h.setAttribute("class", "vscada-valve-butterfly-disc"), h.setAttribute("cx", String(u)), h.setAttribute("cy", String(d)), h.setAttribute("rx", String(f * .85)), h.setAttribute("ry", String(f * .85)), h.setAttribute("fill", i.discColor), h.style.transformOrigin = `${u}px ${d}px`, a.appendChild(h);
+	let y = document.createElementNS(g, "line");
+	y.setAttribute("class", "vscada-valve-butterfly-shaft"), y.setAttribute("x1", String(u)), y.setAttribute("x2", String(u)), y.setAttribute("y1", String(d - f)), y.setAttribute("y2", String(d + f)), y.setAttribute("stroke", i.bodyOutlineColor), y.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(y);
+	let b = document.createElementNS(g, "g");
+	b.setAttribute("class", "vscada-valve-arrows"), b.setAttribute("opacity", "0");
+	let x = document.createElementNS(g, "path");
+	x.setAttribute("d", `M ${s * .1} ${c + 10} l -6 -4 l 0 8 z`), x.setAttribute("fill", i.arrowColor);
+	let S = document.createElementNS(g, "path");
+	S.setAttribute("d", `M ${s * .9} ${c + 10} l 6 -4 l 0 8 z`), S.setAttribute("fill", i.arrowColor), b.appendChild(x), b.appendChild(S), b.style.transformOrigin = `${u}px ${c + 10}px`, a.appendChild(b);
+	let C = r.animateTransform(b, [
+		"scale(1)",
+		"scale(1.3)",
+		"scale(1)"
+	], _), w = document.createElementNS(g, "circle");
+	w.setAttribute("class", "vscada-valve-indicator"), w.setAttribute("cx", String(u)), w.setAttribute("cy", "-10"), w.setAttribute("r", "5"), a.appendChild(w);
+	let T = document.createElementNS(g, "text");
+	return T.setAttribute("class", "vscada-valve-label"), T.setAttribute("x", "0"), T.setAttribute("y", String(c + 22)), T.setAttribute("font-size", "9"), T.setAttribute("fill", i.arrowColor), a.appendChild(T), {
+		svg: a,
+		handles: o({
+			element: e,
+			renderer: r,
+			tokens: i,
+			visuals: {
+				fill: m,
+				indicator: w,
+				label: T
+			},
+			arrowControl: C,
+			arrowVisual: b,
+			onFraction(e, t) {
+				let n = 1 - t * (1 - v);
+				e.setTransform(h, `scaleX(${n})`);
+			}
+		}).handles
+	};
+}
+var b = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({ "valve-butterfly": { build: y } })
+}), x = "http://www.w3.org/2000/svg", S = 600;
+function C(e, t, r) {
+	let i = t.tokens.valve, a = document.createElementNS(x, "g");
+	if (a.setAttribute("data-element-id", e.id), a.setAttribute("class", "vscada-valve-control"), !i) return {
+		svg: a,
+		handles: {}
+	};
+	let { w: s, h: c } = e, l = n(t.tokens.medium, e.medium)?.color ?? i.openColor, u = document.createElementNS(x, "rect");
+	u.setAttribute("class", "vscada-valve-body"), u.setAttribute("width", String(s)), u.setAttribute("height", String(c)), u.setAttribute("fill", "none"), u.setAttribute("stroke", i.bodyOutlineColor), u.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(u);
+	let d = document.createElementNS(x, "rect");
+	d.setAttribute("class", "vscada-valve-fill"), d.setAttribute("width", String(s)), d.setAttribute("height", String(c)), d.setAttribute("fill", l), d.style.transformOrigin = "0px 0px", a.appendChild(d);
+	let f = s * .3, p = c * .6, m = c * .7, h = document.createElementNS(x, "rect");
+	h.setAttribute("class", "vscada-valve-control-bonnet"), h.setAttribute("x", String(s / 2 - f / 2)), h.setAttribute("y", String(-p - m)), h.setAttribute("width", String(f)), h.setAttribute("height", String(p)), h.setAttribute("fill", "none"), h.setAttribute("stroke", i.bodyOutlineColor), h.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(h);
+	let g = document.createElementNS(x, "path");
+	g.setAttribute("class", "vscada-valve-control-actuator");
+	let _ = f * .9, v = -p - m;
+	g.setAttribute("d", `M ${s / 2 - _} ${v} A ${_} ${_} 0 0 1 ${s / 2 + _} ${v} Z`), g.setAttribute("fill", "none"), g.setAttribute("stroke", i.bodyOutlineColor), g.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(g);
+	let y = s * .24, b = document.createElementNS(x, "rect");
+	b.setAttribute("class", "vscada-valve-control-wedge"), b.setAttribute("x", String(s / 2 - y / 2)), b.setAttribute("y", "0"), b.setAttribute("width", String(y)), b.setAttribute("height", String(c)), b.setAttribute("fill", i.discColor), b.style.transformOrigin = `${s / 2}px 0px`, a.appendChild(b);
+	let C = document.createElementNS(x, "g");
+	C.setAttribute("class", "vscada-valve-arrows"), C.setAttribute("opacity", "0");
+	let w = document.createElementNS(x, "path");
+	w.setAttribute("d", `M ${s * .1} ${c + 10} l -6 -4 l 0 8 z`), w.setAttribute("fill", i.arrowColor);
+	let T = document.createElementNS(x, "path");
+	T.setAttribute("d", `M ${s * .9} ${c + 10} l 6 -4 l 0 8 z`), T.setAttribute("fill", i.arrowColor), C.appendChild(w), C.appendChild(T), C.style.transformOrigin = `${s / 2}px ${c + 10}px`, a.appendChild(C);
+	let E = r.animateTransform(C, [
+		"scale(1)",
+		"scale(1.3)",
+		"scale(1)"
+	], S), D = document.createElementNS(x, "circle");
+	D.setAttribute("class", "vscada-valve-indicator"), D.setAttribute("cx", String(s * .5)), D.setAttribute("cy", String(v - 10)), D.setAttribute("r", "5"), a.appendChild(D);
+	let O = document.createElementNS(x, "text");
+	O.setAttribute("class", "vscada-valve-label"), O.setAttribute("x", "0"), O.setAttribute("y", String(c + 22)), O.setAttribute("font-size", "9"), O.setAttribute("fill", i.arrowColor), a.appendChild(O);
+	let k = document.createElementNS(x, "text");
+	return k.setAttribute("class", "vscada-valve-control-readout"), k.setAttribute("x", String(s / 2)), k.setAttribute("y", String(v - _ - 6)), k.setAttribute("font-size", "9"), k.setAttribute("text-anchor", "middle"), k.setAttribute("fill", i.arrowColor), a.appendChild(k), {
+		svg: a,
+		handles: o({
+			element: e,
+			renderer: r,
+			tokens: i,
+			visuals: {
+				fill: d,
+				indicator: D,
+				label: O
+			},
+			arrowControl: E,
+			arrowVisual: C,
+			onFraction(e, t) {
+				e.setTransform(b, `translateY(${-t * (c + p)}px)`), e.setText(k, `${Math.round(t * 100)}%`);
+			}
+		}).handles
+	};
+}
+var w = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({ "valve-control": { build: C } })
+}), T = "http://www.w3.org/2000/svg", E = 600, D = 90;
+function O(e, t, r) {
+	let i = t.tokens.valve, a = document.createElementNS(T, "g");
+	if (a.setAttribute("data-element-id", e.id), a.setAttribute("class", "vscada-valve-check"), !i) return {
+		svg: a,
+		handles: {}
+	};
+	let { w: s, h: c } = e, l = n(t.tokens.medium, e.medium)?.color ?? i.openColor, u = document.createElementNS(T, "rect");
+	u.setAttribute("class", "vscada-valve-body"), u.setAttribute("width", String(s)), u.setAttribute("height", String(c)), u.setAttribute("fill", "none"), u.setAttribute("stroke", i.bodyOutlineColor), u.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(u);
+	let d = document.createElementNS(T, "rect");
+	d.setAttribute("class", "vscada-valve-fill"), d.setAttribute("width", String(s)), d.setAttribute("height", String(c)), d.setAttribute("fill", l), d.style.transformOrigin = "0px 0px", a.appendChild(d);
+	let f = document.createElementNS(T, "path");
+	f.setAttribute("class", "vscada-valve-check-flow-glyph"), f.setAttribute("d", `M ${s * .15} ${c / 2} L ${s * .75} ${c / 2} M ${s * .6} ${c / 2 - 5} L ${s * .75} ${c / 2} L ${s * .6} ${c / 2 + 5}`), f.setAttribute("stroke", i.discColor), f.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), f.setAttribute("fill", "none"), a.appendChild(f);
+	let p = c * .8, m = document.createElementNS(T, "rect");
+	m.setAttribute("class", "vscada-valve-check-flap"), m.setAttribute("x", String(s / 2 - 2)), m.setAttribute("y", String(c - p)), m.setAttribute("width", "4"), m.setAttribute("height", String(p)), m.setAttribute("fill", i.discColor), m.style.transformOrigin = `${s / 2}px ${c}px`, a.appendChild(m);
+	let h = document.createElementNS(T, "g");
+	h.setAttribute("class", "vscada-valve-arrows"), h.setAttribute("opacity", "0");
+	let g = document.createElementNS(T, "path");
+	g.setAttribute("d", `M ${s * .1} ${c + 10} l -6 -4 l 0 8 z`), g.setAttribute("fill", i.arrowColor);
+	let _ = document.createElementNS(T, "path");
+	_.setAttribute("d", `M ${s * .9} ${c + 10} l 6 -4 l 0 8 z`), _.setAttribute("fill", i.arrowColor), h.appendChild(g), h.appendChild(_), h.style.transformOrigin = `${s / 2}px ${c + 10}px`, a.appendChild(h);
+	let v = r.animateTransform(h, [
+		"scale(1)",
+		"scale(1.3)",
+		"scale(1)"
+	], E), y = document.createElementNS(T, "circle");
+	y.setAttribute("class", "vscada-valve-indicator"), y.setAttribute("cx", String(s * .5)), y.setAttribute("cy", "-10"), y.setAttribute("r", "5"), a.appendChild(y);
+	let b = document.createElementNS(T, "text");
+	return b.setAttribute("class", "vscada-valve-label"), b.setAttribute("x", "0"), b.setAttribute("y", String(c + 22)), b.setAttribute("font-size", "9"), b.setAttribute("fill", i.arrowColor), a.appendChild(b), {
+		svg: a,
+		handles: o({
+			element: e,
+			renderer: r,
+			tokens: i,
+			visuals: {
+				fill: d,
+				indicator: y,
+				label: b
+			},
+			arrowControl: v,
+			arrowVisual: h,
+			onFraction(e, t) {
+				let n = -(1 - t) * D;
+				e.setTransform(m, `rotate(${n}deg)`);
+			}
+		}).handles
+	};
+}
+var k = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({ "valve-check": { build: O } })
+}), A = "http://www.w3.org/2000/svg", j = 600, M = 4, N = .75;
+function P(e, t, r) {
+	let i = t.tokens.valve, a = document.createElementNS(A, "g");
+	if (a.setAttribute("data-element-id", e.id), a.setAttribute("class", "vscada-valve-relief"), !i) return {
+		svg: a,
+		handles: {}
+	};
+	let { w: s, h: c } = e, l = n(t.tokens.medium, e.medium)?.color ?? i.openColor, u = document.createElementNS(A, "rect");
+	u.setAttribute("class", "vscada-valve-body"), u.setAttribute("width", String(s)), u.setAttribute("height", String(c)), u.setAttribute("fill", "none"), u.setAttribute("stroke", i.bodyOutlineColor), u.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(u);
+	let d = document.createElementNS(A, "rect");
+	d.setAttribute("class", "vscada-valve-fill"), d.setAttribute("width", String(s)), d.setAttribute("height", String(c)), d.setAttribute("fill", l), d.style.transformOrigin = "0px 0px", a.appendChild(d);
+	let f = s * .3, p = c * .7, m = document.createElementNS(A, "rect");
+	m.setAttribute("class", "vscada-valve-relief-bonnet"), m.setAttribute("x", String(s / 2 - f / 2)), m.setAttribute("y", String(-p)), m.setAttribute("width", String(f)), m.setAttribute("height", String(p)), m.setAttribute("fill", "none"), m.setAttribute("stroke", i.bodyOutlineColor), m.setAttribute("stroke-width", String(i.strokeWidth ?? 2)), a.appendChild(m);
+	let h = -p * .85, g = -p * .15, _ = document.createElementNS(A, "polyline");
+	_.setAttribute("class", "vscada-valve-relief-spring"), _.setAttribute("fill", "none"), _.setAttribute("stroke", i.bodyOutlineColor), _.setAttribute("stroke-width", String((i.strokeWidth ?? 2) * N)), a.appendChild(_);
+	function v(e) {
+		let t = [];
+		for (let n = 0; n <= M * 2; n++) {
+			let r = h + (e - h) * n / (M * 2), i = s / 2 + (n % 2 == 0 ? -f * .28 : f * .28);
+			t.push(`${i},${r}`);
+		}
+		return t.join(" ");
+	}
+	_.setAttribute("points", v(g));
+	let y = s * .3, b = document.createElementNS(A, "rect");
+	b.setAttribute("class", "vscada-valve-relief-disc"), b.setAttribute("x", String(s / 2 - y / 2)), b.setAttribute("y", "-4"), b.setAttribute("width", String(y)), b.setAttribute("height", "4"), b.setAttribute("fill", i.discColor), b.style.transformOrigin = `${s / 2}px 0px`, a.appendChild(b);
+	let x = document.createElementNS(A, "g");
+	x.setAttribute("class", "vscada-valve-arrows"), x.setAttribute("opacity", "0");
+	let S = document.createElementNS(A, "path");
+	S.setAttribute("d", `M ${s * .1} ${c + 10} l -6 -4 l 0 8 z`), S.setAttribute("fill", i.arrowColor);
+	let C = document.createElementNS(A, "path");
+	C.setAttribute("d", `M ${s * .9} ${c + 10} l 6 -4 l 0 8 z`), C.setAttribute("fill", i.arrowColor), x.appendChild(S), x.appendChild(C), x.style.transformOrigin = `${s / 2}px ${c + 10}px`, a.appendChild(x);
+	let w = r.animateTransform(x, [
+		"scale(1)",
+		"scale(1.3)",
+		"scale(1)"
+	], j), T = document.createElementNS(A, "circle");
+	T.setAttribute("class", "vscada-valve-indicator"), T.setAttribute("cx", String(s * .5)), T.setAttribute("cy", String(-p - 10)), T.setAttribute("r", "5"), a.appendChild(T);
+	let E = document.createElementNS(A, "text");
+	E.setAttribute("class", "vscada-valve-label"), E.setAttribute("x", "0"), E.setAttribute("y", String(c + 22)), E.setAttribute("font-size", "9"), E.setAttribute("fill", i.arrowColor), a.appendChild(E);
+	let D = p * .5;
+	return {
+		svg: a,
+		handles: o({
+			element: e,
+			renderer: r,
+			tokens: i,
+			visuals: {
+				fill: d,
+				indicator: T,
+				label: E
+			},
+			arrowControl: w,
+			arrowVisual: x,
+			onFraction(e, t) {
+				e.setTransform(b, `translateY(${-t * D}px)`), e.setAttr(_, "points", v(g - t * D));
+			}
+		}).handles
+	};
+}
+var F = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({ "valve-relief": { build: P } })
+}), I = Object.freeze({
+	group: "valves",
+	primitives: Object.freeze({
+		...u.primitives,
+		...h.primitives,
+		...b.primitives,
+		...w.primitives,
+		...k.primitives,
+		...F.primitives
+	})
+});
+//#endregion
+export { I as valves };

package/dist/vapor/base.d.ts

@@ -0,0 +1,42 @@
+import type { HandleMap, MediumPlumeStyle, SceneElement, ValueWarningDetail } from '@vscada/core';
+import type { BillowLayer } from './billow-layer';
+export interface VaporEmissionDriveOptions {
+    element: SceneElement;
+    /** The primitive's own root group — toggled `opacity` 0/1 as a whole (AC1: zero emission renders NOTHING, not a faint ghost from opacity math alone). */
+    group: Element;
+    layers: BillowLayer[];
+    /** Task 3's declared (not-yet-consumed) reduced-motion static representation — opacity-driven alongside the animated layers so it's already correct whenever Story 4.4 wires it up. */
+    staticGlyph?: Element;
+    /** The resolved medium's own §7.4 plume params (opacity/driftSpeed) — steam/flue-gas only. */
+    plumeStyle: MediumPlumeStyle;
+    /** steam-vent's "brighter white" tuning (Task 2) — a documented numeric factor over the medium's own registered opacity, never a new literal color (AD-7). Defaults to 1 (plume: no boost). */
+    brightnessFactor?: number;
+    onWarning?: (detail: ValueWarningDetail) => void;
+}
+export interface VaporEmissionDrive {
+    handles: HandleMap;
+}
+/**
+ * Wires one element's `emission` binding to: (a) the root group's own
+ * hide/show (AC1), (b) each billow layer's fill-opacity (medium's
+ * registered `plume.opacity`, scaled by resolved intensity and the
+ * caller's brightness tuning), and (c) each layer's drift playbackRate
+ * (`plume.driftSpeed`, scaled the same way). A no-op (empty handles) when
+ * the element declares no `emission` binding — matches every other
+ * optional-channel primitive's degrade-gracefully convention
+ * (`heat/base.ts`'s `buildFiringStateDrive`).
+ */
+export declare function buildVaporEmissionDrive(opts: VaporEmissionDriveOptions): VaporEmissionDrive;
+/**
+ * Story 4.4 Task 1 — consumes Task 3's declared-but-inert `staticGlyph`:
+ * an opacity-fade drift (unlike a rotating impeller or a dashed flow line)
+ * pauses on an ambiguous half-formed frame, so plume/steam-vent are the
+ * ONE primitive group in the kit that needs an explicit static swap
+ * rather than just relying on `AnimationHandle.pause()` holding still.
+ * `activate()`/`deactivate()` only ever toggle `display` — the glyph's
+ * `fill-opacity` itself stays driven in lockstep by `buildVaporEmissionDrive`
+ * regardless of which representation is currently shown.
+ */
+export declare function buildVaporStaticRepresentationHandle(elementId: string, layers: BillowLayer[], staticGlyph: Element | undefined): HandleMap;
+export declare function buildVaporDriftAnimationHandle(elementId: string, layers: BillowLayer[]): HandleMap;
+//# sourceMappingURL=base.d.ts.map

package/dist/vapor/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/vapor/base.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAA2B,YAAY,EAA8B,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvJ,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAmBlD,MAAM,WAAW,yBAAyB;IACxC,OAAO,EAAE,YAAY,CAAC;IACtB,yJAAyJ;IACzJ,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,uLAAuL;IACvL,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8FAA8F;IAC9F,UAAU,EAAE,gBAAgB,CAAC;IAC7B,+LAA+L;IAC/L,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CAClD;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,SAAS,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,yBAAyB,GAAG,kBAAkB,CAmC3F;AAED;;;;;;;;;GASG;AACH,wBAAgB,oCAAoC,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,WAAW,EAAE,OAAO,GAAG,SAAS,GAAG,SAAS,CAe1I;AAED,wBAAgB,8BAA8B,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,SAAS,CAgBlG"}

package/dist/vapor/billow-layer.d.ts

@@ -0,0 +1,33 @@
+import type { AnimationControl, Renderer } from '@vscada/core';
+/** Reference duration for one full `translateY(-period)` drift loop at playbackRate 1 — same "documented default, not spec-pinned" convention as `wave-layer.ts`'s `BASE_WAVE_DURATION_MS`. */
+export declare const BASE_DRIFT_DURATION_MS = 3000;
+export interface BillowLayerParams {
+    /** The plume/vent's own local height — the band is built at `containerHeight + period` tall (Bug-1-fix-shaped, same reasoning as `wave-layer.ts`'s `containerWidth + period`). */
+    containerHeight: number;
+    /** Local-space horizontal center this layer's band is placed at (a static, non-animated wrapper transform — never combined onto the WAAPI-driven loop node itself). */
+    centerX: number;
+    baseHalfWidth: number;
+    wobble: number;
+    /** Vertical wobble period AND the exact px distance the WAAPI loop translates by — reusing one value for both is what makes the loop seamless (§7.3's trick, `wave-layer.ts`'s same reuse). */
+    period: number;
+    /** Already-resolved theme/medium color — never a literal hex (AD-7). */
+    color: string;
+    durationMs?: number;
+}
+export interface BillowLayer {
+    /** Static positioning wrapper appended into the primitive's own SVG tree. */
+    carrier: SVGGElement;
+    /** The billow band's own fill path — its `fill-opacity` is the emission-driven write target. */
+    fill: SVGPathElement;
+    /** The one WAAPI loop control for this layer — pause/resume/seek reach it via the primitive's own `AnimationHandle` (AD-5). */
+    control: AnimationControl;
+}
+/**
+ * Builds ONE billow layer: a static `carrier` (horizontal centering only)
+ * wrapping a `loop` group (Y, WAAPI-driven seamless drift) wrapping the
+ * billow path. `buildBillowPathD` is called exactly ONCE here — every
+ * subsequent change (emission intensity, playback rate, freeze) is an
+ * attribute write or a WAAPI control call, never a re-build (AD-2).
+ */
+export declare function buildBillowLayer(params: BillowLayerParams, renderer: Renderer): BillowLayer;
+//# sourceMappingURL=billow-layer.d.ts.map

package/dist/vapor/billow-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"billow-layer.d.ts","sourceRoot":"","sources":["../../src/vapor/billow-layer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAM/D,+LAA+L;AAC/L,eAAO,MAAM,sBAAsB,OAAO,CAAC;AAE3C,MAAM,WAAW,iBAAiB;IAChC,kLAAkL;IAClL,eAAe,EAAE,MAAM,CAAC;IACxB,uKAAuK;IACvK,OAAO,EAAE,MAAM,CAAC;IAChB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,+LAA+L;IAC/L,MAAM,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,WAAW;IAC1B,6EAA6E;IAC7E,OAAO,EAAE,WAAW,CAAC;IACrB,gGAAgG;IAChG,IAAI,EAAE,cAAc,CAAC;IACrB,+HAA+H;IAC/H,OAAO,EAAE,gBAAgB,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,GAAG,WAAW,CAwB3F"}

package/dist/vapor/billow-path.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Billow-band geometry (Story 3.8 Task 1) — the vertical analogue of
+ * `vessel-body/liquid/wave-path.ts`'s sine-crest technique (§7.3's "seamless
+ * period trick"): a closed band whose half-width oscillates sinusoidally
+ * with `y`, built tall enough (`height = containerHeight + period`) that
+ * translating it by exactly one `period` on the Y axis (via
+ * `motion/seamless-loop.ts`) loops seamlessly. Pure math — no DOM here —
+ * so the periodicity claim (AD-2's "structure once" hinges on it: if this
+ * weren't exactly periodic, a translateY loop would visibly jump at the
+ * seam) is directly unit-testable without a browser.
+ */
+/** Px between samples along the billow edge — same magnitude as `wave-path.ts`'s `WAVE_SAMPLE_STEP_PX`. */
+export declare const BILLOW_SAMPLE_STEP_PX = 6;
+export interface BillowPoint {
+    x: number;
+    y: number;
+}
+/**
+ * The right-edge half-width samples from `y=0` to `y=height` inclusive —
+ * `x` values only (the band is symmetric about x=0; `buildBillowPathD`
+ * mirrors these for the left edge).
+ */
+export declare function buildBillowEdgePoints(height: number, baseHalfWidth: number, wobble: number, period: number, sampleStep?: number): BillowPoint[];
+/**
+ * The closed billow band's fillable `d`: the right-edge wobble curve down
+ * from `y=0` to `y=height`, mirrored back up the left edge, closed. Built
+ * exactly ONCE per layer (AD-2); every subsequent emission/playback change
+ * is a renderer-seam attribute write or a WAAPI control call, never a
+ * re-build. Centered on `x=0` — the caller translates to the plume's own
+ * horizontal center (a static, non-animated wrapper transform, kept
+ * separate from the WAAPI-driven loop node so the two transforms never
+ * collide on the same element, matching `wave-layer.ts`'s carrier/loop
+ * split).
+ */
+export declare function buildBillowPathD(height: number, baseHalfWidth: number, wobble: number, period: number, sampleStep?: number): string;
+//# sourceMappingURL=billow-path.d.ts.map

package/dist/vapor/billow-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"billow-path.d.ts","sourceRoot":"","sources":["../../src/vapor/billow-path.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,2GAA2G;AAC3G,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,MAAM,WAAW,WAAW;IAC1B,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAMD;;;;GAIG;AACH,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,GAAE,MAA8B,GACzC,WAAW,EAAE,CAQf;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,MAAM,EACrB,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,UAAU,GAAE,MAA8B,GACzC,MAAM,CAIR"}

package/dist/vapor/index.d.ts

@@ -0,0 +1,8 @@
+import type { PrimitiveGroup } from '@vscada/core';
+/**
+ * Vapor entry point (Story 3.8's batch) — merges plume/steam-vent's
+ * registered `primitives` records into one `PrimitiveGroup`, matching
+ * `heat/index.ts`/`filtration/index.ts`'s established merge pattern.
+ */
+export declare const vapor: PrimitiveGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/vapor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/vapor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAInD;;;;GAIG;AACH,eAAO,MAAM,KAAK,EAAE,cAMlB,CAAC"}

package/dist/vapor/plume/index.d.ts

@@ -0,0 +1,3 @@
+import type { PrimitiveGroup } from '@vscada/core';
+export declare const vapor: PrimitiveGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/vapor/plume/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vapor/plume/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,cAAc,EAAyD,MAAM,cAAc,CAAC;AAsFrH,eAAO,MAAM,KAAK,EAAE,cAGlB,CAAC"}

package/dist/vapor/plume/plume.stories.d.ts

@@ -0,0 +1,9 @@
+import { type VaporStory, type VaporStoryMeta } from '../story-kit';
+export declare const meta: VaporStoryMeta;
+export declare const Zero: VaporStory;
+export declare const Mid: VaporStory;
+export declare const Max: VaporStory;
+export declare const StaleFreeze: VaporStory;
+export declare function render(container: HTMLElement, story?: VaporStory): import("../story-kit").MountedVaporStory;
+export default meta;
+//# sourceMappingURL=plume.stories.d.ts.map

package/dist/vapor/plume/plume.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plume.stories.d.ts","sourceRoot":"","sources":["../../../src/vapor/plume/plume.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAErF,eAAO,MAAM,IAAI,EAAE,cAMlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,UAA+G,CAAC;AACnI,eAAO,MAAM,GAAG,EAAE,UAAsG,CAAC;AACzH,eAAO,MAAM,GAAG,EAAE,UAAuG,CAAC;AAC1H,eAAO,MAAM,WAAW,EAAE,UAAmI,CAAC;AAE9J,wBAAgB,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,GAAE,UAAgB,4CAErE;AAED,eAAe,IAAI,CAAC"}

package/dist/vapor/steam-vent/index.d.ts

@@ -0,0 +1,3 @@
+import type { PrimitiveGroup } from '@vscada/core';
+export declare const vapor: PrimitiveGroup;
+//# sourceMappingURL=index.d.ts.map

package/dist/vapor/steam-vent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/vapor/steam-vent/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAa,cAAc,EAAyD,MAAM,cAAc,CAAC;AA4FrH,eAAO,MAAM,KAAK,EAAE,cAGlB,CAAC"}

package/dist/vapor/steam-vent/steam-vent.stories.d.ts

@@ -0,0 +1,9 @@
+import { type VaporStory, type VaporStoryMeta } from '../story-kit';
+export declare const meta: VaporStoryMeta;
+export declare const Zero: VaporStory;
+export declare const Mid: VaporStory;
+export declare const Max: VaporStory;
+export declare const StaleFreeze: VaporStory;
+export declare function render(container: HTMLElement, story?: VaporStory): import("../story-kit").MountedVaporStory;
+export default meta;
+//# sourceMappingURL=steam-vent.stories.d.ts.map

package/dist/vapor/steam-vent/steam-vent.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"steam-vent.stories.d.ts","sourceRoot":"","sources":["../../../src/vapor/steam-vent/steam-vent.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAErF,eAAO,MAAM,IAAI,EAAE,cAMlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,UAA+G,CAAC;AACnI,eAAO,MAAM,GAAG,EAAE,UAAsG,CAAC;AACzH,eAAO,MAAM,GAAG,EAAE,UAAuG,CAAC;AAC1H,eAAO,MAAM,WAAW,EAAE,UAAmI,CAAC;AAE9J,wBAAgB,MAAM,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,GAAE,UAAgB,4CAErE;AAED,eAAe,IAAI,CAAC"}

package/dist/vapor/story-kit.d.ts

@@ -0,0 +1,28 @@
+import { ScadaView, type Binding, type Renderer, type TagValue, type TimeSource } from '@vscada/core';
+export interface VaporStoryMeta {
+    title: string;
+    /** The registered primitive `type` — must be a key in `vapor.primitives`. */
+    elementType: string;
+    width: number;
+    height: number;
+    bindings: Binding[];
+    medium?: string;
+}
+export interface VaporStory {
+    name: string;
+    values: TagValue[];
+    /** Reuses Story 1.6's freeze mechanism (`connectionState = 'disconnected'`). */
+    stale?: boolean;
+}
+export interface MountedVaporStory {
+    element: ScadaView;
+    setValues(values: TagValue[]): void;
+    teardown(): void;
+}
+export interface MountVaporStoryOptions {
+    /** Real usage always gets the real WAAPI-backed `domRenderer`; tests inject a stub (jsdom/happy-dom has no `Element.animate`). */
+    renderer?: Renderer;
+    timeSource?: TimeSource;
+}
+export declare function mountVaporStory(container: HTMLElement, meta: VaporStoryMeta, story: VaporStory, options?: MountVaporStoryOptions): MountedVaporStory;
+//# sourceMappingURL=story-kit.d.ts.map