@vef-framework/starter 2.0.11 → 2.1.0

package/dist/es/components/page/components/aside-panel.js

@@ -0,0 +1,49 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import { useResize as e } from "../hooks/use-resize.js";
+import { asideContent as t } from "../styles.js";
+import { ResizeHandle as n } from "./resize-handle.js";
+import { jsx as r, jsxs as i } from "@emotion/react/jsx-runtime";
+import { getSpacingValue as a } from "@vef-framework/components";
+import { isPlainObject as o } from "@vef-framework/shared";
+//#region src/components/page/components/aside-panel.tsx
+var s = 280;
+function c(e) {
+	return o(e);
+}
+function l(e) {
+	if (!e) return s;
+	if (c(e)) {
+		let t = e.defaultWidth;
+		return typeof t == "number" ? t : s;
+	}
+	return typeof e == "number" ? e : s;
+}
+function u(e) {
+	return typeof e == "number" ? e : void 0;
+}
+function d({ children: o, className: d, containerStyle: f, position: p, width: m }) {
+	let h = c(m), g = l(m), { width: _, isDragging: v, handleMouseDown: y } = e({
+		defaultWidth: g,
+		minWidth: h ? u(m.minWidth) : void 0,
+		maxWidth: h ? u(m.maxWidth) : void 0,
+		isLeftPanel: p === "left"
+	});
+	return /* @__PURE__ */ i("div", {
+		className: d,
+		css: f,
+		style: {
+			width: h ? `${h ? _ : g}px` : a(m ?? s),
+			position: "relative"
+		},
+		children: [/* @__PURE__ */ r("div", {
+			css: t,
+			children: o
+		}), h && /* @__PURE__ */ r(n, {
+			isDragging: v,
+			position: p,
+			onMouseDown: y
+		})]
+	});
+}
+//#endregion
+export { d as AsidePanel };

package/dist/es/components/page/components/index.js

@@ -0,0 +1,4 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import "./resize-handle.js";
+import "./aside-panel.js";
+import "./scroll-content.js";

package/dist/es/components/page/components/resize-handle.js

@@ -0,0 +1,18 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import { resizeHandleGrip as e, resizeHandleLeft as t, resizeHandleRight as n } from "../styles.js";
+import { jsx as r } from "@emotion/react/jsx-runtime";
+import "react";
+//#region src/components/page/components/resize-handle.tsx
+function i({ isDragging: i, position: a, onMouseDown: o }) {
+	return /* @__PURE__ */ r("div", {
+		css: [
+			e,
+			a === "left" ? t : n,
+			process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInJlc2l6ZS1oYW5kbGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVCTSIsImZpbGUiOiJyZXNpemUtaGFuZGxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgTW91c2VFdmVudCB9IGZyb20gXCJyZWFjdFwiO1xuXG5pbXBvcnQgUmVhY3QgZnJvbSBcInJlYWN0XCI7XG5cbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tIFwiLi4vc3R5bGVzXCI7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmVzaXplSGFuZGxlUHJvcHMge1xuICBpc0RyYWdnaW5nOiBib29sZWFuO1xuICBwb3NpdGlvbjogXCJsZWZ0XCIgfCBcInJpZ2h0XCI7XG4gIG9uTW91c2VEb3duOiAoZXZlbnQ6IE1vdXNlRXZlbnQpID0+IHZvaWQ7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBSZXNpemVIYW5kbGUoe1xuICBpc0RyYWdnaW5nLFxuICBwb3NpdGlvbixcbiAgb25Nb3VzZURvd25cbn06IFJlc2l6ZUhhbmRsZVByb3BzKTogUmVhY3QuSlNYLkVsZW1lbnQge1xuICBjb25zdCBwb3NpdGlvblN0eWxlID0gcG9zaXRpb24gPT09IFwibGVmdFwiXG4gICAgPyBzdHlsZXMucmVzaXplSGFuZGxlTGVmdFxuICAgIDogc3R5bGVzLnJlc2l6ZUhhbmRsZVJpZ2h0O1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtbc3R5bGVzLnJlc2l6ZUhhbmRsZUdyaXAsIHBvc2l0aW9uU3R5bGVdfVxuICAgICAgZGF0YS1kcmFnZ2luZz17aXNEcmFnZ2luZ31cbiAgICAgIG9uTW91c2VEb3duPXtvbk1vdXNlRG93bn1cbiAgICAvPlxuICApO1xufVxuIl19 */"
+		],
+		"data-dragging": i,
+		onMouseDown: o
+	});
+}
+//#endregion
+export { i as ResizeHandle };

