@nvidia-elements/core 2.23.5 → 2.24.0

package/dist/workspace/workspace2.js

@@ -7,82 +7,82 @@ import { IconButton as a } from "../icon-button/icon-button2.js";
 import { ResizeHandle as o } from "../resize-handle/resize-handle2.js";
 import { Tabs as s, TabsItem as c } from "../tabs/tabs2.js";
 import { TabsItemGroup as l } from "../tabs/tabs-item-group2.js";
-import { parseWorkspaceValue as u, sameSerializedWorkspaceLayout as d, serializeWorkspaceValue as f } from "./utils/model/value.utils.js";
+import { parseWorkspaceValue as u, sameWorkspaceLayout as d, serializeWorkspaceValue as f } from "./utils/model/value.utils.js";
 import { closePanel as p, findGroup as m, openPanel as h, projectLayout as g, reconcilePanels as _, selectPanel as v } from "./utils/model/operations.utils.js";
 import { WorkspaceCommandController as y } from "./controllers/workspace-command.controller.js";
 import { WorkspacePanel as b } from "./panel/panel2.js";
-import { focusWorkspacePanel as x, getPanelLabel as S, isWorkspaceCompositionMutation as C, shouldFocusAfterWorkspaceClose as w } from "./utils/presentation/composition.utils.js";
+import { focusWorkspacePanel as x, getPanelLabel as S, shouldFocusAfterWorkspaceClose as C } from "./utils/presentation/composition.utils.js";
+import { getPanelMembershipKey as w } from "./utils/model/membership.utils.js";
 import { getAllocatedTabWidth as T, preserveRecipientSelection as E } from "./utils/presentation/groups.utils.js";
 import { WorkspaceCompositionController as D } from "./controllers/workspace-composition.controller.js";
 import { WorkspaceFullscreenController as O } from "./controllers/workspace-fullscreen.controller.js";
 import { WorkspaceMeasurementController as k } from "./controllers/workspace-measurement.controller.js";
-import { allocateContextProxies as A, getContextKey as j } from "./utils/placement/context.utils.js";
-import { getAdmissiblePlacementLayout as M } from "./utils/placement/preparation.utils.js";
-import { WorkspaceRearrangeController as N } from "./controllers/workspace-rearrange.controller.js";
-import { WorkspaceResizeController as P } from "./controllers/workspace-resize.controller.js";
-import { WorkspaceRestorationController as F } from "./controllers/workspace-restoration.controller.js";
-import { getRegionCornerStyle as I, shouldEmphasizeReservedDestination as L } from "./utils/presentation/preview.utils.js";
-import { WorkspaceEvaluation as R } from "./utils/evaluation.utils.js";
-import z from "./workspace.js";
-import { LitElement as B, html as V, isServer as H, svg as U } from "lit";
-import { property as W } from "lit/decorators/property.js";
-import { I18nController as G } from "@nvidia-elements/foundations/internal/i18n";
-import { ifDefined as K } from "lit/directives/if-defined.js";
-import { repeat as q } from "lit/directives/repeat.js";
-import { styleMap as J } from "lit/directives/style-map.js";
-import { scopedRegistry as Y } from "@nvidia-elements/foundations/internal/decorators";
-import { useStyles as X } from "@nvidia-elements/foundations/internal/styles";
+import { getAdmissiblePlacementLayout as A } from "./utils/placement/preparation.utils.js";
+import { WorkspaceRearrangeController as j } from "./controllers/workspace-rearrange.controller.js";
+import { WorkspaceResizeController as M } from "./controllers/workspace-resize.controller.js";
+import { WorkspaceRestorationController as N } from "./controllers/workspace-restoration.controller.js";
+import { getRegionCornerStyle as P, preparePreviewBoundaries as F, shouldEmphasizeReservedDestination as I } from "./utils/presentation/preview.utils.js";
+import { WorkspaceEvaluationCache as L } from "./utils/evaluation.utils.js";
+import R from "./workspace.js";
+import { LitElement as z, html as B, isServer as V, svg as H } from "lit";
+import { property as U } from "lit/decorators/property.js";
+import { I18nController as W } from "@nvidia-elements/foundations/internal/i18n";
+import { ifDefined as G } from "lit/directives/if-defined.js";
+import { repeat as K } from "lit/directives/repeat.js";
+import { styleMap as q } from "lit/directives/style-map.js";
+import { scopedRegistry as J } from "@nvidia-elements/foundations/internal/decorators";
+import { useStyles as Y } from "@nvidia-elements/foundations/internal/styles";
 // src/workspace/workspace.ts
-var Z = {
+var X = {
 	close: "close",
 	move: "move",
 	enterFullscreen: "enter full screen",
 	exitFullscreen: "exit full screen"
-}, Q = class extends B {
+}, Z = class extends z {
 	constructor(...e) {
-		super(...e), this.#e = new G(this, Z), this.i18n = this.#e.i18n, this.resizable = !1, this.rearrangeable = !1, this.groupable = !1, this.fullscreenable = !1, this.detachThreshold = 48, this.closable = !1, this.resizePolicy = "stop", this.#n = "", this.#r = !1, this.#a = new F(this, {
+		super(...e), this.#e = new W(this, X), this.i18n = this.#e.i18n, this.resizable = !1, this.rearrangeable = !1, this.groupable = !1, this.fullscreenable = !1, this.detachThreshold = 48, this.closable = !1, this.resizePolicy = "stop", this.#n = "", this.#r = !1, this.#o = new L(this), this.#s = new N(this, {
 			getLayout: () => this.#t,
-			applyLayout: (e) => this.#A(e),
-			getTransitionTargets: () => this.#m.getTransitionTargets()
-		}), this.#o = new y(this, {
+			applyLayout: (e) => this.#k(e),
+			getTransitionTargets: () => this.#g.getTransitionTargets()
+		}), this.#c = new y(this, {
 			getState: () => ({
 				panels: this.#y,
 				layout: this.#t
 			}),
