@synopackageland/ui 0.25.20 → 0.25.22

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

@@ -0,0 +1,4 @@
+import f from "./AppLayout.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,28 @@
+import { defineComponent as c, openBlock as d, createElementBlock as h, unref as e, createElementVNode as l } from "vue";
+import t from "./back-arrow.json.js";
+const u = ["width", "height", "viewBox", "stroke-width"], k = ["d"], w = /* @__PURE__ */ c({
+  __name: "BackArrowIcon",
+  props: {
+    size: { default: 24 }
+  },
+  setup(o) {
+    const n = t.lines.map(([r, i, s, a]) => `M${r} ${i}L${s} ${a}`).join("");
+    return (r, i) => (d(), h("svg", {
+      "data-ui-back-arrow": "",
+      width: o.size,
+      height: o.size,
+      viewBox: `0 0 ${e(t).size} ${e(t).size}`,
+      fill: "none",
+      stroke: "currentColor",
+      "stroke-width": e(t).stroke,
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      "aria-hidden": "true"
+    }, [
+      l("path", { d: e(n) }, null, 8, k)
+    ], 8, u));
+  }
+});
+export {
+  w as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./BackArrowIcon.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/app/app-layout/MovableActions.js

@@ -0,0 +1,35 @@
+import { defineComponent as v, onMounted as m, onUpdated as y, onBeforeUnmount as x, createTextVNode as d, h as M, Teleport as N } from "vue";
+const T = 'button, a[href], [role="button"]';
+function b(e) {
+  return e.nodeType === 3 ? !!e.textContent?.trim() : !(e instanceof Element) || e.matches(T) || e.hasAttribute("hidden") || e.classList.contains("sr-only") || e instanceof HTMLElement && e.style.display === "none" ? !1 : e.matches('input:not([type="hidden"]), select, textarea') ? !0 : [...e.childNodes].some(b);
+}
+const C = v({
+  name: "MovableActions",
+  props: {
+    to: { type: Object, default: null }
+  },
+  emits: { passive: (e) => typeof e == "boolean" },
+  setup(e, { slots: p, emit: h }) {
+    let r, i, l = !1, u = null, s;
+    function f() {
+      const t = r?.el, a = i?.el;
+      if (!t || !a || t.parentNode !== a.parentNode) return;
+      let o = !1;
+      for (let n = t.nextSibling; n && n !== a; n = n.nextSibling)
+        if (b(n)) {
+          o = !0;
+          break;
+        }
+      o !== l && (l = o, h("passive", o));
+    }
+    function c() {
+      const t = r?.el?.parentNode ?? null;
+      t !== u && (s?.disconnect(), u = t, t && typeof MutationObserver < "u" && (s ??= new MutationObserver(f), s.observe(t, { childList: !0, subtree: !0, characterData: !0, attributes: !0, attributeFilter: ["hidden", "style", "class"] }))), f();
+    }
+    return m(c), y(c), x(() => s?.disconnect()), () => (r = d(""), i = d(""), M(N, { to: e.to ?? void 0, disabled: !e.to }, [r, p.default?.(), i]));
+  }
+});
+export {
+  C as default,
+  b as showsPassiveContent
+};

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

@@ -0,0 +1,135 @@
+import { defineComponent as T, useModel as D, useId as F, ref as p, watch as v, onBeforeUnmount as L, computed as _, nextTick as C, openBlock as E, createElementBlock as P, createElementVNode as b, createVNode as w, unref as r, withCtx as U, createCommentVNode as $, mergeModels as q } from "vue";
+import { Plus as z } from "@lucide/vue";
+import { FocusScope_default as H } from "../../../vendor/reka-ui/dist/FocusScope/FocusScope.js";
+import { useUiText as K } from "../../../i18n/text.js";
+import { useBackDismiss as j } from "../../../composables/backDismiss.js";
+const G = ["data-state", "data-count", "data-hidden"], J = ["data-state"], Q = ["id", "data-state", "role", "aria-label", "inert"], R = ["aria-label", "title", "aria-expanded", "aria-controls"], m = 'button, a[href], [role="button"]', et = /* @__PURE__ */ T({
+  __name: "PhoneFab",
+  props: /* @__PURE__ */ q({
+    hidden: { type: Boolean }
+  }, {
+    open: { type: Boolean, default: !1 },
+    openModifiers: {}
+  }),
+  emits: ["update:open"],
+  setup(g, { expose: B }) {
+    const M = g, o = D(g, "open"), d = K(), h = F(), i = p(null), y = p(null), u = p(0);
+    B({ actions: i, count: u });
+    function V(t, a) {
+      for (let e = t.parentElement; e && e !== a; e = e.parentElement)
+        if (e.matches(m)) return !1;
+      for (let e = t; e && e !== a; e = e.parentElement)
+        if (e.hasAttribute("hidden") || e instanceof HTMLElement && e.style.display === "none") return !1;
+      return !0;
+    }
+    function k(t) {
+      return [...t.querySelectorAll(m)].filter((a) => V(a, t));
+    }
+    function N(t) {
+      if (!t.textContent?.trim())
+        return (t.getAttribute("aria-label") || t.getAttribute("title"))?.trim() || void 0;
+    }
+    function A() {
+      const t = i.value;
+      if (!t) {
+        u.value = 0;
+        return;
+      }
+      const a = k(t);
+      a.forEach((e, O) => {
+        const x = String(a.length - 1 - O);
+        e.style.getPropertyValue("--ui-fab-i") !== x && e.style.setProperty("--ui-fab-i", x);
+        const f = N(e);
+        f === void 0 ? e.hasAttribute("data-ui-fab-label") && e.removeAttribute("data-ui-fab-label") : e.getAttribute("data-ui-fab-label") !== f && e.setAttribute("data-ui-fab-label", f);
+      }), u.value = a.length;
+    }
+    let l;
+    v(i, (t) => {
+      l?.disconnect(), l = void 0, !(!t || typeof MutationObserver > "u") && (A(), l = new MutationObserver((a) => {
+        A(), o.value && a.some((e) => e.attributeName === "aria-expanded" && e.oldValue === "true" && e.target.getAttribute("aria-expanded") !== "true") && s(!1);
+      }), l.observe(t, { childList: !0, subtree: !0, characterData: !0, attributes: !0, attributeOldValue: !0, attributeFilter: ["hidden", "style", "aria-expanded", "aria-label", "title"] }));
+    }, { immediate: !0, flush: "post" }), L(() => l?.disconnect());
+    const n = _(() => u.value > 1);
+    v(n, (t) => {
+      t || (o.value = !1);
+    });
+    function s(t = !0) {
+      if (!o.value || (o.value = !1, !t)) return;
+      const a = document.activeElement;
+      (!a || a === document.body || i.value?.contains(a)) && C(() => y.value?.focus({ preventScroll: !0 }));
+    }
+    v(o, (t) => {
+      t && C(() => {
+        (i.value ? k(i.value)[0] : void 0)?.focus({ preventScroll: !0 });
+      });
+    }), j(() => o.value, () => s());
+    function S(t) {
+      t.key !== "Escape" || !o.value || t.isComposing || (t.preventDefault(), t.stopPropagation(), s());
+    }
+    function I(t) {
+      if (!o.value || !(t.target instanceof Element)) return;
+      const a = t.target.closest(m);
+      !a || !i.value?.contains(a) || a.getAttribute("aria-haspopup") && a.getAttribute("aria-haspopup") !== "false" || s(!1);
+    }
+    const c = _(() => o.value ? "open" : "closed");
+    return (t, a) => (E(), P("div", {
+      "data-ui-fab-root": "",
+      "data-state": c.value,
+      "data-count": u.value === 0 ? "none" : n.value ? "many" : "one",
+      "data-hidden": M.hidden && !o.value ? "" : void 0,
+      "data-syno-pkg-land-ui": ""
+    }, [
+      b("div", {
+        "data-ui-fab-scrim": "",
+        "data-state": c.value,
+        "aria-hidden": "true",
+        onClick: a[0] || (a[0] = (e) => s())
+      }, null, 8, J),
+      w(r(H), {
+        trapped: o.value,
+        loop: "",
+        "as-child": ""
+      }, {
+        default: U(() => [
+          b("div", {
+            "data-ui-fab-stack": "",
+            onKeydown: S
+          }, [
+            b("div", {
+              id: r(h),
+              ref_key: "actions",
+              ref: i,
+              "data-ui-fab-actions": "",
+              "data-state": n.value ? c.value : void 0,
+              role: n.value ? "group" : void 0,
+              "aria-label": n.value ? r(d)("Page actions") : void 0,
+              inert: n.value && !o.value || void 0,
+              onClick: I
+            }, null, 8, Q),
+            n.value ? (E(), P("button", {
+              key: 0,
+              ref_key: "toggle",
+              ref: y,
+              "data-ui-fab-toggle": "",
+              type: "button",
+              "aria-label": r(d)("Page actions"),
+              title: r(d)("Page actions"),
+              "aria-expanded": o.value,
+              "aria-controls": r(h),
+              onClick: a[1] || (a[1] = (e) => o.value = !o.value)
+            }, [
+              w(r(z), {
+                size: 24,
+                "aria-hidden": "true"
+              })
+            ], 8, R)) : $("", !0)
+          ], 32)
+        ]),
+        _: 1
+      }, 8, ["trapped"])
+    ], 8, G));
+  }
+});
+export {
+  et as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./PhoneFab.vue.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,25 @@
+import { defineComponent as r, openBlock as n, createElementBlock as a, unref as e, createVNode as l } from "vue";
+import { House as i } from "@lucide/vue";
+import { useUiText as m } from "../../../i18n/text.js";
+import { closeToShell as u } from "../../../lib/nativeShell.js";
+const c = ["aria-label", "title"], k = /* @__PURE__ */ r({
+  __name: "ShellBackButton",
+  setup(s) {
+    const t = m();
+    return (p, o) => (n(), a("button", {
+      "data-ui-shell-back": "",
+      type: "button",
+      "aria-label": e(t)("Launcher home"),
+      title: e(t)("Launcher home"),
+      onClick: o[0] || (o[0] = (f) => e(u)())
+    }, [
+      l(e(i), {
+        size: 24,
+        "aria-hidden": "true"
+      })
+    ], 8, c));
+  }
+});
+export {
+  k as default
+};

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

@@ -0,0 +1,4 @@
+import f from "./ShellBackButton.vue.js";
+export {
+  f as default
+};

package/dist/modules/components/app/app-layout/back-arrow.json.js

@@ -0,0 +1,13 @@
+const s = "back-arrow", t = 24, e = 1.75, o = [[5, 12, 19, 12], [5, 12, 11, 6], [5, 12, 11, 18]], n = {
+  name: s,
+  size: 24,
+  stroke: 1.75,
+  lines: o
+};
+export {
+  n as default,
+  o as lines,
+  s as name,
+  t as size,
+  e as stroke
+};

package/dist/modules/components/app/app-layout/hideOnScroll.js

@@ -0,0 +1,72 @@
+import { ref as H, onMounted as A, onBeforeUnmount as V, watch as L } from "vue";
+import { raisesKeyboard as D } from "../../../composables/visualViewport.js";
+import { VelocityEstimator as F, GESTURE_THRESHOLDS as f } from "../../../interaction/velocity.js";
+const W = f.hideDistance, z = f.showDistance, K = 4, U = '[role="dialog"][data-state="open"], [role="alertdialog"][data-state="open"]';
+function I(o) {
+  const r = H(!1), E = H(0), v = /* @__PURE__ */ new WeakMap(), b = new F();
+  let p = null, i = 0, c = 0, d;
+  function l(e, t = 0) {
+    i = 0, c = 0, r.value !== e && (E.value = t, r.value = e);
+  }
+  function P(e) {
+    return o.blocked() || D(e.activeElement) || !!e.querySelector(U);
+  }
+  function w(e) {
+    return e instanceof Document ? e.scrollingElement : !(e instanceof Element) || e.matches('input, textarea, select, [contenteditable]:not([contenteditable="false"])') || e.closest("[data-ui-mobile-navigation], [data-ui-tab-bar], [data-ui-fab-root], [data-ui-bottom-accessory]") ? null : o.column.value?.contains(e) || e === e.ownerDocument.scrollingElement ? e : null;
+  }
+  function S(e) {
+    return e.scrollTop >= e.scrollHeight - e.clientHeight - 2;
+  }
+  function h(e) {
+    if (!o.enabled()) return;
+    const t = w(e.target);
+    if (!t) return;
+    const a = t.scrollTop, R = v.get(t) ?? a;
+    v.set(t, a);
+    const s = a - R;
+    if (s === 0) return;
+    t !== p && (p = t, b.reset(), i = 0, c = 0);
+    const O = typeof e.timeStamp == "number" && e.timeStamp > 0 ? e.timeStamp : performance.now(), u = b.add(a, O);
+    if (a <= K || a < (o.topRoom?.() ?? 0)) return l(!1, u);
+    if (s < 0) {
+      i = 0, c -= s, (c >= z || u <= -f.flick) && l(!1, u);
+      return;
+    }
+    if (c = 0, i += s, clearTimeout(d), d = setTimeout(() => {
+      r.value && S(t) && l(!1);
+    }, 150), r.value || i < W && u < f.flick || t.scrollHeight - t.clientHeight < o.room()) return;
+    const y = t.ownerDocument;
+    P(y) || l(t !== y.scrollingElement && o.overlay() ? "all" : "bottom", u);
+  }
+  function T(e) {
+    const t = w(e.target);
+    t && r.value && S(t) && l(!1);
+  }
+  function g(e) {
+    !r.value || !(e.target instanceof Element) || (D(e.target) || e.target.closest("[data-ui-mobile-navigation], [data-ui-tab-bar], [data-ui-fab-root]")) && l(!1);
+  }
+  let n;
+  A(() => {
+    n = o.column.value?.ownerDocument ?? document, n.addEventListener("scroll", h, { capture: !0, passive: !0 }), n.addEventListener("scrollend", T, { capture: !0, passive: !0 }), n.addEventListener("focusin", g, !0), m = n.defaultView?.innerWidth ?? 0, n.defaultView?.addEventListener("resize", k);
+  });
+  function _() {
+    l(!1);
+  }
+  let m = 0;
+  function k() {
+    const e = n?.defaultView?.innerWidth ?? 0;
+    e !== m && (m = e, _());
+  }
+  return V(() => {
+    clearTimeout(d), n?.removeEventListener("scroll", h, { capture: !0 }), n?.removeEventListener("scrollend", T, { capture: !0 }), n?.removeEventListener("focusin", g, !0), n?.defaultView?.removeEventListener("resize", k);
+  }), L([o.enabled, ...o.reset], _), L(o.blocked, (e) => {
+    e && (i = 0);
+  }), { hidden: r, velocity: E };
+}
+const M = /* @__PURE__ */ Symbol("syno-pkg-land-ui-keep-bars");
+export {
+  M as APP_KEEP_BARS_KEY,
+  W as HIDE_AFTER_PX,
+  z as SHOW_AFTER_PX,
+  I as useHideOnScroll
+};

package/dist/modules/components/app/app-layout/iconActionTitles.js

@@ -0,0 +1,31 @@
+import { watch as b, onBeforeUnmount as f } from "vue";
+const i = "data-ui-bar-title", l = (o) => !["primary", "danger"].includes(o.getAttribute("data-variant") ?? "") && [...o.children].some((r) => r.classList.contains("ui-button-label") && r.hasAttribute("data-lead"));
+function A(o) {
+  let r;
+  const c = (t) => t.querySelector(".ui-button-label")?.textContent?.trim() ?? "";
+  function u(t) {
+    for (const e of t.querySelectorAll("button[data-variant]")) {
+      if (!l(e)) {
+        s(e);
+        continue;
+      }
+      if (e.hasAttribute("title") && !e.hasAttribute(i)) continue;
+      const n = c(e);
+      n && (e.setAttribute("title", n), e.setAttribute(i, ""));
+    }
+  }
+  function s(t) {
+    if (t instanceof Element)
+      for (const e of [t, ...t.querySelectorAll(`[${i}]`)])
+        e.hasAttribute(i) && (e.removeAttribute("title"), e.removeAttribute(i));
+  }
+  b(o, (t) => {
+    r?.disconnect(), r = void 0, !(!t || typeof MutationObserver > "u") && (u(t), r = new MutationObserver((e) => {
+      for (const n of e) for (const a of n.removedNodes) (!a.isConnected || !t.contains(a)) && s(a);
+      u(t);
+    }), r.observe(t, { childList: !0, subtree: !0, characterData: !0, attributes: !0, attributeFilter: ["data-lead", "data-variant"] }));
+  }, { immediate: !0, flush: "post" }), f(() => r?.disconnect());
+}
+export {
+  A as useIconActionTitles
+};

package/dist/modules/components/app/app-layout/pageTitle.js

@@ -0,0 +1,62 @@
+import { shallowRef as c, inject as v, computed as i, watch as f, onBeforeUnmount as m } from "vue";
+const h = /* @__PURE__ */ Symbol("syno-pkg-land-ui-app-page-title");
+function g(r, s, e = {}) {
+  const t = c([]), l = e.actionUsers, n = (a) => () => {
+    if (!a) return () => {
+    };
+    a.value++;
+    let u = !1;
+    return () => {
+      u || (u = !0, a.value--);
+    };
+  };
+  return {
+    fab: e.fab,
+    placement: e.placement,
+    useFooterBar: n(e.footerBars),
+    useExplicitFab: n(e.explicitFabs),
+    main: r,
+    entries: t,
+    shows: (a) => t.value[t.value.length - 1] === a && (!!a.back && !!e.phone?.() || s(a.title())),
+    actions: e.actions ?? c(null),
+    useActions: n(l)
+  };
+}
+function p(r, s, e = {}) {
+  const t = v(h, null), l = { title: s, history: e.history }, n = c(!1), a = i(() => e.back?.());
+  function u() {
+    !t || !n.value || (t.entries.value = t.entries.value.filter((o) => o !== l), n.value = !1);
+  }
+  return f(
+    () => [r.value, e.when?.() ?? !0, !!a.value],
+    ([o, b]) => {
+      u(), !(!t || !o || !b || !t.main.value?.contains(o)) && (l.back = a.value ? () => a.value?.() : void 0, t.entries.value = [...t.entries.value, l], n.value = !0);
+    },
+    { flush: "post", immediate: !0 }
+  ), m(u), i(() => n.value && !!t?.shows(l));
+}
+function B(r, s) {
+  const e = v(h, null), t = i(() => {
+    const u = s?.();
+    return e?.placement ? e.placement(u) : u === "inline" ? "inline" : "bar";
+  }), l = i(() => !e || !r() || t.value === "inline" ? null : t.value === "fab" ? e.fab?.value ?? null : e.actions.value), n = i(() => !!l.value && l.value === e?.actions.value);
+  let a;
+  return f(n, (u) => {
+    u ? a ??= e?.useActions() : (a?.(), a = void 0);
+  }, { immediate: !0 }), m(() => a?.()), { target: l, placement: t };
+}
+function F(r, s) {
+  const e = v(h, null);
+  if (!e?.useFooterBar) return;
+  let t;
+  f(() => [r.value, s()], ([l, n]) => {
+    !!l && n && !!e.main.value?.contains(l) ? t ??= e.useFooterBar?.() : (t?.(), t = void 0);
+  }, { immediate: !0, flush: "post" }), m(() => t?.());
+}
+export {
+  h as APP_PAGE_TITLE_KEY,
+  g as createPageTitleHost,
+  F as useFooterBarClaim,
+  B as usePageActionsInBar,
+  p as usePageTitle
+};

package/dist/modules/components/app/app-layout/shellBack.js

@@ -0,0 +1,34 @@
+import { shallowRef as a, inject as f, computed as c, onMounted as i, watch as h, onBeforeUnmount as m } from "vue";
+const w = /* @__PURE__ */ Symbol("app-shell-back");
+function d(n) {
+  const e = /* @__PURE__ */ new Map(), t = a();
+  function r() {
+    let o;
+    for (const [s, u] of e) {
+      const l = u();
+      l?.isConnected && (!o || o.element.compareDocumentPosition(l) & Node.DOCUMENT_POSITION_PRECEDING) && (o = { key: s, element: l });
+    }
+    t.value !== o?.key && (t.value = o?.key);
+  }
+  return {
+    wanted: n,
+    owner: t,
+    refresh: r,
+    register(o, s) {
+      return e.set(o, s), () => {
+        e.delete(o), r();
+      };
+    }
+  };
+}
+function k(n) {
+  const e = f(w, null);
+  if (!e) return c(() => !1);
+  const t = /* @__PURE__ */ Symbol("shell-back-row"), r = e.register(t, n);
+  return i(e.refresh), h(n, e.refresh, { flush: "post" }), m(r), c(() => e.wanted.value && e.owner.value === t);
+}
+export {
+  w as APP_SHELL_BACK_KEY,
+  d as createShellBackHost,
+  k as useShellBackRow
+};

package/dist/modules/components/app/app-root/AppRoot.vue.js

@@ -0,0 +1,103 @@
+import { defineComponent as F, inject as N, provide as r, useAttrs as U, useTemplateRef as u, shallowReactive as V, computed as c, watchEffect as I, onMounted as $, onBeforeUnmount as M, watch as P, openBlock as y, createElementBlock as A, unref as l, normalizeStyle as D, createVNode as H, withCtx as W, Fragment as j, createElementVNode as E, renderSlot as k } from "vue";
+import { ConfigProvider_default as z } from "../../../vendor/reka-ui/dist/ConfigProvider/ConfigProvider.js";
+import { APP_ROOT_KEY as b, ModalScope as G, MODAL_SCOPE_KEY as q } from "../../../lib/localModal.js";
+import { APP_FOCUS_ROOT_KEY as J } from "../../../composables/focusOwner.js";
+import { APP_ROOT_WIDE_LAYOUT_KEY as Q, appPresentationForWidth as X, APP_PRESENTATION_KEY as Z } from "../../../lib/adaptiveLayout.js";
+import { accentStyle as ee } from "../../../lib/accent.js";
+import { useElementWidth as te } from "../../../composables/elementWidth.js";
+import { useFloatingHost as oe, FLOATING_HOST_KEY as ae, APP_PORTAL_KEY as re } from "../../../composables/floatingHost.js";
+import { useVisualViewport as le } from "../../../composables/visualViewport.js";
+import { useFieldReveal as ie } from "../../../composables/softKeyboard.js";
+import { ensureDeviceViewport as ne } from "../../../lib/deviceViewport.js";
+import { UI_LOCALE_KEY as pe, useUiLocale as de, toUiLocale as se } from "../../../i18n/locale.js";
+const ue = ["data-ui-presentation", "data-ui-modal-scope", "data-ui-accent", "data-ui-color-scheme", "data-ui-full-page", "tabindex"], ke = /* @__PURE__ */ F({
+  __name: "AppRoot",
+  props: {
+    modalScope: { default: "app" },
+    dialogBounds: { default: "app" },
+    accent: {},
+    colorScheme: { default: "light" },
+    locale: {},
+    fullPage: { type: Boolean, default: !1 }
+  },
+  emits: ["activate"],
+  setup(p, { emit: S }) {
+    const t = p, O = S, m = N(b, null);
+    if (m && (m === "app" || t.modalScope === "app")) throw new Error("Nested app-local AppRoots are unsupported");
+    r(b, t.modalScope);
+    const f = U();
+    r(pe, de(() => t.locale ?? se(typeof f.lang == "string" ? f.lang : void 0)));
+    const o = u("root");
+    r(J, o);
+    const R = te(o), d = V(/* @__PURE__ */ new Set());
+    r(Q, (e) => (d.add(e), () => {
+      d.delete(e);
+    }));
+    const L = c(() => t.fullPage || [...d].some((e) => e.value === "web") ? "web" : "window"), v = c(() => X(R.value, L.value));
+    r(Z, v);
+    const h = u("background"), s = u("portal"), a = t.modalScope, g = a === "app" ? new G(o, h) : null;
+    r(q, g);
+    const i = oe(o, a === "app" && t.dialogBounds === "viewport", () => O("activate"));
+    i && g?.region(i.element), r(ae, i), i && r(re, s);
+    const T = { position: "relative", isolation: "isolate", overflow: "hidden" }, Y = c(() => ({
+      ...a === "app" ? T : {},
+      ...t.accent ? ee(t.accent, { dark: t.colorScheme === "dark" }) : {}
+    })), x = le();
+    I(() => {
+      const e = o.value;
+      if (!e) return;
+      const { height: w, offsetTop: K, keyboardInset: C, keyboard: B } = x.value;
+      e.style.setProperty("--ui-vvh", `${w}px`), e.style.setProperty("--ui-vv-top", `${K}px`), e.style.setProperty("--ui-kb-inset", `${C}px`), B ? e.setAttribute("data-ui-keyboard", "open") : e.removeAttribute("data-ui-keyboard");
+    }, { flush: "post" }), ie(o);
+    const n = t.fullPage;
+    let _;
+    return $(() => {
+      n && (_ = ne(), document.documentElement.setAttribute("data-ui-page-shell", ""));
+    }), M(() => {
+      n && (_?.(), document.documentElement.removeAttribute("data-ui-page-shell"));
+    }), P(() => t.fullPage, (e) => {
+      if (e !== n) throw new Error("AppRoot full-page is fixed for the mounted root; remount to change it");
+    }), P(() => t.modalScope, (e) => {
+      if (e !== a) throw new Error("AppRoot modal-scope is fixed for the mounted root; remount to change it");
+    }), (e, w) => (y(), A("div", {
+      ref_key: "root",
+      ref: o,
+      "data-ui-app": "",
+      "data-syno-pkg-land-ui": "",
+      "data-ui-presentation": v.value,
+      "data-ui-modal-scope": l(a) === "app" ? "app" : void 0,
+      "data-ui-accent": p.accent ? "" : void 0,
+      "data-ui-color-scheme": p.colorScheme === "dark" ? "dark" : void 0,
+      "data-ui-full-page": l(n) ? "" : void 0,
+      style: D(Y.value),
+      tabindex: l(a) === "app" ? -1 : void 0
+    }, [
+      H(l(z), {
+        "teleport-to": (l(a) === "app" ? s.value : o.value) ?? void 0,
+        "scroll-body": !1
+      }, {
+        default: W(() => [
+          l(a) === "app" ? (y(), A(j, { key: 0 }, [
+            E("div", {
+              ref_key: "background",
+              ref: h,
+              "data-ui-background": "",
+              style: { height: "100%", overflow: "auto", "overscroll-behavior": "contain" }
+            }, [
+              k(e.$slots, "default")
+            ], 512),
+            E("div", {
+              ref_key: "portal",
+              ref: s,
+              "data-ui-portals": ""
+            }, null, 512)
+          ], 64)) : k(e.$slots, "default", {}, void 0, void 0, 1)
+        ]),
+        _: 3
+      }, 8, ["teleport-to"])
+    ], 12, ue));
+  }
+});
+export {
+  ke as default
+};

package/dist/modules/components/app/app-root/AppRoot2.vue.js

@@ -0,0 +1,4 @@
+import f from "./AppRoot.vue.js";
+export {
+  f as default
+};