package/dist/es/components/page/components/scroll-content.js

@@ -0,0 +1,55 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import { actionBar as e, content as t, scrollContainer as n, scrollWrapper as r } from "../styles.js";
+import { ViewportProvider as i } from "../viewport-context.js";
+import { Fragment as a, jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
+import { ScrollArea as c } from "@vef-framework/components";
+import { AnimatePresence as l, motion as u } from "@vef-framework/core";
+import { ClassNames as d } from "@emotion/react";
+import { useElementSize as f } from "@vef-framework/hooks";
+//#region src/components/page/components/scroll-content.tsx
+var p = {
+	initial: {
+		opacity: 0,
+		y: 60
+	},
+	animate: {
+		opacity: 1,
+		y: 0,
+		transition: { ease: "easeOut" }
+	},
+	exit: {
+		opacity: 0,
+		y: 60,
+		transition: { ease: "easeIn" }
+	}
+}, m = { duration: .3 };
+function h({ className: h, actionBar: g, actionBarClassName: _, children: v }) {
+	let { ref: y, height: b } = f({ box: "border-box" }), { ref: x, height: S } = f({ box: "border-box" }), C = { "--vef-page-action-bar-height": `${b}px` };
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(d, { children: ({ css: e }) => /* @__PURE__ */ o(c, {
+		className: h,
+		css: [
+			t,
+			r,
+			process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNjcm9sbC1jb250ZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRVkiLCJmaWxlIjoic2Nyb2xsLWNvbnRlbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBUcmFuc2l0aW9uLCBWYXJpYW50cyB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb3JlXCI7XG5pbXBvcnQgdHlwZSB7IENTU1Byb3BlcnRpZXMsIFByb3BzV2l0aENoaWxkcmVuLCBSZWFjdE5vZGUgfSBmcm9tIFwicmVhY3RcIjtcblxuaW1wb3J0IHsgQ2xhc3NOYW1lcyB9IGZyb20gXCJAZW1vdGlvbi9yZWFjdFwiO1xuaW1wb3J0IHsgU2Nyb2xsQXJlYSB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBBbmltYXRlUHJlc2VuY2UsIG1vdGlvbiB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb3JlXCI7XG5pbXBvcnQgeyB1c2VFbGVtZW50U2l6ZSB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9ob29rc1wiO1xuXG5pbXBvcnQgKiBhcyBzdHlsZXMgZnJvbSBcIi4uL3N0eWxlc1wiO1xuaW1wb3J0IHsgVmlld3BvcnRQcm92aWRlciB9IGZyb20gXCIuLi92aWV3cG9ydC1jb250ZXh0XCI7XG5cbmludGVyZmFjZSBTY3JvbGxDb250ZW50UHJvcHMgZXh0ZW5kcyBQcm9wc1dpdGhDaGlsZHJlbiB7XG4gIGNsYXNzTmFtZT86IHN0cmluZztcbiAgYWN0aW9uQmFyPzogUmVhY3ROb2RlO1xuICBhY3Rpb25CYXJDbGFzc05hbWU/OiBzdHJpbmc7XG59XG5cbmNvbnN0IGFjdGlvbkJhclZhcmlhbnRzOiBWYXJpYW50cyA9IHtcbiAgaW5pdGlhbDoge1xuICAgIG9wYWNpdHk6IDAsXG4gICAgeTogNjBcbiAgfSxcbiAgYW5pbWF0ZToge1xuICAgIG9wYWNpdHk6IDEsXG4gICAgeTogMCxcbiAgICB0cmFuc2l0aW9uOiB7XG4gICAgICBlYXNlOiBcImVhc2VPdXRcIlxuICAgIH1cbiAgfSxcbiAgZXhpdDoge1xuICAgIG9wYWNpdHk6IDAsXG4gICAgeTogNjAsXG4gICAgdHJhbnNpdGlvbjoge1xuICAgICAgZWFzZTogXCJlYXNlSW5cIlxuICAgIH1cbiAgfVxufTtcblxuY29uc3QgYWN0aW9uQmFyVHJhbnNpdGlvbjogVHJhbnNpdGlvbiA9IHtcbiAgZHVyYXRpb246IDAuM1xufTtcblxuZXhwb3J0IGZ1bmN0aW9uIFNjcm9sbENvbnRlbnQoe1xuICBjbGFzc05hbWUsXG4gIGFjdGlvbkJhcixcbiAgYWN0aW9uQmFyQ2xhc3NOYW1lLFxuICBjaGlsZHJlblxufTogU2Nyb2xsQ29udGVudFByb3BzKTogUmVhY3QuSlNYLkVsZW1lbnQge1xuICBjb25zdCB7IHJlZjogYWN0aW9uQmFyUmVmLCBoZWlnaHQ6IGFjdGlvbkJhckhlaWdodCB9ID0gdXNlRWxlbWVudFNpemUoe1xuICAgIGJveDogXCJib3JkZXItYm94XCJcbiAgfSk7XG4gIGNvbnN0IHsgcmVmOiB2aWV3cG9ydFJlZiwgaGVpZ2h0OiB2aWV3cG9ydEhlaWdodCB9ID0gdXNlRWxlbWVudFNpemUoe1xuICAgIGJveDogXCJib3JkZXItYm94XCJcbiAgfSk7XG5cbiAgY29uc3Qgdmlld3BvcnRTdHlsZSA9IHtcbiAgICBcIi0tdmVmLXBhZ2UtYWN0aW9uLWJhci1oZWlnaHRcIjogYCR7YWN0aW9uQmFySGVpZ2h0fXB4YFxuICB9IGFzIENTU1Byb3BlcnRpZXM7XG5cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPENsYXNzTmFtZXM+XG4gICAgICAgIHsoeyBjc3MgfSkgPT4gKFxuICAgICAgICAgIDxTY3JvbGxBcmVhXG4gICAgICAgICAgICBjbGFzc05hbWU9e2NsYXNzTmFtZX1cbiAgICAgICAgICAgIGNzcz17W3N0eWxlcy5jb250ZW50LCBzdHlsZXMuc2Nyb2xsV3JhcHBlcl19XG4gICAgICAgICAgICB2aWV3cG9ydENsYXNzTmFtZT17Y3NzKHN0eWxlcy5zY3JvbGxDb250YWluZXIpfVxuICAgICAgICAgICAgdmlld3BvcnRSZWY9e3ZpZXdwb3J0UmVmfVxuICAgICAgICAgICAgdmlld3BvcnRTdHlsZT17dmlld3BvcnRTdHlsZX1cbiAgICAgICAgICA+XG4gICAgICAgICAgICA8Vmlld3BvcnRQcm92aWRlciB2YWx1ZT17dmlld3BvcnRIZWlnaHR9PlxuICAgICAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgICAgICA8L1ZpZXdwb3J0UHJvdmlkZXI+XG4gICAgICAgICAgPC9TY3JvbGxBcmVhPlxuICAgICAgICApfVxuICAgICAgPC9DbGFzc05hbWVzPlxuXG4gICAgICA8QW5pbWF0ZVByZXNlbmNlPlxuICAgICAgICB7YWN0aW9uQmFyICYmIChcbiAgICAgICAgICA8bW90aW9uLmRpdlxuICAgICAgICAgICAgcmVmPXthY3Rpb25CYXJSZWZ9XG4gICAgICAgICAgICBhbmltYXRlPVwiYW5pbWF0ZVwiXG4gICAgICAgICAgICBjbGFzc05hbWU9e2FjdGlvbkJhckNsYXNzTmFtZX1cbiAgICAgICAgICAgIGNzcz17c3R5bGVzLmFjdGlvbkJhcn1cbiAgICAgICAgICAgIGV4aXQ9XCJleGl0XCJcbiAgICAgICAgICAgIGluaXRpYWw9XCJpbml0aWFsXCJcbiAgICAgICAgICAgIHRyYW5zaXRpb249e2FjdGlvbkJhclRyYW5zaXRpb259XG4gICAgICAgICAgICB2YXJpYW50cz17YWN0aW9uQmFyVmFyaWFudHN9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2FjdGlvbkJhcn1cbiAgICAgICAgICA8L21vdGlvbi5kaXY+XG4gICAgICAgICl9XG4gICAgICA8L0FuaW1hdGVQcmVzZW5jZT5cbiAgICA8Lz5cbiAgKTtcbn1cbiJdfQ== */"
+		],
+		viewportClassName: e(n),
+		viewportRef: x,
+		viewportStyle: C,
+		children: /* @__PURE__ */ o(i, {
+			value: S,
+			children: v
+		})
+	}) }), /* @__PURE__ */ o(l, { children: g && /* @__PURE__ */ o(u.div, {
+		ref: y,
+		animate: "animate",
+		className: _,
+		css: e,
+		exit: "exit",
+		initial: "initial",
+		transition: m,
+		variants: p,
+		children: g
+	}) })] });
+}
+//#endregion
+export { h as ScrollContent };