-			isRearrangementAllowed: () => !this.#s.active,
-			isPlacementAvailable: (e, t) => !!this.#H(e, t),
-			canEnterFullscreen: (e) => this.#s.canEnter(e),
-			canExitFullscreen: () => this.#s.canExit,
-			isFullscreenGroup: (e) => this.#s.isSelectedGroup(e),
-			enterFullscreen: (e) => this.#s.enter(e),
-			exitFullscreen: () => this.#s.exit(),
-			activatePanel: (e, t) => this.#P(e, t),
-			closePanel: (e) => this.#L(e),
-			placePanel: (e, t) => this.#I(e, t)
-		}), this.#s = new O(this, {
-			getGroup: (e) => m(this.#V(this.#v).root, e)?.panels ?? [],
+			isRearrangementAllowed: () => !this.#l.active,
+			isPlacementAvailable: (e, t) => !!this.#V(e, t),
+			canEnterFullscreen: (e) => this.#l.canEnter(e),
+			canExitFullscreen: () => this.#l.canExit,
+			isFullscreenGroup: (e) => this.#l.isSelectedGroup(e),
+			enterFullscreen: (e) => this.#l.enter(e),
+			exitFullscreen: () => this.#l.exit(),
+			activatePanel: (e, t) => this.#N(e, t),
+			closePanel: (e) => this.#I(e),
+			placePanel: (e, t) => this.#F(e, t)
+		}), this.#l = new O(this, {
+			getGroup: (e) => m(this.#B(this.#v).root, e)?.panels ?? [],
 			cancelInteractions: () => {
-				this.#a.finish(), this.#c.cancel(), this.#f.cancel();
+				this.#s.finish(), this.#u.cancel(), this.#m.cancel();
 			},
 			invalidateCommandAvailability: () => {
-				this.#o.invalidateAvailability(), this.#p.invalidate();
+				this.#c.invalidateAvailability(), this.#h.invalidate();
 			}
-		}), this.#c = new N(this, {
-			evaluateWithContext: (e) => this.#B(e),
-			isRearrangementAllowed: () => !this.#s.active && !this.#a.active,
+		}), this.#u = new j(this, {
+			evaluateWithContext: (e) => this.#z(e),
+			isRearrangementAllowed: () => !this.#l.active && !this.#s.active,
 			getLayout: () => this.#t,
 			getMeasurements: () => this.#x,
 			getAvailablePanels: () => this.#b,
-			activateSource: (e, t) => this.#N(e, t),
+			activateSource: (e, t) => this.#M(e, t),
 			applyPreview: (e) => {
-				this.#i = e, this.requestUpdate();
+				e?.phase !== "detached" && (this.#o.clear(), this.#a = void 0), this.#i = e, this.requestUpdate();
 			},
-			commitPlacement: (e, t, n) => this.#I(e, t, {
+			commitPlacement: (e, t, n) => this.#F(e, t, {
 				layout: n,
 				capabilities: this.#S,
 				focus: !1
 			})
-		}), this.#l = [], this.#u = [], this.#d = {
+		}), this.#d = [], this.#f = [], this.#p = {
 			gap: 0,
 			headerHeight: 0,
 			gripWidth: 0,
@@ -92,10 +92,10 @@ var Z = {
 			tabMinWidth: 0,
 			width: 0,
 			height: 0
-		}, this.#f = new P(this, {
+		}, this.#m = new M(this, {
 			isEnabled: () => this.#w,
 			getLayout: () => this.#t,
-			getBoundaries: () => this.#u,
+			getBoundaries: () => this.#f,
 			getAvailablePanels: () => this.#b,
 			getPresentation: () => ({
 				measurements: this.#x,
@@ -103,34 +103,37 @@ var Z = {
 				closable: this.closable,
 				fullscreenable: this.fullscreenable
 			}),
-			cancelForUser: () => this.#a.transition(() => this.#f.cancel()),
-			commitLayout: (e) => this.#M(e)
-		}), this.#p = new k(this, {
+			cancelForUser: () => this.#s.transition(() => this.#m.cancel()),
+			commitLayout: (e) => this.#j(e)
+		}), this.#h = new k(this, {
 			getPanels: () => this.#y,
-			isPresented: (e) => !this.#W(e) && this.#l.some((t) => t.panels.some((t) => t.id === e)),
-			isCarried: (e) => !this.#t?.closed.includes(e) && this.#W(e),
-			applyMeasurements: (e) => this.#O(e)
-		}), this.#m = new D(this, {
+			isPresented: (e) => !this.#U(e) && this.#d.some((t) => t.panels.some((t) => t.id === e)),
+			isCarried: (e) => !this.#t?.closed.includes(e) && this.#U(e),
+			applyMeasurements: (e) => this.#D(e)
+		}), this.#g = new D(this, {
 			getPanels: () => this.#y,
-			getGroups: () => this.#l,
+			getGroups: () => this.#d,
 			getLayout: () => this.#t,
 			getPreview: () => this.#i,
-			scrollChanged: () => this.#c.refresh()
+			scrollChanged: () => this.#u.refresh(),
+			contentChanged: (e) => {
+				e === "panels" && (this.#s.finish(), this.#c.invalidateAvailability(), this.#m.cancel(), this.#u.cancel()), this.#h.invalidate(), this.requestUpdate();
+			}
 		}), this.#_ = {
 			getCurrentLayout: () => this.#v,
 			getCurrentMeasurements: () => this.#x,
 			getCurrentPreview: () => this.#i,
-			getFullscreenTarget: () => this.#s.targetPanelId,
-			getResizePreview: () => this.#f.preview
+			getFullscreenTarget: () => this.#l.targetPanelId,
+			getResizePreview: () => this.#m.preview
 		};
 	}
 	static {
-		this.styles = X([z]);
+		this.styles = Y([R]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-workspace",
-			version: "2.23.5",
+			version: "2.24.0",
 			children: ["nve-workspace-panel", "nve-dropdown-group"]
 		};
 	}
@@ -152,7 +155,7 @@ var Z = {
 	}
 	set value(e) {
 		let t = u(e);
-		this.#a.finish(), this.#A(t);
+		this.#s.finish(), this.#k(t);
 	}
 	#t;
 	#n;
