@ixfx/components 0.6.2 → 0.7.0

package/dist/split-layout-BFSbUZQv.js

@@ -0,0 +1,969 @@
+import { t as themeFallbacks } from "./fallbacks-DNI9xt0F.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+//#region src/split-layout/split-drag.ts
+function createDragMachine(handlers) {
+	let state = null;
+	let rafId = null;
+	let pendingMove = null;
+	function startGutterDrag(groupId, gutterIndex, _pointerId, clientX, clientY, containerRect, trackSizes, constraints) {
+		state = {
+			isDragging: true,
+			groupId,
+			gutterIndex,
+			startPointerX: clientX,
+			startPointerY: clientY,
+			containerRect,
+			trackSizes,
+			minConstraints: constraints.map((c) => c.minPx),
+			maxConstraints: constraints.map((c) => c.maxPx),
+			fixedConstraints: constraints.map((c) => c.fixedPx),
+			whenSmallConstraints: constraints.map((c) => c.whenSmall)
+		};
+		handlers.onDragStart(state);
+	}
+	function move(pointerEvent) {
+		if (!state || !state.isDragging) return;
+		pendingMove = {
+			deltaX: pointerEvent.clientX - state.startPointerX,
+			deltaY: pointerEvent.clientY - state.startPointerY
+		};
+		if (rafId === null) rafId = requestAnimationFrame(flushMove);
+	}
+	function flushMove() {
+		if (!state || !pendingMove) {
+			rafId = null;
+			return;
+		}
+		const { deltaX, deltaY } = pendingMove;
+		pendingMove = null;
+		rafId = null;
+		handlers.onDragMove(state, deltaX, deltaY);
+	}
+	function end(_pointerEvent) {
+		if (!state || !state.isDragging) return;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		pendingMove = null;
+		handlers.onDragEnd(state);
+		state = null;
+	}
+	return {
+		startGutterDrag,
+		move,
+		end,
+		getState: () => state
+	};
+}
+//#endregion
+//#region src/split-layout/split-model.ts
+let panelIdCounter = 0;
+let groupIdCounter = 0;
+function generatePanelId() {
+	return `p-${++panelIdCounter}`;
+}
+function generateGroupId() {
+	return `g-${++groupIdCounter}`;
+}
+function resetIdCounters() {
+	panelIdCounter = 0;
+	groupIdCounter = 0;
+}
+function readOwnWeight(el) {
+	const attr = el.getAttribute(`size`) ?? el.getAttribute(`weight`);
+	if (attr === null) return void 0;
+	const value = Number.parseFloat(attr);
+	return Number.isNaN(value) ? void 0 : value;
+}
+function buildModel(rootEl) {
+	resetIdCounters();
+	return buildGroupFromElement(rootEl, null);
+}
+function buildGroupFromElement(el, _parentAxis) {
+	const isNestedLayout = el.tagName === `IXFX-SPLIT-LAYOUT`;
+	const axis = el.getAttribute(`direction`) === `column` ? `column` : `row`;
+	const group = {
+		kind: `group`,
+		id: el.id || generateGroupId(),
+		el: isNestedLayout ? el : null,
+		axis,
+		children: [],
+		weight: readOwnWeight(el) ?? 1,
+		fixedPx: null
+	};
+	const sizesAttr = el.getAttribute(`sizes`);
+	const sizes = sizesAttr ? sizesAttr.split(/\s+/).map((s) => Number.parseFloat(s)).filter((n) => !Number.isNaN(n)) : [];
+	const childNodes = Array.from(el.children);
+	let sizeIndex = 0;
+	for (const child of childNodes) {
+		const positional = sizeIndex < sizes.length ? sizes[sizeIndex] : void 0;
+		sizeIndex++;
+		if (child.tagName === `IXFX-SPLIT-LAYOUT`) group.children.push(buildGroupFromElement(child, axis));
+		else if (child.tagName === `IXFX-SPLIT-PANEL`) group.children.push(buildPanelNode(child, positional));
+		else {
+			const wrapper = createImplicitPanel(child, positional);
+			group.children.push(wrapper);
+		}
+	}
+	if (group.children.length === 0) {
+		const implicitPanel = createImplicitPanelWithoutId();
+		group.children.push(implicitPanel);
+	}
+	return group;
+}
+function createImplicitPanel(el, size) {
+	const minAttr = el.getAttribute(`min`);
+	const maxAttr = el.getAttribute(`max`);
+	const whenSmallAttr = el.getAttribute(`when-small`);
+	const fixedAttr = el.getAttribute(`fixed`);
+	const collapsedAttr = el.hasAttribute(`collapsed`);
+	let minPx = 0;
+	if (minAttr) minPx = parseLength(minAttr, 0);
+	let maxPx = null;
+	if (maxAttr) maxPx = parseLength(maxAttr, 0);
+	let fixedPx = null;
+	if (fixedAttr) fixedPx = fixedAttr === `` ? 100 : parseLength(fixedAttr, 100);
+	const weight = readOwnWeight(el) ?? size ?? 1;
+	return {
+		kind: `panel`,
+		id: el.id || generatePanelId(),
+		el,
+		weight,
+		fixedPx,
+		minPx,
+		maxPx,
+		whenSmall: whenSmallAttr || `prevent`,
+		collapsed: collapsedAttr,
+		restoreWeight: weight
+	};
+}
+function createImplicitPanelWithoutId(size) {
+	return {
+		kind: `panel`,
+		id: generatePanelId(),
+		el: document.createElement(`div`),
+		weight: size ?? 1,
+		fixedPx: null,
+		minPx: 0,
+		maxPx: null,
+		whenSmall: `prevent`,
+		collapsed: false,
+		restoreWeight: size ?? 1
+	};
+}
+function buildPanelNode(el, size) {
+	const sizeAttr = el.getAttribute(`size`) || el.getAttribute(`weight`);
+	const minAttr = el.getAttribute(`min`);
+	const maxAttr = el.getAttribute(`max`);
+	const whenSmallAttr = el.getAttribute(`when-small`);
+	const fixedAttr = el.getAttribute(`fixed`);
+	const collapsedAttr = el.hasAttribute(`collapsed`);
+	let weight = size ?? 1;
+	if (sizeAttr) weight = Number.parseFloat(sizeAttr);
+	let minPx = 0;
+	if (minAttr) minPx = parseLength(minAttr, 0);
+	let maxPx = null;
+	if (maxAttr) maxPx = parseLength(maxAttr, 0);
+	let fixedPx = null;
+	if (fixedAttr) fixedPx = fixedAttr === `` ? 100 : parseLength(fixedAttr, 100);
+	return {
+		kind: `panel`,
+		id: el.id || generatePanelId(),
+		el,
+		weight,
+		fixedPx,
+		minPx,
+		maxPx,
+		whenSmall: whenSmallAttr || `prevent`,
+		collapsed: collapsedAttr,
+		restoreWeight: weight
+	};
+}
+function parseLength(value, fallback) {
+	if (value.endsWith(`px`)) return Number.parseFloat(value.replace(`px`, ``));
+	if (value.endsWith(`%`)) return fallback;
+	const num = Number.parseFloat(value);
+	return Number.isNaN(num) ? fallback : num;
+}
+function normalise(group) {
+	const flexibleWeights = [];
+	let totalFlexibleWeight = 0;
+	for (const child of group.children) if (child.kind === `panel`) {
+		if (child.fixedPx !== null) {} else if (!child.collapsed) {
+			flexibleWeights.push(child.weight);
+			totalFlexibleWeight += child.weight;
+		}
+	} else {
+		flexibleWeights.push(child.weight);
+		totalFlexibleWeight += child.weight;
+	}
+	if (totalFlexibleWeight === 0) totalFlexibleWeight = 1;
+	const normalizedChildren = [];
+	for (let i = 0; i < group.children.length; i++) {
+		const child = group.children[i];
+		if (child.kind === `panel`) {
+			if (child.fixedPx === null && !child.collapsed) normalizedChildren.push({
+				...child,
+				weight: child.weight / totalFlexibleWeight
+			});
+			else normalizedChildren.push(child);
+		} else normalizedChildren.push({
+			...child,
+			weight: child.weight / totalFlexibleWeight
+		});
+	}
+	return {
+		...group,
+		children: normalizedChildren
+	};
+}
+function distribute(sizesPx, gutterIndex, deltaPx, constraints) {
+	const result = [...sizesPx];
+	const belowMin = [];
+	if (deltaPx === 0) return {
+		sizesPx: result,
+		belowMin
+	};
+	const growSide = deltaPx > 0 ? gutterIndex : gutterIndex + 1;
+	const shrinkSide = deltaPx > 0 ? gutterIndex + 1 : gutterIndex;
+	let remaining = Math.abs(deltaPx);
+	for (let i = shrinkSide; i >= 0 && remaining > 0; i--) {
+		const c = constraints[i];
+		if (c.fixedPx !== null) continue;
+		const currentSize = result[i];
+		const room = currentSize - c.minPx;
+		if (room > 0) {
+			const take = Math.min(room, remaining);
+			result[i] -= take;
+			remaining -= take;
+			if (c.whenSmall !== `prevent` && result[i] <= c.minPx && result[i] > 0) {
+				belowMin.push(i);
+				break;
+			}
+		} else if (c.whenSmall !== `prevent` && currentSize > 0) {
+			const take = Math.min(currentSize, remaining);
+			result[i] -= take;
+			remaining -= take;
+			if (result[i] <= c.minPx) {
+				belowMin.push(i);
+				break;
+			}
+		}
+	}
+	const actualMoved = Math.abs(deltaPx) - remaining;
+	if (actualMoved > 0) {
+		result[growSide] += actualMoved;
+		remaining = 0;
+	}
+	if (remaining > 0) for (let i = growSide; i < result.length && remaining > 0; i++) {
+		const c = constraints[i];
+		if (c.fixedPx !== null) continue;
+		const maxRoom = c.maxPx !== null ? c.maxPx - result[i] : Infinity;
+		if (maxRoom <= 0) continue;
+		const give = Math.min(maxRoom, remaining);
+		result[i] += give;
+		remaining -= give;
+	}
+	return {
+		sizesPx: result,
+		belowMin
+	};
+}
+function resolveTracks(group, _containerPx) {
+	const parts = [];
+	const gutterSize = `var(--split-gutter-size, 6px)`;
+	for (let i = 0; i < group.children.length; i++) {
+		const child = group.children[i];
+		let track;
+		if (child.kind === `panel`) {
+			if (child.collapsed) track = `var(--split-collapsed-size, 0px)`;
+			else if (child.fixedPx !== null) track = `${child.fixedPx}px`;
+			else track = `minmax(${child.minPx > 0 ? `${child.minPx}px` : `0px`}, var(--s${i}))`;
+		} else track = `minmax(0, var(--s${i}))`;
+		parts.push(track);
+		if (i < group.children.length - 1) parts.push(gutterSize);
+	}
+	return parts.join(` `);
+}
+function toSnapshot(group) {
+	return {
+		version: 1,
+		root: snapshotNode(group)
+	};
+}
+function snapshotNode(node) {
+	if (node.kind === `panel`) return {
+		kind: `panel`,
+		id: node.id,
+		weight: node.weight,
+		collapsed: node.collapsed
+	};
+	const children = node.children.map((c) => snapshotNode(c));
+	return {
+		kind: `group`,
+		id: node.id,
+		weight: node.weight,
+		children
+	};
+}
+function applySnapshot(group, snapshot) {
+	return applySnapshotToGroup(group, snapshot.root);
+}
+function applySnapshotToGroup(group, snapshot) {
+	if (snapshot.kind !== `group`) return group;
+	const weightMap = /* @__PURE__ */ new Map();
+	const collapsedMap = /* @__PURE__ */ new Map();
+	collectWeights(snapshot, weightMap, collapsedMap);
+	const newChildren = [];
+	for (const child of group.children) if (child.kind === `panel`) {
+		const newWeight = weightMap.get(child.id);
+		const collapsed = collapsedMap.get(child.id);
+		newChildren.push({
+			...child,
+			weight: newWeight !== void 0 ? newWeight : child.weight,
+			collapsed: collapsed !== void 0 ? collapsed : child.collapsed
+		});
+	} else {
+		const childSnapshot = snapshot.children?.find((c) => c.id === child.id);
+		if (childSnapshot) newChildren.push(applySnapshotToGroup(child, childSnapshot));
+		else newChildren.push(child);
+	}
+	return {
+		...group,
+		children: newChildren
+	};
+}
+function collectWeights(snapshot, weights, collapsed) {
+	if (snapshot.kind === `panel`) {
+		weights.set(snapshot.id, snapshot.weight ?? 1);
+		if (snapshot.collapsed !== void 0) collapsed.set(snapshot.id, snapshot.collapsed);
+	} else if (snapshot.children) for (const child of snapshot.children) collectWeights(child, weights, collapsed);
+}
+function walk(group, visitor) {
+	walkInner(group, [], visitor);
+}
+function walkInner(node, path, visitor) {
+	visitor(node, path);
+	if (node.kind === `group`) for (let i = 0; i < node.children.length; i++) walkInner(node.children[i], [...path, i], visitor);
+}
+//#endregion
+//#region src/split-layout/split-panel.ts
+let SplitPanelElement = class SplitPanelElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.id = ``;
+		this.size = ``;
+		this.weight = ``;
+		this.fixed = ``;
+		this.min = ``;
+		this.max = ``;
+		this.whenSmall = `prevent`;
+		this.collapsed = false;
+		this.snap = ``;
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      :host([collapsed]) {
+        visibility: hidden;
+      }
+    `];
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], SplitPanelElement.prototype, "id", void 0);
+__decorate([property({ type: String })], SplitPanelElement.prototype, "size", void 0);
+__decorate([property({ type: String })], SplitPanelElement.prototype, "weight", void 0);
+__decorate([property({ type: String })], SplitPanelElement.prototype, "fixed", void 0);
+__decorate([property({ type: String })], SplitPanelElement.prototype, "min", void 0);
+__decorate([property({ type: String })], SplitPanelElement.prototype, "max", void 0);
+__decorate([property({
+	type: String,
+	attribute: `when-small`
+})], SplitPanelElement.prototype, "whenSmall", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], SplitPanelElement.prototype, "collapsed", void 0);
+__decorate([property({ type: String })], SplitPanelElement.prototype, "snap", void 0);
+SplitPanelElement = __decorate([safeCustomElement(`ixfx-split-panel`)], SplitPanelElement);
+//#endregion
+//#region src/split-layout/split-layout.ts
+let SplitLayoutElement = class SplitLayoutElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.direction = `row`;
+		this.sizes = ``;
+		this.gutterSize = ``;
+		this.snap = ``;
+		this._model = null;
+		this._resizing = false;
+		this._observer = null;
+		this._applyingOwnMutation = false;
+		this._dragStructurallyChanged = false;
+		this._dragMachine = createDragMachine({
+			onDragStart: (state) => this._handleDragStart(state),
+			onDragMove: (state, deltaX, deltaY) => this._handleDragMove(state, deltaX, deltaY),
+			onDragEnd: (state) => this._handleDragEnd(state),
+			distribute: (sizes, idx, delta, constraints) => {
+				return distribute(sizes, idx, delta, constraints);
+			}
+		});
+		this._onGutterPointerDown = (e, groupId, gutterIndex) => {
+			e.preventDefault();
+			if (!this._groupEl || !this._model) return;
+			const { rect, trackSizes, constraints } = this._snapshotTracks();
+			this._dragMachine.startGutterDrag(groupId, gutterIndex, e.pointerId, e.clientX, e.clientY, rect, trackSizes, constraints);
+			window.addEventListener(`pointermove`, this._onPointerMove);
+			window.addEventListener(`pointerup`, this._onPointerUp);
+		};
+		this._onPointerMove = (e) => {
+			this._dragMachine.move(e);
+		};
+		this._onPointerUp = (e) => {
+			this._dragMachine.end(e);
+			window.removeEventListener(`pointermove`, this._onPointerMove);
+			window.removeEventListener(`pointerup`, this._onPointerUp);
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._setupObserver();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._observer?.disconnect();
+	}
+	firstUpdated() {
+		this._rebuildModel();
+	}
+	_setupObserver() {
+		this._observer = new MutationObserver(() => {
+			if (!this._applyingOwnMutation) Promise.resolve().then(() => this._rebuildModel());
+		});
+		this._observer.observe(this, {
+			childList: true,
+			subtree: true,
+			attributeFilter: [
+				`size`,
+				`weight`,
+				`min`,
+				`max`,
+				`when-small`,
+				`fixed`,
+				`direction`,
+				`collapsed`,
+				`sizes`
+			]
+		});
+	}
+	_rebuildModel() {
+		this._reindexSlots();
+		const normalized = normalise(buildModel(this));
+		this._model = normalized;
+		this.requestUpdate();
+	}
+	get panels() {
+		if (!this._model) return [];
+		const panels = [];
+		walk(this._model, (node, path) => {
+			if (node.kind === `panel`) panels.push({
+				id: node.id,
+				el: node.el,
+				index: path[path.length - 1],
+				path: path.join(`-`),
+				weight: node.weight,
+				collapsed: node.collapsed,
+				min: node.minPx,
+				max: node.maxPx,
+				whenSmall: node.whenSmall
+			});
+		});
+		return panels;
+	}
+	getLayout() {
+		if (!this._model) return null;
+		return toSnapshot(this._model);
+	}
+	setLayout(s) {
+		if (!this._model) return;
+		this._applyingOwnMutation = true;
+		this._model = applySnapshot(this._model, s);
+		this.requestUpdate();
+		this._applyingOwnMutation = false;
+		this._emitChange();
+	}
+	getSizes(_groupId) {
+		if (!this._model) return {};
+		const result = {};
+		if (this._model.children) this._model.children.forEach((child) => {
+			result[child.id] = child.weight;
+		});
+		return result;
+	}
+	setSizes(weights, _groupId) {
+		if (!this._model) return;
+		this._applyingOwnMutation = true;
+		if (Array.isArray(weights)) this._model.children.forEach((child, i) => {
+			if (i < weights.length) child.weight = weights[i];
+		});
+		else for (const [id, weight] of Object.entries(weights)) {
+			const child = this._model.children.find((c) => c.id === id);
+			if (child) child.weight = weight;
+		}
+		this._model = normalise(this._model);
+		this.requestUpdate();
+		this._applyingOwnMutation = false;
+		this._emitResize();
+		this._emitChange();
+	}
+	collapse(idOrEl) {
+		this._setCollapsedState(idOrEl, true);
+	}
+	expand(idOrEl) {
+		this._setCollapsedState(idOrEl, false);
+	}
+	toggle(idOrEl) {
+		const panel = this._findPanel(idOrEl);
+		if (panel) this._setCollapsedState(panel.id, !panel.collapsed);
+	}
+	closePanel(idOrEl) {
+		const panel = this._findPanel(idOrEl);
+		if (!panel) return false;
+		const event = new CustomEvent(`ixfx-split-close`, {
+			detail: {
+				id: panel.id,
+				index: panel.index
+			},
+			bubbles: true,
+			composed: true,
+			cancelable: true
+		});
+		this.dispatchEvent(event);
+		if (event.defaultPrevented) return false;
+		this._applyingOwnMutation = true;
+		panel.el.remove();
+		this._rebuildModel();
+		this._observer?.takeRecords();
+		this._applyingOwnMutation = false;
+		this._emitResize();
+		this._emitChange();
+		return true;
+	}
+	/**
+	* Bounding rects of the gutter elements, in gutter index order. lets
+	* callers (e.g. dock junction handles) hit-test gutters without reaching
+	* into the shadow DOM.
+	*/
+	getGutterRects() {
+		const gutters = this.shadowRoot?.querySelectorAll(`.gutter`);
+		if (gutters === void 0 || gutters === null) return [];
+		return Array.from(gutters, (g) => g.getBoundingClientRect());
+	}
+	/**
+	* Programmatically begin dragging the gutter at `gutterIndex`, as if the
+	* user had pressed on it at (`clientX`, `clientY`). The drag then follows
+	* the pointer `pointerId` until pointerup, exactly like a native gutter
+	* drag. Returns false when the index is out of range or the layout isn't
+	* ready. Intended for composite resize affordances — e.g. a junction handle
+	* that starts this drag alongside perpendicular drags on other layouts.
+	*/
+	beginGutterDrag(gutterIndex, pointerId, clientX, clientY) {
+		if (!this._groupEl || !this._model) return false;
+		if (gutterIndex < 0 || gutterIndex >= this._model.children.length - 1) return false;
+		const { rect, trackSizes, constraints } = this._snapshotTracks();
+		this._dragMachine.startGutterDrag(this._model.id, gutterIndex, pointerId, clientX, clientY, rect, trackSizes, constraints);
+		window.addEventListener(`pointermove`, this._onPointerMove);
+		window.addEventListener(`pointerup`, this._onPointerUp);
+		return true;
+	}
+	_setCollapsedState(idOrEl, collapsed, revealWeight) {
+		const panel = this._findPanel(idOrEl);
+		if (!panel || panel.collapsed === collapsed) return;
+		this._applyingOwnMutation = true;
+		if (collapsed) {
+			panel.el.setAttribute(`collapsed`, ``);
+			panel.el.setAttribute(`data-collapsed`, ``);
+		} else {
+			panel.el.removeAttribute(`collapsed`);
+			panel.el.removeAttribute(`data-collapsed`);
+		}
+		this._rebuildModel();
+		if (!collapsed && revealWeight !== void 0) this._setFlexibleWeight(panel.id, revealWeight);
+		this.requestUpdate();
+		this._observer?.takeRecords();
+		this._applyingOwnMutation = false;
+		if (collapsed) this.dispatchEvent(new CustomEvent(`ixfx-split-collapse`, {
+			detail: {
+				id: panel.id,
+				index: panel.index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		else this.dispatchEvent(new CustomEvent(`ixfx-split-expand`, {
+			detail: {
+				id: panel.id,
+				index: panel.index
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this._emitResize();
+		this._emitChange();
+	}
+	_reindexSlots() {
+		Array.from(this.children).forEach((child, i) => {
+			const name = `panel-${i}`;
+			if (child.getAttribute(`slot`) !== name) child.setAttribute(`slot`, name);
+		});
+	}
+	_findPanel(idOrEl) {
+		const id = typeof idOrEl === `string` ? idOrEl : idOrEl.id;
+		return this.panels.find((p) => p.id === id);
+	}
+	_setFlexibleWeight(id, weight) {
+		if (!this._model) return;
+		const isFlexible = (c) => c.kind === `group` || c.fixedPx === null && !c.collapsed;
+		const flexible = this._model.children.filter(isFlexible);
+		const target = flexible.find((c) => c.id === id);
+		if (!target) return;
+		const t = Math.min(Math.max(weight, 0), .9);
+		const others = flexible.filter((c) => c !== target);
+		const othersTotal = others.reduce((sum, c) => sum + c.weight, 0) || 1;
+		const scale = (1 - t) / othersTotal;
+		for (const c of others) c.weight *= scale;
+		target.weight = t;
+		this._model = normalise(this._model);
+	}
+	_snapPx() {
+		const fromProp = Number.parseFloat(this.snap);
+		if (!Number.isNaN(fromProp)) return fromProp;
+		const fromVar = Number.parseFloat(getComputedStyle(this).getPropertyValue(`--split-snap`));
+		return Number.isNaN(fromVar) ? 24 : fromVar;
+	}
+	_collapsedPx() {
+		const v = Number.parseFloat(getComputedStyle(this).getPropertyValue(`--split-collapsed-size`));
+		return Number.isNaN(v) ? 0 : v;
+	}
+	_handleDragStart(_state) {
+		this._resizing = true;
+		this._dragStructurallyChanged = false;
+		this.setAttribute(`data-dragging`, ``);
+	}
+	_handleDragMove(state, deltaX, deltaY) {
+		if (!this._model) return;
+		if (this._dragStructurallyChanged) return;
+		const axis = this.direction;
+		const delta = axis === `row` ? deltaX : deltaY;
+		const gutterIndex = state.gutterIndex;
+		const growSide = delta > 0 ? gutterIndex : gutterIndex + 1;
+		const growNeighbour = this._model.children[growSide];
+		if (growNeighbour?.kind === `panel` && growNeighbour.collapsed) {
+			const revealPx = growNeighbour.minPx > 0 ? growNeighbour.minPx : this._snapPx();
+			if (Math.abs(delta) >= revealPx) {
+				const axisPx = axis === `row` ? state.containerRect.width : state.containerRect.height;
+				this._setCollapsedState(growNeighbour.id, false, axisPx > 0 ? revealPx / axisPx : void 0);
+				this._reseedDragState(state, state.startPointerX + deltaX, state.startPointerY + deltaY);
+			}
+			return;
+		}
+		const constraints = state.minConstraints.map((min, i) => ({
+			minPx: min,
+			maxPx: state.maxConstraints[i],
+			fixedPx: state.fixedConstraints[i],
+			whenSmall: state.whenSmallConstraints[i]
+		}));
+		const result = distribute(state.trackSizes, gutterIndex, delta, constraints);
+		const totalSize = state.trackSizes.reduce((a, b) => a + b, 0);
+		result.sizesPx.forEach((size, i) => {
+			const child = this._model.children[i];
+			if (child && child.kind === `panel`) child.weight = size / totalSize;
+		});
+		if (result.belowMin.length > 0) {
+			let processed = false;
+			for (const idx of result.belowMin) {
+				if (processed) break;
+				const child = this._model.children[idx];
+				if (child && child.kind === `panel`) {
+					const whenSmall = child.whenSmall;
+					if (whenSmall === `collapse` && !child.collapsed) {
+						this._setCollapsedState(child.id, true);
+						processed = true;
+						this._dragStructurallyChanged = true;
+					} else if (whenSmall === `close`) {
+						this.closePanel(child.id);
+						processed = true;
+						this._dragStructurallyChanged = true;
+					}
+				}
+			}
+		}
+		this._model = normalise(this._model);
+		this.requestUpdate();
+	}
+	_handleDragEnd(_state) {
+		this._resizing = false;
+		this.removeAttribute(`data-dragging`);
+		this._emitResize();
+		this._emitChange();
+	}
+	_snapshotTracks() {
+		const rect = this._groupEl.getBoundingClientRect();
+		const axisSize = this.direction === `row` ? rect.width : rect.height;
+		const collapsedPx = this._collapsedPx();
+		const children = this._model.children;
+		return {
+			rect,
+			trackSizes: children.map((c) => {
+				if (c.kind === `panel` && c.collapsed) return collapsedPx;
+				if (c.kind === `panel` && c.fixedPx !== null) return c.fixedPx;
+				return c.weight * axisSize;
+			}),
+			constraints: children.map((c) => {
+				if (c.kind === `panel`) return {
+					minPx: c.minPx,
+					maxPx: c.maxPx,
+					fixedPx: c.fixedPx,
+					whenSmall: c.whenSmall
+				};
+				return {
+					minPx: 0,
+					maxPx: null,
+					fixedPx: null,
+					whenSmall: `prevent`
+				};
+			})
+		};
+	}
+	_reseedDragState(state, pointerX, pointerY) {
+		if (!this._groupEl || !this._model) return;
+		const { rect, trackSizes, constraints } = this._snapshotTracks();
+		state.startPointerX = pointerX;
+		state.startPointerY = pointerY;
+		state.containerRect = rect;
+		state.trackSizes = trackSizes;
+		state.minConstraints = constraints.map((c) => c.minPx);
+		state.maxConstraints = constraints.map((c) => c.maxPx);
+		state.fixedConstraints = constraints.map((c) => c.fixedPx);
+		state.whenSmallConstraints = constraints.map((c) => c.whenSmall);
+	}
+	_emitResize() {
+		if (!this._model) return;
+		const detail = {
+			sizes: this.getSizes(),
+			groupId: this._model.id
+		};
+		this.dispatchEvent(new CustomEvent(`ixfx-split-resize`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	_emitChange() {
+		const layout = this.getLayout();
+		if (!layout) return;
+		const detail = { layout };
+		this.dispatchEvent(new CustomEvent(`ixfx-split-change`, {
+			detail,
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		if (!this._model) return nothing;
+		const isRow = this._model.axis === `row`;
+		const trackSizes = this._resolveTracks(this._model);
+		const cssVars = this._model.children.map((child, i) => {
+			return `--s${i}: ${child.weight * 100}%`;
+		}).join(`; `);
+		const gridStyle = isRow ? `grid-template-columns: ${trackSizes}; grid-template-rows: 1fr; ${cssVars}` : `grid-template-rows: ${trackSizes}; grid-template-columns: 1fr; ${cssVars}`;
+		return html`
+      <div class="grid" style="${gridStyle}">
+        ${this._model.children.map((_, i) => html`
+          <div part="panel" style="grid-column: ${isRow ? i * 2 + 1 : 1}; grid-row: ${isRow ? 1 : i * 2 + 1}; display: flex; flex-direction: ${isRow ? `row` : `column`}; overflow: hidden;">
+            <slot name="panel-${i}"></slot>
+          </div>
+        `)}
+        ${this._model.children.slice(0, -1).map((_, i) => this._renderGutter(this._model.id, i, isRow))}
+      </div>
+    `;
+	}
+	_getTrackSizes(count) {
+		const sizes = [];
+		for (let i = 0; i < count; i++) sizes.push(`var(--s${i}, 1fr)`);
+		return sizes;
+	}
+	_resolveTracks(model) {
+		model.axis;
+		const parts = [];
+		const gutterSize = `var(--split-gutter-size, 6px)`;
+		for (let i = 0; i < model.children.length; i++) {
+			const child = model.children[i];
+			let track;
+			if (child.kind === `panel`) {
+				if (child.collapsed) track = `var(--split-collapsed-size, 0px)`;
+				else if (child.fixedPx !== null) track = `${child.fixedPx}px`;
+				else track = `minmax(${child.minPx > 0 ? `${child.minPx}px` : `0px`}, var(--s${i}, 1fr))`;
+			} else track = `minmax(0, var(--s${i}, 1fr))`;
+			parts.push(track);
+			if (i < model.children.length - 1) parts.push(gutterSize);
+		}
+		return parts.join(` `);
+	}
+	_renderGutter(groupId, index, isRow) {
+		const cursor = isRow ? `ew-resize` : `ns-resize`;
+		const gridColumn = isRow ? `${(index + 1) * 2}` : `1`;
+		const gridRow = isRow ? `1` : `${(index + 1) * 2}`;
+		return html`
+      <div
+        class="gutter"
+        data-group="${groupId}"
+        data-index="${index}"
+        style="cursor: ${cursor}; grid-column: ${gridColumn}; grid-row: ${gridRow};"
+        @pointerdown=${(e) => this._onGutterPointerDown(e, groupId, index)}
+      >
+        <div class="grab-handle">
+          <span class="dot"></span>
+          <span class="dot"></span>
+          <span class="dot"></span>
+        </div>
+      </div>
+    `;
+	}
+	static {
+		this.styles = [themeFallbacks, css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        --split-gutter-size: 6px;
+        --split-gutter-color: transparent;
+        --split-gutter-hover-color: var(--surface-6);
+        --split-gutter-active-color: var(--accent);
+        --split-collapsed-size: 0px;
+        --split-snap: 24px;
+        --split-grab-color: var(--border-subtle-color);
+        --split-grab-dot-size: 3px;
+        --split-grab-size: 16px;
+        --split-grab-thickness: 8px;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      .grid {
+        display: grid;
+        width: 100%;
+        height: 100%;
+      }
+
+      .grid slot {
+        display: block;
+        min-width: 0;
+        min-height: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      ::part(panel) {
+        width: 100%;
+        height: 100%;
+      }
+
+      .gutter {
+        z-index: 2;
+        background: var(--split-gutter-color);
+        transition: background-color var(--transition, 0.2s);
+        pointer-events: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      :host([direction="row"]) .gutter {
+        width: var(--split-gutter-size);
+        cursor: ew-resize;
+        min-height: 100%;
+      }
+
+      :host([direction="column"]) .gutter {
+        height: var(--split-gutter-size);
+        cursor: ns-resize;
+        min-width: 100%;
+      }
+
+      .gutter:hover,
+      .gutter[data-active] {
+        background: var(--split-gutter-hover-color);
+      }
+
+      :host([data-dragging]) .gutter {
+        background: var(--split-gutter-active-color);
+      }
+
+      :host([data-dragging]) * {
+        transition: none !important;
+        user-select: none;
+      }
+
+      .grab-handle .dot {
+        width: var(--split-grab-dot-size);
+        height: var(--split-grab-dot-size);
+        border-radius: 50%;
+        background: var(--split-grab-color);
+      }
+
+      :host([direction="row"]) .grab-handle {
+        flex-direction: column;
+        gap: var(--split-grab-dot-size);
+      }
+
+      :host([direction="column"]) .grab-handle {
+        flex-direction: row;
+        gap: var(--split-grab-dot-size);
+      }
+
+      :host([data-dragging]) .grab-handle {
+        display: none;
+      }
+
+      :host(:not([data-dragging])) .gutter:hover .grab-handle {
+        display: flex;
+      }
+    `];
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], SplitLayoutElement.prototype, "direction", void 0);
+__decorate([property({ type: String })], SplitLayoutElement.prototype, "sizes", void 0);
+__decorate([property({
+	type: String,
+	attribute: `gutter-size`
+})], SplitLayoutElement.prototype, "gutterSize", void 0);
+__decorate([property({ type: String })], SplitLayoutElement.prototype, "snap", void 0);
+__decorate([state()], SplitLayoutElement.prototype, "_model", void 0);
+__decorate([state()], SplitLayoutElement.prototype, "_resizing", void 0);
+__decorate([query(`.grid`)], SplitLayoutElement.prototype, "_groupEl", void 0);
+SplitLayoutElement = __decorate([safeCustomElement(`ixfx-split-layout`)], SplitLayoutElement);
+//#endregion
+export { distribute as a, toSnapshot as c, buildModel as i, walk as l, SplitPanelElement as n, normalise as o, applySnapshot as r, resolveTracks as s, SplitLayoutElement as t };
+
+//# sourceMappingURL=split-layout-BFSbUZQv.js.map