package/dist/es/components/page/hooks/index.js

@@ -0,0 +1,3 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import "./use-page-key.js";
+import "./use-resize.js";

package/dist/es/components/page/hooks/use-page-key.js

@@ -0,0 +1,14 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import { RELOAD_PAGE_EVENT as e } from "../../../constants/event.js";
+import { eventEmitter as t } from "../../../helpers/event.js";
+import { useCallback as n, useState as r } from "react";
+import { useEmitterEvent as i } from "@vef-framework/hooks";
+//#region src/components/page/hooks/use-page-key.ts
+function a() {
+	let [a, o] = r(1);
+	return i(t, e, n(() => {
+		o((e) => e + 1);
+	}, [])), a;
+}
+//#endregion
+export { a as usePageKey };

package/dist/es/components/page/hooks/use-resize.js

@@ -0,0 +1,32 @@
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import { useCallback as e, useState as t } from "react";
+//#region src/components/page/hooks/use-resize.ts
+function n(e, t, n) {
+	return t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e;
+}
+function r(r) {
+	let { defaultWidth: i, minWidth: a, maxWidth: o, isLeftPanel: s = !0 } = r, [c, l] = t(i), [u, d] = t(!1);
+	return {
+		width: c,
+		isDragging: u,
+		handleMouseDown: e((e) => {
+			e.preventDefault();
+			let t = e.clientX, r = c;
+			d(!0);
+			let i = (e) => {
+				let i = e.clientX - t;
+				l(n(s ? r + i : r - i, a, o));
+			}, u = () => {
+				d(!1), document.removeEventListener("mousemove", i), document.removeEventListener("mouseup", u);
+			};
+			document.addEventListener("mousemove", i), document.addEventListener("mouseup", u);
+		}, [
+			c,
+			a,
+			o,
+			s
+		])
+	};
+}
+//#endregion
+export { r as useResize };