@@ -172,46 +175,35 @@ var Z = {
 	#g;
 	#_;
 	connectedCallback() {
-		super.connectedCallback(), this.#h = new MutationObserver((e) => this.#E(e)), this.#h.observe(this, {
-			childList: !0,
-			characterData: !0,
-			attributes: !0,
-			subtree: !0,
-			attributeFilter: [
-				"id",
-				"min-width",
-				"min-height",
-				"slot"
-			]
-		});
+		super.connectedCallback(), this.#g.startObserving();
 	}
 	disconnectedCallback() {
-		this.#c.cancel(), this.#h?.disconnect(), super.disconnectedCallback();
+		this.#o.clear(), this.#a = void 0, this.#u.cancel(), this.#g.stopObserving(), super.disconnectedCallback();
 	}
 	willUpdate(e) {
-		super.willUpdate(e), this.#m.captureFocus(), [
+		super.willUpdate(e), this.#g.captureFocus(), [
 			"value",
 			"fullscreenable",
 			"closable",
 			"rearrangeable",
 			"groupable",
 			"resizePolicy"
-		].some((t) => e.has(t)) && this.#o.invalidateAvailability(), [
+		].some((t) => e.has(t)) && this.#c.invalidateAvailability(), [
 			"fullscreenable",
 			"closable",
 			"rearrangeable",
 			"groupable"
-		].some((t) => e.has(t)) && this.#p.invalidate(), this.#D(), this.#r = !1;
+		].some((t) => e.has(t)) && this.#h.invalidate(), this.#E(), this.#r = !1;
 	}
 	updated() {
-		this.#m.sync(), this.#o.flushAvailability();
+		this.#g.sync(), this.#c.flushAvailability();
 	}
 	animateTo(e, t = {}) {
 		let n = u(e);
-		this.#a.animateTo(n, t);
+		this.#s.animateTo(n, t);
 	}
 	isCommandAvailable(e, t = {}) {
-		return this.#o.isCommandAvailable(e, t);
+		return this.#c.isCommandAvailable(e, t);
 	}
 	get #v() {
 		return this.#t ?? {
@@ -221,38 +213,35 @@ var Z = {
 		};
 	}
 	get #y() {
-		return this.#g ? this.#g.panels : H ? [] : [...this.children].filter((t) => e(t, b));
+		let t = this.#o.current;
+		return t ? t.panels : V ? [] : [...this.children].filter((t) => e(t, b));
 	}
 	get #b() {
-		return this.#g?.available ?? this.#y.map((e) => e.id);
+		return this.#o.current?.available ?? this.#y.map((e) => e.id);
 	}
 	get #x() {
-		return this.#f.presentation?.measurements ?? this.#d;
+		return this.#m.presentation?.measurements ?? this.#p;
 	}
 	get #S() {
-		return this.#c.capabilities ?? {
+		return this.#u.capabilities ?? {
 			rearrangeable: this.rearrangeable,
 			groupable: this.groupable
 		};
 	}
 	get #C() {
-		return this.#f.presentation?.closable ?? this.closable;
+		return this.#m.presentation?.closable ?? this.closable;
 	}
 	get #w() {
-		return this.resizable && !this.#s.active;
+		return this.resizable && !this.#l.active;
 	}
 	get #T() {
-		return this.#w || this.#f.retainingHandles;
+		return this.#w || this.#m.retainingHandles;
 	}
-	#E(t) {
-		let n = t.some((t) => t.target === this || t.type === "attributes" && e(t.target, b) && t.target.parentElement === this), r = t.some((e) => C(this, e));
-		n && (this.#a.finish(), this.#o.invalidateAvailability(), this.#f.cancel(), this.#c.cancel()), (n || r) && (this.#p.invalidate(), this.requestUpdate());
-	}
-	#D() {
+	#E() {
 		let e = this.#b;
 		if (!e.every(Boolean) || new Set(e).size !== e.length) return;
 		if (!this.#t) {
-			e.length && this.#k({
+			e.length && this.#O({
 				version: 1,
 				root: {
 					type: "group",
@@ -264,93 +253,90 @@ var Z = {
 			return;
 		}
 		let t = _(this.#t, e);
-		t !== this.#t && (this.#k(t), this.#r || this.#j());
+		t !== this.#t && (this.#O(t), this.#r || this.#A());
 	}
-	#O(e) {
-		this.#d = e.measurements, this.#o.invalidateAvailability(), this.requestUpdate(), this.#f.handleMeasurementsChange(e), this.#a.handleMeasurementsChange(e), this.#c.handleMeasurementsChange(e);
+	#D(e) {
+		this.#p = e.measurements, this.#c.invalidateAvailability(), this.requestUpdate(), this.#m.handleMeasurementsChange(e), this.#s.handleMeasurementsChange(e), this.#u.handleMeasurementsChange(e);
 	}
-	#k(e) {
+	#O(e) {
 		if (e === this.#t) return;
 		let t = f(e);
 		this.#t = e, this.#n = t;
 	}
-	#A(e) {
-		this.#c.cancel();
+	#k(e) {
+		this.#u.cancel();
 		let t = this.value;
-		this.#f.resetForRestore(), this.#k(e), this.#r = !0, this.requestUpdate("value", t);
+		this.#m.resetForRestore(), this.#O(e), this.#r = !0, this.requestUpdate("value", t);
 	}
