@synopackageland/ui 0.25.21 → 0.25.22

package/dist/modules/components/app/app-layout/AppLayout.vue.js

@@ -0,0 +1,781 @@
+import { defineComponent as Nt, useModel as Fa, getCurrentInstance as Ht, useSlots as Ft, useTemplateRef as w, ref as u, provide as y, inject as Ka, computed as t, onBeforeUnmount as O, useId as Kt, onMounted as he, watch as v, onBeforeUpdate as Yt, nextTick as Z, openBlock as l, createElementBlock as s, unref as i, normalizeStyle as Ya, normalizeClass as Ua, createBlock as J, withCtx as K, createVNode as g, createTextVNode as Ut, toDisplayString as Y, createElementVNode as T, renderSlot as _, createCommentVNode as d, resolveDynamicComponent as qa, Fragment as qt, mergeModels as Va } from "vue";
+import { X as Vt, PanelLeftOpen as Xt, PanelLeftClose as Gt, Menu as jt, Ellipsis as Qt } from "@lucide/vue";
+import { DrawerRoot_default as Zt } from "../../../vendor/reka-ui/dist/Drawer/DrawerRoot.js";
+import { DrawerContent_default as Jt } from "../../../vendor/reka-ui/dist/Drawer/DrawerContent.js";
+import { DrawerOverlay_default as eo } from "../../../vendor/reka-ui/dist/Drawer/DrawerOverlay.js";
+import { DrawerPortal_default as ao } from "../../../vendor/reka-ui/dist/Drawer/DrawerPortal.js";
+import { DrawerTitle_default as to } from "../../../vendor/reka-ui/dist/Drawer/DrawerTitle.js";
+import { DrawerViewport_default as oo } from "../../../vendor/reka-ui/dist/Drawer/DrawerViewport.js";
+import { useUiText as io } from "../../../i18n/text.js";
+import la from "./AppBrand.vue.js";
+import no from "./BackArrowIcon.vue.js";
+import lo from "./ShellBackButton.vue.js";
+import { createShellBackHost as ro, APP_SHELL_BACK_KEY as uo } from "./shellBack.js";
+import { canCloseToShell as so } from "../../../lib/nativeShell.js";
+import { createPageTitleHost as vo, APP_PAGE_TITLE_KEY as co } from "./pageTitle.js";
+import { useIconActionTitles as fo } from "./iconActionTitles.js";
+import po from "./PhoneFab.vue.js";
+import { APP_KEEP_BARS_KEY as mo, useHideOnScroll as bo } from "./hideOnScroll.js";
+import { velocityDuration as ho } from "../../../interaction/velocity.js";
+import { useMediaQuery as yo } from "../../../vendor/@vueuse/core/dist/index.js";
+import { useSoftKeyboard as go } from "../../../composables/softKeyboard.js";
+import _o from "../../primitives/dropdown-menu/DropdownMenu.vue.js";
+import Ao from "../../primitives/dialog/FloatingLayer.vue.js";
+import { injectFloatingHost as wo } from "../../../composables/floatingHost.js";
+import { useBackDismiss as Xa } from "../../../composables/backDismiss.js";
+import { useOpenerFocus as ko } from "../../../composables/openerFocus.js";
+import { lastInputWasKeyboard as Eo } from "../../../composables/inputModality.js";
+import { useElementWidth as ra } from "../../../composables/elementWidth.js";
+import { useSidebarPreference as So, clampSidebarWidth as Ga } from "../../../composables/sidebarPreference.js";
+import { useSwapMotion as To, motionMs as ja } from "../../../lib/motion.js";
+import { useLayoutMotion as Bo } from "../../../virtual/layoutMotion.js";
+import { APP_LAYOUT_MEASURED_KEY as Qa, appPresentationForWidth as Po, APP_PRESENTATION_KEY as Mo, APP_ROOT_WIDE_LAYOUT_KEY as xo, SHORT_VIEWPORT_QUERY as Ro, APP_SHORT_KEY as Co, APP_TOP_NAVIGATION_KEY as Oo, webSidebarStartsAsRail as Wo, APP_SIDEBAR_COLLAPSED_KEY as Lo, APP_PAGE_CHANGE_KEY as $o, WEB_RAIL_WIDTH as ua, WEB_ASIDE_MAX as Pe, WEB_ASIDE_MIN as Me, WEB_LAYOUT_MIN as Io, ASIDE_MAIN_MIN as Do, APP_ASIDE_KEY as zo, APP_SIDE_MOTION_KEY as No, APP_BAR_MENU_KEY as Ho, APP_NAVIGATION_DRAWER_KEY as Fo, WEB_SIDEBAR_MAX as Za, WEB_SIDEBAR_MIN as Ja, WEB_ASIDE_DEFAULT as Ko } from "../../../lib/adaptiveLayout.js";
+const Yo = ["data-ui-layout-mode", "data-ui-navigation", "data-ui-layout-height", "data-ui-layout-short", "data-ui-layout-scroll", "data-ui-mobile-open", "data-ui-motion-ready", "data-ui-sidebar-collapsed", "data-ui-sidebar-resizing", "data-ui-aside", "data-ui-aside-overlay", "data-ui-aside-resizing", "data-ui-side-moving", "data-ui-phone", "data-ui-bars-hidden", "data-ui-bars-overlay", "data-ui-fab"], Uo = { "data-ui-mobile-sidebar-header": "" }, qo = {
+  key: 0,
+  "data-ui-sidebar-brand": ""
+}, Vo = { key: 1 }, Xo = ["aria-label"], Go = { "data-ui-sidebar-body": "" }, jo = {
+  key: 0,
+  "data-ui-sidebar-footer": ""
+}, Qo = ["id"], Zo = {
+  key: 0,
+  "data-ui-sidebar-brand": ""
+}, Jo = ["aria-label", "title", "aria-expanded", "aria-controls"], ei = { "data-ui-sidebar-body": "" }, ai = {
+  key: 1,
+  "data-ui-sidebar-footer": ""
+}, ti = ["aria-label", "aria-controls", "aria-valuemin", "aria-valuemax", "aria-valuenow"], oi = ["inert", "aria-hidden"], ii = ["data-ui-mobile-title-align", "data-ui-mobile-bar-title", "hidden"], ni = ["aria-label"], li = ["aria-label", "aria-expanded", "aria-controls"], ri = ["src"], ui = {
+  key: 0,
+  "data-ui-mobile-title-hidden": "",
+  class: "sr-only"
+}, si = ["aria-hidden", "title"], di = {
+  key: 6,
+  "data-ui-sidebar-brand": ""
+}, vi = {
+  key: 7,
+  "data-ui-mobile-title": ""
+}, ci = { "data-ui-mobile-actions": "" }, fi = ["disabled", "aria-label", "title"], pi = {
+  key: 1,
+  "data-ui-mobile-action-label": ""
+}, mi = ["aria-label"], bi = ["data-ui-layout-bar-short"], hi = ["aria-hidden", "title"], yi = ["data-ui-bars-room"], gi = ["data-hidden"], _i = ["data-ui-aside-state"], Ai = ["aria-label", "aria-valuemin", "aria-valuemax", "aria-valuenow"], wi = 80, ki = 2, xe = 16, tn = /* @__PURE__ */ Nt({
+  __name: "AppLayout",
+  props: /* @__PURE__ */ Va({
+    sidebarWidth: { default: void 0 },
+    minHeight: { default: "520px" },
+    responsive: { type: Boolean, default: !0 },
+    wideLayout: { default: "window" },
+    sidebarStorageKey: { default: void 0 },
+    brandName: { default: void 0 },
+    brandIcon: { default: void 0 },
+    height: { default: "auto" },
+    navigation: { default: "sidebar" },
+    title: { default: void 0 },
+    phoneBarTitle: { default: "auto" },
+    back: { type: Boolean, default: !1 },
+    headerActions: { default: () => [] },
+    phoneActions: { default: "fab" },
+    hideOnScroll: { type: Boolean, default: !0 },
+    asideDock: { default: "web" }
+  }, {
+    aside: { default: "collapsed" },
+    asideModifiers: {},
+    asideWidth: { default: Ko },
+    asideWidthModifiers: {}
+  }),
+  emits: /* @__PURE__ */ Va(["brand", "back", "headerAction"], ["update:aside", "update:asideWidth"]),
+  setup(Re, { emit: et }) {
+    const o = Re, ee = et, B = Fa(Re, "aside"), Ce = Fa(Re, "asideWidth"), sa = Ht();
+    function Oe() {
+      return !!(sa?.vnode.props?.onBrand || sa?.vnode.props?.onBrandOnce);
+    }
+    function We(e) {
+      j(), ee("brand", e);
+    }
+    const k = Ft(), p = io(), P = w("root"), W = w("column"), da = w("closeButton"), va = w("menuTrigger"), ca = u(!1);
+    y(Qa, ca);
+    const L = ra(P, { after: Ka(Qa, void 0), onMeasured: () => {
+      ca.value = !0;
+    } }), U = t(() => o.responsive === !1 ? "window" : Po(L.value, o.wideLayout));
+    y(Mo, U);
+    const fa = Ka(xo, null);
+    fa && O(fa(t(() => o.responsive === !1 ? "window" : o.wideLayout)));
+    const r = t(() => U.value === "mobile"), Le = u(!1);
+    if (typeof window < "u" && typeof window.matchMedia == "function") {
+      const e = window.matchMedia(Ro);
+      Le.value = e.matches;
+      const a = (n) => {
+        Le.value = n.matches;
+      };
+      e.addEventListener?.("change", a), O(() => e.removeEventListener?.("change", a));
+    }
+    const z = t(() => Le.value && o.responsive !== !1 && !r.value);
+    y(Co, z);
+    const m = u(!1), at = ko(() => m.value, {
+      contains: (e) => !!P.value?.contains(e),
+      fallback: () => va.value
+    }), q = Kt(), $e = u(!1);
+    he(() => {
+      typeof requestAnimationFrame == "function" && requestAnimationFrame(() => requestAnimationFrame(() => {
+        $e.value = !0;
+      }));
+    });
+    const $ = t(() => U.value === "web"), I = t(() => o.navigation === "top" && !r.value);
+    y(Oo, I);
+    const E = So(o.sidebarStorageKey), Ie = t(() => Wo(L.value)), ye = u(!1);
+    v(Ie, () => {
+      ye.value = !1;
+    });
+    const S = t(() => $.value && !I.value && (Ie.value ? !ye.value : E.collapsed.value));
+    y(Lo, S);
+    const D = w("main"), De = u(0);
+    y($o, () => {
+      De.value++;
+    }), To(D, () => De.value);
+    const tt = t(() => $.value && !I.value && !S.value && o.sidebarWidth === void 0), ze = t(() => o.sidebarWidth !== void 0 ? o.sidebarWidth : $.value ? `${E.width.value}px` : "var(--ui-sidebar-width)"), pa = t(() => S.value ? `var(--ui-web-sidebar-collapsed-width, ${ua}px)` : ze.value), ae = t(() => !!k.sidebar && !r.value && !I.value), ma = u(0);
+    v([L, ae], () => {
+      $.value || !ae.value || !P.value || typeof getComputedStyle != "function" || (ma.value = Number.parseFloat(getComputedStyle(P.value).getPropertyValue("--ui-sidebar-width")) || 0);
+    }, { flush: "post" });
+    const ot = t(() => ae.value ? S.value ? ua : Number.parseFloat(ze.value) || ma.value : 0), ba = u(!!k.aside);
+    Yt(() => {
+      ba.value = !!k.aside;
+    });
+    const V = t(() => ba.value), M = t(() => Math.round(Math.min(Pe, Math.max(Me, Ce.value)))), ha = t(() => $.value || o.asideDock === "wide" && !r.value && L.value >= Io), te = t(() => B.value === "open" && !r.value && (!ha.value || L.value - ot.value - M.value < Do)), Ne = t(() => V.value && !r.value && B.value === "expanded"), He = t(() => r.value ? "0px" : Ne.value ? ae.value ? `calc(${L.value}px - var(--ui-app-sidebar-width))` : `${L.value}px` : B.value === "open" && !te.value ? `${M.value}px` : `${ua}px`);
+    y(zo, { state: B, overlay: te, presentation: U, regionWidth: He });
+    const ya = t(() => V.value && r.value && B.value !== "collapsed"), it = t(() => V.value && ha.value && B.value === "open" && !te.value), nt = t(() => r.value ? "minmax(0, 1fr)" : [ae.value && "auto", "minmax(0, 1fr)", V.value && "auto"].filter(Boolean).join(" ")), oe = u(!1);
+    y(No, oe);
+    let ie;
+    function Fe() {
+      clearTimeout(ie), ie = void 0, oe.value = !1;
+    }
+    v([pa, He], (e, a) => {
+      if (!$e.value || Te.value || C.value || e.every((c, f) => c === a[f])) return;
+      const n = ja("--ui-motion-panel", P.value);
+      if (n < 1) return Fe();
+      oe.value = !0, clearTimeout(ie), ie = setTimeout(Fe, n + 50);
+    });
+    function ga(e) {
+      e.propertyName === "width" && e.target === e.currentTarget && Fe();
+    }
+    O(() => clearTimeout(ie));
+    const lt = Bo();
+    let ge;
+    v(oe, (e) => {
+      e ? ge ??= lt.begin(P.value) : (ge?.(), ge = void 0);
+    }, { flush: "sync" }), O(() => ge?.());
+    const Ke = u({});
+    he(() => {
+      Ke.value = {
+        name: document.title.trim() || void 0,
+        icon: document.head.querySelector('link[rel~="icon"]')?.href || void 0
+      };
+    });
+    const x = t(() => ({ name: o.brandName ?? Ke.value.name, icon: o.brandIcon ?? Ke.value.icon })), _e = t(() => !!(k.brand || x.value.name || x.value.icon)), _a = t(() => _e.value && !r.value && o.wideLayout === "web"), rt = t(() => _a.value || $.value && !I.value), ut = t(() => !!k["sidebar-footer"] && (I.value || $.value)), N = w("pageActions"), X = u(0), ne = u(!0), st = yo("(pointer: coarse)"), b = t(() => r.value && st.value && o.responsive !== !1), Aa = u(0), wa = u(0), Ye = w("fab"), dt = t(() => Ye.value?.actions ?? null), le = u(!1), vt = t(() => r.value && m.value || Ne.value || ya.value || le.value), ct = t(() => b.value && Aa.value === 0);
+    function ft(e) {
+      const a = e ?? o.phoneActions;
+      return a === "inline" || !r.value ? "inline" : ct.value && wa.value === 0 && (a === "fab" || !ne.value) ? "fab" : ne.value ? "bar" : "inline";
+    }
+    const H = vo(W, (e) => o.title === void 0 ? r.value || z.value : z.value && o.title === e, {
+      phone: () => r.value,
+      actions: N,
+      actionUsers: X,
+      fab: dt,
+      placement: ft,
+      footerBars: Aa,
+      explicitFabs: wa
+    });
+    y(co, H);
+    const pt = t(() => H.entries.value.at(-1)?.title()), G = t(() => {
+      const e = H.entries.value.at(-1);
+      return r.value && e?.back ? e : void 0;
+    }), R = t(() => G.value ? G.value.title() : o.title ?? pt.value), A = t(() => o.back || !!G.value);
+    function ka() {
+      G.value?.back ? G.value.back() : ee("back");
+    }
+    const Ae = t(() => r.value && o.phoneBarTitle === "none" && !A.value), re = t(() => z.value ? R.value : void 0), mt = t(() => {
+      const e = H.entries.value.at(-1);
+      return o.title === void 0 || !!e && H.shows(e);
+    }), Ea = u(!1);
+    v([z, () => o.height, D], () => {
+      Ea.value = z.value && (o.height === "fill" || !!D.value && getComputedStyle(D.value).overflowY !== "visible");
+    }, { flush: "post" });
+    const bt = t(() => r.value && o.responsive !== !1), h = t(() => {
+      if (X.value > 0 || ue.value) return;
+      const e = (f) => (f.type === void 0 || f.type === "item") && !f.children?.length, a = o.headerActions.filter(e).find((f) => !!f.primary);
+      if (a) return a;
+      const [n, ...c] = o.headerActions;
+      return n && !c.length && e(n) && n.icon ? n : void 0;
+    }), Sa = t(() => {
+      const e = o.headerActions.filter((a) => a !== h.value);
+      return e.filter((a, n) => a.type !== "separator" || n > 0 && n < e.length - 1 && e[n - 1].type !== "separator");
+    }), Ue = /* @__PURE__ */ new Map(), ue = u(null);
+    function se() {
+      const e = N.value;
+      let a = null;
+      if (e && r.value)
+        for (const [n, c] of Ue) e.contains(c() ?? null) && (a = n);
+      ue.value !== a && (ue.value = a);
+    }
+    let we;
+    v(N, (e) => {
+      we?.disconnect(), !(!e || typeof MutationObserver > "u") && (we = new MutationObserver(se), we.observe(e, { childList: !0, subtree: !0 }));
+    }, { flush: "post" }), v(r, () => Z(se)), O(() => we?.disconnect()), y(Ho, {
+      owner: ue,
+      entries: Sa,
+      select: (e) => ee("headerAction", e),
+      register(e, a) {
+        return Ue.set(e, a), Z(se), () => {
+          Ue.delete(e), se();
+        };
+      }
+    });
+    const de = t(() => ue.value ? [] : Sa.value), ve = t(() => !!k.sidebar && !A.value && !Ot.value), qe = t(() => b.value && !Ae.value && !A.value && !ve.value && R.value !== void 0 && !k.brand ? x.value.icon : void 0), Ta = t(() => Ae.value && !ve.value && !h.value && !de.value.length && X.value === 0), Ba = t(() => r.value && (!!k.sidebar || A.value || R.value !== void 0 || o.headerActions.length > 0) && (ve.value || A.value || R.value !== void 0 || _e.value || o.headerActions.length > 0)), Pa = u(!1);
+    he(() => {
+      Pa.value = so();
+    });
+    const ke = t(() => Pa.value && r.value), ht = t(() => ke.value && !A.value), Ee = ro(t(() => ht.value && (!Ba.value || Ta.value)));
+    y(uo, Ee), he(() => {
+      Z(Ee.refresh);
+    });
+    const Ve = t(() => ke.value && (A.value || !(Ee.wanted.value && Ee.owner.value))), yt = t(() => A.value && !ke.value);
+    Xa(() => ke.value && A.value && !G.value?.history, ka);
+    const gt = t(() => Ta.value && !Ve.value), _t = t(() => Ba.value || Ve.value), Se = w("phoneTitle"), Ma = w("phoneTitleText"), xa = ra(Se), Ra = u(!0);
+    function Ca() {
+      const e = Se.value, a = Ma.value;
+      if (!e?.clientWidth || !a) return;
+      const n = ve.value || A.value ? 44 : 0;
+      Ra.value = a.getBoundingClientRect().width <= e.clientWidth - 16 - n;
+    }
+    v([xa, R, A], Ca, { flush: "post" }), he(() => {
+      document.fonts?.ready.then(Ca);
+    });
+    function At() {
+      const e = N.value, a = e?.closest("[data-ui-mobile-navigation]");
+      if (!ne.value || !e || !a?.clientWidth || X.value === 0) return;
+      se();
+      const n = Se.value, c = !!n && n.clientWidth < Math.min(wi, n.scrollWidth), f = e.querySelectorAll("button, a[href]").length + (de.value.length ? 1 : 0);
+      (a.scrollWidth > a.clientWidth + 1 || c || b.value && f > ki) && (ne.value = !1);
+    }
+    const wt = ra(N);
+    v([X, wt, xa, R], At, { flush: "post" }), v([L, () => H.entries.value], () => {
+      ne.value = !0;
+    });
+    const kt = t(() => h.value || de.value.length || X.value > 0 || qe.value || !Ra.value ? "start" : "center");
+    fo(N);
+    function Et() {
+      Ie.value ? ye.value = !ye.value : E.collapsed.value = !E.collapsed.value;
+    }
+    function St(e) {
+      const a = {
+        ArrowLeft: E.width.value - xe,
+        ArrowRight: E.width.value + xe,
+        Home: Ja,
+        End: Za
+      }[e.key];
+      a !== void 0 && (e.preventDefault(), E.width.value = Ga(a));
+    }
+    const Te = u(!1);
+    let Xe = { x: 0, width: 0 };
+    function Oa(e) {
+      E.width.value = Ga(Xe.width + e.clientX - Xe.x);
+    }
+    function ce() {
+      Te.value = !1, document.removeEventListener("pointermove", Oa), document.removeEventListener("pointerup", ce), document.removeEventListener("pointercancel", ce);
+    }
+    function Tt(e) {
+      e.button === 0 && (e.preventDefault(), Xe = { x: e.clientX, width: E.width.value }, Te.value = !0, document.addEventListener("pointermove", Oa), document.addEventListener("pointerup", ce), document.addEventListener("pointercancel", ce));
+    }
+    O(ce);
+    const Wa = (e) => Math.round(Math.min(Pe, Math.max(Me, e)));
+    function Bt(e) {
+      const a = {
+        ArrowLeft: M.value + xe,
+        ArrowRight: M.value - xe,
+        Home: Me,
+        End: Pe
+      }[e.key];
+      a !== void 0 && (e.preventDefault(), Ce.value = Wa(a));
+    }
+    const C = u(!1), F = u(0);
+    let Ge = { x: 0, width: 0 };
+    function La(e) {
+      F.value = Wa(Ge.width - (e.clientX - Ge.x));
+    }
+    function fe() {
+      document.removeEventListener("pointermove", La), document.removeEventListener("pointerup", fe), document.removeEventListener("pointercancel", fe), C.value && (Ce.value = F.value, Z(() => {
+        C.value = !1;
+      }));
+    }
+    function Pt(e) {
+      e.button === 0 && (e.preventDefault(), Ge = { x: e.clientX, width: M.value }, F.value = M.value, C.value = !0, document.addEventListener("pointermove", La), document.addEventListener("pointerup", fe), document.addEventListener("pointercancel", fe));
+    }
+    O(fe);
+    const Mt = t(() => C.value ? `${F.value}px` : He.value);
+    function j() {
+      m.value && (m.value = !1);
+    }
+    function $a() {
+      m.value = !0;
+    }
+    function xt(e) {
+      e || j();
+    }
+    function Rt(e) {
+      e.preventDefault();
+      const a = da.value;
+      (Eo() ? a : a?.closest("[data-ui-nav-drawer]"))?.focus({ preventScroll: !0 });
+    }
+    Xa(() => r.value && m.value, j);
+    const je = wo(), Ct = t(() => je && !je.draggable.value ? je.element.value : null), Qe = u(0), Ot = t(() => r.value && !!k.tabbar && Qe.value > 0);
+    y(Fo, {
+      available: t(() => !!k.sidebar),
+      open: t(() => m.value),
+      id: q,
+      show: $a,
+      claim() {
+        Qe.value++;
+        let e = !1;
+        return () => {
+          e || (e = !0, Qe.value--);
+        };
+      }
+    }), v(r, (e) => {
+      e || j();
+    });
+    const Ze = u(0);
+    y(mo, () => {
+      Ze.value++;
+      let e = !1;
+      return () => {
+        e || (e = !0, Ze.value--);
+      };
+    });
+    const Q = w("phoneBar"), Je = go(), Ia = () => b.value && o.hideOnScroll && Ze.value === 0, Da = u(!1), za = u(!1);
+    function ea() {
+      const e = D.value, a = e && typeof getComputedStyle == "function" ? getComputedStyle(e).overflowY : "visible";
+      Da.value = o.height === "fill" || a !== "visible", za.value = /auto|scroll|overlay/.test(a);
+    }
+    let pe = 0;
+    function Wt() {
+      pe || typeof requestAnimationFrame != "function" || (pe = requestAnimationFrame(() => {
+        pe = 0, ea();
+      }));
+    }
+    v([D, b], ([e, a], n, c) => {
+      if (ea(), !e || !a || typeof MutationObserver > "u") return;
+      const f = new MutationObserver(Wt);
+      f.observe(e, { childList: !0, subtree: !0 }), c(() => f.disconnect());
+    }, { flush: "post", immediate: !0 }), v(() => o.height, () => Z(ea)), O(() => {
+      pe && cancelAnimationFrame(pe);
+    });
+    const aa = t(() => Ia() && Da.value);
+    function Lt() {
+      const e = D.value, a = W.value;
+      return !e || !a ? 0 : e.offsetParent === a ? e.offsetTop : e.getBoundingClientRect().top - a.getBoundingClientRect().top;
+    }
+    const { hidden: ta, velocity: $t } = bo({
+      column: W,
+      overlay: () => aa.value,
+      enabled: Ia,
+      blocked: () => le.value || m.value || ya.value,
+      room: () => (Q.value?.offsetHeight ?? 0) + (W.value?.querySelector(":scope > [data-ui-tab-bar]")?.offsetHeight ?? 0) + 24,
+      topRoom: Lt,
+      reset: [De, () => H.entries.value, le]
+    }), me = u({ top: 0, bottom: 0 });
+    function oa() {
+      if (ta.value) return;
+      const e = W.value?.querySelector(":scope > [data-ui-tab-bar]:not([data-hidden])"), a = { top: Q.value && !Q.value.hidden ? Q.value.offsetHeight : 0, bottom: e?.offsetHeight ?? 0 };
+      (a.top !== me.value.top || a.bottom !== me.value.bottom) && (me.value = a);
+    }
+    v([b, Q, W], (e, a, n) => {
+      oa();
+      const c = W.value;
+      if (!b.value || !c || typeof ResizeObserver > "u") return;
+      const f = new ResizeObserver(oa), Na = () => {
+        f.disconnect();
+        for (const zt of c.querySelectorAll(":scope > :is([data-ui-mobile-navigation], [data-ui-tab-bar])")) f.observe(zt);
+        oa();
+      };
+      Na();
+      const Ha = typeof MutationObserver > "u" ? void 0 : new MutationObserver(Na);
+      Ha?.observe(c, { childList: !0, attributes: !0, attributeFilter: ["hidden", "data-hidden"], subtree: !1 }), n(() => {
+        f.disconnect(), Ha?.disconnect();
+      });
+    }, { flush: "post", immediate: !0 });
+    const It = t(() => {
+      if (!b.value) return {};
+      const e = {
+        "--ui-bars-top-box": `${me.value.top}px`,
+        "--ui-bars-bottom-box": `${me.value.bottom}px`
+      }, a = ja("--ui-motion-bars", P.value), n = ho($t.value, a);
+      return n !== a && (e["--ui-bars-motion"] = `${n}ms`), e;
+    }), ia = w("accessory"), Be = u(0);
+    let be = null;
+    function na() {
+      const e = ia.value, a = e && typeof getComputedStyle == "function" ? Math.max(0, Math.round(e.offsetHeight - (parseFloat(getComputedStyle(e).paddingBottom) || 0))) : 0;
+      Be.value = a;
+    }
+    v(Be, (e) => {
+      const a = P.value?.closest("[data-ui-app]") ?? null;
+      be && be !== a && be.style.removeProperty("--ui-bottom-accessory-height"), be = a, e ? a?.style.setProperty("--ui-bottom-accessory-height", `${e}px`) : a?.style.removeProperty("--ui-bottom-accessory-height");
+    }), v(ia, (e, a, n) => {
+      if (na(), !e || typeof ResizeObserver != "function") return;
+      const c = new ResizeObserver(na);
+      c.observe(e), n(() => c.disconnect());
+    }, { flush: "post" }), v(() => b.value && Je.value, () => Z(na)), O(() => be?.style.removeProperty("--ui-bottom-accessory-height"));
+    function Dt(e) {
+      !r.value || !m.value || e.target instanceof Element && e.target.closest("[data-nav-item],a[href]") && j();
+    }
+    return (e, a) => (l(), s("section", {
+      ref_key: "root",
+      ref: P,
+      class: Ua(["syno-pkg-land-ui-root relative grid min-w-0 overflow-hidden bg-[var(--ui-surface)] text-[var(--ui-text)]", o.height === "fill" && "h-full grid-rows-[minmax(0,1fr)]"]),
+      style: Ya({
+        "--ui-app-sidebar-width": pa.value,
+        "--ui-app-sidebar-open-width": ze.value,
+        gridTemplateColumns: nt.value,
+        minHeight: o.minHeight,
+        ...It.value,
+        ...Be.value ? { "--ui-bottom-accessory-height": `${Be.value}px` } : {}
+      }),
+      "data-ui-layout-mode": U.value,
+      "data-ui-navigation": I.value ? "top" : void 0,
+      "data-ui-layout-height": o.height,
+      "data-ui-layout-short": z.value ? Ea.value ? "scroll" : "" : void 0,
+      "data-ui-layout-scroll": bt.value ? "page" : void 0,
+      "data-ui-mobile-open": r.value && m.value ? "true" : void 0,
+      "data-ui-motion-ready": $e.value ? "true" : void 0,
+      "data-ui-sidebar-collapsed": S.value ? "true" : void 0,
+      "data-ui-sidebar-resizing": Te.value ? "true" : void 0,
+      "data-ui-aside": V.value ? B.value : void 0,
+      "data-ui-aside-overlay": te.value ? "true" : void 0,
+      "data-ui-aside-resizing": C.value ? "true" : void 0,
+      "data-ui-side-moving": oe.value ? "true" : void 0,
+      "data-ui-phone": b.value ? "" : void 0,
+      "data-ui-bars-hidden": i(ta) || void 0,
+      "data-ui-bars-overlay": aa.value ? "" : void 0,
+      "data-ui-fab": b.value && (Ye.value?.count ?? 0) > 0 ? "" : void 0,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      r.value && e.$slots.sidebar ? (l(), J(i(Zt), {
+        key: 0,
+        open: m.value,
+        "swipe-direction": "left",
+        "onUpdate:open": xt
+      }, {
+        default: K(() => [
+          g(i(ao), null, {
+            default: K(() => [
+              g(Ao, { host: Ct.value }, {
+                default: K(() => [
+                  g(i(oo), {
+                    "data-ui-nav-drawer-viewport": "",
+                    "data-syno-pkg-land-ui": ""
+                  }, {
+                    default: K(() => [
+                      g(i(eo), {
+                        "data-ui-overlay": "",
+                        "data-ui-mobile-backdrop": ""
+                      }),
+                      g(i(Jt), {
+                        id: i(q),
+                        "data-ui-layout-sidebar": "",
+                        "data-ui-nav-drawer": "",
+                        "aria-label": i(p)("Application navigation"),
+                        tabindex: "-1",
+                        onOpenAutoFocus: Rt,
+                        onCloseAutoFocus: i(at),
+                        onClick: Dt
+                      }, {
+                        default: K(() => [
+                          g(i(to), { class: "sr-only" }, {
+                            default: K(() => [
+                              Ut(Y(i(p)("Application navigation")), 1)
+                            ]),
+                            _: 1
+                          }),
+                          T("div", Uo, [
+                            _e.value ? (l(), s("div", qo, [
+                              _(e.$slots, "brand", {}, () => [
+                                g(la, {
+                                  interactive: Oe(),
+                                  onActivate: We,
+                                  name: x.value.name,
+                                  icon: x.value.icon
+                                }, null, 8, ["interactive", "name", "icon"])
+                              ])
+                            ])) : (l(), s("span", Vo, Y(i(p)("Application navigation")), 1)),
+                            T("button", {
+                              ref_key: "closeButton",
+                              ref: da,
+                              "data-ui-close-navigation": "",
+                              type: "button",
+                              "aria-label": i(p)("Close"),
+                              onClick: a[0] || (a[0] = (n) => j())
+                            }, [
+                              g(i(Vt), {
+                                size: 20,
+                                "aria-hidden": "true"
+                              })
+                            ], 8, Xo)
+                          ]),
+                          T("div", Go, [
+                            _(e.$slots, "sidebar")
+                          ]),
+                          e.$slots["sidebar-footer"] ? (l(), s("div", jo, [
+                            _(e.$slots, "sidebar-footer")
+                          ])) : d("", !0)
+                        ]),
+                        _: 3
+                      }, 8, ["id", "aria-label", "onCloseAutoFocus"])
+                    ]),
+                    _: 3
+                  })
+                ]),
+                _: 3
+              }, 8, ["host"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["open"])) : e.$slots.sidebar ? (l(), s("aside", {
+        key: 1,
+        id: i(q),
+        "data-ui-layout-sidebar": "",
+        class: "min-w-0 border-r border-[var(--ui-border)] bg-[var(--ui-surface)]",
+        onTransitionend: ga
+      }, [
+        rt.value ? (l(), s("div", Zo, [
+          _a.value && !S.value ? _(e.$slots, "brand", {}, () => [
+            g(la, {
+              interactive: Oe(),
+              onActivate: We,
+              name: x.value.name,
+              icon: x.value.icon
+            }, null, 8, ["interactive", "name", "icon"])
+          ], void 0, 0) : d("", !0),
+          $.value && !I.value ? (l(), s("button", {
+            key: 1,
+            "data-ui-sidebar-collapse": "",
+            type: "button",
+            "aria-label": S.value ? i(p)("Expand navigation") : i(p)("Collapse navigation"),
+            title: S.value ? i(p)("Expand navigation") : i(p)("Collapse navigation"),
+            "aria-expanded": !S.value,
+            "aria-controls": i(q),
+            onClick: Et
+          }, [
+            (l(), J(qa(S.value ? i(Xt) : i(Gt)), {
+              size: 16,
+              "aria-hidden": "true"
+            }))
+          ], 8, Jo)) : d("", !0)
+        ])) : d("", !0),
+        T("div", ei, [
+          _(e.$slots, "sidebar")
+        ]),
+        ut.value ? (l(), s("div", ai, [
+          _(e.$slots, "sidebar-footer")
+        ])) : d("", !0),
+        tt.value ? (l(), s("div", {
+          key: 2,
+          "data-ui-sidebar-resize": "",
+          role: "separator",
+          tabindex: "0",
+          "aria-orientation": "vertical",
+          "aria-label": i(p)("Resize navigation"),
+          "aria-controls": i(q),
+          "aria-valuemin": i(Ja),
+          "aria-valuemax": i(Za),
+          "aria-valuenow": i(E).width.value,
+          onKeydown: St,
+          onPointerdown: Tt
+        }, null, 40, ti)) : d("", !0)
+      ], 40, Qo)) : d("", !0),
+      T("div", {
+        ref_key: "column",
+        ref: W,
+        "data-ui-layout-main": "",
+        class: "flex min-h-0 min-w-0 flex-col bg-[var(--ui-surface)]",
+        inert: Ne.value || void 0,
+        "aria-hidden": vt.value ? "true" : void 0
+      }, [
+        _t.value ? (l(), s("div", {
+          key: 0,
+          ref_key: "phoneBar",
+          ref: Q,
+          "data-ui-mobile-navigation": "",
+          "data-ui-mobile-title-align": kt.value,
+          "data-ui-mobile-bar-title": Ae.value ? "none" : void 0,
+          hidden: gt.value || void 0
+        }, [
+          Ve.value ? (l(), J(lo, { key: 0 })) : d("", !0),
+          yt.value ? (l(), s("button", {
+            key: 1,
+            "data-ui-mobile-back": "",
+            type: "button",
+            "aria-label": i(p)("Back to the previous page"),
+            onClick: ka
+          }, [
+            g(no, { size: 24 })
+          ], 8, ni)) : ve.value ? (l(), s("button", {
+            key: 2,
+            ref_key: "menuTrigger",
+            ref: va,
+            "data-ui-mobile-menu": "",
+            type: "button",
+            "aria-label": i(p)("Application navigation"),
+            "aria-expanded": m.value,
+            "aria-controls": m.value ? i(q) : void 0,
+            onClick: $a
+          }, [
+            g(i(jt), {
+              size: 20,
+              "aria-hidden": "true"
+            })
+          ], 8, li)) : qe.value ? (l(), s("img", {
+            key: 3,
+            "data-ui-mobile-app-icon": "",
+            src: qe.value,
+            alt: "",
+            "aria-hidden": "true"
+          }, null, 8, ri)) : d("", !0),
+          Ae.value ? (l(), s(qt, { key: 4 }, [
+            o.title ? (l(), s("span", ui, Y(o.title), 1)) : d("", !0)
+          ], 64)) : R.value !== void 0 ? (l(), s("div", {
+            key: 5,
+            ref_key: "phoneTitle",
+            ref: Se,
+            "data-ui-mobile-title": "",
+            "aria-hidden": o.title === void 0 ? "true" : void 0,
+            title: R.value
+          }, [
+            T("span", {
+              ref_key: "phoneTitleText",
+              ref: Ma
+            }, Y(R.value), 513)
+          ], 8, si)) : _e.value ? (l(), s("div", di, [
+            _(e.$slots, "brand", {}, () => [
+              g(la, {
+                interactive: Oe(),
+                onActivate: We,
+                name: x.value.name,
+                icon: x.value.icon
+              }, null, 8, ["interactive", "name", "icon"])
+            ])
+          ])) : e.$slots.sidebar ? (l(), s("span", vi, Y(i(p)("Application navigation")), 1)) : d("", !0),
+          T("div", ci, [
+            T("div", {
+              ref_key: "pageActions",
+              ref: N,
+              "data-ui-mobile-page-actions": ""
+            }, null, 512),
+            h.value ? (l(), s("button", {
+              key: 0,
+              "data-ui-mobile-action": "",
+              type: "button",
+              disabled: h.value.disabled,
+              "aria-label": h.value.icon ? h.value.label : void 0,
+              title: h.value.icon ? h.value.label : void 0,
+              onClick: a[1] || (a[1] = (n) => ee("headerAction", h.value.key))
+            }, [
+              h.value.icon ? (l(), J(qa(h.value.icon), {
+                key: 0,
+                size: 20,
+                "aria-hidden": "true"
+              })) : (l(), s("span", pi, Y(h.value.label), 1))
+            ], 8, fi)) : d("", !0),
+            de.value.length ? (l(), J(_o, {
+              key: 1,
+              items: de.value,
+              align: "end",
+              onSelect: a[2] || (a[2] = (n) => ee("headerAction", n))
+            }, {
+              trigger: K(() => [
+                T("button", {
+                  "data-ui-mobile-more": "",
+                  type: "button",
+                  "aria-label": i(p)("More")
+                }, [
+                  g(i(Qt), {
+                    size: 20,
+                    "aria-hidden": "true"
+                  })
+                ], 8, mi)
+              ]),
+              _: 1
+            }, 8, ["items"])) : d("", !0)
+          ])
+        ], 8, ii)) : d("", !0),
+        e.$slots.toolbar || re.value !== void 0 ? (l(), s("div", {
+          key: 1,
+          "data-ui-layout-bar": "",
+          "data-ui-layout-bar-short": re.value !== void 0 ? "" : void 0
+        }, [
+          re.value !== void 0 ? (l(), s("div", {
+            key: 0,
+            "data-ui-layout-title": "",
+            "aria-hidden": mt.value ? "true" : void 0,
+            title: re.value
+          }, Y(re.value), 9, hi)) : d("", !0),
+          _(e.$slots, "toolbar")
+        ], 8, bi)) : d("", !0),
+        T("main", {
+          ref_key: "main",
+          ref: D,
+          "data-ui-swap": "",
+          "data-ui-bars-room": aa.value && za.value ? "" : void 0,
+          class: Ua(["min-h-0 flex-1", o.height === "fill" && "flex flex-col overflow-y-auto"])
+        }, [
+          _(e.$slots, "default")
+        ], 10, yi),
+        _(e.$slots, "footer"),
+        e.$slots.accessory ? (l(), s("div", {
+          key: 2,
+          ref_key: "accessory",
+          ref: ia,
+          "data-ui-bottom-accessory": "",
+          "data-hidden": b.value && i(Je) ? "" : void 0
+        }, [
+          _(e.$slots, "accessory")
+        ], 8, gi)) : d("", !0),
+        r.value ? _(e.$slots, "tabbar", {}, void 0, void 0, 3) : d("", !0)
+      ], 8, oi),
+      b.value ? (l(), J(po, {
+        key: 2,
+        ref_key: "fab",
+        ref: Ye,
+        open: le.value,
+        "onUpdate:open": a[3] || (a[3] = (n) => le.value = n),
+        hidden: !!i(ta) || i(Je)
+      }, null, 8, ["open", "hidden"])) : d("", !0),
+      V.value ? (l(), s("div", {
+        key: 3,
+        "data-ui-layout-aside": "",
+        "data-ui-aside-state": B.value,
+        style: Ya({ width: Mt.value, "--ui-aside-open-width": `${C.value ? F.value : M.value}px` }),
+        onTransitionend: ga
+      }, [
+        _(e.$slots, "aside", {
+          state: B.value,
+          overlay: te.value,
+          width: C.value ? F.value : M.value,
+          presentation: U.value
+        }),
+        it.value ? (l(), s("div", {
+          key: 0,
+          "data-ui-aside-resize": "",
+          role: "separator",
+          tabindex: "0",
+          "aria-orientation": "vertical",
+          "aria-label": i(p)("Resize panes"),
+          "aria-valuemin": i(Me),
+          "aria-valuemax": i(Pe),
+          "aria-valuenow": C.value ? F.value : M.value,
+          onKeydown: Bt,
+          onPointerdown: Pt
+        }, null, 40, Ai)) : d("", !0)
+      ], 44, _i)) : d("", !0)
+    ], 14, Yo));
+  }
+});
+export {
+  tn as default
+};