@pgcorp/ui-kit 0.13.0 → 0.15.0

package/dist/src/composables/useDialogOverlay.d.ts

@@ -1,20 +1,39 @@
 import { ComponentPublicInstance, Ref } from 'vue';
+import { OverlayHostContext } from '../internal/overlayHost';
+export type DialogOverlayScope = 'viewport' | 'contained';
 export interface DialogOverlayOptions {
     open: Readonly<Ref<boolean>>;
     closable: Readonly<Ref<boolean>>;
+    scope?: Readonly<Ref<DialogOverlayScope>>;
+    host?: OverlayHostContext;
+    /** Validates the full owner presentation at setup and before each resource acquisition. */
+    validate?: () => void;
     requestClose: () => void;
     /** Runs after the mounted surface owns focus for the current open cycle. */
     opened?: () => void;
 }
 export interface DialogOverlayController {
     panelRef: Ref<HTMLElement | null>;
+    portalRef: Ref<HTMLElement | null>;
+    dismissalRef: Ref<HTMLElement | null>;
+    /** Native cycle availability, independent of its captured initial-focus permission. */
+    nativeAdmitted: Readonly<Ref<boolean>>;
+    renderOpen: Readonly<Ref<boolean>>;
+    /** Exact current layer base for the private dialog surface's semantic paint bands. */
+    layerIndex: Readonly<Ref<string | null>>;
     setPanelElement: (element: Element | ComponentPublicInstance | null) => void;
+    setPortalElement: (element: Element | ComponentPublicInstance | null) => void;
+    setDismissalElement: (element: Element | ComponentPublicInstance | null) => void;
     backdropStyle: Readonly<Ref<Record<string, string>>>;
     surfaceStyle: Readonly<Ref<Record<string, string>>>;
+    /** Exact native portal paint band; global toast priority is unchanged. */
+    portalStyle: Readonly<Ref<Record<string, string>>>;
+    /** Explicit cleanup retires this cycle and descendants without a focus-return request. */
     dispose: () => void;
 }
 /**
- * Владеет modal-регистрацией, focus trap, body lock и восстановлением фокуса.
- * Owns modal registration, focus trapping, body lock, and focus restoration.
+ * Owns one mounted dialog cycle in the shared layer stack. Viewport dialogs lock
+ * body/trap focus and isolate the native background; contained dialogs lease their host without global modality.
+ * Retirement requires a new false→true open request before another cycle.
  */
 export declare function useDialogOverlay(options: DialogOverlayOptions): DialogOverlayController;

package/dist/src/composables/useDialogOverlay.js

@@ -1,52 +1,283 @@
-import { trapFocusInsidePanel as e } from "../components/shared/_internal/focusTrap.js";
-import { registerLayer as t } from "../internal/layerStack.js";
-import { nextTick as n, onBeforeUnmount as r, ref as i, watch as a } from "vue";
+import { createAggregateError as e } from "../internal/es2020.js";
+import { flatTreeContains as t } from "../internal/flatTree.js";
+import { trapFocusInsidePanel as n } from "../components/shared/_internal/focusTrap.js";
+import { resolveDialogSurfaceLayerIndex as r } from "../components/shared/_internal/dialogSurface.js";
+import { captureLayerFocusAdmission as i, registerLayer as a } from "../internal/layerStack.js";
+import { useOverlayAdmission as o } from "../internal/overlayHost.js";
+import { validateBoolean as s, validateExactString as c } from "../internal/runtimeContract.js";
+import { provideOverlayPortal as l, useOverlayPortal as u } from "../internal/overlayPortal.js";
+import { computed as d, inject as f, nextTick as p, onBeforeUnmount as m, onMounted as h, provide as g, readonly as _, ref as v, shallowRef as y, watch as b } from "vue";
 //#region src/composables/useDialogOverlay.ts