-	#j() {
-		this.#o.invalidateAvailability(), this.dispatchEvent(new Event("change", {
+	#A() {
+		this.#c.invalidateAvailability(), this.dispatchEvent(new Event("change", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	#M(e) {
-		d(this.#t, e) ? this.requestUpdate() : (this.#k(e), this.#j());
+	#j(e) {
+		d(this.#t, e) ? this.requestUpdate() : (this.#O(e), this.#A());
 	}
-	#N(e, t) {
+	#M(e, t) {
 		if (t) return;
 		let n = e.find((e) => !this.#t?.closed.includes(e) && this.#b.includes(e));
-		n && this.shadowRoot?.querySelector(`nve-tabs-item[data-panel="${CSS.escape(n)}"]`) && (this.#P(n, "select"), this.#z(n));
+		n && this.shadowRoot?.querySelector(`nve-tabs-item[data-panel="${CSS.escape(n)}"]`) && (this.#N(n, "select"), this.#R(n));
 	}
-	#P(e, t) {
-		if (this.#a.finish(), !this.#t || !this.#y.some((t) => t.id === e)) return;
+	#N(e, t) {
+		if (this.#s.finish(), !this.#t || !this.#y.some((t) => t.id === e)) return;
 		let n = this.#t;
 		t === "open" && (n = h(this.#t, e) ?? this.#t);
 		let r = v(n, e);
-		r === void 0 && n !== this.#t && (r = n), r && (this.#c.cancel(), this.#f.cancel(), this.#k(r), this.#j());
+		r === void 0 && n !== this.#t && (r = n), r && (this.#u.cancel(), this.#m.cancel(), this.#O(r), this.#A());
 	}
-	#F(e) {
-		this.#c.suppressSelection || this.#P(e, "select");
+	#P(e) {
+		this.#u.suppressSelection || this.#N(e, "select");
 	}
-	#I(e, t, n = {}) {
+	#F(e, t, n = {}) {
 		let r = n.capabilities ?? {
 			rearrangeable: this.rearrangeable,
 			groupable: this.groupable
 		};
-		if (!r.rearrangeable || this.#s.active) return !1;
-		let i = this.#H(e, t, {
+		if (!r.rearrangeable || this.#l.active) return !1;
+		let i = this.#V(e, t, {
 			candidate: n.layout,
 			groupable: r.groupable
 		});
-		return i ? (this.#a.finish(), this.#c.cancel(), this.#f.cancel(), this.#k(i), this.#j(), this.#R(e, n), !0) : !1;
+		return i ? (this.#s.finish(), this.#u.cancel(), this.#m.cancel(), this.#O(i), this.#A(), this.#L(e, n), !0) : !1;
 	}
-	#L(e) {
-		if (this.#a.finish(), !this.closable || !this.#t) return;
+	#I(e) {
+		if (this.#s.finish(), !this.closable || !this.#t) return;
 		let t = p(this.#t, e);
 		if (!t) return;
-		let n = w(this, e);
-		this.#c.cancel(), this.#f.cancel(), this.#k(t), this.#j();
-		let r = this.#l.find((t) => t.panels.some((t) => t.id === e));
-		n && this.#z(r?.panels.find((t) => t.id !== e)?.id);
+		let n = C(this, e);
+		this.#u.cancel(), this.#m.cancel(), this.#O(t), this.#A();
+		let r = this.#d.find((t) => t.panels.some((t) => t.id === e));
+		n && this.#R(r?.panels.find((t) => t.id !== e)?.id);
 	}
-	#R(e, t) {
-		t.focus !== !1 && this.#z(e.find((e) => !this.#t?.closed.includes(e) && this.#y.some((t) => t.id === e)));
+	#L(e, t) {
+		t.focus !== !1 && this.#R(e.find((e) => !this.#t?.closed.includes(e) && this.#y.some((t) => t.id === e)));
 	}
-	#z(e) {
+	#R(e) {
 		x(this, { id: e });
 	}
-	#B(e) {
-		if (this.#g) return e(this.#g);
-		this.#g = new R(this, {
+	#z(e) {
+		let t = this.#o.current;
+		if (t) return e(t);
+		let n = {
 			panels: this.#y,
 			layout: this.#v,
 			source: this.#i?.source ?? [],
 			measurements: this.#x,
-			policy: this.#f.policy,
-			strip: (e) => this.#m.findTabStrip(e)
-		}, this.#_);
-		try {
-			return e(this.#g);
-		} finally {
-			this.#g = void 0;
-		}
+			policy: this.#m.policy,
+			strip: (e) => this.#g.findTabStrip(e)
+		};
+		return this.#o.run(n, this.#_, e);
 	}
-	#V(e) {
-		return this.#g ? this.#g.project(e) : g(e, this.#b);
+	#B(e) {
+		return this.#o.current?.project(e) ?? g(e, this.#b);
 	}
-	#H(e, t, n = {}) {
-		if (this.#t) return this.#B((r) => M({
+	#V(e, t, n = {}) {
+		if (this.#t) return this.#z((r) => A({
 			evaluation: r,
 			layout: this.#v,
 			measurements: this.#x,
@@ -360,28 +346,28 @@ var Z = {
 			candidate: n.candidate
 		}));
 	}
-	#U(e) {
-		let t = e.filter((e) => !this.#t?.closed.includes(e) && this.#y.some((t) => t.id === e)), n = m(this.#t?.root ?? null, t[0])?.active, r = n && t.includes(n) ? n : t[0];
+	#H(e) {
+		let t = this.#y, n = e.filter((e) => !this.#t?.closed.includes(e) && t.some((t) => t.id === e)), r = m(this.#t?.root ?? null, n[0])?.active, i = r && n.includes(r) ? r : n[0], a = i ? t.find((e) => e.id === i) : void 0;
 		return {
-			title: r ? S(this.#y, r) : "",
-			layers: Math.min(t.length, 3)
+			title: a ? S(a) : i ?? "",
+			layers: Math.min(n.length, 3)
 		};
 	}
-	#W(e) {
+	#U(e) {
 		return this.#i?.source.includes(e) ?? !1;
 	}
-	#G(e = this.#i) {
+	#W(e = this.#i) {
 		return !!e && "allocation" in e && e.allocation !== "overlay";
 	}
 	render() {
-		return this.#B((e) => this.#K(e));
+		return this.#z((e) => this.#G(e));
 	}
-	#K(e) {
+	#G(e) {
 		let t = this.#i, n = e.presentationGeometry();
-		this.#l = E(n.groups, this.#t?.root ?? null, this.#i?.source), this.#u = n.boundaries;
-		let r = this.#q(n.regions, e);
-		return this.#m.applyPresentation({
-			groups: this.#l,
+		this.#d = E(n.groups, this.#t?.root ?? null, this.#i?.source), this.#f = n.boundaries;
+		let r = this.#J(n.regions, e);
+		return this.#g.applyPresentation({
+			groups: this.#d,
 			extent: n,
 			container: this.container,
 			measurements: this.#x,
@@ -389,9 +375,25 @@ var Z = {
 			animate: !!t,
 			source: t?.source ?? [],
 			scroll: (t) => e.scroll(t)
-		}), V`<div internal-host ?data-resizing="${this.#f.resizing}" ?data-fullscreen="${this.#s.active}" ?data-rearranging="${!!t}" data-preview-allocation="${K(t && "allocation" in t ? t.allocation : void 0)}" style="${`--_minimum-height:${e.minimum(e.project(this.#v).root).height}px`}"><div class="viewport" @scroll="${() => this.#c.refresh()}"><div class="canvas" style="${`min-width:${n.minimum.width}px;min-height:${n.minimum.height}px`}">${q(this.#l, (e) => this.#m.getGroupIdentity(e), (e) => this.#$(e))}<slot @slotchange="${() => this.requestUpdate()}"></slot>${this.#ae()}<div class="preview-layer" data-drag-phase="${K(this.#i?.phase)}">${r}</div></div></div>${this.#se()}</div>`;
+		}), B`<div internal-host ?data-resizing="${this.#m.resizing}" ?data-fullscreen="${this.#l.active}" ?data-rearranging="${!!t}" data-preview-allocation="${G(t && "allocation" in t ? t.allocation : void 0)}" style="${`--_minimum-height:${e.minimum(e.project(this.#v).root).height}px`}"><div class="viewport" @scroll="${() => this.#u.refresh()}"><div class="canvas" style="${`min-width:${n.minimum.width}px;min-height:${n.minimum.height}px`}">${K(this.#d, (e) => this.#g.getGroupIdentity(e), (e) => this.#ee(e))}<slot @slotchange="${() => this.requestUpdate()}"></slot>${this.#oe()}<div class="preview-layer" data-drag-phase="${G(this.#i?.phase)}">${r}</div></div></div>${this.#ce()}</div>`;
+	}
+	#K(e, t, n) {
+		let r = this.isConnected && this.#i?.phase === "detached", i = this.#a;
+		if (r && i && i.catalogRegions === e && i.placedRegions === t && i.sourcePanelIds.length === n.length && i.sourcePanelIds.every((e, t) => e === n[t])) return i.boundaries;
+		this.#a = void 0;
+		let a = F(e, t, n);
+		return r && (this.#a = {
+			catalogRegions: e,
+			placedRegions: t,
+			sourcePanelIds: n.slice(),
+			boundaries: a
+		}), a;
 	}
 	#q(e, t) {
+		let n = t.scope && w(t.scope.members);
+		return K(e, (e) => e.key, (e) => B`<div class="scope-boundary" data-scope-boundary="${e.key}" ?data-active="${e.key === n}" inert aria-hidden="true" style="${e.style}"></div>`);
+	}
+	#J(e, t) {
 		let n = this.#i;
 		if (!n) return null;
 		let { x: r, y: i } = t.client({
@@ -399,120 +401,112 @@ var Z = {
 			y: 0,
 			width: 0,
 			height: 0
-		}), { title: a, layers: o } = this.#U(n.source), s = this.#t ?? {
-			version: 1,
-			root: null,
-			closed: []
-		}, c = t.geometry(t.project(s)).regions, l = A({
-			catalog: c,
-			allocation: e,
-			source: n.source
-		}), u = t.bounds(), d = this.#c.getPreviewHint(n, t), { rect: f, kind: p } = n.cue, m = {
-			...f,
-			x: f.x - r,
-			y: f.y - i
-		}, h = n.point;
-		return V`${this.#J(d, r, i)}${q(l, (e) => e.key, (t) => V`<div class="context-boundary" data-context-boundary="${t.key}" ?data-active="${n.context && t.key === j(n.context.members)}" inert aria-hidden="true" style="${`left:${t.rect.x}px;top:${t.rect.y}px;width:${t.rect.width}px;height:${t.rect.height}px;${I(t.rect, e)}`}"></div>`)}<nve-ghost class="destination" part="ghost destination-ghost" data-destination-ghost ?data-cue-clipped="${f.width <= 0 || f.height <= 0}" data-drag-phase="${n.phase}" ?data-drop-blocked="${n.blocked}" data-destination-kind="${p}" ?data-reserved-placement="${L(n)}" style="${`transform:translate(${f.x - r}px,${f.y - i}px);width:${f.width}px;height:${f.height}px;${I(m, e)}`}">${n.blocked ? V`<nve-icon part="icon blocked-icon" name="cancel" status="danger" size="lg" aria-hidden="true"></nve-icon>` : null}${this.#Y(n)}</nve-ghost>${h ? this.#Q({
-			point: h,
+		}), { title: a, layers: o } = this.#H(n.source), s = t.geometry(t.project(this.#v)).regions, c = this.#K(s, e, n.source), l = t.bounds(), u = this.#u.getPreviewHint(n, t), { rect: d, kind: f } = n.cue, p = {
+			...d,
+			x: d.x - r,
+			y: d.y - i
+		}, m = n.point;
+		return B`${this.#Y(u, r, i)}${this.#q(c, n)}<nve-ghost class="destination" part="ghost destination-ghost" data-destination-ghost ?data-cue-clipped="${d.width <= 0 || d.height <= 0}" data-drag-phase="${n.phase}" ?data-drop-blocked="${n.blocked}" data-destination-kind="${f}" ?data-reserved-placement="${I(n)}" style="${`transform:translate(${d.x - r}px,${d.y - i}px);width:${d.width}px;height:${d.height}px;${P(p, e)}`}">${n.blocked ? B`<nve-icon part="icon blocked-icon" name="cancel" status="danger" size="lg" aria-hidden="true"></nve-icon>` : null}${this.#X(n)}</nve-ghost>${m ? this.#$({
+			point: m,
 			x: r,
 			y: i,
-			bounds: u,
+			bounds: l,
 			title: a,
 			layers: o
 		}) : null}`;
 	}
-	#J(e, t, n) {
-		return e ? V`<div class="order-overlay" data-order-slot="${e.scope.index}" data-placement-hint="${e.kind}" inert aria-hidden="true" style="${`left:${e.rect.x - t}px;top:${e.rect.y - n}px;width:${e.rect.width}px;height:${e.rect.height}px`}"></div>` : null;
+	#Y(e, t, n) {
+		return e ? B`<div class="order-overlay" data-insertion-index="${e.insertion.index}" data-placement-hint="${e.kind}" inert aria-hidden="true" style="${`left:${e.rect.x - t}px;top:${e.rect.y - n}px;width:${e.rect.width}px;height:${e.rect.height}px`}"></div>` : null;
 	}
-	#Y(e) {
+	#X(e) {
 		if (!e || e.phase !== "detached" || e.blocked || !e.seams) return null;
 		let { kind: t, edges: n } = e.seams;
-		return V`${n.map((e) => {
+		return B`${n.map((e) => {
 			let n = e.side === "left" || e.side === "right", r = e.side === "left" || e.side === "top" ? `-${e.offset}px` : `calc(100% + ${e.offset}px)`, i = n ? `left:${r};top:${e.fraction * 100}%` : `left:${e.fraction * 100}%;top:${r}`, a = {
 				right: 0,
 				bottom: 90,
 				left: 180,
 				top: 270
 			}[e.side];
-			return V`<div class="seam-badge" data-seam-badge="${t}" data-seam-side="${e.side}" inert aria-hidden="true" style="${i}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="${`transform:rotate(${a}deg)`}">${t === "split" ? this.#X() : this.#Z()}</svg></div>`;
+			return B`<div class="seam-badge" data-seam-badge="${t}" data-seam-side="${e.side}" inert aria-hidden="true" style="${i}"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="${`transform:rotate(${a}deg)`}">${t === "split" ? this.#Z() : this.#Q()}</svg></div>`;
 		})}`;
 	}
-	#X() {
-		return U`<path d="M3 4h9v16H3z" fill="currentColor" fill-opacity=".2" stroke="none"></path><rect x="2" y="4" width="20" height="16" rx="1"></rect><path d="M12 4v16"></path>`;
-	}
 	#Z() {
-		return U`<rect x="2" y="7" width="7" height="10" rx="1" fill="currentColor" fill-opacity=".2"></rect><path d="M22 4h-9v16h9"></path>`;
+		return H`<path d="M3 4h9v16H3z" fill="currentColor" fill-opacity=".2" stroke="none"></path><rect x="2" y="4" width="20" height="16" rx="1"></rect><path d="M12 4v16"></path>`;
 	}
-	#Q(e) {
-		let { point: t, x: n, y: r, bounds: i, title: a, layers: o } = e, s = i.x + i.width, c = i.y + i.height, l = Math.max(i.x, Math.min(t.x + 12, s)), u = Math.max(i.y, Math.min(t.y + 12, c));
-		return V`<nve-ghost class="carried" part="ghost carried-ghost" data-carried-ghost .layers="${o}" style="${`left:${l - n}px;top:${u - r}px;width:max-content;max-width:${Math.max(0, Math.min(240, i.width))}px;max-height:${i.height}px;transform:translate(min(0px,calc(${s - l}px - 100%)),min(0px,calc(${c - u}px - 100%)))`}">${a}</nve-ghost>`;
+	#Q() {
+		return H`<rect x="2" y="7" width="7" height="10" rx="1" fill="currentColor" fill-opacity=".2"></rect><path d="M22 4h-9v16h9"></path>`;
 	}
 	#$(e) {
-		let t = this.#x, { headerHeight: n } = t, r = this.#G() && e.panels.every((e) => this.#W(e.id)), i = this.#s.isSelectedGroup(e.active), a = (this.#f.presentation?.fullscreenable ?? this.fullscreenable) || i, o = a ? t.groupActionWidth ?? 0 : 0;
-		return V`<div class="group-chrome" style="${`left:${e.rect.x}px;top:${e.rect.y}px;width:${e.rect.width}px;height:${e.rect.height}px`}"><div class="tabs" ?data-carried-reservation="${r}" ?inert="${r}" aria-hidden="${K(r ? "true" : void 0)}" style="${`height:${n}px`}">${this.#ee(e)} ${this.#te(e, o)} ${a ? this.#ie(e, i) : null}</div></div>`;
+		let { point: t, x: n, y: r, bounds: i, title: a, layers: o } = e, s = i.x + i.width, c = i.y + i.height, l = Math.max(i.x, Math.min(t.x + 12, s)), u = Math.max(i.y, Math.min(t.y + 12, c));
+		return B`<nve-ghost class="carried" part="ghost carried-ghost" data-carried-ghost .layers="${o}" style="${`left:${l - n}px;top:${u - r}px;width:max-content;max-width:${Math.max(0, Math.min(240, i.width))}px;max-height:${i.height}px;transform:translate(min(0px,calc(${s - l}px - 100%)),min(0px,calc(${c - u}px - 100%)))`}">${a}</nve-ghost>`;
 	}
 	#ee(e) {
