@dialpad/dialtone/dist/vue3/resizable-D4-peBOl.js

Dialpad's Dialtone design system monorepo

import { c as e, d as t, f as n, o as r } from "./resizable_utils-BComtrMV.js";
import { n as i, r as a, t as o } from "./useResizableCalculations-DAajatT4.js";
import { computed as s, createElementBlock as c, nextTick as l, normalizeClass as u, onMounted as d, onUnmounted as f, openBlock as p, provide as m, reactive as h, ref as g, renderSlot as _, unref as v, watch as y } from "vue";
//#region components/resizable/composables/useResizablePanelState.ts
function b(e, t, n, r = "user") {
	let o = i(e, n);
	return e.userMinSizePixels = o.userMinSizePixels, e.userMaxSizePixels = o.userMaxSizePixels, e.systemMinSizePixels = o.systemMinSizePixels, e.systemMaxSizePixels = o.systemMaxSizePixels, e.collapseSizePixels = o.collapseSizePixels, a(t, o, r);
}
function x(e, t) {
	return e.resizable !== !1 && !e.collapsed && t.resizable !== !1 && !t.collapsed;
}
//#endregion
//#region components/resizable/composables/useResizablePanelControls.ts
function S(e) {
	let { panels: t, containerSize: n, containerRef: i, onPanelResize: a, onPanelCollapse: o, updateSavedPanel: s } = e, c = /* @__PURE__ */ new Map();
	function l(e) {
		return r(e, n.value);
	}
	function u(e) {
		let { panelId: n, action: r, source: a } = e, s = t.value.find((e) => e.id === n), c = r === "collapse";
		return d(n, s, c) || (c ? f(s, a) : p(s), o(n, c), i.value && i.value.dispatchEvent(new CustomEvent("panels-updated")), {
			success: !0,
			panelId: n,
			newState: c ? "collapsed" : "expanded"
		});
	}
	function d(e, t, n) {
		if (!t) return {
			success: !1,
			reason: "Panel not found",
			panelId: e,
			newState: "unchanged"
		};
		let r = t.collapsed;
		if (n && r) return {
			success: !0,
			reason: "Already collapsed",
			panelId: e,
			newState: "unchanged"
		};
		if (!n && !r) return {
			success: !0,
			reason: "Already expanded",
			panelId: e,
			newState: "unchanged"
		};
		if (n && !t.collapsible) return {
			success: !1,
			reason: "Panel is not collapsible",
			panelId: e,
			newState: "unchanged"
		};
	}
	function f(e, r) {
		let i = {
			sizes: /* @__PURE__ */ new Map(),
			manualTargets: /* @__PURE__ */ new Map(),
			containerSize: n.value
		};
		t.value.forEach((e) => {
			i.sizes.set(e.id, e.pixelSize), i.manualTargets.set(e.id, e.manualTargetSize);
		}), c.set(e.id, i), s(e.id, {
			collapsed: !0,
			autoCollapsed: r === "system"
		}), t.value.forEach((t) => {
			t.id !== e.id && !t.collapsed && s(t.id, { manualTargetRatio: void 0 });
		});
	}
	function p(e) {
		let i = e.autoCollapsed ?? !1, a = c.get(e.id);
		if (a) {
			if (!(Math.abs(n.value - a.containerSize) / a.containerSize > .1) || !i) {
				let n = a.sizes.get(e.id);
				n === void 0 ? s(e.id, {
					collapsed: !1,
					autoCollapsed: void 0
				}) : s(e.id, {
					pixelSize: n,
					collapsed: !1,
					autoCollapsed: void 0
				}), t.value.forEach((t) => {
					if (t.id === e.id) return;
					let n = a.sizes.get(t.id), r = a.manualTargets.get(t.id) !== void 0, i = t.manualTargetSize !== void 0;
					!r && !i && n !== void 0 && s(t.id, { pixelSize: n });
				});
			} else s(e.id, {
				collapsed: !1,
				autoCollapsed: void 0
			});
			c.delete(e.id);
		} else {
			let t = b(e, r(e.initialSize ?? "50p", n.value), n.value, "system");
			s(e.id, {
				pixelSize: t,
				collapsed: !1,
				autoCollapsed: void 0
			});
		}
	}
	function m(e, t) {
		let r = Math.round(t), i = n.value;
		s(e, {
			pixelSize: r,
			manualTargetRatio: i > 0 ? r / i : void 0
		});
	}
	function h(e, r) {
		let i = t.value.find((t) => t.id === e);
		if (!i || i.collapsed) return;
		let o = b(i, r, n.value);
		m(e, o), a(e, o);
	}
	function g(e, t, n) {
		let r = n?.isAutoCollapse ? "system" : "prop";
		u({
			panelId: e,
			action: t ? "collapse" : "expand",
			source: r
		});
	}
	function _(e, t) {
		let n = e.pixelSize + t.pixelSize, r = l(e.initialSize || "50p"), i = r + l(t.initialSize || "50p"), o = Math.round(i > 0 ? r / i * n : n / 2), c = n - o;
		s(e.id, {
			pixelSize: o,
			manualTargetRatio: void 0
		}), s(t.id, {
			pixelSize: c,
			manualTargetRatio: void 0
		}), a(e.id, o), a(t.id, c);
	}
	function v() {
		for (let e = 0; e < t.value.length - 1; e++) {
			let n = t.value[e], r = t.value[e + 1];
			x(n, r) && _(n, r);
		}
	}
	function y(e, n) {
		let r = e ? t.value.find((t) => t.id === e) : void 0, i = n ? t.value.find((e) => e.id === n) : void 0;
		r && i && x(r, i) && _(r, i);
	}
	function S(e) {
		if (!e) return;
		let n = t.value.find((t) => t.id === e);
		if (!n || n.collapsed || n.resizable === !1) return;
		let r = l(n.initialSize || "50p"), i = r - n.pixelSize, o = t.value.indexOf(n), c = t.value.find((e, t) => t !== o && !e.collapsed && e.resizable !== !1);
		if (!c) return;
		let u = c.pixelSize - i;
		s(n.id, {
			pixelSize: r,
			manualTargetRatio: void 0
		}), s(c.id, { pixelSize: u }), a(n.id, r), a(c.id, u);
	}
	function C(e, t, n = "all") {
		try {
			n === "all" ? v() : n === "before" ? S(e) : n === "after" ? S(t) : y(e, t);
		} catch (e) {
			console.error("[resizable] Error in resetPanels:", e);
		}
	}
	function w() {
		let e = [], r = n.value;
		for (let n of t.value) n.collapsed || !n.collapsible || !n.collapseSizePixels || r < n.collapseSizePixels && u({
			panelId: n.id,
			action: "collapse",
			source: "system"
		}).newState === "collapsed" && e.push(n.id);
		return e;
	}
	function T() {
		let e = [], r = n.value;
		for (let n of t.value) !n.collapsed || !n.autoCollapsed || !n.collapseSizePixels || r >= n.collapseSizePixels && u({
			panelId: n.id,
			action: "expand",
			source: "system"
		}).newState === "expanded" && e.push(n.id);
		return e;
	}
	function E() {
		let e = T();
		return {
			collapsed: w(),
			expanded: e
		};
	}
	return {
		commitPanelSize: m,
		resizePanel: h,
		collapsePanel: g,
		resetPanels: C,
		processCollapseRequest: u,
		checkAutoCollapse: w,
		checkAutoExpand: T,
		processAutoCollapseExpand: E
	};
}
function C(e) {
	if (!e || e.length === 0) return [];
	let t = e.map((e, t) => ({
		rule: e,
		index: t
	}));
	return t.sort((e, t) => {
		let n = e.rule.priority - t.rule.priority;
		return n === 0 ? e.index - t.index : n;
	}), t.map((e) => e.rule);
}
function w(e, t, n) {
	return t.minSizeBeforeCollapse === void 0 ? e.userMinSizePixels : r(t.minSizeBeforeCollapse, n);
}
function T(e, t, n) {
	let r = e.find((e) => e.id === t.panelId);
	if (!r || r.collapsed) return;
	let i = w(r, t, n);
	if (i !== void 0) return r.pixelSize <= i ? r.id : void 0;
}
function E(e, t, n) {
	return !e || e.length === 0 || !t || t.length === 0 ? [] : C(t).map((t) => T(e, t, n)).filter((e) => e !== void 0);
}
//#endregion
//#region components/resizable/composables/computeLayout.ts
function D(e, t, n) {
	if (n !== void 0) {
		let i = n.pixelSize;
		return !isFinite(i) || i < 0 || t > 0 && i > t * 2 ? r(e.initialSize ?? "50p", t) : i;
	}
	return r(e.initialSize ?? "50p", t);
}
function O(e, t) {
	return t !== void 0 && t.collapsed !== void 0 ? t.collapsed : !!e.collapsed;
}
function k(e, t, n = "system") {
	let r = a(e, t, n);
	return {
		clamped: r,
		delta: r - e
	};
}
function A(e) {
	if (e) return new Map(e.map((e) => [e.id, e]));
}
function j(e, t, n) {
	return e.map((e) => {
		let r = i(e, t), a = n?.get(e.id), o = O(e, a), s = e.resizable === !1, c = a?.manualTargetRatio, l;
		return l = o ? 0 : c !== void 0 && t > 0 ? c * t : D(e, t, a), {
			config: e,
			constraints: r,
			width: l,
			collapsed: o,
			isFixed: s,
			manualTargetRatio: c
		};
	});
}
function M(e, t) {
	let n = 0;
	for (let t of e) if (t.isFixed) {
		let { clamped: e } = k(t.width, t.constraints);
		t.width = e, n += e;
	}
	let r = e.filter((e) => !e.isFixed && e.manualTargetRatio !== void 0);
	for (let e of r) {
		let { clamped: r } = k((e.manualTargetRatio ?? 0) * t, e.constraints, "user");
		e.width = r, n += r;
	}
	return n;
}
function ee(e) {
	let t = e.length + 1;
	for (let n = 0; n < t; n++) {
		let t = 0, n = /* @__PURE__ */ new Set();
		for (let r of e) {
			let { clamped: e, delta: i } = k(r.width, r.constraints);
			i !== 0 && (r.width = e, n.add(r.config.id), t += i);
		}
		if (t === 0) break;
		let r = e.filter((e) => !n.has(e.config.id));
		if (r.length === 0) break;
		let i = -t / r.length;
		for (let e of r) e.width += i;
	}
	for (let t of e) {
		let { clamped: e } = k(t.width, t.constraints);
		t.width = e;
	}
}
function te(e, t, n) {
	let r = n - e.reduce((e, t) => e + t.width, 0);
	if (r > 1) {
		let e = [...t].reverse().find((e) => !e.isFixed);
		e && (e.width += r);
	}
}
function N(e, t) {
	if (t <= 0) {
		e.forEach((e) => {
			e.collapsed || (e.width = 0);
		});
		return;
	}
	let n = e.filter((e) => !e.collapsed);
	if (n.length === 0) return;
	let r = M(n, t), i = n.filter((e) => !e.isFixed && e.manualTargetRatio === void 0), a = Math.max(0, t - r);
	if (i.length === 0) return;
	let o = i.reduce((e, t) => e + Math.max(0, t.width), 0);
	for (let e of i) o > 0 ? e.width = e.width / o * a : e.width = a / i.length;
	ee(i), te(n, i, t);
}
function P(e, t) {
	e.sort((e, t) => t.remainder - e.remainder);
	let n = t;
	for (let { panel: t } of e) {
		if (n <= 0) break;
		let e = t.constraints.systemMaxSizePixels ?? t.constraints.userMaxSizePixels ?? Infinity;
		t.width < e && !t.isFixed && (t.width += 1, --n);
	}
}
function F(e, t) {
	if (t <= 0) return;
	let n = e.filter((e) => !e.collapsed);
	if (n.length === 0) return;
	let r = [];
	for (let e of n) {
		let t = Math.floor(e.width);
		r.push({
			panel: e,
			remainder: e.width - t
		}), e.width = t;
	}
	P(r, t - n.reduce((e, t) => e + t.width, 0));
}
function I(e, t) {
	let n = /* @__PURE__ */ new Map(), r = 0;
	for (let i of e) {
		let e = i.collapsed ? 0 : i.width, a = r, o = Math.max(0, t - a - e);
		n.set(i.config.id, {
			id: i.config.id,
			left: a,
			right: o,
			width: e,
			collapsed: i.collapsed,
			constraints: i.constraints
		}), r += e;
	}
	return n;
}
function L(e, t) {
	let r = [];
	for (let i = 0; i < e.length - 1; i++) {
		let a = e[i], o = e[i + 1];
		if (a.resizable === !1 || o.resizable === !1) continue;
		let s = t.get(a.id), c = t.get(o.id);
		if (!s || !c) continue;
		let l = s.collapsed || c.collapsed;
		r.push({
			id: n(a.id, o.id),
			beforePanelId: a.id,
			afterPanelId: o.id,
			left: s.left + s.width,
			disabled: l
		});
	}
	return r;
}
function R(e) {
	let { panels: t, containerSize: n, savedState: r } = e;
	if (t.length === 0) return {
		panels: /* @__PURE__ */ new Map(),
		handles: []
	};
	let i = j(t, n, A(r));
	N(i, n), F(i, n);
	let a = I(i, n);
	return {
		panels: a,
		handles: L(t, a)
	};
}
//#endregion
//#region components/resizable/composables/useResizableStorage.ts
function z(e) {
	return typeof e.id == "string" && typeof e.pixelSize == "number" && e.pixelSize >= 0;
}
function B(e) {
	return (e.collapsed === void 0 || typeof e.collapsed == "boolean") && (e.autoCollapsed === void 0 || typeof e.autoCollapsed == "boolean");
}
function V(e) {
	if (typeof e != "object" || !e) return !1;
	let t = e;
	return z(t) && B(t);
}
function H(e) {
	return Array.isArray(e) && e.every((e) => V(e));
}
function U(e) {
	return {
		save(t) {
			try {
				localStorage.setItem(e, JSON.stringify(t));
			} catch (e) {
				console.error("[resizable] Failed to save to localStorage:", e);
			}
		},
		load() {
			try {
				let t = localStorage.getItem(e);
				if (!t) return null;
				let n;
				try {
					n = JSON.parse(t);
				} catch {
					return localStorage.removeItem(e), null;
				}
				return H(n) ? n : (localStorage.removeItem(e), null);
			} catch (t) {
				console.warn("[resizable] Failed to load from localStorage:", t);
				try {
					localStorage.removeItem(e);
				} catch {}
				return null;
			}
		},
		clear() {
			try {
				localStorage.removeItem(e);
			} catch {}
		}
	};
}
function W(e, t) {
	let n = t ?? (e ? U(e) : null);
	function r(e) {
		if (!n) return;
		let t = e.map((e) => ({
			id: e.id,
			pixelSize: e.pixelSize,
			collapsed: e.collapsed,
			autoCollapsed: e.autoCollapsed
		}));
		n.save(t);
	}
	function i() {
		if (!n) return null;
		let e = n.load();
		return e ? H(e) ? e : (n.clear(), null) : null;
	}
	function a(e, t) {
		e.restoredFromStorage || (t.pixelSize !== void 0 && (e.pixelSize = t.pixelSize), t.collapsed !== void 0 && (e.collapsed = t.collapsed), t.autoCollapsed !== void 0 && (e.autoCollapsed = t.autoCollapsed), e.restoredFromStorage = !0);
	}
	function o(e) {
		let t = i();
		if (!t) return !1;
		let r = new Set(e.map((e) => e.id)), o = new Set(t.map((e) => e.id));
		return Array.from(r).some((e) => !o.has(e)) ? (n && n.clear(), !1) : (t.forEach((t) => {
			let n = e.find((e) => e.id === t.id);
			n && a(n, t);
		}), !0);
	}
	function s() {
		n && n.clear();
	}
	return {
		saveToStorage: r,
		loadFromStorage: i,
		loadFromStorageWithValidation: o,
		restorePanelFromStorage: a,
		clearStorage: s
	};
}
//#endregion
//#region components/resizable/composables/useResizableGroup.ts
var G = e;
function ne(e, t, n, r) {
	let a = n.panels.get(e.id), o = a?.constraints ?? i(e, t), s = a?.width ?? 0, c = a?.collapsed ?? !!e.collapsed;
	return {
		...e,
		pixelSize: s,
		collapsed: c,
		userMinSizePixels: o.userMinSizePixels,
		userMaxSizePixels: o.userMaxSizePixels,
		systemMinSizePixels: o.systemMinSizePixels,
		systemMaxSizePixels: o.systemMaxSizePixels,
		collapseSizePixels: o.collapseSizePixels,
		manualTargetRatio: r?.manualTargetRatio,
		autoCollapsed: r?.autoCollapsed
	};
}
function re(e) {
	let { storageKey: t, direction: n, containerRef: r } = e, i = g([]), a = g(0), o = W(t, e.storageAdapter), c = g(o.loadFromStorage()), u = g(!0), d = s(() => {
		let e = i.value, t = a.value;
		return e.length === 0 || t <= 0 ? {
			panels: /* @__PURE__ */ new Map(),
			handles: []
		} : R({
			panels: e,
			containerSize: t,
			savedState: c.value ?? void 0
		});
	}), f = s(() => {
		let e = d.value, t = a.value, n = new Map(c.value?.map((e) => [e.id, e]) ?? []);
		return i.value.map((r) => ne(r, t, e, n.get(r.id)));
	});
	y(d, (e) => {
		e.panels.size > 0 && u.value && (u.value = !1);
	}, { immediate: !0 });
	let p = s(() => {
		let e = /* @__PURE__ */ new Map();
		for (let t of f.value) e.set(t.id, t);
		return e;
	}), m = !1;
	function h(e) {
		e.id.includes(":") && console.warn(`[resizable] Panel id "${e.id}" contains ':' which is reserved as the handle separator. Use kebab-case.`);
		let t = i.value.findIndex((t) => t.id === e.id);
		t === -1 ? (i.value = [...i.value, e], m || (m = !0, l(() => {
			i.value = _(i.value), m = !1;
		}))) : i.value = i.value.map((n, r) => r === t ? e : n);
	}
	function _(e) {
		let t = r.value;
		if (!t) return e;
		let n = Array.from(t.querySelectorAll(".d-resizable-panel[data-panel-id]"));
		if (n.length === 0) return e;
		let i = /* @__PURE__ */ new Map();
		return n.forEach((e, t) => {
			let n = e.getAttribute("data-panel-id");
			n && i.set(n, t);
		}), [...e].sort((e, t) => (i.get(e.id) ?? Infinity) - (i.get(t.id) ?? Infinity));
	}
	function v(e) {
		i.value = i.value.filter((t) => t.id !== e);
	}
	function b(e) {
		o.saveToStorage(e), c.value = e.map((e) => ({
			id: e.id,
			pixelSize: e.pixelSize,
			collapsed: e.collapsed,
			autoCollapsed: e.autoCollapsed,
			manualTargetRatio: e.manualTargetRatio
		}));
	}
	function x(e, t) {
		c.value || (c.value = []);
		let n = c.value.findIndex((t) => t.id === e);
		if (n >= 0) c.value[n] = {
			...c.value[n],
			...t
		};
		else {
			let n = f.value.find((t) => t.id === e)?.pixelSize ?? 0;
			c.value.push({
				id: e,
				pixelSize: n,
				...t
			});
		}
		c.value = [...c.value], o.saveToStorage(c.value);
	}
	function S() {
		c.value = o.loadFromStorage();
	}
	function C() {
		o.clearStorage(), c.value = null;
	}
	let w = new ResizeObserver((e) => {
		for (let t of e) {
			let e = n.value === "row" ? t.contentRect.width : t.contentRect.height;
			a.value = G(Math.round(e));
		}
	});
	function T() {
		w.disconnect();
	}
	return y(r, (e, t) => {
		t && w.unobserve(t), e && (a.value = G(n.value === "row" ? e.clientWidth : e.clientHeight), w.observe(e));
	}, { immediate: !0 }), {
		layout: d,
		syncedPanels: f,
		panelMap: p,
		containerSize: a,
		isInitializing: u,
		registerPanel: h,
		unregisterPanel: v,
		saveCurrentLayout: b,
		updateSavedPanel: x,
		reloadFromStorage: S,
		clearSavedState: C,
		disconnectObserver: T
	};
}
//#endregion
//#region components/resizable/composables/useResizableDrag.ts
var K = {
	isActive: !1,
	handleId: null,
	beforePanelId: null,
	afterPanelId: null,
	proposedBeforeSize: 0,
	proposedAfterSize: 0
};
function q(e, t) {
	return e.querySelector(`[data-panel-id="${t}"]`);
}
function ie(e, t) {
	return e.querySelector(`[data-handle-id="${t}"]`);
}
function J(e, t, n) {
	e.style.insetInlineStart = `${t}px`, e.style.insetInlineEnd = `${n}px`, e.style.inlineSize = "";
}
function Y(e) {
	e.style.insetInlineStart = "", e.style.insetInlineEnd = "", e.style.inlineSize = "";
}
function ae(e, t) {
	e.style.insetInlineStart = `${Math.max(0, t)}px`;
}
function X(e) {
	e.style.insetInlineStart = "";
}
function oe(e, t) {
	let n = e.indexOf(":");
	if (n === -1) return {
		beforePanel: null,
		afterPanel: null
	};
	let r = e.slice(0, n), i = e.slice(n + 1);
	return {
		beforePanel: t.find((e) => e.id === r) ?? null,
		afterPanel: t.find((e) => e.id === i) ?? null
	};
}
function se(e) {
	let { direction: t, containerRef: n, panels: r, containerSize: i, resizeHandler: a, onDragEnd: o, onDragStart: s } = e, c = h({ ...K }), l = null, u = null, d = null, p = null, m = null, g = 0, _ = 0, v = 0, y = null, b = null, x = null;
	function S() {
		b = (e) => k(e), x = () => A(), document.addEventListener("pointermove", b), document.addEventListener("pointerup", x), document.addEventListener("pointercancel", x), document.addEventListener("keydown", M);
	}
	function C() {
		b && (document.removeEventListener("pointermove", b), b = null), x && (document.removeEventListener("pointerup", x), document.removeEventListener("pointercancel", x), x = null), document.removeEventListener("keydown", M);
	}
	function w() {
		C(), document.body.style.userSelect = "", document.body.style.cursor = "", Object.assign(c, K), l = null, u = null, d = null, p = null, m = null, g = 0, _ = 0, v = 0, y = null;
	}
	function T(e, t, n) {
		let { beforePanel: r, afterPanel: i } = oe(t, n);
		if (!r || !i) return console.warn(`[resizable] No panel pair found for handle "${t}"`), null;
		let a = q(e, r.id), o = q(e, i.id), s = ie(e, t);
		return !a || !o ? (console.warn(`[resizable] Panel element(s) not found for handle "${t}"`), null) : {
			beforePanel: r,
			afterPanel: i,
			beforeEl: a,
			afterEl: o,
			handleElement: s
		};
	}
	function E(e) {
		let i = n.value;
		if (!i) return;
		let a = T(i, e, r.value);
		a && (l = a.beforeEl, u = a.afterEl, d = a.handleElement, p = a.beforePanel, m = a.afterPanel, g = a.beforePanel.pixelSize, _ = a.afterPanel.pixelSize, v = parseFloat(l.style.insetInlineStart || "0"), y = i.getBoundingClientRect(), Object.assign(c, {
			isActive: !0,
			handleId: e,
			beforePanelId: a.beforePanel.id,
			afterPanelId: a.afterPanel.id,
			proposedBeforeSize: g,
			proposedAfterSize: _
		}), document.body.style.userSelect = "none", document.body.style.cursor = t.value === "row" ? "ew-resize" : "ns-resize", S(), s?.(e));
	}
	function D(e, t) {
		let n = y;
		return t === "row" ? e.clientX - n.left : e.clientY - n.top;
	}
	function O() {
		return c.isActive && !!n.value && !!l && !!u && !!c.handleId && !!p && !!m;
	}
	function k(e) {
		if (!O()) return;
		let n = D(e, t.value), o = a.processResizeMove(n, p, m, i.value, c.handleId, r.value, v);
		if (!o.isValidResize) return;
		c.proposedBeforeSize !== o.beforePanelSize && (c.proposedBeforeSize = o.beforePanelSize), c.proposedAfterSize !== o.afterPanelSize && (c.proposedAfterSize = o.afterPanelSize);
		let s = i.value, f = o.constrainedCursorPosition, h = s - f, g = f - 2, _ = s - f - o.afterPanelSize;
		J(l, v, h), J(u, f, Math.max(0, _)), d && ae(d, g);
	}
	function A() {
		if (!c.isActive) return;
		let e = c.beforePanelId, t = c.afterPanelId, n = c.proposedBeforeSize, r = c.proposedAfterSize, i = g, a = _;
		l && Y(l), u && Y(u), d && X(d), w(), e && t && o(e, t, n, r, n !== i || r !== a);
	}
	function j() {
		c.isActive && (l && u && (Y(l), Y(u)), d && X(d), w());
	}
	function M(e) {
		e.key === "Escape" && c.isActive && (e.preventDefault(), j());
	}
	return f(() => {
		j();
	}), {
		dragState: c,
		startDrag: E,
		onDragMove: k,
		commitDrag: A,
		cancelDrag: j,
		cleanup: w
	};
}
//#endregion
//#region components/resizable/composables/useResizableAnnouncements.ts
var Z = null, Q, $ = 0;
function ce() {
	return Z || (Z = document.getElementById("d-resizable-announcements"), Z || (Z = document.createElement("div"), Z.id = "d-resizable-announcements", Z.setAttribute("aria-live", "polite"), Z.setAttribute("aria-atomic", "true"), Z.style.position = "absolute", Z.style.left = "-10000px", Z.style.width = "1px", Z.style.height = "1px", Z.style.overflow = "hidden", document.body.appendChild(Z))), Z;
}
function le(e) {
	if (!e.trim()) return;
	Q && clearTimeout(Q);
	let t = ce();
	t.textContent = "", Q = setTimeout(() => {
		t.textContent = e, setTimeout(() => {
			t.textContent = "";
		}, 1e3);
	}, 100);
}
function ue() {
	return d(() => {
		$++, ce();
	}), f(() => {
		Q && clearTimeout(Q), $--, $ <= 0 && Z && (Z.remove(), Z = null, $ = 0);
	}), { announce: le };
}
//#endregion
//#region components/resizable/composables/useResizableOffset.ts
function de(e = {}) {
	let { offsetElement: t = null, offsetAmount: n = null, offsetDirection: r = "start", direction: i = g("row") } = e, a = g(0);
	function o() {
		if (n != null && n > 0) {
			a.value = n;
			return;
		}
		if (!t) {
			a.value = 0;
			return;
		}
		try {
			let e = document.querySelector(t);
			if (!e) {
				a.value = 0;
				return;
			}
			let n = e.getBoundingClientRect();
			a.value = i.value === "row" ? n.height : n.width;
		} catch (e) {
			console.warn("[resizable] Failed to measure offset element:", e), a.value = 0;
		}
	}
	let c = s(() => {
		let e = {};
		if (a.value <= 0) return e;
		let t = `${a.value}px`;
		return (r === "start" || r === "both") && (e.insetBlockStart = t), (r === "end" || r === "both") && (e.insetBlockEnd = t), e;
	}), l = s(() => {
		let e = {};
		if (a.value <= 0) return e;
		let t = `${a.value}px`;
		return (r === "start" || r === "both") && (e.paddingBlockStart = t), (r === "end" || r === "both") && (e.paddingBlockEnd = t), e;
	});
	return d(() => {
		o();
	}), {
		calculatedOffset: a,
		updateOffset: o,
		handleStyles: c,
		contentStyles: l
	};
}
//#endregion
//#region components/resizable/resizable.vue
var fe = ["data-storage-key"], pe = {
	__name: "resizable",
	props: {
		direction: {
			type: String,
			default: "row"
		},
		storageKey: {
			type: String,
			default: null
		},
		class: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		panels: {
			type: Array,
			default: () => []
		},
		spaceAllocationStrategy: {
			type: String,
			default: "proportional",
			validator: (e) => ["proportional", "preserve-manual"].includes(e)
		},
		collapseRules: {
			type: Array,
			default: () => []
		},
		storage: {
			type: Object,
			default: null
		},
		offsetElement: {
			type: String,
			default: null
		},
		offsetAmount: {
			type: Number,
			default: null
		},
		offsetDirection: {
			type: String,
			default: "start"
		},
		messages: {
			type: Object,
			default: () => ({})
		}
	},
	emits: [
		"panel-resize",
		"panel-collapse",
		"resize-start",
		"resize-end"
	],
	setup(e, { expose: r, emit: i }) {
		let a = e, l = i, d = g(null), h = s(() => a.direction), b = re({
			storageKey: a.storageKey ?? null,
			direction: h,
			containerRef: d,
			storageAdapter: a.storage ?? void 0
		}), x = g(!1), C = g(void 0), w = o(() => b.containerSize.value), T = b.isInitializing, D = (e) => b.registerPanel(e), O = (e) => b.unregisterPanel(e), k = (e) => b.saveCurrentLayout(e), { commitPanelSize: A, resizePanel: j, collapsePanel: M, resetPanels: ee, processAutoCollapseExpand: te } = S({
			panels: b.syncedPanels,
			containerSize: b.containerSize,
			containerRef: d,
			onPanelResize: (e, t) => l("panel-resize", e, t),
			onPanelCollapse: (e, t) => l("panel-collapse", e, t),
			updateSavedPanel: (e, t) => b.updateSavedPanel(e, t)
		});
		function N(e, t, n = "all") {
			ee(e, t, n), n === "all" ? (b.syncedPanels.value.forEach((e) => b.updateSavedPanel(e.id, { manualTargetRatio: void 0 })), b.clearSavedState()) : (e && b.updateSavedPanel(e, { manualTargetRatio: void 0 }), t && b.updateSavedPanel(t, { manualTargetRatio: void 0 }));
		}
		function P() {
			if (te(), !a.collapseRules?.length) return;
			let e = b.syncedPanels.value, t = E(e, a.collapseRules, b.containerSize.value);
			if (t.length === 0) return;
			let n = e.find((e) => e.id === t[0]);
			n && !n.collapsed && M(t[0], !0);
		}
		let { announce: F } = ue(), I = de({
			offsetElement: a.offsetElement,
			offsetAmount: a.offsetAmount,
			offsetDirection: a.offsetDirection,
			direction: h
		}), L = /* @__PURE__ */ new Set();
		function R(e) {
			L.add(e);
		}
		function z(e) {
			L.delete(e);
		}
		let B = se({
			direction: h,
			containerRef: d,
			panels: b.syncedPanels,
			containerSize: b.containerSize,
			resizeHandler: w,
			onDragStart(e) {
				x.value = !0, C.value = e, l("resize-start", e);
			},
			onDragEnd(e, t, r, i, a) {
				let o = B.dragState.handleId ?? n(e, t);
				x.value = !1, C.value = void 0, a && (A(e, r), A(t, i), l("resize-end", o), P());
			}
		});
		function V(e) {
			B.startDrag(e);
		}
		function H() {
			B.cancelDrag();
		}
		function U() {
			k(b.syncedPanels.value);
		}
		function W(e, t) {
			l("panel-resize", e, t);
		}
		return y(b.syncedPanels, (e) => {
			e.length > 0 && !T.value && P();
		}, { flush: "post" }), f(() => {
			b.disconnectObserver(), B.cancelDrag();
		}), m(t, {
			layout: b.layout,
			panels: b.syncedPanels,
			panelMap: b.panelMap,
			direction: h,
			containerSize: b.containerSize,
			containerElement: s(() => d.value),
			isResizing: s(() => x.value),
			activeHandleId: s(() => C.value),
			isInitializing: s(() => T.value),
			messages: a.messages,
			startResize: (e) => V(e),
			resetPanels: N,
			registerHandle: R,
			unregisterHandle: z,
			registerPanel: D,
			unregisterPanel: O,
			saveToStorage: U,
			announce: F,
			offsetHandleStyles: I.handleStyles,
			offsetContentStyles: I.contentStyles,
			collapsePanel: M,
			emitPanelResize: W,
			commitPanelSize: A,
			updateSavedPanel: (e, t) => b.updateSavedPanel(e, t)
		}), r({
			resizePanel: j,
			collapsePanel: M,
			resetPanels: N,
			state: s(() => ({
				direction: h.value,
				panels: b.syncedPanels.value,
				containerSize: b.containerSize.value,
				isResizing: x.value,
				activeHandleId: C.value
			})),
			panelConfigs: s(() => a.panels),
			allocationStrategy: s(() => a.spaceAllocationStrategy)
		}), (e, t) => (p(), c("div", {
			ref_key: "containerRef",
			ref: d,
			class: u([
				"d-resizable",
				`d-resizable--${h.value}`,
				{ "d-resizable--resizing": x.value },
				a.class
			]),
			"data-storage-key": a.storageKey || void 0
		}, [_(e.$slots, "default", {
			panels: v(b).syncedPanels.value,
			direction: h.value,
			isResizing: x.value,
			spaceAllocationStrategy: a.spaceAllocationStrategy,
			resizePanel: v(j),
			collapsePanel: v(M),
			startResize: V,
			stopResize: H
		})], 10, fe));
	}
};
//#endregion
export { pe as t };

//# sourceMappingURL=resizable-D4-peBOl.js.map