@niivue/nv-web-component 1.0.0-rc.2 → 1.0.0-rc.21

package/dist/nv-web-component.js

@@ -0,0 +1,1363 @@
+import e, { DRAG_MODE as t, DRAG_MODE as n, SHOW_RENDER as r, SLICE_TYPE as i, SLICE_TYPE as a } from "@niivue/niivue";
+//#region ../../node_modules/@lit/reactive-element/css-tag.js
+var o = globalThis, s = o.ShadowRoot && (o.ShadyCSS === void 0 || o.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, c = Symbol(), l = /* @__PURE__ */ new WeakMap(), u = class {
+	constructor(e, t, n) {
+		if (this._$cssResult$ = !0, n !== c) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+		this.cssText = e, this.t = t;
+	}
+	get styleSheet() {
+		let e = this.o, t = this.t;
+		if (s && e === void 0) {
+			let n = t !== void 0 && t.length === 1;
+			n && (e = l.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), n && l.set(t, e));
+		}
+		return e;
+	}
+	toString() {
+		return this.cssText;
+	}
+}, d = (e) => new u(typeof e == "string" ? e : e + "", void 0, c), ee = (e, ...t) => new u(e.length === 1 ? e[0] : t.reduce((t, n, r) => t + ((e) => {
+	if (!0 === e._$cssResult$) return e.cssText;
+	if (typeof e == "number") return e;
+	throw Error("Value passed to 'css' function must be a 'css' function result: " + e + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
+})(n) + e[r + 1], e[0]), e, c), te = (e, t) => {
+	if (s) e.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
+	else for (let n of t) {
+		let t = document.createElement("style"), r = o.litNonce;
+		r !== void 0 && t.setAttribute("nonce", r), t.textContent = n.cssText, e.appendChild(t);
+	}
+}, f = s ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((e) => {
+	let t = "";
+	for (let n of e.cssRules) t += n.cssText;
+	return d(t);
+})(e) : e, { is: ne, defineProperty: re, getOwnPropertyDescriptor: ie, getOwnPropertyNames: ae, getOwnPropertySymbols: oe, getPrototypeOf: se } = Object, p = globalThis, ce = p.trustedTypes, le = ce ? ce.emptyScript : "", ue = p.reactiveElementPolyfillSupport, m = (e, t) => e, h = {
+	toAttribute(e, t) {
+		switch (t) {
+			case Boolean:
+				e = e ? le : null;
+				break;
+			case Object:
+			case Array: e = e == null ? e : JSON.stringify(e);
+		}
+		return e;
+	},
+	fromAttribute(e, t) {
+		let n = e;
+		switch (t) {
+			case Boolean:
+				n = e !== null;
+				break;
+			case Number:
+				n = e === null ? null : Number(e);
+				break;
+			case Object:
+			case Array: try {
+				n = JSON.parse(e);
+			} catch {
+				n = null;
+			}
+		}
+		return n;
+	}
+}, g = (e, t) => !ne(e, t), _ = {
+	attribute: !0,
+	type: String,
+	converter: h,
+	reflect: !1,
+	useDefault: !1,
+	hasChanged: g
+};
+Symbol.metadata ??= Symbol("metadata"), p.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+var v = class extends HTMLElement {
+	static addInitializer(e) {
+		this._$Ei(), (this.l ??= []).push(e);
+	}
+	static get observedAttributes() {
+		return this.finalize(), this._$Eh && [...this._$Eh.keys()];
+	}
+	static createProperty(e, t = _) {
+		if (t.state && (t.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(e) && ((t = Object.create(t)).wrapped = !0), this.elementProperties.set(e, t), !t.noAccessor) {
+			let n = Symbol(), r = this.getPropertyDescriptor(e, n, t);
+			r !== void 0 && re(this.prototype, e, r);
+		}
+	}
+	static getPropertyDescriptor(e, t, n) {
+		let { get: r, set: i } = ie(this.prototype, e) ?? {
+			get() {
+				return this[t];
+			},
+			set(e) {
+				this[t] = e;
+			}
+		};
+		return {
+			get: r,
+			set(t) {
+				let a = r?.call(this);
+				i?.call(this, t), this.requestUpdate(e, a, n);
+			},
+			configurable: !0,
+			enumerable: !0
+		};
+	}
+	static getPropertyOptions(e) {
+		return this.elementProperties.get(e) ?? _;
+	}
+	static _$Ei() {
+		if (this.hasOwnProperty(m("elementProperties"))) return;
+		let e = se(this);
+		e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
+	}
+	static finalize() {
+		if (this.hasOwnProperty(m("finalized"))) return;
+		if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(m("properties"))) {
+			let e = this.properties, t = [...ae(e), ...oe(e)];
+			for (let n of t) this.createProperty(n, e[n]);
+		}
+		let e = this[Symbol.metadata];
+		if (e !== null) {
+			let t = litPropertyMetadata.get(e);
+			if (t !== void 0) for (let [e, n] of t) this.elementProperties.set(e, n);
+		}
+		this._$Eh = /* @__PURE__ */ new Map();
+		for (let [e, t] of this.elementProperties) {
+			let n = this._$Eu(e, t);
+			n !== void 0 && this._$Eh.set(n, e);
+		}
+		this.elementStyles = this.finalizeStyles(this.styles);
+	}
+	static finalizeStyles(e) {
+		let t = [];
+		if (Array.isArray(e)) {
+			let n = new Set(e.flat(Infinity).reverse());
+			for (let e of n) t.unshift(f(e));
+		} else e !== void 0 && t.push(f(e));
+		return t;
+	}
+	static _$Eu(e, t) {
+		let n = t.attribute;
+		return !1 === n ? void 0 : typeof n == "string" ? n : typeof e == "string" ? e.toLowerCase() : void 0;
+	}
+	constructor() {
+		super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
+	}
+	_$Ev() {
+		this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), this.constructor.l?.forEach((e) => e(this));
+	}
+	addController(e) {
+		(this._$EO ??= /* @__PURE__ */ new Set()).add(e), this.renderRoot !== void 0 && this.isConnected && e.hostConnected?.();
+	}
+	removeController(e) {
+		this._$EO?.delete(e);
+	}
+	_$E_() {
+		let e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
+		for (let n of t.keys()) this.hasOwnProperty(n) && (e.set(n, this[n]), delete this[n]);
+		e.size > 0 && (this._$Ep = e);
+	}
+	createRenderRoot() {
+		let e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+		return te(e, this.constructor.elementStyles), e;
+	}
+	connectedCallback() {
+		this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach((e) => e.hostConnected?.());
+	}
+	enableUpdating(e) {}
+	disconnectedCallback() {
+		this._$EO?.forEach((e) => e.hostDisconnected?.());
+	}
+	attributeChangedCallback(e, t, n) {
+		this._$AK(e, n);
+	}
+	_$ET(e, t) {
+		let n = this.constructor.elementProperties.get(e), r = this.constructor._$Eu(e, n);
+		if (r !== void 0 && !0 === n.reflect) {
+			let i = (n.converter?.toAttribute === void 0 ? h : n.converter).toAttribute(t, n.type);
+			this._$Em = e, i == null ? this.removeAttribute(r) : this.setAttribute(r, i), this._$Em = null;
+		}
+	}
+	_$AK(e, t) {
+		let n = this.constructor, r = n._$Eh.get(e);
+		if (r !== void 0 && this._$Em !== r) {
+			let e = n.getPropertyOptions(r), i = typeof e.converter == "function" ? { fromAttribute: e.converter } : e.converter?.fromAttribute === void 0 ? h : e.converter;
+			this._$Em = r;
+			let a = i.fromAttribute(t, e.type);
+			this[r] = a ?? this._$Ej?.get(r) ?? a, this._$Em = null;
+		}
+	}
+	requestUpdate(e, t, n, r = !1, i) {
+		if (e !== void 0) {
+			let a = this.constructor;
+			if (!1 === r && (i = this[e]), n ??= a.getPropertyOptions(e), !((n.hasChanged ?? g)(i, t) || n.useDefault && n.reflect && i === this._$Ej?.get(e) && !this.hasAttribute(a._$Eu(e, n)))) return;
+			this.C(e, t, n);
+		}
+		!1 === this.isUpdatePending && (this._$ES = this._$EP());
+	}
+	C(e, t, { useDefault: n, reflect: r, wrapped: i }, a) {
+		n && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(e) && (this._$Ej.set(e, a ?? t ?? this[e]), !0 !== i || a !== void 0) || (this._$AL.has(e) || (this.hasUpdated || n || (t = void 0), this._$AL.set(e, t)), !0 === r && this._$Em !== e && (this._$Eq ??= /* @__PURE__ */ new Set()).add(e));
+	}
+	async _$EP() {
+		this.isUpdatePending = !0;
+		try {
+			await this._$ES;
+		} catch (e) {
+			Promise.reject(e);
+		}
+		let e = this.scheduleUpdate();
+		return e != null && await e, !this.isUpdatePending;
+	}
+	scheduleUpdate() {
+		return this.performUpdate();
+	}
+	performUpdate() {
+		if (!this.isUpdatePending) return;
+		if (!this.hasUpdated) {
+			if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
+				for (let [e, t] of this._$Ep) this[e] = t;
+				this._$Ep = void 0;
+			}
+			let e = this.constructor.elementProperties;
+			if (e.size > 0) for (let [t, n] of e) {
+				let { wrapped: e } = n, r = this[t];
+				!0 !== e || this._$AL.has(t) || r === void 0 || this.C(t, void 0, n, r);
+			}
+		}
+		let e = !1, t = this._$AL;
+		try {
+			e = this.shouldUpdate(t), e ? (this.willUpdate(t), this._$EO?.forEach((e) => e.hostUpdate?.()), this.update(t)) : this._$EM();
+		} catch (t) {
+			throw e = !1, this._$EM(), t;
+		}
+		e && this._$AE(t);
+	}
+	willUpdate(e) {}
+	_$AE(e) {
+		this._$EO?.forEach((e) => e.hostUpdated?.()), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
+	}
+	_$EM() {
+		this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
+	}
+	get updateComplete() {
+		return this.getUpdateComplete();
+	}
+	getUpdateComplete() {
+		return this._$ES;
+	}
+	shouldUpdate(e) {
+		return !0;
+	}
+	update(e) {
+		this._$Eq &&= this._$Eq.forEach((e) => this._$ET(e, this[e])), this._$EM();
+	}
+	updated(e) {}
+	firstUpdated(e) {}
+};
+v.elementStyles = [], v.shadowRootOptions = { mode: "open" }, v[m("elementProperties")] = /* @__PURE__ */ new Map(), v[m("finalized")] = /* @__PURE__ */ new Map(), ue?.({ ReactiveElement: v }), (p.reactiveElementVersions ??= []).push("2.1.2");
+//#endregion
+//#region ../../node_modules/lit-html/lit-html.js
+var y = globalThis, b = (e) => e, x = y.trustedTypes, de = x ? x.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, fe = "$lit$", S = `lit$${Math.random().toFixed(9).slice(2)}$`, pe = "?" + S, me = `<${pe}>`, C = document, w = () => C.createComment(""), T = (e) => e === null || typeof e != "object" && typeof e != "function", E = Array.isArray, he = (e) => E(e) || typeof e?.[Symbol.iterator] == "function", D = "[ 	\n\f\r]", O = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, k = /-->/g, A = />/g, j = RegExp(`>|${D}(?:([^\\s"'>=/]+)(${D}*=${D}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`, "g"), M = /'/g, N = /"/g, P = /^(?:script|style|textarea|title)$/i, F = ((e) => (t, ...n) => ({
+	_$litType$: e,
+	strings: t,
+	values: n
+}))(1), I = Symbol.for("lit-noChange"), L = Symbol.for("lit-nothing"), R = /* @__PURE__ */ new WeakMap(), z = C.createTreeWalker(C, 129);
+function B(e, t) {
+	if (!E(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+	return de === void 0 ? t : de.createHTML(t);
+}
+var ge = (e, t) => {
+	let n = e.length - 1, r = [], i, a = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", o = O;
+	for (let t = 0; t < n; t++) {
+		let n = e[t], s, c, l = -1, u = 0;
+		for (; u < n.length && (o.lastIndex = u, c = o.exec(n), c !== null);) u = o.lastIndex, o === O ? c[1] === "!--" ? o = k : c[1] === void 0 ? c[2] === void 0 ? c[3] !== void 0 && (o = j) : (P.test(c[2]) && (i = RegExp("</" + c[2], "g")), o = j) : o = A : o === j ? c[0] === ">" ? (o = i ?? O, l = -1) : c[1] === void 0 ? l = -2 : (l = o.lastIndex - c[2].length, s = c[1], o = c[3] === void 0 ? j : c[3] === "\"" ? N : M) : o === N || o === M ? o = j : o === k || o === A ? o = O : (o = j, i = void 0);
+		let d = o === j && e[t + 1].startsWith("/>") ? " " : "";
+		a += o === O ? n + me : l >= 0 ? (r.push(s), n.slice(0, l) + fe + n.slice(l) + S + d) : n + S + (l === -2 ? t : d);
+	}
+	return [B(e, a + (e[n] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
+}, V = class e {
+	constructor({ strings: t, _$litType$: n }, r) {
+		let i;
+		this.parts = [];
+		let a = 0, o = 0, s = t.length - 1, c = this.parts, [l, u] = ge(t, n);
+		if (this.el = e.createElement(l, r), z.currentNode = this.el.content, n === 2 || n === 3) {
+			let e = this.el.content.firstChild;
+			e.replaceWith(...e.childNodes);
+		}
+		for (; (i = z.nextNode()) !== null && c.length < s;) {
+			if (i.nodeType === 1) {
+				if (i.hasAttributes()) for (let e of i.getAttributeNames()) if (e.endsWith(fe)) {
+					let t = u[o++], n = i.getAttribute(e).split(S), r = /([.?@])?(.*)/.exec(t);
+					c.push({
+						type: 1,
+						index: a,
+						name: r[2],
+						strings: n,
+						ctor: r[1] === "." ? ve : r[1] === "?" ? ye : r[1] === "@" ? be : W
+					}), i.removeAttribute(e);
+				} else e.startsWith(S) && (c.push({
+					type: 6,
+					index: a
+				}), i.removeAttribute(e));
+				if (P.test(i.tagName)) {
+					let e = i.textContent.split(S), t = e.length - 1;
+					if (t > 0) {
+						i.textContent = x ? x.emptyScript : "";
+						for (let n = 0; n < t; n++) i.append(e[n], w()), z.nextNode(), c.push({
+							type: 2,
+							index: ++a
+						});
+						i.append(e[t], w());
+					}
+				}
+			} else if (i.nodeType === 8) if (i.data === pe) c.push({
+				type: 2,
+				index: a
+			});
+			else {
+				let e = -1;
+				for (; (e = i.data.indexOf(S, e + 1)) !== -1;) c.push({
+					type: 7,
+					index: a
+				}), e += S.length - 1;
+			}
+			a++;
+		}
+	}
+	static createElement(e, t) {
+		let n = C.createElement("template");
+		return n.innerHTML = e, n;
+	}
+};
+function H(e, t, n = e, r) {
+	if (t === I) return t;
+	let i = r === void 0 ? n._$Cl : n._$Co?.[r], a = T(t) ? void 0 : t._$litDirective$;
+	return i?.constructor !== a && (i?._$AO?.(!1), a === void 0 ? i = void 0 : (i = new a(e), i._$AT(e, n, r)), r === void 0 ? n._$Cl = i : (n._$Co ??= [])[r] = i), i !== void 0 && (t = H(e, i._$AS(e, t.values), i, r)), t;
+}
+var _e = class {
+	constructor(e, t) {
+		this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
+	}
+	get parentNode() {
+		return this._$AM.parentNode;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	u(e) {
+		let { el: { content: t }, parts: n } = this._$AD, r = (e?.creationScope ?? C).importNode(t, !0);
+		z.currentNode = r;
+		let i = z.nextNode(), a = 0, o = 0, s = n[0];
+		for (; s !== void 0;) {
+			if (a === s.index) {
+				let t;
+				s.type === 2 ? t = new U(i, i.nextSibling, this, e) : s.type === 1 ? t = new s.ctor(i, s.name, s.strings, this, e) : s.type === 6 && (t = new xe(i, this, e)), this._$AV.push(t), s = n[++o];
+			}
+			a !== s?.index && (i = z.nextNode(), a++);
+		}
+		return z.currentNode = C, r;
+	}
+	p(e) {
+		let t = 0;
+		for (let n of this._$AV) n !== void 0 && (n.strings === void 0 ? n._$AI(e[t]) : (n._$AI(e, n, t), t += n.strings.length - 2)), t++;
+	}
+}, U = class e {
+	get _$AU() {
+		return this._$AM?._$AU ?? this._$Cv;
+	}
+	constructor(e, t, n, r) {
+		this.type = 2, this._$AH = L, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = n, this.options = r, this._$Cv = r?.isConnected ?? !0;
+	}
+	get parentNode() {
+		let e = this._$AA.parentNode, t = this._$AM;
+		return t !== void 0 && e?.nodeType === 11 && (e = t.parentNode), e;
+	}
+	get startNode() {
+		return this._$AA;
+	}
+	get endNode() {
+		return this._$AB;
+	}
+	_$AI(e, t = this) {
+		e = H(this, e, t), T(e) ? e === L || e == null || e === "" ? (this._$AH !== L && this._$AR(), this._$AH = L) : e !== this._$AH && e !== I && this._(e) : e._$litType$ === void 0 ? e.nodeType === void 0 ? he(e) ? this.k(e) : this._(e) : this.T(e) : this.$(e);
+	}
+	O(e) {
+		return this._$AA.parentNode.insertBefore(e, this._$AB);
+	}
+	T(e) {
+		this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
+	}
+	_(e) {
+		this._$AH !== L && T(this._$AH) ? this._$AA.nextSibling.data = e : this.T(C.createTextNode(e)), this._$AH = e;
+	}
+	$(e) {
+		let { values: t, _$litType$: n } = e, r = typeof n == "number" ? this._$AC(e) : (n.el === void 0 && (n.el = V.createElement(B(n.h, n.h[0]), this.options)), n);
+		if (this._$AH?._$AD === r) this._$AH.p(t);
+		else {
+			let e = new _e(r, this), n = e.u(this.options);
+			e.p(t), this.T(n), this._$AH = e;
+		}
+	}
+	_$AC(e) {
+		let t = R.get(e.strings);
+		return t === void 0 && R.set(e.strings, t = new V(e)), t;
+	}
+	k(t) {
+		E(this._$AH) || (this._$AH = [], this._$AR());
+		let n = this._$AH, r, i = 0;
+		for (let a of t) i === n.length ? n.push(r = new e(this.O(w()), this.O(w()), this, this.options)) : r = n[i], r._$AI(a), i++;
+		i < n.length && (this._$AR(r && r._$AB.nextSibling, i), n.length = i);
+	}
+	_$AR(e = this._$AA.nextSibling, t) {
+		for (this._$AP?.(!1, !0, t); e !== this._$AB;) {
+			let t = b(e).nextSibling;
+			b(e).remove(), e = t;
+		}
+	}
+	setConnected(e) {
+		this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
+	}
+}, W = class {
+	get tagName() {
+		return this.element.tagName;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	constructor(e, t, n, r, i) {
+		this.type = 1, this._$AH = L, this._$AN = void 0, this.element = e, this.name = t, this._$AM = r, this.options = i, n.length > 2 || n[0] !== "" || n[1] !== "" ? (this._$AH = Array(n.length - 1).fill(/* @__PURE__ */ new String()), this.strings = n) : this._$AH = L;
+	}
+	_$AI(e, t = this, n, r) {
+		let i = this.strings, a = !1;
+		if (i === void 0) e = H(this, e, t, 0), a = !T(e) || e !== this._$AH && e !== I, a && (this._$AH = e);
+		else {
+			let r = e, o, s;
+			for (e = i[0], o = 0; o < i.length - 1; o++) s = H(this, r[n + o], t, o), s === I && (s = this._$AH[o]), a ||= !T(s) || s !== this._$AH[o], s === L ? e = L : e !== L && (e += (s ?? "") + i[o + 1]), this._$AH[o] = s;
+		}
+		a && !r && this.j(e);
+	}
+	j(e) {
+		e === L ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+	}
+}, ve = class extends W {
+	constructor() {
+		super(...arguments), this.type = 3;
+	}
+	j(e) {
+		this.element[this.name] = e === L ? void 0 : e;
+	}
+}, ye = class extends W {
+	constructor() {
+		super(...arguments), this.type = 4;
+	}
+	j(e) {
+		this.element.toggleAttribute(this.name, !!e && e !== L);
+	}
+}, be = class extends W {
+	constructor(e, t, n, r, i) {
+		super(e, t, n, r, i), this.type = 5;
+	}
+	_$AI(e, t = this) {
+		if ((e = H(this, e, t, 0) ?? L) === I) return;
+		let n = this._$AH, r = e === L && n !== L || e.capture !== n.capture || e.once !== n.once || e.passive !== n.passive, i = e !== L && (n === L || r);
+		r && this.element.removeEventListener(this.name, this, n), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
+	}
+	handleEvent(e) {
+		typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, e) : this._$AH.handleEvent(e);
+	}
+}, xe = class {
+	constructor(e, t, n) {
+		this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = n;
+	}
+	get _$AU() {
+		return this._$AM._$AU;
+	}
+	_$AI(e) {
+		H(this, e);
+	}
+}, Se = y.litHtmlPolyfillSupport;
+Se?.(V, U), (y.litHtmlVersions ??= []).push("3.3.2");
+var Ce = (e, t, n) => {
+	let r = n?.renderBefore ?? t, i = r._$litPart$;
+	if (i === void 0) {
+		let e = n?.renderBefore ?? null;
+		r._$litPart$ = i = new U(t.insertBefore(w(), e), e, void 0, n ?? {});
+	}
+	return i._$AI(e), i;
+}, G = globalThis, K = class extends v {
+	constructor() {
+		super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
+	}
+	createRenderRoot() {
+		let e = super.createRenderRoot();
+		return this.renderOptions.renderBefore ??= e.firstChild, e;
+	}
+	update(e) {
+		let t = this.render();
+		this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ce(t, this.renderRoot, this.renderOptions);
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._$Do?.setConnected(!0);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this._$Do?.setConnected(!1);
+	}
+	render() {
+		return I;
+	}
+};
+K._$litElement$ = !0, K.finalized = !0, G.litElementHydrateSupport?.({ LitElement: K });
+var we = G.litElementPolyfillSupport;
+we?.({ LitElement: K }), (G.litElementVersions ??= []).push("4.2.2");
+var q = {
+	"1x1": {
+		slots: 1,
+		label: "1x1",
+		layoutFunction: () => ({
+			top: "0",
+			left: "0",
+			width: "100%",
+			height: "100%"
+		})
+	},
+	"1x2": {
+		slots: 2,
+		label: "1x2",
+		layoutFunction: (e, t) => ({
+			top: "0",
+			left: `${t * 50}%`,
+			width: "50%",
+			height: "100%"
+		})
+	},
+	"2x1": {
+		slots: 2,
+		label: "2x1",
+		layoutFunction: (e, t) => ({
+			top: `${t * 50}%`,
+			left: "0",
+			width: "100%",
+			height: "50%"
+		})
+	},
+	"1x3": {
+		slots: 3,
+		label: "1x3",
+		layoutFunction: (e, t) => ({
+			top: "0",
+			left: `${t * 33.333}%`,
+			width: "33.333%",
+			height: "100%"
+		})
+	},
+	"3x1": {
+		slots: 3,
+		label: "3x1",
+		layoutFunction: (e, t) => ({
+			top: `${t * 33.333}%`,
+			left: "0",
+			width: "100%",
+			height: "33.333%"
+		})
+	},
+	"2x2": {
+		slots: 4,
+		label: "2x2",
+		layoutFunction: (e, t) => {
+			let n = Math.floor(t / 2), r = t % 2;
+			return {
+				top: `${n * 50}%`,
+				left: `${r * 50}%`,
+				width: "50%",
+				height: "50%"
+			};
+		}
+	},
+	"3x3": {
+		slots: 9,
+		label: "3x3",
+		layoutFunction: (e, t) => {
+			let n = Math.floor(t / 3), r = t % 3;
+			return {
+				top: `${n * 33.333}%`,
+				left: `${r * 33.333}%`,
+				width: "33.333%",
+				height: "33.333%"
+			};
+		}
+	}
+}, Te = [
+	{
+		sliceType: a.AXIAL,
+		position: [
+			0,
+			0,
+			1,
+			.8
+		]
+	},
+	{
+		sliceType: a.CORONAL,
+		position: [
+			0,
+			.8,
+			.5,
+			.2
+		]
+	},
+	{
+		sliceType: a.SAGITTAL,
+		position: [
+			.5,
+			.8,
+			.5,
+			.2
+		]
+	}
+], Ee = [
+	{
+		sliceType: a.SAGITTAL,
+		position: [
+			0,
+			0,
+			.5,
+			1
+		]
+	},
+	{
+		sliceType: a.CORONAL,
+		position: [
+			.5,
+			0,
+			.5,
+			.5
+		]
+	},
+	{
+		sliceType: a.AXIAL,
+		position: [
+			.5,
+			.5,
+			.5,
+			.5
+		]
+	}
+], De = [
+	{
+		sliceType: a.AXIAL,
+		position: [
+			0,
+			0,
+			.333,
+			1
+		]
+	},
+	{
+		sliceType: a.CORONAL,
+		position: [
+			.333,
+			0,
+			.333,
+			1
+		]
+	},
+	{
+		sliceType: a.SAGITTAL,
+		position: [
+			.666,
+			0,
+			.334,
+			1
+		]
+	}
+], Oe = [
+	{
+		sliceType: a.AXIAL,
+		position: [
+			0,
+			0,
+			1,
+			.333
+		]
+	},
+	{
+		sliceType: a.CORONAL,
+		position: [
+			0,
+			.333,
+			1,
+			.333
+		]
+	},
+	{
+		sliceType: a.SAGITTAL,
+		position: [
+			0,
+			.666,
+			1,
+			.334
+		]
+	}
+], ke = [
+	{
+		sliceType: a.AXIAL,
+		position: [
+			0,
+			0,
+			.5,
+			.5
+		]
+	},
+	{
+		sliceType: a.CORONAL,
+		position: [
+			.5,
+			0,
+			.5,
+			.5
+		]
+	},
+	{
+		sliceType: a.SAGITTAL,
+		position: [
+			0,
+			.5,
+			.5,
+			.5
+		]
+	},
+	{
+		sliceType: a.RENDER,
+		position: [
+			.5,
+			.5,
+			.5,
+			.5
+		]
+	}
+], Ae = [
+	{
+		sliceType: a.RENDER,
+		position: [
+			0,
+			0,
+			1,
+			.7
+		]
+	},
+	{
+		sliceType: a.AXIAL,
+		position: [
+			0,
+			.7,
+			.333,
+			.3
+		]
+	},
+	{
+		sliceType: a.CORONAL,
+		position: [
+			.333,
+			.7,
+			.333,
+			.3
+		]
+	},
+	{
+		sliceType: a.SAGITTAL,
+		position: [
+			.666,
+			.7,
+			.334,
+			.3
+		]
+	}
+], je = {
+	"axial-hero": {
+		label: "Axial Hero",
+		layout: Te
+	},
+	"sag-left": {
+		label: "Sag Left Split",
+		layout: Ee
+	},
+	"tri-h": {
+		label: "Tri Horizontal",
+		layout: De
+	},
+	"tri-v": {
+		label: "Tri Stacked",
+		layout: Oe
+	},
+	"quad-render": {
+		label: "Quad Render",
+		layout: ke
+	},
+	"render-hero": {
+		label: "Render Hero",
+		layout: Ae
+	}
+}, J = {
+	crosshairGap: 5,
+	primaryDragMode: n.crosshair,
+	secondaryDragMode: n.pan
+}, Y = class {
+	constructor(e = q, t = {}) {
+		this.containerElement = null, this.viewers = [], this.currentLayout = "1x1", this.listeners = /* @__PURE__ */ new Set(), this.snapshotCache = null, this.nextId = 0, this.viewersById = /* @__PURE__ */ new Map(), this.broadcasting = !1, this.broadcastOptions = {
+			"2d": !0,
+			"3d": !0
+		}, this.viewerSliceLayouts = /* @__PURE__ */ new Map(), this.eventListeners = /* @__PURE__ */ new Map(), this.loadingCounts = /* @__PURE__ */ new Map(), this.viewerErrors = /* @__PURE__ */ new Map(), this.subscribe = (e) => (this.listeners.add(e), () => this.listeners.delete(e)), this.getSnapshot = () => {
+			if (!this.snapshotCache) {
+				let e = this.viewers.map((e) => ({
+					id: e.id,
+					loading: this.loadingCounts.get(e.id) ?? 0,
+					errors: this.viewerErrors.get(e.id) ?? []
+				}));
+				this.snapshotCache = {
+					currentLayout: this.currentLayout,
+					viewerCount: this.viewers.length,
+					slots: this.slots,
+					isBroadcasting: this.broadcasting,
+					isLoading: e.some((e) => e.loading > 0),
+					viewerStates: e
+				};
+			}
+			return this.snapshotCache;
+		}, this.layouts = e, this.slots = this.layouts[this.currentLayout]?.slots ?? 1, this.viewerDefaults = t;
+	}
+	on(e, t) {
+		return this.eventListeners.has(e) || this.eventListeners.set(e, /* @__PURE__ */ new Set()), this.eventListeners.get(e)?.add(t), () => this.off(e, t);
+	}
+	off(e, t) {
+		this.eventListeners.get(e)?.delete(t);
+	}
+	emit(e, ...t) {
+		let n = this.eventListeners.get(e);
+		if (n) for (let e of n) e(...t);
+	}
+	notify() {
+		this.snapshotCache = null, this.listeners.forEach((e) => {
+			e();
+		});
+	}
+	setContainerElement(e) {
+		this.containerElement = e, e && this.updateLayout();
+	}
+	setLayout(e) {
+		let t = this.layouts[e];
+		if (t) {
+			for (this.currentLayout = e, this.slots = t.slots; this.viewers.length > this.slots;) this.removeViewer(this.viewers.length - 1, !1);
+			if (this.containerElement) for (; this.viewers.length < this.slots;) this.addViewer().catch(() => void 0);
+			this.updateLayout(), this.notify();
+		}
+	}
+	updateLayout() {
+		if (!this.containerElement) return;
+		let e = this.layouts[this.currentLayout];
+		e && this.viewers.forEach((t, n) => {
+			let r = e.layoutFunction(this.containerElement, n, this.viewers.length);
+			Object.assign(t.containerDiv.style, {
+				position: "absolute",
+				top: r.top,
+				left: r.left,
+				width: r.width,
+				height: r.height
+			});
+		});
+	}
+	canAddViewer() {
+		return this.viewers.length < this.slots;
+	}
+	getNiivue(e) {
+		return this.viewers[e]?.niivue;
+	}
+	getAllNiivue() {
+		return this.viewers.map((e) => e.niivue);
+	}
+	forEachNiivue(e) {
+		this.viewers.forEach((t, n) => {
+			e(t.niivue, n);
+		});
+	}
+	hasSyncableContent(e) {
+		return e.volumes.length > 0 || e.meshes.length > 0;
+	}
+	safeBroadcastTo(e, t) {
+		let n = this.viewers[e];
+		if (n) try {
+			n.niivue.broadcastTo(t, this.broadcastOptions);
+		} catch (t) {
+			this.addError(n.id, t), this.emit("error", e, t), this.notify();
+		}
+	}
+	rewireBroadcasting() {
+		if (!this.broadcasting) {
+			this.viewers.forEach((e, t) => {
+				this.safeBroadcastTo(t, []);
+			});
+			return;
+		}
+		let e = this.viewers.filter((e) => this.hasSyncableContent(e.niivue));
+		this.viewers.forEach((t, n) => {
+			if (!this.hasSyncableContent(t.niivue)) {
+				this.safeBroadcastTo(n, []);
+				return;
+			}
+			let r = e.filter((e) => e.id !== t.id).map((e) => e.niivue);
+			this.safeBroadcastTo(n, r);
+		});
+	}
+	setBroadcasting(e, t) {
+		this.broadcasting = e, t && (this.broadcastOptions = {
+			...this.broadcastOptions,
+			...t
+		}), this.rewireBroadcasting(), this.notify();
+	}
+	isBroadcasting() {
+		return this.broadcasting;
+	}
+	setViewerSliceLayout(e, t) {
+		let n = this.viewers[e];
+		n && (this.viewerSliceLayouts.set(n.id, t), n.ready.then(() => {
+			this.viewersById.get(n.id) === n && (this.applySliceLayout(n.niivue, t), this.notify());
+		}));
+	}
+	getViewerSliceLayout(e) {
+		let t = this.viewers[e];
+		return t ? this.viewerSliceLayouts.get(t.id) ?? null : null;
+	}
+	applySliceLayout(e, t) {
+		t && t.length > 0 ? e.customLayout = t : (e.customLayout = null, e.sliceType = a.AXIAL, e.showRender = r.NEVER);
+	}
+	getNiivueById(e) {
+		return this.viewersById.get(e)?.niivue;
+	}
+	getViewerById(e) {
+		return this.viewersById.get(e);
+	}
+	async waitForViewerReady(e) {
+		return await e.ready, this.viewersById.get(e.id) === e;
+	}
+	async loadVolume(e, t) {
+		let n = this.viewers[e];
+		if (!n) throw Error(`No viewer at index ${e}`);
+		this.incrementLoading(n.id);
+		try {
+			if (!await this.waitForViewerReady(n)) throw Error(`Viewer at index ${e} was removed before it was ready`);
+			await n.niivue.addVolume(t);
+			let r = n.niivue.volumes, i = r[r.length - 1];
+			if (!i) throw Error("Volume was not added");
+			return this.emit("volumeAdded", e, t, i), this.broadcasting && this.rewireBroadcasting(), i;
+		} catch (t) {
+			throw this.addError(n.id, t), this.emit("error", e, t), t;
+		} finally {
+			this.decrementLoading(n.id);
+		}
+	}
+	async loadVolumes(e, t) {
+		let n = [];
+		for (let r of t) n.push(await this.loadVolume(e, r));
+		return n;
+	}
+	async removeVolume(e, t) {
+		let n = this.viewers[e];
+		if (!n || !await this.waitForViewerReady(n)) return;
+		let r = n.niivue, i = r.volumes.findIndex((e) => e.url === t || e.name === t);
+		i >= 0 && (await r.removeVolume(i), this.emit("volumeRemoved", e, t), this.broadcasting && this.rewireBroadcasting(), this.notify());
+	}
+	async findVolume(e, t) {
+		let n = this.viewers[e];
+		if (!n || !await this.waitForViewerReady(n)) return;
+		let r = n.niivue, i = r.volumes[t];
+		if (i) return {
+			nv: r,
+			vol: i,
+			volumeIndex: t
+		};
+	}
+	async setColormap(e, t, n) {
+		let r = await this.findVolume(e, t);
+		r && (await r.nv.setVolume(r.volumeIndex, { colormap: n }), this.emit("colormapChanged", e, t, n), this.notify());
+	}
+	async setCalMinMax(e, t, n, r) {
+		let i = await this.findVolume(e, t);
+		i && (await i.nv.setVolume(i.volumeIndex, {
+			calMin: n,
+			calMax: r
+		}), this.emit("intensityChanged", e, t, n, r), this.notify());
+	}
+	async setOpacity(e, t, n) {
+		let r = await this.findVolume(e, t);
+		r && (await r.nv.setVolume(r.volumeIndex, { opacity: n }), this.emit("opacityChanged", e, t, n), this.notify());
+	}
+	incrementLoading(e) {
+		this.loadingCounts.set(e, (this.loadingCounts.get(e) ?? 0) + 1), this.notify();
+	}
+	decrementLoading(e) {
+		let t = (this.loadingCounts.get(e) ?? 1) - 1;
+		this.loadingCounts.set(e, Math.max(0, t)), this.notify();
+	}
+	addError(e, t) {
+		let n = this.viewerErrors.get(e) ?? [];
+		n.push(t), this.viewerErrors.set(e, n);
+	}
+	getViewerIndex(e) {
+		return this.viewers.findIndex((t) => t.id === e.id);
+	}
+	addViewer(t) {
+		if (!this.containerElement) throw Error("Container element not set");
+		if (!this.canAddViewer()) throw Error(`Cannot add viewer: slot limit of ${this.slots} reached`);
+		let n = document.createElement("div");
+		n.className = "niivue-canvas-container", n.style.position = "relative", n.style.overflow = "hidden";
+		let r = document.createElement("canvas");
+		r.className = "niivue-canvas", r.style.position = "absolute", r.style.top = "0", r.style.left = "0", r.style.width = "100%", r.style.height = "100%", n.appendChild(r), this.containerElement.appendChild(n);
+		let i = new e({
+			...J,
+			...this.viewerDefaults,
+			...t
+		}), a = `nv-${this.nextId++}`;
+		this.viewerSliceLayouts.set(a, null), this.loadingCounts.set(a, 0), this.viewerErrors.set(a, []);
+		let o = {
+			id: a,
+			niivue: i,
+			canvasElement: r,
+			containerDiv: n,
+			ready: Promise.resolve()
+		};
+		this.viewers.push(o), this.viewersById.set(a, o), this.updateLayout();
+		let s = this.viewers.length - 1;
+		return i.addEventListener("locationChange", (e) => {
+			let t = this.getViewerIndex(o);
+			t >= 0 && this.emit("locationChange", t, e.detail);
+		}), i.addEventListener("volumeLoaded", (e) => {
+			let t = this.getViewerIndex(o);
+			t >= 0 && this.emit("imageLoaded", t, e.detail.volume), this.broadcasting && this.rewireBroadcasting();
+		}), i.addEventListener("meshLoaded", () => {
+			this.broadcasting && this.rewireBroadcasting();
+		}), this.onViewerCreated?.(i, s), this.emit("viewerCreated", i, s), this.notify(), o.ready = i.attachToCanvas(r).then(() => {
+			if (this.viewersById.get(o.id) !== o) return;
+			let e = this.viewerSliceLayouts.get(a) ?? null;
+			this.applySliceLayout(i, e), this.broadcasting && this.setBroadcasting(!0), this.notify();
+		}).catch((e) => {
+			if (this.viewersById.get(o.id) === o) {
+				let t = this.viewers.indexOf(o);
+				this.addError(o.id, e), t >= 0 && (this.emit("error", t, e), this.removeViewer(t));
+			}
+			throw e;
+		}), o.ready.then(() => o);
+	}
+	removeViewer(e, t = !0) {
+		if (e < 0 || e >= this.viewers.length) return;
+		let n = this.viewers[e];
+		n && (this.viewersById.delete(n.id), this.viewerSliceLayouts.delete(n.id), this.loadingCounts.delete(n.id), this.viewerErrors.delete(n.id), this.disposeViewer(n), n.containerDiv.remove(), this.viewers.splice(e, 1), this.updateLayout(), this.broadcasting && this.viewers.length > 0 && this.rewireBroadcasting(), this.emit("viewerRemoved", e), t && this.notify());
+	}
+	disposeViewer(e) {
+		e.niivue.destroy(), e.canvasElement.width = 0, e.canvasElement.height = 0;
+	}
+	clearViewers() {
+		this.broadcasting = !1, this.viewers.forEach((e) => {
+			this.disposeViewer(e), e.containerDiv.remove();
+		}), this.viewers = [], this.viewersById.clear(), this.loadingCounts.clear(), this.viewerErrors.clear(), this.notify();
+	}
+	reset() {
+		this.clearViewers(), this.currentLayout = "1x1", this.slots = this.layouts[this.currentLayout]?.slots ?? 1, this.notify();
+	}
+}, Me = "niivue-viewer", Ne = "niivue-scene", X = (e) => typeof e.url == "string" ? e.url : e.url.name, Pe = (e) => e.url || e.name, Fe = (e) => ({
+	colormap: e.colormap,
+	calMin: e.calMin,
+	calMax: e.calMax,
+	opacity: e.opacity
+}), Ie = (e, t) => {
+	let n = {};
+	return e.colormap !== void 0 && e.colormap !== t.colormap && (n.colormap = e.colormap), e.calMin !== void 0 && e.calMin !== t.calMin && (n.calMin = e.calMin), e.calMax !== void 0 && e.calMax !== t.calMax && (n.calMax = e.calMax), e.opacity !== void 0 && e.opacity !== t.opacity && (n.opacity = e.opacity), n;
+}, Z = (e, t) => e.findIndex((e) => e.url === t || e.name === t), Q = (e, t, n) => {
+	e.dispatchEvent(new CustomEvent(t, {
+		detail: n,
+		bubbles: !0,
+		composed: !0
+	}));
+}, Le = class extends K {
+	constructor(...e) {
+		super(...e), this.volumes = [], this.options = {}, this.sliceType = i.AXIAL, this.niivue = null, this.resizeObserver = null, this.loadedVolumes = /* @__PURE__ */ new Map(), this.attachmentReady = null, this.attachmentGeneration = 0;
+	}
+	static {
+		this.properties = {
+			volumes: { attribute: !1 },
+			options: { attribute: !1 },
+			sliceType: {
+				type: Number,
+				attribute: "slice-type"
+			}
+		};
+	}
+	static {
+		this.styles = ee`
+    :host {
+      display: block;
+      position: relative;
+      min-height: 1px;
+    }
+
+    #container {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: inherit;
+    }
+
+    canvas {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+	}
+	get nv() {
+		return this.niivue;
+	}
+	render() {
+		return F`<div id="container"><canvas class="niivue-canvas"></canvas></div>`;
+	}
+	firstUpdated() {
+		let t = this.renderRoot.querySelector("canvas"), n = this.renderRoot.querySelector("#container");
+		if (!(t instanceof HTMLCanvasElement) || !(n instanceof HTMLElement)) return;
+		let r = new e({
+			...J,
+			...this.options
+		});
+		r.addEventListener("locationChange", (e) => {
+			Q(this, "location-change", e.detail);
+		}), r.addEventListener("volumeLoaded", (e) => {
+			Q(this, "image-loaded", e.detail.volume);
+		}), this.niivue = r, this.resizeObserver = new ResizeObserver(() => r.resize()), this.resizeObserver.observe(n);
+		let i = ++this.attachmentGeneration, a = r.attachToCanvas(t).then(() => r);
+		this.attachmentReady = a, a.then(async (e) => {
+			this.ownsAttachment(e, i) && (e.sliceType = this.sliceType, await e.updateGLVolume(), await this.syncVolumes());
+		}).catch((e) => {
+			this.ownsAttachment(r, i) && this.emitError(e);
+		});
+	}
+	updated(e) {
+		e.has("sliceType") && this.niivue && (this.niivue.sliceType = this.sliceType), e.has("volumes") && this.syncVolumes().catch((e) => this.emitError(e));
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver?.disconnect(), this.resizeObserver = null, this.attachmentGeneration++, this.attachmentReady = null, this.niivue?.destroy(), this.niivue = null, this.loadedVolumes.clear();
+	}
+	emitError(e) {
+		this.niivue && Q(this, "niivue-error", e);
+	}
+	ownsAttachment(e, t) {
+		return this.niivue === e && this.attachmentGeneration === t;
+	}
+	async getAttachedNiivue() {
+		let e = this.attachmentReady;
+		if (!e) return this.niivue;
+		let t = await e;
+		return this.niivue === t ? t : null;
+	}
+	async setColormap(e, t) {
+		this.niivue?.volumes[e] && await this.niivue.setVolume(e, { colormap: t });
+	}
+	async setOpacity(e, t) {
+		this.niivue?.volumes[e] && await this.niivue.setVolume(e, { opacity: t });
+	}
+	async setCalMinMax(e, t, n) {
+		this.niivue?.volumes[e] && await this.niivue.setVolume(e, {
+			calMin: t,
+			calMax: n
+		});
+	}
+	setColorbarVisible(e) {
+		this.niivue && (this.niivue.isColorbarVisible = e);
+	}
+	setCrosshairVisible(e) {
+		this.niivue && (this.niivue.isCrossLinesVisible = e, this.niivue.is3DCrosshairVisible = e);
+	}
+	setPrimaryDragMode(e) {
+		this.niivue && (this.niivue.primaryDragMode = e);
+	}
+	setSecondaryDragMode(e) {
+		this.niivue && (this.niivue.secondaryDragMode = e);
+	}
+	async syncVolumes() {
+		let e = await this.getAttachedNiivue();
+		if (!e) return;
+		let t = new Set(this.volumes.map(X));
+		for (let n of this.loadedVolumes.keys()) if (!t.has(n)) {
+			let t = Z(e.volumes, n);
+			t >= 0 && await e.removeVolume(t), this.loadedVolumes.delete(n);
+		}
+		for (let t of this.volumes) {
+			let n = X(t), r = Fe(t), i = this.loadedVolumes.get(n);
+			if (!i) {
+				this.loadedVolumes.set(n, r);
+				try {
+					await e.addVolume(t);
+				} catch (e) {
+					this.loadedVolumes.delete(n), this.emitError(e);
+				}
+				continue;
+			}
+			let a = Z(e.volumes, n);
+			if (a < 0) continue;
+			let o = Ie(r, i);
+			Object.keys(o).length > 0 && await e.setVolume(a, o), this.loadedVolumes.set(n, r);
+		}
+		await this.reconcileVolumeOrder(e);
+	}
+	async reconcileVolumeOrder(e) {
+		let t = !1;
+		for (let [n, r] of this.volumes.entries()) {
+			let i = Z(e.volumes, X(r));
+			i < 0 || i === n || e.model.moveVolume(i, n) && (t = !0);
+		}
+		t && await e.updateGLVolume();
+	}
+}, Re = class extends K {
+	static {
+		this.properties = {
+			layout: { type: String },
+			broadcasting: {
+				type: Boolean,
+				reflect: !0
+			},
+			snapshot: { attribute: !1 }
+		};
+	}
+	static {
+		this.styles = ee`
+    :host {
+      display: block;
+      position: relative;
+      min-height: 1px;
+    }
+
+    #scene {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      min-height: inherit;
+      overflow: hidden;
+    }
+  `;
+	}
+	constructor() {
+		super(), this.layout = "1x1", this.broadcasting = !1, this.scene = new Y(q), this.unsubscribe = null, this.resizeObserver = null, this.snapshot = this.scene.getSnapshot(), this.forwardSceneEvents();
+	}
+	render() {
+		return F`<div id="scene"></div>`;
+	}
+	firstUpdated() {
+		let e = this.renderRoot.querySelector("#scene");
+		e instanceof HTMLElement && (this.unsubscribe = this.scene.subscribe(() => {
+			this.snapshot = this.scene.getSnapshot(), Q(this, "scene-change", this.snapshot);
+		}), this.scene.setContainerElement(e), this.scene.setLayout(this.layout), this.scene.setBroadcasting(this.broadcasting), this.resizeObserver = new ResizeObserver(() => this.scene.updateLayout()), this.resizeObserver.observe(e));
+	}
+	updated(e) {
+		e.has("layout") && this.scene.setLayout(this.layout), e.has("broadcasting") && this.scene.setBroadcasting(this.broadcasting);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.resizeObserver?.disconnect(), this.resizeObserver = null, this.unsubscribe?.(), this.unsubscribe = null, this.scene.clearViewers(), this.scene.setContainerElement(null);
+	}
+	addViewer(e) {
+		return this.scene.addViewer(e);
+	}
+	removeViewer(e) {
+		this.scene.removeViewer(e);
+	}
+	canAddViewer() {
+		return this.scene.canAddViewer();
+	}
+	setViewerSliceLayout(e, t) {
+		this.scene.setViewerSliceLayout(e, t);
+	}
+	loadVolume(e, t) {
+		return this.scene.loadVolume(e, t);
+	}
+	loadVolumes(e, t) {
+		return this.scene.loadVolumes(e, t);
+	}
+	removeVolume(e, t) {
+		return this.scene.removeVolume(e, t);
+	}
+	async setColormap(e, t, n) {
+		await this.scene.setColormap(e, t, n);
+	}
+	async setOpacity(e, t, n) {
+		await this.scene.setOpacity(e, t, n);
+	}
+	async setCalMinMax(e, t, n, r) {
+		await this.scene.setCalMinMax(e, t, n, r);
+	}
+	setColorbarVisible(e, t) {
+		this.forEachTargetViewer(t, (t) => {
+			t.isColorbarVisible = e;
+		});
+	}
+	setCrosshairVisible(e, t) {
+		this.forEachTargetViewer(t, (t) => {
+			t.isCrossLinesVisible = e, t.is3DCrosshairVisible = e;
+		});
+	}
+	setPrimaryDragMode(e, t) {
+		this.forEachTargetViewer(t, (t) => {
+			t.primaryDragMode = e;
+		});
+	}
+	setSecondaryDragMode(e, t) {
+		this.forEachTargetViewer(t, (t) => {
+			t.secondaryDragMode = e;
+		});
+	}
+	forEachTargetViewer(e, t) {
+		if (e === void 0) {
+			this.scene.forEachNiivue(t);
+			return;
+		}
+		let n = this.scene.getNiivue(e);
+		n && t(n);
+	}
+	forwardSceneEvents() {
+		this.scene.on("viewerCreated", (e, t) => {
+			Q(this, "viewer-created", {
+				niivue: e,
+				index: t
+			});
+		}), this.scene.on("viewerRemoved", (e) => {
+			Q(this, "viewer-removed", { index: e });
+		}), this.scene.on("locationChange", (e, t) => {
+			Q(this, "location-change", {
+				viewerIndex: e,
+				data: t
+			});
+		}), this.scene.on("imageLoaded", (e, t) => {
+			Q(this, "image-loaded", {
+				viewerIndex: e,
+				volume: t
+			});
+		}), this.scene.on("error", (e, t) => {
+			Q(this, "niivue-error", {
+				viewerIndex: e,
+				error: t
+			});
+		}), this.scene.on("volumeAdded", (e, t, n) => {
+			Q(this, "volume-added", {
+				viewerIndex: e,
+				imageOptions: t,
+				image: n
+			});
+		}), this.scene.on("volumeRemoved", (e, t) => {
+			Q(this, "volume-removed", {
+				viewerIndex: e,
+				url: t
+			});
+		});
+	}
+};
+function $(e = {}) {
+	if (typeof customElements > "u") return;
+	let t = e.elementName ?? "niivue-viewer", n = e.sceneElementName ?? "niivue-scene";
+	customElements.get(t) || customElements.define(t, Le), customElements.get(n) || customElements.define(n, Re);
+}
+$();
+//#endregion
+export { t as DRAG_MODE, Re as NiivueSceneElement, Le as NiivueViewerElement, Y as NvSceneController, i as SLICE_TYPE, Me as defaultElementName, q as defaultLayouts, Ne as defaultSceneElementName, je as defaultSliceLayouts, J as defaultViewerOptions, $ as defineNiivueWebComponents, Fe as extractVisualProps, Pe as volumeIdentity, Z as volumeIndexByKey, X as volumeKey, Ie as volumeVisualUpdates };