-		return (this.#f.presentation?.rearrangeable ?? this.#S.rearrangeable) && !this.#s.active && e.gripWidth > 0 ? V`<nve-drag-handle part="drag-handle" data-drag-group="${e.panels[0]?.id ?? ""}" draggable="false" aria-label="${K(this.i18n.move)}" @click="${(e) => e.preventDefault()}"></nve-drag-handle>` : null;
+		let t = this.#x, { headerHeight: n } = t, r = this.#W() && e.panels.every((e) => this.#U(e.id)), i = this.#l.isSelectedGroup(e.active), a = (this.#m.presentation?.fullscreenable ?? this.fullscreenable) || i, o = a ? t.groupActionWidth ?? 0 : 0;
+		return B`<div class="group-chrome" style="${`left:${e.rect.x}px;top:${e.rect.y}px;width:${e.rect.width}px;height:${e.rect.height}px`}"><div class="tabs" ?data-carried-reservation="${r}" ?inert="${r}" aria-hidden="${G(r ? "true" : void 0)}" style="${`height:${n}px`}">${this.#te(e)} ${this.#ne(e, o)} ${a ? this.#ae(e, i) : null}</div></div>`;
 	}
-	#te(e, t) {
-		let n = T(e, this.#x), r = this.#x.panels?.[e.active]?.suffixWidth ?? 0;
-		return V`<div class="tablist" ?data-scrollable="${e.panels.length > 1}" style="${`width:${Math.max(0, e.rect.width - e.gripWidth - r - t)}px;margin-right:${r}px`}" data-group="${this.#m.getGroupIdentity(e)}" @scroll="${(t) => this.#m.handleScroll(e, t)}">${this.#ne(e, n)}</div>`;
+	#te(e) {
+		return (this.#m.presentation?.rearrangeable ?? this.#S.rearrangeable) && !this.#l.active && e.gripWidth > 0 ? B`<nve-drag-handle part="drag-handle" data-drag-group="${e.panels[0]?.id ?? ""}" draggable="false" aria-label="${G(this.i18n.move)}" @click="${(e) => e.preventDefault()}"></nve-drag-handle>` : null;
 	}
 	#ne(e, t) {
-		let n = q(e.panels, (e) => e.id, (n, r) => this.#re(e, n, {
+		let n = T(e, this.#x), r = this.#x.panels?.[e.active]?.suffixWidth ?? 0;
+		return B`<div class="tablist" ?data-scrollable="${e.panels.length > 1}" style="${`width:${Math.max(0, e.rect.width - e.gripWidth - r - t)}px;margin-right:${r}px`}" data-group="${this.#g.getGroupIdentity(e)}" @scroll="${(t) => this.#g.handleScroll(e, t)}">${this.#re(e, n)}</div>`;
+	}
+	#re(e, t) {
+		let n = K(e.panels, (e) => e.id, (n, r) => this.#ie(e, n, {
 			left: r * t,
 			width: t
 		}));
