@nvidia-elements/core 2.22.5 → 2.23.1

package/dist/workspace/workspace2.js

@@ -0,0 +1,518 @@
+import { matchesElementName as e } from "../internal/utils/dom.js";
+import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
+import { useStyles as n } from "../internal/styles/index.js";
+import r from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import { Icon as i } from "../icon/icon2.js";
+import { DragHandle as a } from "../drag-handle/drag-handle2.js";
+import { Ghost as o } from "../ghost/ghost2.js";
+import { IconButton as s } from "../icon-button/icon-button2.js";
+import { ResizeHandle as c } from "../resize-handle/resize-handle2.js";
+import { Tabs as l, TabsItem as u } from "../tabs/tabs2.js";
+import { TabsItemGroup as d } from "../tabs/tabs-item-group2.js";
+import { parseWorkspaceValue as f, sameSerializedWorkspaceLayout as p, serializeWorkspaceValue as m } from "./utils/model/value.utils.js";
+import { closePanel as h, findGroup as g, openPanel as _, projectLayout as v, reconcilePanels as y, selectPanel as b } from "./utils/model/operations.utils.js";
+import { WorkspaceCommandController as x } from "./controllers/workspace-command.controller.js";
+import { WorkspacePanel as S } from "./panel/panel2.js";
+import { focusWorkspacePanel as C, getPanelLabel as w, isWorkspaceCompositionMutation as T, shouldFocusAfterWorkspaceClose as E } from "./utils/presentation/composition.utils.js";
+import { getAllocatedTabWidth as D, preserveRecipientSelection as O } from "./utils/presentation/groups.utils.js";
+import { WorkspaceCompositionController as k } from "./controllers/workspace-composition.controller.js";
+import { WorkspaceFullscreenController as A } from "./controllers/workspace-fullscreen.controller.js";
+import { WorkspaceMeasurementController as j } from "./controllers/workspace-measurement.controller.js";
+import { allocateContextProxies as M, getContextKey as N } from "./utils/placement/context.utils.js";
+import { getAdmissiblePlacementLayout as P } from "./utils/placement/preparation.utils.js";
+import { WorkspaceRearrangeController as F } from "./controllers/workspace-rearrange.controller.js";
+import { WorkspaceResizeController as I } from "./controllers/workspace-resize.controller.js";
+import { WorkspaceRestorationController as L } from "./controllers/workspace-restoration.controller.js";
+import { getRegionCornerStyle as R, shouldEmphasizeReservedDestination as z } from "./utils/presentation/preview.utils.js";
+import { WorkspaceEvaluation as B } from "./utils/evaluation.utils.js";
+import V from "./workspace.js";
+import { LitElement as H, html as U, isServer as W, svg as G } from "lit";
+import { property as K } from "lit/decorators/property.js";
+import { I18nController as q } from "@nvidia-elements/foundations/internal/i18n";
+import { ifDefined as J } from "lit/directives/if-defined.js";
+import { repeat as Y } from "lit/directives/repeat.js";
+import { styleMap as X } from "lit/directives/style-map.js";
+// src/workspace/workspace.ts
+var Z = {
+	close: "close",
+	move: "move",
+	enterFullscreen: "enter full screen",
+	exitFullscreen: "exit full screen"
+}, Q = class extends H {
+	constructor(...e) {
+		super(...e), this.#e = new q(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 L(this, {
+			getLayout: () => this.#t,
+			applyLayout: (e) => this.#A(e),
+			getTransitionTargets: () => this.#m.getTransitionTargets()
+		}), this.#o = new x(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 A(this, {
+			getGroup: (e) => g(this.#V(this.#v).root, e)?.panels ?? [],
+			cancelInteractions: () => {
+				this.#a.finish(), this.#c.cancel(), this.#f.cancel();
+			},
+			invalidateCommandAvailability: () => {
+				this.#o.invalidateAvailability(), this.#p.invalidate();
+			}
+		}), this.#c = new F(this, {
+			evaluateWithContext: (e) => this.#B(e),
+			isRearrangementAllowed: () => !this.#s.active && !this.#a.active,
+			getLayout: () => this.#t,
+			getMeasurements: () => this.#x,
+			getAvailablePanels: () => this.#b,
+			activateSource: (e, t) => this.#N(e, t),
+			applyPreview: (e) => {
+				this.#i = e, this.requestUpdate();
+			},
+			commitPlacement: (e, t, n) => this.#I(e, t, {
+				layout: n,
+				capabilities: this.#S,
+				focus: !1
+			})
+		}), this.#l = [], this.#u = [], this.#d = {
+			gap: 0,
+			headerHeight: 0,
+			gripWidth: 0,
+			actionWidth: 0,
+			groupActionWidth: 0,
+			tabWidth: 0,
+			tabMinWidth: 0,
+			width: 0,
+			height: 0
+		}, this.#f = new I(this, {
+			isEnabled: () => this.#w,
+			getLayout: () => this.#t,
+			getBoundaries: () => this.#u,
+			getAvailablePanels: () => this.#b,
+			getPresentation: () => ({
+				measurements: this.#x,
+				rearrangeable: this.#S.rearrangeable,
+				closable: this.closable,
+				fullscreenable: this.fullscreenable
+			}),
+			cancelForUser: () => this.#a.transition(() => this.#f.cancel()),
+			commitLayout: (e) => this.#M(e)
+		}), this.#p = new j(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 k(this, {
+			getPanels: () => this.#y,
+			getGroups: () => this.#l,
+			getLayout: () => this.#t,
+			getPreview: () => this.#i,
+			scrollChanged: () => this.#c.refresh()
+		}), this.#_ = {
+			getCurrentLayout: () => this.#v,
+			getCurrentMeasurements: () => this.#x,
+			getCurrentPreview: () => this.#i,
+			getFullscreenTarget: () => this.#s.targetPanelId,
+			getResizePreview: () => this.#f.preview
+		};
+	}
+	static {
+		this.styles = n([V]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-workspace",
+			version: "2.23.1",
+			children: ["nve-workspace-panel", "nve-dropdown-group"]
+		};
+	}
+	static {
+		this.elementDefinitions = {
+			[a.metadata.tag]: a,
+			[o.metadata.tag]: o,
+			[i.metadata.tag]: i,
+			[s.metadata.tag]: s,
+			[c.metadata.tag]: c,
+			[l.metadata.tag]: l,
+			[u.metadata.tag]: u,
+			[d.metadata.tag]: d
+		};
+	}
+	#e;
+	get value() {
+		return this.#n;
+	}
+	set value(e) {
+		let t = f(e);
+		this.#a.finish(), this.#A(t);
+	}
+	#t;
+	#n;
+	#r;
+	#i;
+	#a;
+	#o;
+	#s;
+	#c;
+	#l;
+	#u;
+	#d;
+	#f;
+	#p;
+	#m;
+	#h;
+	#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"
+			]
+		});
+	}
+	disconnectedCallback() {
+		this.#c.cancel(), this.#h?.disconnect(), super.disconnectedCallback();
+	}
+	willUpdate(e) {
+		super.willUpdate(e), this.#m.captureFocus(), [
+			"value",
+			"fullscreenable",
+			"closable",
+			"rearrangeable",
+			"groupable",
+			"resizePolicy"
+		].some((t) => e.has(t)) && this.#o.invalidateAvailability(), [
+			"fullscreenable",
+			"closable",
+			"rearrangeable",
+			"groupable"
+		].some((t) => e.has(t)) && this.#p.invalidate(), this.#D(), this.#r = !1;
+	}
+	updated() {
+		this.#m.sync(), this.#o.flushAvailability();
+	}
+	animateTo(e, t = {}) {
+		let n = f(e);
+		this.#a.animateTo(n, t);
+	}
+	isCommandAvailable(e, t = {}) {
+		return this.#o.isCommandAvailable(e, t);
+	}
+	get #v() {
+		return this.#t ?? {
+			version: 1,
+			root: null,
+			closed: []
+		};
+	}
+	get #y() {
+		return this.#g ? this.#g.panels : W ? [] : [...this.children].filter((t) => e(t, S));
+	}
+	get #b() {
+		return this.#g?.available ?? this.#y.map((e) => e.id);
+	}
+	get #x() {
+		return this.#f.presentation?.measurements ?? this.#d;
+	}
+	get #S() {
+		return this.#c.capabilities ?? {
+			rearrangeable: this.rearrangeable,
+			groupable: this.groupable
+		};
+	}
+	get #C() {
+		return this.#f.presentation?.closable ?? this.closable;
+	}
+	get #w() {
+		return this.resizable && !this.#s.active;
+	}
+	get #T() {
+		return this.#w || this.#f.retainingHandles;
+	}
+	#E(t) {
+		let n = t.some((t) => t.target === this || t.type === "attributes" && e(t.target, S) && t.target.parentElement === this), r = t.some((e) => T(this, e));
+		n && (this.#a.finish(), this.#o.invalidateAvailability(), this.#f.cancel(), this.#c.cancel()), (n || r) && (this.#p.invalidate(), this.requestUpdate());
+	}
+	#D() {
+		let e = this.#b;
+		if (!e.every(Boolean) || new Set(e).size !== e.length) return;
+		if (!this.#t) {
+			e.length && this.#k({
+				version: 1,
+				root: {
+					type: "group",
+					panels: e,
+					active: e[0]
+				},
+				closed: []
+			});
+			return;
+		}
+		let t = y(this.#t, e);
+		t !== this.#t && (this.#k(t), this.#r || this.#j());
+	}
+	#O(e) {
+		this.#d = e.measurements, this.#o.invalidateAvailability(), this.requestUpdate(), this.#f.handleMeasurementsChange(e), this.#a.handleMeasurementsChange(e), this.#c.handleMeasurementsChange(e);
+	}
+	#k(e) {
+		if (e === this.#t) return;
+		let t = m(e);
+		this.#t = e, this.#n = t;
+	}
+	#A(e) {
+		this.#c.cancel();
+		let t = this.value;
+		this.#f.resetForRestore(), this.#k(e), this.#r = !0, this.requestUpdate("value", t);
+	}
+	#j() {
+		this.#o.invalidateAvailability(), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	#M(e) {
+		p(this.#t, e) ? this.requestUpdate() : (this.#k(e), this.#j());
+	}
+	#N(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));
+	}
+	#P(e, t) {
+		if (this.#a.finish(), !this.#t || !this.#y.some((t) => t.id === e)) return;
+		let n = this.#t;
+		t === "open" && (n = _(this.#t, e) ?? this.#t);
+		let r = b(n, e);
+		r === void 0 && n !== this.#t && (r = n), r && (this.#c.cancel(), this.#f.cancel(), this.#k(r), this.#j());
+	}
+	#F(e) {
+		this.#c.suppressSelection || this.#P(e, "select");
+	}
+	#I(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, {
+			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;
+	}
+	#L(e) {
+		if (this.#a.finish(), !this.closable || !this.#t) return;
+		let t = h(this.#t, e);
+		if (!t) return;
+		let n = E(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);
+	}
+	#R(e, t) {
+		t.focus !== !1 && this.#z(e.find((e) => !this.#t?.closed.includes(e) && this.#y.some((t) => t.id === e)));
+	}
+	#z(e) {
+		C(this, { id: e });
+	}
+	#B(e) {
+		if (this.#g) return e(this.#g);
+		this.#g = new B(this, {
+			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;
+		}
+	}
+	#V(e) {
+		return this.#g ? this.#g.project(e) : v(e, this.#b);
+	}
+	#H(e, t, n = {}) {
+		if (this.#t) return this.#B((r) => P({
+			evaluation: r,
+			layout: this.#v,
+			measurements: this.#x,
+			source: e,
+			intent: t,
+			groupable: n.groupable ?? this.groupable,
+			candidate: n.candidate
+		}));
+	}
+	#U(e) {
+		let t = e.filter((e) => !this.#t?.closed.includes(e) && this.#y.some((t) => t.id === e)), n = g(this.#t?.root ?? null, t[0])?.active, r = n && t.includes(n) ? n : t[0];
+		return {
+			title: r ? w(this.#y, r) : "",
+			layers: Math.min(t.length, 3)
+		};
+	}
+	#W(e) {
+		return this.#i?.source.includes(e) ?? !1;
+	}
+	#G(e = this.#i) {
+		return !!e && "allocation" in e && e.allocation !== "overlay";
+	}
+	render() {
+		return this.#B((e) => this.#K(e));
+	}
+	#K(e) {
+		let t = this.#i, n = e.presentationGeometry();
+		this.#l = O(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,
+			extent: n,
+			container: this.container,
+			measurements: this.#x,
+			closable: this.#C,
+			animate: !!t,
+			source: t?.source ?? [],
+			scroll: (t) => e.scroll(t)
+		}), U`<div internal-host ?data-resizing="${this.#f.resizing}" ?data-fullscreen="${this.#s.active}" ?data-rearranging="${!!t}" data-preview-allocation="${J(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`}">${Y(this.#l, (e) => this.#m.getGroupIdentity(e), (e) => this.#$(e))}<slot @slotchange="${() => this.requestUpdate()}"></slot>${this.#ae()}<div class="preview-layer" data-drag-phase="${J(this.#i?.phase)}">${r}</div></div></div>${this.#se()}</div>`;
+	}
+	#q(e, t) {
+		let n = this.#i;
+		if (!n) return null;
+		let { x: r, y: i } = t.client({
+			x: 0,
+			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 = M({
+			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 U`${this.#J(d, r, i)}${Y(l, (e) => e.key, (t) => U`<div class="context-boundary" data-context-boundary="${t.key}" ?data-active="${n.context && t.key === N(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;${R(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="${z(n)}" style="${`transform:translate(${f.x - r}px,${f.y - i}px);width:${f.width}px;height:${f.height}px;${R(m, e)}`}">${n.blocked ? U`<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,
+			x: r,
+			y: i,
+			bounds: u,
+			title: a,
+			layers: o
+		}) : null}`;
+	}
+	#J(e, t, n) {
+		return e ? U`<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) {
+		if (!e || e.phase !== "detached" || e.blocked || !e.seams) return null;
+		let { kind: t, edges: n } = e.seams;
+		return U`${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 U`<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>`;
+		})}`;
+	}
+	#X() {
+		return G`<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 G`<rect x="2" y="7" width="7" height="10" rx="1" fill="currentColor" fill-opacity=".2"></rect><path d="M22 4h-9v16h9"></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 U`<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>`;
+	}
+	#$(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 U`<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="${J(r ? "true" : void 0)}" style="${`height:${n}px`}">${this.#ee(e)} ${this.#te(e, o)} ${a ? this.#ie(e, i) : null}</div></div>`;
+	}
+	#ee(e) {
+		return (this.#f.presentation?.rearrangeable ?? this.#S.rearrangeable) && !this.#s.active && e.gripWidth > 0 ? U`<nve-drag-handle part="drag-handle" data-drag-group="${e.panels[0]?.id ?? ""}" draggable="false" aria-label="${J(this.i18n.move)}" @click="${(e) => e.preventDefault()}"></nve-drag-handle>` : null;
+	}
+	#te(e, t) {
+		let n = D(e, this.#x), r = this.#x.panels?.[e.active]?.suffixWidth ?? 0;
+		return U`<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>`;
+	}
+	#ne(e, t) {
+		let n = Y(e.panels, (e) => e.id, (n, r) => this.#re(e, n, {
+			left: r * t,
+			width: t
+		}));
+		return e.tabbed ? U`<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>` : U`<div class="tab-track" style="${`width:${e.panels.length * t}px`}">${n}</div>`;
+	}
+	#re(e, t, n) {
+		let r = X({
+			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 : U`<span class="fallback-title">${t.id}</span>`, o = this.#C ? U`<nve-icon-button slot="${J(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} ${w(this.#y, t.id)}`}" @click="${() => this.#L(t.id)}"></nve-icon-button>` : null;
+		return e.tabbed ? U`<nve-tabs-item-group part="tabs-item-group" class="tab-entry" ?data-carried-tab="${i}" ?inert="${i}" aria-hidden="${J(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>` : U`<div class="tab-entry panel-entry" ?data-carried-tab="${i}" ?inert="${i}" aria-hidden="${J(i ? "true" : void 0)}" style="${r}"><div class="panel-title" data-panel="${t.id}" aria-hidden="true">${a}</div>${o}</div>`;
+	}
+	#ie(e, t) {
+		let n = this.#x.panels?.[e.active]?.suffixWidth ?? 0, r = !this.isCommandAvailable("--toggle-fullscreen", { value: e.active });
+		return U`<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="${J(t ? this.i18n.exitFullscreen : this.i18n.enterFullscreen)}"></nve-icon-button></div>`;
+	}
+	#ae() {
+		return this.#T ? Y(this.#u, (e) => e.key, (e) => this.#oe(e)) : null;
+	}
+	#oe(e) {
+		return U`<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() {
+		let { rearrangeable: e } = this.#S, t = this.fullscreenable || this.#l.some((e) => this.#s.isSelectedGroup(e.active));
+		return U`<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 ? U`<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 ? U`<nve-drag-handle part="drag-handle" draggable="false"></nve-drag-handle>` : null}${t ? U`<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>`;
+	}
+};
+r([K({
+	type: Object,
+	attribute: !1
+})], Q.prototype, "i18n", void 0), r([K({
+	type: Boolean,
+	reflect: !0
+})], Q.prototype, "resizable", void 0), r([K({
+	type: Boolean,
+	reflect: !0
+})], Q.prototype, "rearrangeable", void 0), r([K({
+	type: Boolean,
+	reflect: !0
+})], Q.prototype, "groupable", void 0), r([K({
+	type: Boolean,
+	reflect: !0
+})], Q.prototype, "fullscreenable", void 0), r([K({
+	type: Number,
+	attribute: "detach-threshold"
+})], Q.prototype, "detachThreshold", void 0), r([K({
+	type: Boolean,
+	reflect: !0
+})], Q.prototype, "closable", void 0), r([K({ attribute: "resize-policy" })], Q.prototype, "resizePolicy", void 0), r([K({ reflect: !0 })], Q.prototype, "container", void 0), r([K({ type: String })], Q.prototype, "value", null), Q = r([t()], Q);
+export { Q as Workspace };
+
+//# sourceMappingURL=workspace2.js.map