package/dist/es/components/page/index.js

@@ -1,51 +1,126 @@
-import { jsx as I, jsxs as l } from "@emotion/react/jsx-runtime";
-import { getSpacingValue as a } from "@vef-framework/components";
-import { motion as e } from "@vef-framework/core";
-import { ScrollContent as x } from "./scroll-content.js";
-import { content as Y, defaultContent as n, aside as V, header as s, footer as F, main as y, page as B } from "./styles.js";
-import { usePageKey as p } from "./use-page-key.js";
-import "./props.js";
-import { useViewportHeight as J } from "./viewport-context.js";
-const N = {
-  initial: {
-    scale: 0.96,
-    opacity: 0
-  },
-  animate: {
-    scale: 1,
-    opacity: 1
-  }
-}, h = {
-  duration: 0.6,
-  ease: [0.25, 0.1, 0.25, 1]
+/*! @vef-framework/starter v2.1.0 made by Venus | 2026-03-27T07:13:09.494Z */
+import { usePageKey as e } from "./hooks/use-page-key.js";
+import { content as t, footer as n, footerOutside as r, header as i, headerOutside as a, leftAside as o, main as s, page as c, rightAside as l } from "./styles.js";
+import { AsidePanel as u } from "./components/aside-panel.js";
+import "./viewport-context.js";
+import { ScrollContent as d } from "./components/scroll-content.js";
+import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+import { getSpacingValue as m, globalCssVars as h } from "@vef-framework/components";
+import { motion as g } from "@vef-framework/core";
+import { useMemo as _ } from "react";
+//#region src/components/page/index.tsx
+var v = {
+	initial: {
+		scale: .96,
+		opacity: 0
+	},
+	animate: {
+		scale: 1,
+		opacity: 1
+	}
+}, y = {
+	duration: .6,
+	ease: [
+		.25,
+		.1,
+		.25,
+		1
+	]
 };
-function f({
-  className: g,
-  aside: C,
-  asideClassName: i,
-  asideWidth: X = 280,
-  header: A,
-  headerClassName: G,
-  footer: c,
-  footerClassName: Z,
-  actionBar: t,
-  actionBarClassName: W,
-  scrollable: u,
-  children: b
-}) {
-  const d = p(), m = u ? /* @__PURE__ */ I(x, { actionBar: t, actionBarClassName: W, className: g, children: b }) : /* @__PURE__ */ I("div", { className: g, css: [Y, n, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy92ZW51cy9WRUYvdmVmLWZyYW1ld29yay1yZWFjdC9wYWNrYWdlcy9zdGFydGVyL3NyYy9jb21wb25lbnRzL3BhZ2UvaW5kZXgudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXVEVSIsImZpbGUiOiIvVXNlcnMvdmVudXMvVkVGL3ZlZi1mcmFtZXdvcmstcmVhY3QvcGFja2FnZXMvc3RhcnRlci9zcmMvY29tcG9uZW50cy9wYWdlL2luZGV4LnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB0eXBlIHsgVHJhbnNpdGlvbiwgVmFyaWFudHMgfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvY29yZVwiO1xuXG5pbXBvcnQgdHlwZSB7IFBhZ2VQcm9wcyB9IGZyb20gXCIuL3Byb3BzXCI7XG5cbmltcG9ydCB7IGdldFNwYWNpbmdWYWx1ZSB9IGZyb20gXCJAdmVmLWZyYW1ld29yay9jb21wb25lbnRzXCI7XG5pbXBvcnQgeyBtb3Rpb24gfSBmcm9tIFwiQHZlZi1mcmFtZXdvcmsvY29yZVwiO1xuXG5pbXBvcnQgeyBTY3JvbGxDb250ZW50IH0gZnJvbSBcIi4vc2Nyb2xsLWNvbnRlbnRcIjtcbmltcG9ydCAqIGFzIHN0eWxlcyBmcm9tIFwiLi9zdHlsZXNcIjtcbmltcG9ydCB7IHVzZVBhZ2VLZXkgfSBmcm9tIFwiLi91c2UtcGFnZS1rZXlcIjtcblxuY29uc3QgcGFnZVZhcmlhbnRzOiBWYXJpYW50cyA9IHtcbiAgaW5pdGlhbDoge1xuICAgIHNjYWxlOiAwLjk2LFxuICAgIG9wYWNpdHk6IDBcbiAgfSxcbiAgYW5pbWF0ZToge1xuICAgIHNjYWxlOiAxLFxuICAgIG9wYWNpdHk6IDFcbiAgfVxufTtcbmNvbnN0IHBhZ2VUcmFuc2l0aW9uOiBUcmFuc2l0aW9uID0ge1xuICBkdXJhdGlvbjogMC42LFxuICBlYXNlOiBbMC4yNSwgMC4xLCAwLjI1LCAxXVxufTtcblxuZXhwb3J0IGZ1bmN0aW9uIFBhZ2Uoe1xuICBjbGFzc05hbWUsXG4gIGFzaWRlLFxuICBhc2lkZUNsYXNzTmFtZSxcbiAgYXNpZGVXaWR0aCA9IDI4MCxcbiAgaGVhZGVyLFxuICBoZWFkZXJDbGFzc05hbWUsXG4gIGZvb3RlcixcbiAgZm9vdGVyQ2xhc3NOYW1lLFxuICBhY3Rpb25CYXIsXG4gIGFjdGlvbkJhckNsYXNzTmFtZSxcbiAgc2Nyb2xsYWJsZSxcbiAgY2hpbGRyZW5cbn06IFBhZ2VQcm9wcykge1xuICBjb25zdCBwYWdlS2V5ID0gdXNlUGFnZUtleSgpO1xuXG4gIGNvbnN0IGNvbnRlbnQgPSBzY3JvbGxhYmxlXG4gICAgPyAoXG4gICAgICAgIDxTY3JvbGxDb250ZW50XG4gICAgICAgICAgYWN0aW9uQmFyPXthY3Rpb25CYXJ9XG4gICAgICAgICAgYWN0aW9uQmFyQ2xhc3NOYW1lPXthY3Rpb25CYXJDbGFzc05hbWV9XG4gICAgICAgICAgY2xhc3NOYW1lPXtjbGFzc05hbWV9XG4gICAgICAgID5cbiAgICAgICAgICB7Y2hpbGRyZW59XG4gICAgICAgIDwvU2Nyb2xsQ29udGVudD5cbiAgICAgIClcbiAgICA6IChcbiAgICAgICAgPGRpdlxuICAgICAgICAgIGNsYXNzTmFtZT17Y2xhc3NOYW1lfVxuICAgICAgICAgIGNzcz17W3N0eWxlcy5jb250ZW50LCBzdHlsZXMuZGVmYXVsdENvbnRlbnRdfVxuICAgICAgICA+XG4gICAgICAgICAge2NoaWxkcmVufVxuICAgICAgICA8L2Rpdj5cbiAgICAgICk7XG5cbiAgcmV0dXJuIChcbiAgICA8bW90aW9uLmRpdlxuICAgICAga2V5PXtwYWdlS2V5fVxuICAgICAgYW5pbWF0ZT1cImFuaW1hdGVcIlxuICAgICAgY3NzPXtzdHlsZXMucGFnZX1cbiAgICAgIGluaXRpYWw9XCJpbml0aWFsXCJcbiAgICAgIHRyYW5zaXRpb249e3BhZ2VUcmFuc2l0aW9ufVxuICAgICAgdmFyaWFudHM9e3BhZ2VWYXJpYW50c31cbiAgICA+XG4gICAgICB7XG4gICAgICAgIGFzaWRlICYmIChcbiAgICAgICAgICA8ZGl2XG4gICAgICAgICAgICBjbGFzc05hbWU9e2FzaWRlQ2xhc3NOYW1lfVxuICAgICAgICAgICAgY3NzPXtzdHlsZXMuYXNpZGV9XG4gICAgICAgICAgICBzdHlsZT17eyB3aWR0aDogZ2V0U3BhY2luZ1ZhbHVlKGFzaWRlV2lkdGgpIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2FzaWRlfVxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICApXG4gICAgICB9XG5cbiAgICAgIDxkaXYgY3NzPXtzdHlsZXMubWFpbn0+XG4gICAgICAgIHtcbiAgICAgICAgICBoZWFkZXIgJiYgKFxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2hlYWRlckNsYXNzTmFtZX0gY3NzPXtzdHlsZXMuaGVhZGVyfT5cbiAgICAgICAgICAgICAge2hlYWRlcn1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIClcbiAgICAgICAgfVxuXG4gICAgICAgIHtjb250ZW50fVxuXG4gICAgICAgIHtcbiAgICAgICAgICBmb290ZXIgJiYgKFxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2Zvb3RlckNsYXNzTmFtZX0gY3NzPXtzdHlsZXMuZm9vdGVyfT5cbiAgICAgICAgICAgICAge2Zvb3Rlcn1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIClcbiAgICAgICAgfVxuICAgICAgPC9kaXY+XG4gICAgPC9tb3Rpb24uZGl2PlxuICApO1xufVxuXG5leHBvcnQgeyB0eXBlIFBhZ2VQcm9wcyB9IGZyb20gXCIuL3Byb3BzXCI7XG5leHBvcnQgeyB1c2VWaWV3cG9ydEhlaWdodCB9IGZyb20gXCIuL3ZpZXdwb3J0LWNvbnRleHRcIjtcbiJdfQ== */"], children: b });
-  return /* @__PURE__ */ l(e.div, { animate: "animate", css: B, initial: "initial", transition: h, variants: N, children: [
-    C && /* @__PURE__ */ I("div", { className: i, css: V, style: {
-      width: a(X)
-    }, children: C }),
-    /* @__PURE__ */ l("div", { css: y, children: [
-      A && /* @__PURE__ */ I("div", { className: G, css: s, children: A }),
-      m,
-      c && /* @__PURE__ */ I("div", { className: Z, css: F, children: c })
-    ] })
-  ] }, d);
+function b(e) {
+	let { hasLeft: t, hasRight: n, isHeaderOutside: r, isFooterOutside: i } = e, a = [];
+	t && a.push("left"), a.push("main"), n && a.push("right");
+	let o = [];
+	t && o.push("auto"), o.push("1fr"), n && o.push("auto");
+	let s = [], c = [];
+	return r && (s.push("auto"), c.push(`"${a.map(() => "header").join(" ")}"`)), s.push("1fr"), c.push(`"${a.join(" ")}"`), i && (s.push("auto"), c.push(`"${a.map(() => "footer").join(" ")}"`)), {
+		"--vef-page-grid-columns": o.join(" "),
+		"--vef-page-grid-rows": s.join(" "),
+		"--vef-page-grid-areas": c.join(" ")
+	};
 }
-export {
-  f as Page,
-  J as useViewportHeight
-};
+function x({ className: x, mainClassName: S, leftAside: C, leftAsideClassName: w, leftAsideWidth: T, rightAside: E, rightAsideClassName: D, rightAsideWidth: O, header: k, headerClassName: A, headerPosition: j = "inside", footer: M, footerClassName: N, footerPosition: P = "inside", actionBar: F, actionBarClassName: I, scrollable: L, scrollMargin: R = !1, margin: z, gap: B = h.spacingSm, children: V }) {
+	let H = e(), U = !!(k && j === "outside"), W = !!(M && P === "outside"), G = _(() => ({
+		...b({
+			hasLeft: !!C,
+			hasRight: !!E,
+			isHeaderOutside: U,
+			isFooterOutside: W
+		}),
+		"--vef-page-grid-gap": m(B),
+		"--vef-page-margin": z ? h.spacingSm : "0px",
+		"--vef-page-scroll-margin": R ? h.spacingSm : "0px",
+		"--vef-page-scroll-wrapper-margin": R ? `calc(${h.spacingXxs} / 2)` : "0px",
+		"--vef-page-scroll-container-margin": R ? `calc(${h.spacingXs} + ${h.spacingXxs} / 2)` : "0px"
+	}), [
+		C,
+		E,
+		U,
+		W,
+		B,
+		z,
+		R
+	]), K = L ? /* @__PURE__ */ f(d, {
+		actionBar: F,
+		actionBarClassName: I,
+		className: S,
+		children: V
+	}) : /* @__PURE__ */ f("div", {
+		className: S,
+		css: t,
+		children: V
+	});
+	return /* @__PURE__ */ p(g.div, {
+		animate: "animate",
+		className: x,
+		css: c,
+		initial: "initial",
+		style: G,
+		transition: y,
+		variants: v,
+		children: [
+			U && /* @__PURE__ */ f("div", {
+				className: A,
+				css: a,
+				children: k
+			}),
+			C && /* @__PURE__ */ f(u, {
+				className: w,
+				containerStyle: o,
+				position: "left",
+				width: T,
+				children: C
+			}),
+			/* @__PURE__ */ p("div", {
+				css: s,
+				children: [
+					k && j === "inside" && /* @__PURE__ */ f("div", {
+						className: A,
+						css: i,
+						children: k
+					}),
+					K,
+					M && P === "inside" && /* @__PURE__ */ f("div", {
+						className: N,
+						css: n,
+						children: M
+					})
+				]
+			}),
+			E && /* @__PURE__ */ f(u, {
+				className: D,
+				containerStyle: l,
+				position: "right",
+				width: O,
+				children: E
+			}),
+			W && /* @__PURE__ */ f("div", {
+				className: N,
+				css: r,
+				children: M
+			})
+		]
+	}, H);
+}
+//#endregion
+export { x as Page };