-		return e.tabbed ? V`<nve-tabs part="tabs" class="tab-track" @nve-key-change="${(e) => {
+		return e.tabbed ? B`<nve-tabs part="tabs" class="tab-track" @nve-key-change="${(e) => {
 			let t = e.detail.activeItem.dataset.panel;
-			t && this.#F(t);
-		}}" style="${`width:${e.panels.length * t}px`}">${n}</nve-tabs>` : V`<div class="tab-track" style="${`width:${e.panels.length * t}px`}">${n}</div>`;
+			t && this.#P(t);
+		}}" style="${`width:${e.panels.length * t}px`}">${n}</nve-tabs>` : B`<div class="tab-track" style="${`width:${e.panels.length * t}px`}">${n}</div>`;
 	}
-	#re(e, t, n) {
-		let r = J({
+	#ie(e, t, n) {
+		let r = q({
 			left: `${n.left}px`,
 			width: `${n.width}px`,
 			"--height": `${this.#x.headerHeight}px`
-		}), i = this.#W(t.id), a = t.querySelector(":scope > nve-workspace-panel-header") ? null : V`<span class="fallback-title">${t.id}</span>`, o = this.#C ? V`<nve-icon-button slot="${K(e.tabbed ? "suffix" : void 0)}" part="icon-button close-button" icon-name="cancel" container="flat" size="sm" data-close="${t.id}" aria-label="${`${this.i18n.close} ${S(this.#y, t.id)}`}" @click="${() => this.#L(t.id)}"></nve-icon-button>` : null;
-		return e.tabbed ? V`<nve-tabs-item-group part="tabs-item-group" class="tab-entry" ?data-carried-tab="${i}" ?inert="${i}" aria-hidden="${K(i ? "true" : void 0)}" style="${r}"><nve-tabs-item part="tabs-item tab" data-panel="${t.id}" ?selected="${e.active === t.id}" aria-label="${t.id}" @pointerenter="${() => this.#m.setHeaderHovered(t.id, !0)}" @pointerleave="${() => this.#m.setHeaderHovered(t.id, !1)}" @click="${() => this.#F(t.id)}">${a}</nve-tabs-item>${o}</nve-tabs-item-group>` : V`<div class="tab-entry panel-entry" ?data-carried-tab="${i}" ?inert="${i}" aria-hidden="${K(i ? "true" : void 0)}" style="${r}"><div class="panel-title" data-panel="${t.id}" aria-hidden="true">${a}</div>${o}</div>`;
+		}), i = this.#U(t.id), a = t.querySelector(":scope > nve-workspace-panel-header") ? null : B`<span class="fallback-title">${t.id}</span>`, o = this.#C ? B`<nve-icon-button slot="${G(e.tabbed ? "suffix" : void 0)}" part="icon-button close-button" icon-name="cancel" container="flat" size="sm" data-close="${t.id}" aria-label="${`${this.i18n.close} ${S(t)}`}" @click="${() => this.#I(t.id)}"></nve-icon-button>` : null;
+		return e.tabbed ? B`<nve-tabs-item-group part="tabs-item-group" class="tab-entry" ?data-carried-tab="${i}" ?inert="${i}" aria-hidden="${G(i ? "true" : void 0)}" style="${r}"><nve-tabs-item part="tabs-item tab" data-panel="${t.id}" ?selected="${e.active === t.id}" aria-label="${t.id}" @pointerenter="${() => this.#g.setHeaderHovered(t.id, !0)}" @pointerleave="${() => this.#g.setHeaderHovered(t.id, !1)}" @click="${() => this.#P(t.id)}">${a}</nve-tabs-item>${o}</nve-tabs-item-group>` : B`<div class="tab-entry panel-entry" ?data-carried-tab="${i}" ?inert="${i}" aria-hidden="${G(i ? "true" : void 0)}" style="${r}"><div class="panel-title" data-panel="${t.id}" aria-hidden="true">${a}</div>${o}</div>`;
 	}