-function o(o) {
-	let s = i(null), c = i({}), l = i({}), u = null, d = 0, f = (e) => {
-		if (e === null || e instanceof HTMLElement) {
-			s.value = e;
+var x = Symbol("ui-kit-dialog-parent-lease");
+function S(S) {
+	let C = () => c("useDialogOverlay", "scope", S.scope?.value ?? "viewport", ["viewport", "contained"]), w = () => s("useDialogOverlay", "open", S.open.value), T = () => s("useDialogOverlay", "closable", S.closable.value), E = () => {
+		if (!S.host) throw TypeError("useDialogOverlay: scope=\"contained\" requires a parent SOverlayHost");
+		return S.host;
+	}, D = C(), ee = w();
+	T(), D === "contained" && E(), S.validate?.();
+	let O = o(), k = v(null), A = v(null), j = v(null), M = v(!1), N = u();
+	l({
+		scope: d(() => C() === "viewport" ? "native" : N?.scope.value ?? "document"),
+		subject: d(() => C() === "viewport" ? k.value instanceof HTMLDialogElement ? k.value : null : N?.subject.value ?? null),
+		target: d(() => C() === "viewport" ? A.value : N?.target.value ?? null),
+		admitted: d(() => C() === "viewport" ? M.value : N?.admitted.value ?? !1)
+	});
+	let P = f(x, null), F = y(null), I = d(() => F.value?.zIndex ?? null);
+	g(x, {
+		registration: F,
+		panel: k
+	});
+	let L = v(O.value && D === "viewport" && ee), R = v(!1), z = v({}), B = v({}), V = v({}), H = null, U = !1, W = !1, G = !1, K = D, q = () => {
+		let e = E(), t = [
+			e.root.value,
+			e.content.value,
+			e.portal.value
+		];
+		for (let e of t) if (e !== null && !(e instanceof HTMLElement)) throw TypeError("useDialogOverlay: SOverlayHost refs must resolve to native HTMLElement or null");
+		let n = e.root.value, r = e.content.value, i = e.portal.value;
+		if (!n || !r || !i || !n.isConnected || !r.isConnected || !i.isConnected) return null;
+		if (n.ownerDocument !== document || r.ownerDocument !== document || i.ownerDocument !== document || r.parentElement !== n || i.parentElement !== n || r === i) throw TypeError("useDialogOverlay: SOverlayHost requires connected same-document sibling content/portal owners");
+		return e;
+	}, J = () => {
+		!G && w() && (G = !0, S.requestClose());
+	}, Y = (t) => {
+		let n = H;
+		H = null, L.value = !1, z.value = {}, B.value = {}, V.value = {};
+		let r = [];
+		try {
+			n?.registration?.unregister({
+				restoreFocus: t,
+				retireDescendants: !0
+			});
+		} catch (e) {
+			r.push(e);
+		} finally {
+			n?.focusAdmission?.cancel();
+		}
+		F.value = null, M.value = !1, n?.releaseNativeListeners?.();
+		try {
+			n?.releaseHost?.();
+		} catch (e) {
+			r.push(e);
+		}
+		if (r.length === 1) throw r[0];
+		if (r.length > 1) throw e(r, "useDialogOverlay: layer and host retirement failed");
+	}, X = (t, n) => {
+		let r = [];
+		try {
+			Y(t);
+		} catch (e) {
+			r.push(e);
+		}
+		if (n) try {
+			J();
+		} catch (e) {
+			r.push(e);
+		}
+		if (r.length === 1) throw r[0];
+		if (r.length > 1) throw e(r, "useDialogOverlay: retirement and close intent failed");
+	}, Z = (e = !0) => {
+		U = !0, X(e, !0);
+	}, Q = (e) => H === e && R.value && !W && !U && O.value && w() && L.value, te = () => {
+		try {
+			let e = C(), t = w();
+			if (T(), e !== K && t) throw TypeError("useDialogOverlay: scope can change only while open=false");
+			e === "contained" && E(), S.validate?.();
+		} catch (t) {
+			U = !0;
+			try {
+				Y(!1);
+			} catch (n) {
+				throw e([t, n], "useDialogOverlay: validation and resource retirement failed");
+			}
+			throw t;
+		}
+	}, ne = async () => {
+		let i = H, o = k.value;
+		if (!i || !Q(i) || !o?.isConnected || i.focusing || i.scope === "viewport" && !A.value?.isConnected) return;
+		let s = P?.registration.value ?? null;
+		if (!P || s && P.panel.value?.isConnected) {
+			if (i.scope === "contained" && i.portal?.contains(o) !== !0) throw TypeError("useDialogOverlay: contained dialog surface must mount inside its SOverlayHost portal");
+			te(), i.focusing = !0;
+			try {
+				let e = i.scope === "contained";
+				if (e) {
+					let e = q();
+					if (!e || e.root.value !== i.root || e.content.value !== i.content || e.portal.value !== i.portal) {
+						Z();
+						return;
+					}
+					if (i.releaseHost = i.focusAdmission ? i.focusAdmission.acquireHost(() => e.acquire(Z)) : e.acquire(Z), !Q(i)) {
+						i.releaseHost(), i.focusAdmission?.cancel();
+						return;
+					}
+				}
+				let c = P?.panel.value ?? null, l = c && !c.contains(i.restoreTarget) ? c : i.restoreTarget;
+				if (!e) {
+					if (!(o instanceof HTMLDialogElement)) throw TypeError("useDialogOverlay: viewport panel ref requires an actual HTMLDialogElement and its exact direct portal");
+					let e = (e) => {
+						e.target === o && (e.preventDefault(), Q(i) && T() && S.requestClose());
+					}, n = (e) => {
+						if (e.defaultPrevented) return;
+						let n = e.target;
+						if (!(n instanceof HTMLFormElement) || n.closest("dialog") !== o || !t(o, n)) return;
+						let r = e.submitter;
+						if (((r instanceof HTMLButtonElement || r instanceof HTMLInputElement) && r.hasAttribute("formmethod") ? r.formMethod : n.method) === "dialog") throw e.preventDefault(), TypeError("useDialogOverlay: native form method=\"dialog\" bypasses controlled open; use a typed close action or update open");
+					};
+					o.addEventListener("cancel", e, !0), o.addEventListener("submit", n, !0), i.releaseNativeListeners = () => {
+						o.removeEventListener("cancel", e, !0), o.removeEventListener("submit", n, !0);
+					};
+				}
+				if (i.registration = a({
+					kind: "dialog",
+					root: () => k.value,
+					modal: !e,
+					...o instanceof HTMLDialogElement && !e ? { nativeDialog: {
+						subject: o,
+						portal: () => A.value
+					} } : {},
+					dismissalRoots: () => {
+						let t = j.value ?? k.value, n = e ? null : A.value;
+						return [...t ? [t] : [], ...n ? [n] : []];
+					},
+					parent: s,
+					eventBoundary: e ? () => i.root : void 0,
+					restoreTarget: l,
+					focusAdmission: i.focusAdmission,
+					dismissOnEscape: T,
+					dismissOnOutsidePointer: T,
+					blocksParentFocusTrap: !e,
+					...e ? {} : { trapFocus: (e) => n(e, k, !0) },
+					requestDismiss: () => S.requestClose(),
+					onRetire: Z
+				}), !Q(i)) {
+					i.registration.unregister({
+						restoreFocus: !1,
+						retireDescendants: !0
+					}), i.focusAdmission?.cancel(), i.releaseNativeListeners?.(), i.releaseNativeListeners = null;
+					return;
+				}
+				if (F.value = i.registration, M.value = !e, z.value = { zIndex: r(i.registration.zIndex, "backdrop") }, B.value = { zIndex: r(i.registration.zIndex, "surface") }, V.value = e ? {} : { "--s-layer-root-toast": r(i.registration.zIndex, "toast") }, await p(), !Q(i) || k.value !== o || !o.isConnected || !i.registration.isTopmost()) {
+					i.focusAdmission?.cancel();
+					return;
+				}
+				i.registration.claimFocus(o) && Q(i) && S.opened?.();
+			} catch (t) {
+				try {
+					H === i ? (U = !0, Y(!1)) : i.focusAdmission?.cancel();
+				} catch (n) {
+					throw e([t, n], "useDialogOverlay: focus admission and resource retirement failed");
+				}
+				throw t;
+			}
+		}
+	}, re = () => {
+		let e;
+		try {
+			let t = C(), n = w();
+			if (T(), t !== K && n) throw TypeError("useDialogOverlay: scope can change only while open=false");
+			t === "contained" && E(), S.validate?.(), e = {
+				valid: !0,
+				open: n,
+				scope: t,
+				host: R.value && t === "contained" ? q() : null,
+				parent: P?.registration.value ?? null,
+				admitted: O.value
+			};
+		} catch (t) {
+			e = {
+				valid: !1,
+				error: t
+			};
+		}
+		return e;
+	}, ie = (t) => {
+		if (!t.valid) {
+			U = !0;
+			try {
+				Y(!1);
+			} catch (n) {
+				throw e([t.error, n], "useDialogOverlay: validation and resource retirement failed");
+			}
+			throw t.error;
+		}
+		let { open: n, scope: r, host: a, admitted: o } = t;
+		if (r !== K) {
+			if (n) throw TypeError("useDialogOverlay: scope can change only while open=false");
+			K = r, r === "contained" && E();
+		}
+		if (!n) {
+			U = !1, G = !1, Y(o);
 			return;
 		}
-		throw TypeError("Dialog overlay panel ref обязан указывать на HTMLElement");
-	}, p = () => {
-		if (u) return;
-		let n = typeof document < "u" && document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		u = t({
-			kind: "dialog",
-			root: () => s.value,
-			modal: !0,
-			restoreTarget: n,
-			dismissOnEscape: () => o.closable.value,
-			dismissOnOutsidePointer: () => o.closable.value,
-			trapFocus: (t) => e(t, s, !0),
-			requestDismiss: () => o.requestClose()
-		}), c.value = { zIndex: u.zIndex }, l.value = { zIndex: `calc(${u.zIndex} + var(--s-layer-overlay-surface-offset))` };
-	}, m = (e = !0) => {
-		u?.unregister({ restoreFocus: e }), u = null, c.value = {}, l.value = {};
-	}, h = () => {
-		d += 1, m(!1);
-	};
-	return a(o.open, async (e, t) => {
-		d += 1;
-		let r = d;
-		if (e) {
-			if (p(), await n(), r !== d || !o.open.value || u === null) return;
-			let e = s.value;
-			if (!e) return;
-			e.focus(), r === d && o.open.value && u !== null && o.opened?.();
+		if (!o) {
+			Z(!1);
 			return;
 		}
-		m(!!t);
-	}, { immediate: !0 }), r(() => {
-		h();
-	}), {
-		panelRef: s,
-		setPanelElement: f,
-		backdropStyle: c,
-		surfaceStyle: l,
-		dispose: h
+		if (!R.value || W || U) return;
+		if (H) {
+			(r === "contained" && (a === null || H.root !== a.root.value || H.content !== a.content.value || H.portal !== a.portal.value) || H.registration && P && !t.parent) && Z();
+			return;
+		}
+		if (r === "contained" && !a) return;
+		let s = i({ releaseBoundary: a?.content.value ?? null }), c = s?.restoreTarget ?? null;
+		H = {
+			scope: r,
+			root: a?.root.value ?? null,
+			content: a?.content.value ?? null,
+			portal: a?.portal.value ?? null,
+			restoreTarget: c,
+			focusAdmission: s,
+			releaseHost: null,
+			registration: null,
+			releaseNativeListeners: null,
+			focusing: !1
+		}, L.value = !0;
+	}, ae = (e) => {
+		if (e !== null && !(e instanceof HTMLElement)) throw TypeError("Dialog overlay panel ref обязан указывать на HTMLElement");
+		k.value = e;
+	}, oe = (e) => {
+		if (e !== null && !(e instanceof HTMLElement)) throw TypeError("useDialogOverlay: native portal ref must resolve to HTMLElement or null");
+		A.value = e;
+	}, se = (e) => {
+		if (e !== null && !(e instanceof HTMLElement)) throw TypeError("useDialogOverlay: visual dismissal ref must resolve to HTMLElement or null");
+		j.value = e;
+	};
+	b(re, ie, {
+		flush: "sync",
+		immediate: !0
+	}), b(k, () => {
+		H?.registration?.refreshModality();
+	}, { flush: "sync" }), b(A, () => H?.registration?.refreshModality(), { flush: "sync" }), b([
+		R,
+		k,
+		A,
+		L,
+		() => P?.registration.value
+	], ne, { flush: "post" }), h(() => {
+		R.value = !0;
+	});
+	let $ = (e) => {
+		if (W) return;
+		W = !0;
+		let t = K === "contained" && w();
+		X(e, t);
+	};
+	return m(() => $(O.value)), {
+		panelRef: k,
+		portalRef: A,
+		dismissalRef: j,
+		nativeAdmitted: _(M),
+		renderOpen: _(L),
+		layerIndex: I,
+		setPanelElement: ae,
+		setPortalElement: oe,
+		setDismissalElement: se,
+		backdropStyle: z,
+		surfaceStyle: B,
+		portalStyle: V,
+		dispose: () => $(!1)
 	};
 }
 //#endregion
-export { o as useDialogOverlay };
+export { S as useDialogOverlay };

package/dist/src/composables/useFloatingPosition.d.ts

@@ -3,6 +3,16 @@ export type FloatingSide = 'top' | 'bottom' | 'left' | 'right';
 export type FloatingAlignment = 'start' | 'center' | 'end';
 export type FloatingPlacement = `${FloatingSide}-${FloatingAlignment}`;
 export type FloatingWidthMatch = 'none' | 'min' | 'exact';
+/** Доступные размеры border-box floating viewport. / Available floating viewport border-box dimensions. */
+export interface FloatingAvailableSize {
+    width: number;
+    height: number;
+}
+/** Native scroll/chrome owner и его естественный, не прокручиваемый контент. / Native scroll/chrome owner and its natural non-scrolling content. */
+export interface FloatingSizingElements {
+    surface: HTMLElement;
+    content: HTMLElement;
+}
 export interface FloatingPositionOptions {
     active: Readonly<Ref<boolean>>;
     placement: () => FloatingPlacement;
@@ -14,6 +24,10 @@ export interface FloatingPositionOptions {
     flip?: () => boolean;
     shift?: () => boolean;
     constrainMainAxis?: () => boolean;
+    /** Ограничивает viewport по natural content без clipped measurements. / Bounds the viewport using natural content, not clipped measurements. */
+    viewportSizing?: () => boolean;
+    /** Явные native владельцы размера; обязательны для viewportSizing. / Explicit native size owners, required for viewportSizing. */
+    sizingElements?: () => FloatingSizingElements | null;
     widthMatch?: () => FloatingWidthMatch;
     zIndex?: () => string;
     scrollStrategy?: 'reposition' | 'close';
@@ -26,6 +40,7 @@ export interface FloatingPositionController {
     arrowStyle: Ref<Record<string, string>>;
     resolvedPlacement: Ref<FloatingPlacement>;
     coordinates: Ref<FloatingCoordinates>;
+    availableSize: Ref<FloatingAvailableSize | null>;
     updatePosition: () => void;
 }
 /** Координаты floating-поверхности во viewport. / Floating-surface viewport coordinates. */
@@ -36,5 +51,10 @@ export interface FloatingCoordinates {
 /**
  * Единый владелец geometry/collision/observer-контракта floating surfaces.
  * Canonical owner of floating-surface geometry, collision and observers.
+ * Panel dimensions use the untransformed used CSS border box, preserving
+ * fractional pixels and content-box padding/borders. Non-resolved CSS sizes
+ * use native unscaled offset dimensions; visual anchor rectangles retain transforms.
+ * CSSOM: https://www.w3.org/TR/cssom-1/#resolved-values
+ * CSSOM View: https://www.w3.org/TR/cssom-view-1/#dom-htmlelement-offsetwidth
  */
 export declare function useFloatingPosition(options: FloatingPositionOptions): FloatingPositionController;

package/dist/src/composables/useFloatingPosition.js

@@ -28,97 +28,174 @@ function u(e, t) {
 	let n = Math.min(10, t / 2);
 	return Math.max(n, Math.min(e, t - n));
 }
-function d(s) {
-	let d = r(null), f = s.panelRef ?? r(null), p = r({}), m = r({}), h = r(s.placement()), g = r({
+function d(e) {
+	if (!/^(?:\d+|\d*\.\d+)px$/u.test(e)) return null;
+	let t = Number(e.slice(0, -2));
+	return Number.isFinite(t) ? t : null;
+}
+function f(e, t, n) {
+	let r = d(e);
+	if (r === null) return null;
+	if (t === "border-box") return r;
+	let i = r;
+	for (let e of n) {
+		let t = d(e);
+		if (t === null) return null;
+		i += t;
+	}
+	return i;
+}
+function p(e) {
+	let t = window.getComputedStyle(e);
+	return {
+		width: f(t.width, t.boxSizing, [
+			t.paddingLeft,
+			t.paddingRight,
+			t.borderLeftWidth,
+			t.borderRightWidth
+		]) ?? e.offsetWidth,
+		height: f(t.height, t.boxSizing, [
+			t.paddingTop,
+			t.paddingBottom,
+			t.borderTopWidth,
+			t.borderBottomWidth
+		]) ?? e.offsetHeight
+	};
+}
+function m(e) {
+	let { surface: t, content: n } = e;
+	if (!t.contains(n)) throw Error("useFloatingPosition: natural content must belong to its native sizing surface");
+	let r = p(t), i = p(n);
+	if (r.width === 0 && r.height === 0 && i.width === 0 && i.height === 0) return r;
+	let a = window.getComputedStyle(t), o = i.height;
+	for (let e of [
+		a.paddingTop,
+		a.paddingBottom,
+		a.borderTopWidth,
+		a.borderBottomWidth
+	]) {
+		let t = d(e);
+		if (t === null) throw Error("useFloatingPosition: sizing surface block edges must resolve to pixel lengths");
+		o += t;
+	}
+	return {
+		width: r.width,
+		height: o
+	};
+}
+function h(s) {
+	let d = r(null), f = s.panelRef ?? r(null), h = r({}), g = r({}), _ = r(s.placement()), v = r({
 		left: -1e4,
 		top: -1e4
-	}), _ = null, v = !1, y = () => {
-		if (!s.active.value || typeof window > "u") return;
+	}), y = r(null), b = null, x = !1, S = !1, C = !1, w = 0, T = () => {
+		if (C || !s.active.value || typeof window > "u") return;
 		let e = s.anchorElement?.() ?? d.value, t = f.value, n = s.anchorRect?.() ?? e?.getBoundingClientRect() ?? null;
 		if (!n || !t) return;
-		let r = t.getBoundingClientRect(), i = r.width || t.offsetWidth, _ = r.height || t.offsetHeight, v = s.offset?.() ?? 6, y = s.boundaryPadding?.() ?? 8, b = window.innerWidth, x = window.innerHeight, [S, C] = o(s.placement()), w = S, T = c(w, C, n, i, _, v);
+		let r = s.viewportSizing?.() ?? !1, i = r ? s.sizingElements?.() : null;
+		if (r && !i) return;
+		let { width: b, height: x } = i ? m(i) : p(t), S = s.offset?.() ?? 6, w = s.boundaryPadding?.() ?? 8, T = window.innerWidth, E = window.innerHeight, [D, O] = o(s.placement()), k = D, A = c(k, O, n, b, x, S);
 		if (s.flip?.() ?? !0) {
-			let e = a[w], t = c(e, C, n, i, _, v), r = l(w, T, i, _, b, x, y);
-			l(e, t, i, _, b, x, y) < r && (w = e, T = t);
+			let e = a[k], t = c(e, O, n, b, x, S), i = l(k, A, b, x, T, E, w), o = l(e, t, b, x, T, E, w);
+			if (o < i && (k = e, A = t), r && (D === "left" || D === "right") && i > 0 && o > 0) {
+				let e = c("bottom", O, n, b, x, S), t = c("top", O, n, b, x, S), r = l("bottom", e, b, x, T, E, w);
+				k = l("top", t, b, x, T, E, w) < r ? "top" : "bottom", A = k === "top" ? t : e;
+			}
 		}
-		let E = i, D = _, O = {};
-		if (s.constrainMainAxis?.() ?? !1) {
-			if (w === "top" || w === "bottom") {
-				let e = w === "top" ? n.top - v - y : x - y - n.bottom - v;
-				D = Math.min(_, Math.max(0, Math.floor(e))), O.maxHeight = `${D}px`, O.overflowY = "auto";
+		let j = b, M = x, N = {};
+		if (r) {
+			let e = Math.max(0, T - 2 * w), t = Math.max(0, Math.min(E - 2 * w, k === "top" ? n.top - S - w : k === "bottom" ? E - w - n.bottom - S : E - 2 * w)), r = y.value;
+			(!r || r.width !== e || r.height !== t) && (y.value = {
+				width: e,
+				height: t
+			}), j = Math.min(b, e), M = Math.min(x, t), A = c(k, O, n, j, M, S);
+		} else if (s.constrainMainAxis?.() ?? !1) {
+			if (k === "top" || k === "bottom") {
+				let e = k === "top" ? n.top - S - w : E - w - n.bottom - S;
+				M = Math.min(x, Math.max(0, Math.floor(e))), N.maxHeight = `${M}px`, N.overflowY = "auto";
 			} else {
-				let e = w === "left" ? n.left - v - y : b - y - n.right - v;
-				E = Math.min(i, Math.max(0, Math.floor(e))), O.maxWidth = `${E}px`, O.overflowX = "auto";
+				let e = k === "left" ? n.left - S - w : T - w - n.right - S;
+				j = Math.min(b, Math.max(0, Math.floor(e))), N.maxWidth = `${j}px`, N.overflowX = "auto";
 			}
-			T = c(w, C, n, E, D, v);
+			A = c(k, O, n, j, M, S);
 		}
-		(s.shift?.() ?? !0) && (T.left = Math.max(y, Math.min(T.left, b - E - y)), T.top = Math.max(y, Math.min(T.top, x - D - y)));
-		let k = `${w}-${C}`;
-		h.value = k, g.value = {
-			left: Math.round(T.left),
-			top: Math.round(T.top)
+		(s.shift?.() ?? !0) && (A.left = Math.max(w, Math.min(A.left, T - j - w)), A.top = Math.max(w, Math.min(A.top, E - M - w)));
+		let P = `${k}-${O}`;
+		_.value = P;
+		let F = Math.round(A.left), I = Math.round(A.top);
+		v.value = r && (s.shift?.() ?? !0) ? {
+			left: Math.max(w, Math.min(F, T - j - w)),
+			top: Math.max(w, Math.min(I, E - M - w))
+		} : {
+			left: F,
+			top: I
 		};
-		let A = s.widthMatch?.() ?? "none";
-		if (p.value = {
+		let L = s.widthMatch?.() ?? "none";
+		if (h.value = {
 			position: "fixed",
-			left: `${g.value.left}px`,
-			top: `${g.value.top}px`,
+			left: `${v.value.left}px`,
+			top: `${v.value.top}px`,
 			zIndex: s.zIndex?.() ?? "var(--s-layer-root-floating)",
-			...O,
-			...A === "min" ? { minWidth: `${Math.round(n.width)}px` } : {},
-			...A === "exact" ? { width: `${Math.round(n.width)}px` } : {}
-		}, w === "top" || w === "bottom") {
-			let e = n.left + n.width / 2 - T.left;
-			m.value = { left: `${Math.round(u(e, i))}px` };
+			...N,
+			...L === "min" ? { minWidth: `${Math.round(n.width)}px` } : {},
+			...L === "exact" ? { width: `${Math.round(n.width)}px` } : {}
+		}, k === "top" || k === "bottom") {
+			let e = n.left + n.width / 2 - A.left;
+			g.value = { left: `${Math.round(u(e, b))}px` };
 		} else {
-			let e = n.top + n.height / 2 - T.top;
-			m.value = { top: `${Math.round(u(e, _))}px` };
+			let e = n.top + n.height / 2 - A.top;
+			g.value = { top: `${Math.round(u(e, x))}px` };
 		}
-	}, b = () => {
+	}, E = () => {
 		if (s.active.value) {
 			if (s.scrollStrategy === "close") {
 				s.requestClose?.();
 				return;
 			}
-			y();
+			T();
 		}
-	}, x = () => {
-		if (!(v || typeof window > "u") && (v = !0, window.addEventListener("resize", y, { passive: !0 }), window.addEventListener("scroll", b, {
+	}, D = () => {
+		if (S && !C && s.active.value && !x && typeof window < "u" && (x = !0, window.addEventListener("resize", T, { passive: !0 }), window.addEventListener("scroll", E, {
 			passive: !0,
 			capture: !0
 		}), typeof ResizeObserver < "u")) {
-			_ = new ResizeObserver(y);
+			b = new ResizeObserver(T);
 			let e = s.anchorElement?.() ?? d.value;
-			e && _.observe(e), f.value && _.observe(f.value);
+			e && b.observe(e), f.value && b.observe(f.value);
+			let t = s.viewportSizing?.() ? s.sizingElements?.() : null;
+			t && (t.surface !== f.value && b.observe(t.surface), b.observe(t.content));
 		}
-	}, S = () => {
-		v && typeof window < "u" && (v = !1, window.removeEventListener("resize", y), window.removeEventListener("scroll", b, !0), _?.disconnect(), _ = null);
+	}, O = () => {
+		x && typeof window < "u" && (x = !1, window.removeEventListener("resize", T), window.removeEventListener("scroll", E, !0), b?.disconnect(), b = null);
 	};
 	return i(s.active, async (t) => {
+		let n = ++w;
 		if (!t) {
-			S(), p.value = {}, m.value = {}, g.value = {
+			O(), h.value = {}, g.value = {}, v.value = {
 				left: -1e4,
 				top: -1e4
-			};
+			}, y.value = null;
 			return;
 		}
-		p.value = {
+		h.value = {
 			position: "fixed",
 			left: "-10000px",
 			top: "-10000px",
 			zIndex: s.zIndex?.() ?? "var(--s-layer-root-floating)"
-		}, await e(), x(), y();
+		}, await e(), S && !C && s.active.value && n === w && (D(), T());
 	}, { immediate: !0 }), n(() => {
-		s.active.value && (x(), y());
-	}), t(S), {
+		S = !0, s.active.value && (D(), T());
+	}), t(() => {
+		C = !0, S = !1, w += 1, O();
+	}), {
 		anchorRef: d,
 		panelRef: f,
-		floatingStyle: p,
-		arrowStyle: m,
-		resolvedPlacement: h,
-		coordinates: g,
-		updatePosition: y
+		floatingStyle: h,
+		arrowStyle: g,
+		resolvedPlacement: _,
+		coordinates: v,
+		availableSize: y,
+		updatePosition: T
 	};
 }
 //#endregion
-export { d as useFloatingPosition };
+export { h as useFloatingPosition };

package/dist/src/internal/fieldSurface.d.ts

@@ -10,6 +10,8 @@ export interface FieldSurfaceContract {
     invalid: boolean;
     disabled: boolean;
     readonly: boolean;
+    /** A field surface enclosing its native editor and in-flow supporting content. */
+    composite?: boolean;
 }
 export interface FieldSurfaceBindings {
     'data-s-field-surface': FieldSurfaceKind;
@@ -17,6 +19,7 @@ export interface FieldSurfaceBindings {
     'data-s-field-invalid'?: 'true';
     'data-s-field-disabled'?: 'true';
     'data-s-field-readonly'?: 'true';
+    'data-s-field-composite'?: 'true';
 }
 /**
  * Создаёт exact DOM bindings единого field-surface foundation без truthy coercion.