-	#ie(e, t) {
+	#ae(e, t) {
 		let n = this.#x.panels?.[e.active]?.suffixWidth ?? 0, r = !this.isCommandAvailable("--toggle-fullscreen", { value: e.active });
-		return V`<div class="group-actions" ?data-authored-suffix="${n > 0}"><nve-icon-button part="icon-button fullscreen-button" icon-name="${t ? "minimize" : "maximize"}" container="flat" size="sm" command="--toggle-fullscreen" .commandForElement="${e.panels.find((t) => t.id === e.active) ?? null}" ?disabled="${r}" aria-label="${K(t ? this.i18n.exitFullscreen : this.i18n.enterFullscreen)}"></nve-icon-button></div>`;
+		return B`<div class="group-actions" ?data-authored-suffix="${n > 0}"><nve-icon-button part="icon-button fullscreen-button" icon-name="${t ? "minimize" : "maximize"}" container="flat" size="sm" command="--toggle-fullscreen" .commandForElement="${e.panels.find((t) => t.id === e.active) ?? null}" ?disabled="${r}" aria-label="${G(t ? this.i18n.exitFullscreen : this.i18n.enterFullscreen)}"></nve-icon-button></div>`;
 	}
-	#ae() {
-		return this.#T ? q(this.#u, (e) => e.key, (e) => this.#oe(e)) : null;
+	#oe() {
+		return this.#T ? K(this.#f, (e) => e.key, (e) => this.#se(e)) : null;
 	}
-	#oe(e) {
-		return V`<div class="gutter" style="${`left:${e.rect.x}px;top:${e.rect.y}px;width:${e.rect.width}px;height:${e.rect.height}px`}"><nve-resize-handle data-boundary="${e.key}" part="resize-handle" orientation="${e.branch.axis === "horizontal" ? "vertical" : "horizontal"}" .min="${e.min}" .max="${e.max}" .step="${10}" .value="${e.value}" @nve-gesture-input="${this.#f.gesture}" @toggle="${(e) => e.preventDefault()}" @input="${(t) => this.#f.input(t, e)}" @change="${(t) => this.#f.change(t, e)}"></nve-resize-handle></div>`;
+	#se(e) {
+		return B`<div class="gutter" style="${`left:${e.rect.x}px;top:${e.rect.y}px;width:${e.rect.width}px;height:${e.rect.height}px`}"><nve-resize-handle data-boundary="${e.key}" part="resize-handle" orientation="${e.branch.axis === "horizontal" ? "vertical" : "horizontal"}" .min="${e.min}" .max="${e.max}" .step="${10}" .value="${e.value}" @nve-gesture-input="${this.#m.gesture}" @toggle="${(e) => e.preventDefault()}" @input="${(t) => this.#m.input(t, e)}" @change="${(t) => this.#m.change(t, e)}"></nve-resize-handle></div>`;
 	}
-	#se() {
-		let { rearrangeable: e } = this.#S, t = this.fullscreenable || this.#l.some((e) => this.#s.isSelectedGroup(e.active));
-		return V`<div class="chrome" data-chrome inert aria-hidden="true"><div class="gap-probe"></div><div class="tab-min-probe"></div><div class="chrome-header"><nve-tabs part="tabs"><nve-tabs-item-group part="tabs-item-group" class="tab-entry tab-probe"><nve-tabs-item part="tabs-item tab" tabindex="-1"> </nve-tabs-item>${this.closable ? V`<nve-icon-button slot="suffix" part="icon-button close-button" icon-name="cancel" container="flat" size="sm" tabindex="-1"></nve-icon-button>` : null}</nve-tabs-item-group></nve-tabs>${e ? V`<nve-drag-handle part="drag-handle" draggable="false"></nve-drag-handle>` : null}${t ? V`<div class="group-actions"><nve-icon-button part="icon-button fullscreen-button" icon-name="maximize" container="flat" size="sm" tabindex="-1"></nve-icon-button></div>` : null}</div></div>`;
+	#ce() {
+		let { rearrangeable: e } = this.#S, t = this.fullscreenable || this.#d.some((e) => this.#l.isSelectedGroup(e.active));
+		return B`<div class="chrome" data-chrome inert aria-hidden="true"><div class="gap-probe"></div><div class="tab-min-probe"></div><div class="chrome-header"><nve-tabs part="tabs"><nve-tabs-item-group part="tabs-item-group" class="tab-entry tab-probe"><nve-tabs-item part="tabs-item tab" tabindex="-1"> </nve-tabs-item>${this.closable ? B`<nve-icon-button slot="suffix" part="icon-button close-button" icon-name="cancel" container="flat" size="sm" tabindex="-1"></nve-icon-button>` : null}</nve-tabs-item-group></nve-tabs>${e ? B`<nve-drag-handle part="drag-handle" draggable="false"></nve-drag-handle>` : null}${t ? B`<div class="group-actions"><nve-icon-button part="icon-button fullscreen-button" icon-name="maximize" container="flat" size="sm" tabindex="-1"></nve-icon-button></div>` : null}</div></div>`;
 	}
 };
-t([W({
+t([U({
 	type: Object,
 	attribute: !1
-})], Q.prototype, "i18n", void 0), t([W({
+})], Z.prototype, "i18n", void 0), t([U({
 	type: Boolean,
 	reflect: !0
-})], Q.prototype, "resizable", void 0), t([W({
+})], Z.prototype, "resizable", void 0), t([U({
 	type: Boolean,
 	reflect: !0
-})], Q.prototype, "rearrangeable", void 0), t([W({
+})], Z.prototype, "rearrangeable", void 0), t([U({
 	type: Boolean,
 	reflect: !0
-})], Q.prototype, "groupable", void 0), t([W({
+})], Z.prototype, "groupable", void 0), t([U({
 	type: Boolean,
 	reflect: !0
-})], Q.prototype, "fullscreenable", void 0), t([W({
+})], Z.prototype, "fullscreenable", void 0), t([U({
 	type: Number,
 	attribute: "detach-threshold"
-})], Q.prototype, "detachThreshold", void 0), t([W({
+})], Z.prototype, "detachThreshold", void 0), t([U({
 	type: Boolean,
 	reflect: !0
-})], Q.prototype, "closable", void 0), t([W({ attribute: "resize-policy" })], Q.prototype, "resizePolicy", void 0), t([W({ reflect: !0 })], Q.prototype, "container", void 0), t([W({ type: String })], Q.prototype, "value", null), Q = t([Y()], Q);
-export { Q as Workspace };
+})], Z.prototype, "closable", void 0), t([U({ attribute: "resize-policy" })], Z.prototype, "resizePolicy", void 0), t([U({ reflect: !0 })], Z.prototype, "container", void 0), t([U({ type: String })], Z.prototype, "value", null), Z = t([J()], Z);
+export { Z as Workspace };
 
 //# sourceMappingURL=workspace2.js.map