@owocow/saber-ui 0.1.12 → 0.1.13

package/dist/SaberAppLayout.vue_vue_type_script_setup_true_lang-R7F5K7kj.js

@@ -0,0 +1,418 @@
+import Oe from "@nuxt/ui/components/Button.vue";
+import $e from "@nuxt/ui/components/Drawer.vue";
+import { getCurrentInstance as se, getCurrentScope as Be, hasInjectionContext as ue, inject as De, watch as z, shallowRef as T, watchEffect as Me, toValue as M, computed as u, onMounted as Le, unref as Ue, defineComponent as je, useSlots as Fe, useModel as te, ref as ae, useId as Ie, nextTick as ze, openBlock as x, createElementBlock as S, normalizeStyle as A, normalizeClass as d, renderSlot as h, normalizeProps as $, guardReactiveProps as B, Fragment as H, createCommentVNode as D, createVNode as G, withCtx as ne, createElementVNode as f, toDisplayString as oe, createBlock as Te, mergeModels as le } from "vue";
+import { tv as R } from "tailwind-variants";
+import { providePageHeader as Ne } from "./composables/use-page-header.mjs";
+import { _ as Ee } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
+const V = /* @__PURE__ */ new WeakMap(), Pe = /* @__NO_SIDE_EFFECTS__ */ (...t) => {
+  var r;
+  const e = t[0], l = (r = se()) === null || r === void 0 ? void 0 : r.proxy, n = l ?? Be();
+  if (n == null && !ue()) throw new Error("injectLocal must be called in setup");
+  return n && V.has(n) && e in V.get(n) ? V.get(n)[e] : De(...t);
+}, Ae = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const He = Object.prototype.toString, Ge = (t) => He.call(t) === "[object Object]";
+function ie(t) {
+  return t.endsWith("rem") ? Number.parseFloat(t) * 16 : Number.parseFloat(t);
+}
+function K(t) {
+  return Array.isArray(t) ? t : [t];
+}
+function Re(t, r, e) {
+  return z(t, r, {
+    ...e,
+    immediate: !0
+  });
+}
+const de = Ae ? window : void 0;
+function Ve(t) {
+  var r;
+  const e = M(t);
+  return (r = e == null ? void 0 : e.$el) !== null && r !== void 0 ? r : e;
+}
+function Ke(...t) {
+  const r = (l, n, c, o) => (l.addEventListener(n, c, o), () => l.removeEventListener(n, c, o)), e = u(() => {
+    const l = K(M(t[0])).filter((n) => n != null);
+    return l.every((n) => typeof n != "string") ? l : void 0;
+  });
+  return Re(() => {
+    var l, n;
+    return [
+      (l = (n = e.value) === null || n === void 0 ? void 0 : n.map((c) => Ve(c))) !== null && l !== void 0 ? l : [de].filter((c) => c != null),
+      K(M(e.value ? t[1] : t[0])),
+      K(Ue(e.value ? t[2] : t[1])),
+      M(e.value ? t[3] : t[2])
+    ];
+  }, ([l, n, c, o], b, L) => {
+    if (!(l != null && l.length) || !(n != null && n.length) || !(c != null && c.length)) return;
+    const k = Ge(o) ? { ...o } : o, p = l.flatMap((g) => n.flatMap((i) => c.map((w) => r(g, i, w, k))));
+    L(() => {
+      p.forEach((g) => g());
+    });
+  }, { flush: "post" });
+}
+// @__NO_SIDE_EFFECTS__
+function Qe() {
+  const t = T(!1), r = se();
+  return r && Le(() => {
+    t.value = !0;
+  }, r), t;
+}
+// @__NO_SIDE_EFFECTS__
+function Je(t) {
+  const r = /* @__PURE__ */ Qe();
+  return u(() => (r.value, !!t()));
+}
+const Xe = Symbol("vueuse-ssr-width");
+// @__NO_SIDE_EFFECTS__
+function Ye() {
+  const t = ue() ? /* @__PURE__ */ Pe(Xe, null) : null;
+  return typeof t == "number" ? t : void 0;
+}
+function re(t, r = {}) {
+  const { window: e = de, ssrWidth: l = /* @__PURE__ */ Ye() } = r, n = /* @__PURE__ */ Je(() => e && "matchMedia" in e && typeof e.matchMedia == "function"), c = T(typeof l == "number"), o = T(), b = T(!1), L = (k) => {
+    b.value = k.matches;
+  };
+  return Me(() => {
+    if (c.value) {
+      c.value = !n.value;
+      const k = M(t).split(",");
+      b.value = k.some((p) => {
+        const g = p.includes("not all"), i = p.match(/\(\s*min-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/), w = p.match(/\(\s*max-width:\s*(-?\d+(?:\.\d*)?[a-z]+\s*)\)/);
+        let y = !!(i || w);
+        return i && y && (y = l >= ie(i[1])), w && y && (y = l <= ie(w[1])), g ? !y : y;
+      });
+      return;
+    }
+    n.value && (o.value = e.matchMedia(M(t)), b.value = o.value.matches);
+  }), Ke(o, "change", L, { passive: !0 }), u(() => b.value);
+}
+const nt = /* @__PURE__ */ je({
+  name: "SaberAppLayout",
+  __name: "SaberAppLayout",
+  props: /* @__PURE__ */ le({
+    title: { default: void 0 },
+    description: { default: void 0 },
+    maxWidth: { type: [Number, String, Boolean], default: void 0 },
+    navigationKey: { default: void 0 },
+    sidebarWidth: { default: 240 },
+    phoneBreakpoint: { default: 768 },
+    padBreakpoint: { default: 1024 },
+    searchGroups: { default: () => [] },
+    searchShortcut: { default: "meta_k" },
+    searchLabel: { default: "搜索" },
+    menuOpenLabel: { default: "菜单" },
+    menuCloseLabel: { default: "关闭" },
+    menuOpenIcon: { default: "solar:hamburger-menu-linear" },
+    menuCloseIcon: { default: "solar:close-circle-linear" },
+    ui: { default: () => ({}) }
+  }, {
+    drawerOpen: { type: Boolean, default: !1 },
+    drawerOpenModifiers: {},
+    searchOpen: { type: Boolean, default: !1 },
+    searchOpenModifiers: {}
+  }),
+  emits: /* @__PURE__ */ le(["searchSelect"], ["update:drawerOpen", "update:searchOpen"]),
+  setup(t, { emit: r }) {
+    const e = t, l = r, n = Fe(), c = R({
+      slots: {
+        root: "flex h-dvh items-start gap-2 overflow-hidden p-1.5 text-default",
+        desktopSidebar: "sticky top-0 h-full shrink-0 self-start",
+        main: "relative flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-y-auto rounded-lg border border-default bg-default",
+        header: "sticky top-0 z-10 mx-auto flex w-full shrink-0 items-center justify-between gap-4 overflow-hidden bg-default/70 backdrop-blur-md",
+        headerHeading: "min-w-0",
+        title: "truncate text-xl",
+        description: "mt-1 text-sm text-muted",
+        headerSuffix: "flex shrink-0 items-center gap-2",
+        pageHeaderSuffixTarget: "contents",
+        content: "mx-auto w-full flex-1",
+        phoneDrawerContent: "h-full min-h-0 w-full min-w-0 p-2",
+        phoneSidebarFrame: "h-full min-h-0 w-full",
+        padDrawerContent: "h-full min-h-0 w-full min-w-0 p-2",
+        padSidebarFrame: "mx-auto h-full min-h-0",
+        overlay: "fixed inset-0 z-40 border-0 bg-black/35 p-0 backdrop-blur-[1px]",
+        dock: "fixed bottom-[calc(0.75rem+env(safe-area-inset-bottom))] left-1/2 z-60 flex w-42 -translate-x-1/2 items-center gap-1 rounded-2xl border border-default bg-default/95 p-1 shadow-lg backdrop-blur-md"
+      },
+      variants: {
+        mode: {
+          phone: {
+            root: "p-1.5",
+            header: "p-4",
+            title: "text-xl",
+            content: "px-3 pb-[calc(6rem+env(safe-area-inset-bottom))]"
+          },
+          pad: {
+            root: "p-1.5",
+            header: "p-4",
+            title: "text-2xl",
+            content: "px-4 pb-[calc(6rem+env(safe-area-inset-bottom))]"
+          },
+          desktop: {
+            root: "p-2",
+            header: "px-6 py-4.5 min-[1441px]:px-8 min-[1441px]:py-6",
+            title: "text-2xl",
+            content: "px-6 pb-0 min-[1441px]:px-8"
+          }
+        }
+      }
+    }), o = te(t, "drawerOpen"), b = te(t, "searchOpen"), L = re(`(max-width: ${e.phoneBreakpoint}px)`), k = re(`(max-width: ${e.padBreakpoint}px)`), p = u(() => L.value ? "phone" : k.value ? "pad" : "desktop"), g = u(() => p.value !== "desktop"), i = u(() => c({ mode: p.value })), w = ae(null), y = Ne(w), N = u(() => y.title ?? e.title), E = u(() => y.description ?? e.description), Q = u(() => {
+      if (typeof e.maxWidth == "number")
+        return Number.isFinite(e.maxWidth) && e.maxWidth > 0 ? `${e.maxWidth}px` : void 0;
+      if (!(e.maxWidth === "full" || e.maxWidth === !1 || e.maxWidth === void 0))
+        return e.maxWidth.trim() || void 0;
+    }), ce = u(
+      () => e.maxWidth === void 0 || typeof e.maxWidth == "number" && (!Number.isFinite(e.maxWidth) || e.maxWidth <= 0)
+    ), J = u(
+      () => Q.value ? { maxWidth: Q.value } : void 0
+    ), X = u(() => ce.value ? "min-[1921px]:max-w-[1620px]" : void 0), pe = u(() => typeof e.sidebarWidth == "number" ? Number.isFinite(e.sidebarWidth) && e.sidebarWidth > 0 ? `${e.sidebarWidth}px` : "240px" : e.sidebarWidth.trim() || "240px"), fe = u(() => ({ "--saber-app-layout-sidebar-width": pe.value })), me = { width: "var(--saber-app-layout-sidebar-width)" }, ve = { width: "var(--saber-app-layout-sidebar-width)" }, P = `saber-app-layout-navigation-${Ie().replaceAll(":", "")}`, Y = ae(null);
+    function F(a) {
+      return typeof a == "object" && a !== null && !Array.isArray(a);
+    }
+    function he(a) {
+      return F(a) && Object.values(a).every((s) => typeof s == "boolean");
+    }
+    function be(a) {
+      return typeof a == "function";
+    }
+    function ye(a, s) {
+      return s === void 0 ? a : be(s) ? (m) => s(R({ base: m })({ class: a })) : R({ base: a })({ class: s });
+    }
+    function U(a, s) {
+      const m = {}, O = /* @__PURE__ */ new Set([...Object.keys(a), ...Object.keys(s ?? {})]);
+      for (const v of O) {
+        const j = a[v], I = s == null ? void 0 : s[v], _ = F(I) && !he(I);
+        if (F(j) || j === void 0 && _)
+          m[v] = U(
+            F(j) ? j : {},
+            _ ? I : void 0
+          );
+        else {
+          const ee = ye(j, I);
+          ee !== void 0 && (m[v] = ee);
+        }
+      }
+      return m;
+    }
+    const xe = {
+      root: "mb-0 min-w-0 flex-1",
+      button: {
+        base: "h-10 w-20 rounded-full border-0 bg-transparent px-3 shadow-none",
+        trailing: "hidden",
+        label: "text-(--ui-text) text-sm",
+        leadingIcon: "text-(--ui-text)"
+      }
+    }, ge = {
+      base: "h-10 shrink-0 rounded-full px-3 font-normal"
+    }, we = u(
+      () => U(
+        { content: "z-50 h-[calc(100dvh-4rem)] max-h-none rounded-t-lg bg-default" },
+        e.ui.phoneDrawer
+      )
+    ), Se = u(
+      () => U(
+        { content: "z-50 h-dvh max-w-none rounded-r-lg bg-default" },
+        e.ui.padDrawer
+      )
+    ), ke = u(
+      () => U(xe, e.ui.search)
+    ), We = u(
+      () => U(ge, e.ui.menuButton)
+    );
+    function Z() {
+      g.value && (o.value = !0);
+    }
+    function W() {
+      o.value = !1;
+    }
+    function q() {
+      o.value ? W() : Z();
+    }
+    function Ce(a) {
+      l("searchSelect", a), b.value = !1, W();
+    }
+    z(() => e.navigationKey, W), z(p, W), z(o, async (a, s) => {
+      var m, O;
+      a || !s || (await ze(), (O = (m = Y.value) == null ? void 0 : m.$el) == null || O.focus());
+    });
+    const C = u(() => ({
+      mode: p.value,
+      drawerOpen: o.value,
+      openDrawer: Z,
+      closeDrawer: W,
+      toggleDrawer: q
+    }));
+    return (a, s) => {
+      const m = $e, O = Oe;
+      return x(), S("div", {
+        "data-testid": "app-layout",
+        class: d(i.value.root({ class: e.ui.root })),
+        style: A(fe.value)
+      }, [
+        p.value === "desktop" ? (x(), S("aside", {
+          key: 0,
+          "data-testid": "desktop-sidebar",
+          class: d(i.value.desktopSidebar({ class: e.ui.desktopSidebar })),
+          style: me
+        }, [
+          h(a.$slots, "sidebar", $(B(C.value)))
+        ], 2)) : p.value === "phone" ? (x(), S(H, { key: 1 }, [
+          o.value ? (x(), S("button", {
+            key: 0,
+            "data-testid": "compact-nav-overlay",
+            type: "button",
+            tabindex: "-1",
+            "aria-label": "关闭导航",
+            class: d(i.value.overlay({ class: e.ui.overlay })),
+            onClick: W
+          }, null, 2)) : D("", !0),
+          G(m, {
+            open: o.value,
+            "onUpdate:open": s[0] || (s[0] = (v) => o.value = v),
+            direction: "bottom",
+            modal: !1,
+            overlay: !1,
+            handle: !0,
+            title: t.menuOpenLabel,
+            ui: we.value
+          }, {
+            content: ne(() => [
+              f("div", {
+                id: P,
+                "data-testid": "phone-drawer-content",
+                class: d(i.value.phoneDrawerContent({ class: e.ui.phoneDrawerContent }))
+              }, [
+                f("div", {
+                  "data-testid": "phone-sidebar-frame",
+                  class: d(i.value.phoneSidebarFrame({ class: e.ui.phoneSidebarFrame }))
+                }, [
+                  n["phone-sidebar"] ? h(a.$slots, "phone-sidebar", $(B(C.value)), void 0, void 0, 0) : h(a.$slots, "sidebar", $(B(C.value)), void 0, void 0, 1)
+                ], 2)
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["open", "title", "ui"])
+        ], 64)) : (x(), S(H, { key: 2 }, [
+          o.value ? (x(), S("button", {
+            key: 0,
+            "data-testid": "compact-nav-overlay",
+            type: "button",
+            tabindex: "-1",
+            "aria-label": "关闭导航",
+            class: d(i.value.overlay({ class: e.ui.overlay })),
+            onClick: W
+          }, null, 2)) : D("", !0),
+          G(m, {
+            open: o.value,
+            "onUpdate:open": s[1] || (s[1] = (v) => o.value = v),
+            direction: "left",
+            modal: !1,
+            overlay: !1,
+            handle: !1,
+            title: t.menuOpenLabel,
+            ui: Se.value
+          }, {
+            content: ne(() => [
+              f("div", {
+                id: P,
+                "data-testid": "pad-drawer-content",
+                class: d(i.value.padDrawerContent({ class: e.ui.padDrawerContent }))
+              }, [
+                f("div", {
+                  "data-testid": "pad-sidebar-frame",
+                  class: d(i.value.padSidebarFrame({ class: e.ui.padSidebarFrame })),
+                  style: ve
+                }, [
+                  n["pad-sidebar"] ? h(a.$slots, "pad-sidebar", $(B(C.value)), void 0, void 0, 0) : h(a.$slots, "sidebar", $(B(C.value)), void 0, void 0, 1)
+                ], 2)
+              ], 2)
+            ]),
+            _: 3
+          }, 8, ["open", "title", "ui"])
+        ], 64)),
+        f("main", {
+          "data-testid": "app-layout-main",
+          class: d(i.value.main({ class: e.ui.main }))
+        }, [
+          f("header", {
+            "data-testid": "app-layout-header",
+            class: d([i.value.header({ class: e.ui.header }), X.value]),
+            style: A(J.value)
+          }, [
+            f("div", {
+              "data-testid": "app-layout-header-heading",
+              class: d(i.value.headerHeading({ class: e.ui.headerHeading }))
+            }, [
+              N.value ? h(a.$slots, "header-title", { title: N.value }, () => [
+                f("h1", {
+                  "data-testid": "app-layout-title",
+                  class: d(i.value.title({ class: e.ui.title }))
+                }, oe(N.value), 3)
+              ], void 0, 0) : D("", !0),
+              E.value ? h(a.$slots, "header-description", { description: E.value }, () => [
+                f("p", {
+                  "data-testid": "app-layout-description",
+                  class: d(i.value.description({ class: e.ui.description }))
+                }, oe(E.value), 3)
+              ], void 0, 1) : D("", !0)
+            ], 2),
+            f("div", {
+              "data-testid": "app-layout-header-suffix",
+              class: d(i.value.headerSuffix({ class: e.ui.headerSuffix }))
+            }, [
+              h(a.$slots, "header-suffix"),
+              f("div", {
+                ref_key: "suffixTarget",
+                ref: w,
+                "data-testid": "app-layout-suffix-target",
+                class: d(i.value.pageHeaderSuffixTarget({ class: e.ui.pageHeaderSuffixTarget }))
+              }, null, 2)
+            ], 2)
+          ], 6),
+          f("div", {
+            "data-testid": "app-layout-content",
+            class: d([i.value.content({ class: e.ui.content }), X.value]),
+            style: A(J.value)
+          }, [
+            h(a.$slots, "default")
+          ], 6)
+        ], 2),
+        g.value ? (x(), S("div", {
+          key: 3,
+          "data-testid": "compact-nav-dock",
+          class: d(i.value.dock({ class: e.ui.dock }))
+        }, [
+          n.dock ? h(a.$slots, "dock", $(B(C.value)), void 0, void 0, 0) : (x(), S(H, { key: 1 }, [
+            t.searchGroups.length ? (x(), Te(Ee, {
+              key: 0,
+              open: b.value,
+              "onUpdate:open": s[2] || (s[2] = (v) => b.value = v),
+              groups: t.searchGroups,
+              label: t.searchLabel,
+              shortcut: t.searchShortcut,
+              kbds: [],
+              ui: ke.value,
+              onSelect: Ce
+            }, null, 8, ["open", "groups", "label", "shortcut", "ui"])) : D("", !0),
+            G(O, {
+              ref_key: "menuButton",
+              ref: Y,
+              "data-testid": "compact-menu-button",
+              color: "neutral",
+              variant: "ghost",
+              icon: o.value ? t.menuCloseIcon : t.menuOpenIcon,
+              label: o.value ? t.menuCloseLabel : t.menuOpenLabel,
+              "aria-controls": P,
+              "aria-expanded": o.value,
+              "aria-haspopup": "dialog",
+              ui: We.value,
+              onClick: q
+            }, null, 8, ["icon", "label", "aria-expanded", "ui"])
+          ], 64))
+        ], 2)) : D("", !0)
+      ], 6);
+    };
+  }
+});
+export {
+  nt as _
+};

package/dist/{SaberAppSidebar.vue_vue_type_script_setup_true_lang-HXyIXiau.js → SaberAppSidebar.vue_vue_type_script_setup_true_lang-Cwuj9VNi.js}

@@ -1,12 +1,12 @@
-import le from "@nuxt/ui/components/Button.vue";
+import oe from "@nuxt/ui/components/Button.vue";
 import ne from "@nuxt/ui/runtime/vue/components/Icon.vue";
-import { defineComponent as ie, useModel as oe, ref as ce, computed as W, openBlock as c, createElementBlock as g, normalizeClass as s, unref as l, createElementVNode as h, renderSlot as M, createBlock as _, withCtx as C, normalizeProps as re, guardReactiveProps as ue, createCommentVNode as A, createVNode as G, Transition as de, toDisplayString as K, Fragment as H, renderList as N, mergeModels as X } from "vue";
-import { tv as me } from "tailwind-variants";
-import { _ as ve } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
+import { defineComponent as ie, useModel as ce, ref as re, computed as X, openBlock as c, createElementBlock as x, normalizeClass as s, unref as l, createElementVNode as h, renderSlot as T, createBlock as w, withCtx as $, normalizeProps as ue, guardReactiveProps as de, createCommentVNode as _, createVNode as G, Transition as me, toDisplayString as K, Fragment as H, renderList as N, mergeModels as Y } from "vue";
+import { tv as ve } from "tailwind-variants";
+import { _ as fe } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
 const xe = /* @__PURE__ */ ie({
   name: "SaberAppSidebar",
   __name: "SaberAppSidebar",
-  props: /* @__PURE__ */ X({
+  props: /* @__PURE__ */ Y({
     sections: {},
     searchGroups: { default: () => [] },
     activeKey: {},
@@ -16,9 +16,9 @@ const xe = /* @__PURE__ */ ie({
     activeSection: { default: void 0 },
     activeSectionModifiers: {}
   }),
-  emits: /* @__PURE__ */ X(["select", "section-select"], ["update:activeSection"]),
-  setup(V, { emit: Y }) {
-    const e = V, $ = Y, F = oe(V, "activeSection"), T = ce(!1), w = W(() => e.sections.find((t) => t.key === F.value)), a = me({
+  emits: /* @__PURE__ */ Y(["select", "section-select"], ["update:activeSection"]),
+  setup(V, { emit: Z }) {
+    const e = V, A = Z, E = ce(V, "activeSection"), F = re(!1), B = X(() => e.sections.find((t) => t.key === E.value)), a = ve({
       slots: {
         root: "flex h-full min-h-0 flex-col overflow-hidden",
         header: "shrink-0",
@@ -26,6 +26,7 @@ const xe = /* @__PURE__ */ ie({
         viewport: "min-h-0 flex-1 overflow-y-auto",
         panel: "flex min-h-full flex-col gap-1.5",
         sectionList: "flex flex-col",
+        rootFooter: "shrink-0",
         group: "flex flex-col",
         groupLabel: "px-2 py-2 text-[11px] uppercase tracking-wider text-muted/70",
         childList: "flex flex-col",
@@ -35,62 +36,62 @@ const xe = /* @__PURE__ */ ie({
         sectionItemLeadingIcon: "size-4.5 shrink-0",
         sectionItemLabel: "min-w-0 flex-1 truncate text-left",
         sectionItemTrailingIcon: "size-4 shrink-0",
-        childItem: "flex w-full items-center rounded-md px-2 py-1.5 font-normal text-sm mb-0.5 gap-2 text-left transition",
+        childItem: "flex w-full items-center rounded-md px-2 py-2 font-normal text-sm mb-0.5 gap-2 text-left transition",
         childItemLeadingIcon: "size-4 shrink-0",
         childItemLabel: "min-w-0 flex-1 truncate text-left",
-        backButton: "flex w-full items-center rounded-md px-2 py-2 gap-2 text-left transition",
-        backButtonIcon: "size-4.5 shrink-0",
-        backButtonLabel: "truncate text-sm font-medium flex-1 text-center pr-10"
+        backButton: "flex w-full items-center rounded-md h-9 px-2 gap-2 text-left transition ",
+        backButtonIcon: "size-4 shrink-0",
+        backButtonLabel: "truncate text-sm font-normal flex-1 text-center"
       }
-    })(), z = W(() => {
-      var t, i, o, r, u, d, m, v, f, p, b, B;
+    })(), z = X(() => {
+      var t, o, i, r, u, d, m, v, f, p, b, S;
       return {
-        enterActive: ((i = (t = e.ui) == null ? void 0 : t.transition) == null ? void 0 : i.enterActive) ?? "transition duration-200 ease-out",
-        leaveActive: ((r = (o = e.ui) == null ? void 0 : o.transition) == null ? void 0 : r.leaveActive) ?? "transition duration-200 ease-out pointer-events-none",
-        enterFrom: T.value ? ((d = (u = e.ui) == null ? void 0 : u.transition) == null ? void 0 : d.backwardEnterFrom) ?? "-translate-x-2 opacity-0 blur-[2px]" : ((v = (m = e.ui) == null ? void 0 : m.transition) == null ? void 0 : v.forwardEnterFrom) ?? "translate-x-2 opacity-0 blur-[2px]",
-        leaveTo: T.value ? ((p = (f = e.ui) == null ? void 0 : f.transition) == null ? void 0 : p.backwardLeaveTo) ?? "translate-x-2 opacity-0 blur-[2px]" : ((B = (b = e.ui) == null ? void 0 : b.transition) == null ? void 0 : B.forwardLeaveTo) ?? "-translate-x-2 opacity-0 blur-[2px]"
+        enterActive: ((o = (t = e.ui) == null ? void 0 : t.transition) == null ? void 0 : o.enterActive) ?? "transition duration-100 ease-out",
+        leaveActive: ((r = (i = e.ui) == null ? void 0 : i.transition) == null ? void 0 : r.leaveActive) ?? "transition duration-100 ease-out pointer-events-none",
+        enterFrom: F.value ? ((d = (u = e.ui) == null ? void 0 : u.transition) == null ? void 0 : d.backwardEnterFrom) ?? "-translate-x-2 opacity-0 blur-[2px]" : ((v = (m = e.ui) == null ? void 0 : m.transition) == null ? void 0 : v.forwardEnterFrom) ?? "translate-x-2 opacity-0 blur-[2px]",
+        leaveTo: F.value ? ((p = (f = e.ui) == null ? void 0 : f.transition) == null ? void 0 : p.backwardLeaveTo) ?? "translate-x-2 opacity-0 blur-[2px]" : ((S = (b = e.ui) == null ? void 0 : b.transition) == null ? void 0 : S.forwardLeaveTo) ?? "-translate-x-2 opacity-0 blur-[2px]"
       };
     });
-    function E(t) {
-      return t.groups.flatMap((i) => i.items);
+    function M(t) {
+      return t.groups.flatMap((o) => o.items);
     }
     function P(t) {
-      return E(t).some((i) => i.key === e.activeKey);
-    }
-    function Z(t) {
-      var o, r, u, d, m, v, f, p;
-      const i = P(t) ? ["font-medium", (r = (o = e.ui) == null ? void 0 : o.sectionItem) == null ? void 0 : r.active] : ["text-default", (d = (u = e.ui) == null ? void 0 : u.sectionItem) == null ? void 0 : d.inactive];
-      return a.sectionItem({ class: [(v = (m = e.ui) == null ? void 0 : m.sectionItem) == null ? void 0 : v.base, i, (p = (f = e.ui) == null ? void 0 : f.sectionItem) == null ? void 0 : p.hover] });
+      return M(t).some((o) => o.key === e.activeKey);
     }
     function ee(t) {
-      var o, r, u, d, m, v, f, p;
-      const i = t.key === e.activeKey ? ["font-medium", (r = (o = e.ui) == null ? void 0 : o.childItem) == null ? void 0 : r.active] : ["text-default", (d = (u = e.ui) == null ? void 0 : u.childItem) == null ? void 0 : d.inactive];
-      return a.childItem({ class: [(v = (m = e.ui) == null ? void 0 : m.childItem) == null ? void 0 : v.base, i, (p = (f = e.ui) == null ? void 0 : f.childItem) == null ? void 0 : p.hover] });
+      var i, r, u, d, m, v, f, p;
+      const o = P(t) ? ["font-medium", (r = (i = e.ui) == null ? void 0 : i.sectionItem) == null ? void 0 : r.active] : ["text-default", (d = (u = e.ui) == null ? void 0 : u.sectionItem) == null ? void 0 : d.inactive];
+      return a.sectionItem({ class: [(v = (m = e.ui) == null ? void 0 : m.sectionItem) == null ? void 0 : v.base, o, (p = (f = e.ui) == null ? void 0 : f.sectionItem) == null ? void 0 : p.hover] });
     }
     function te(t) {
-      var o;
-      const i = E(t);
-      if (i.length === 1) {
-        $("select", {
+      var i, r, u, d, m, v, f, p;
+      const o = t.key === e.activeKey ? ["font-medium", (r = (i = e.ui) == null ? void 0 : i.childItem) == null ? void 0 : r.active] : ["text-default", (d = (u = e.ui) == null ? void 0 : u.childItem) == null ? void 0 : d.inactive];
+      return a.childItem({ class: [(v = (m = e.ui) == null ? void 0 : m.childItem) == null ? void 0 : v.base, o, (p = (f = e.ui) == null ? void 0 : f.childItem) == null ? void 0 : p.hover] });
+    }
+    function ae(t) {
+      var i;
+      const o = M(t);
+      if (o.length === 1) {
+        A("select", {
           source: "direct",
-          item: i[0],
+          item: o[0],
           sectionKey: t.key,
-          groupKey: (o = t.groups[0]) == null ? void 0 : o.key
+          groupKey: (i = t.groups[0]) == null ? void 0 : i.key
         });
         return;
       }
-      T.value = !1, F.value = t.key, $("section-select", t);
+      F.value = !1, E.value = t.key, A("section-select", t);
     }
-    function ae() {
-      T.value = !0, F.value = void 0;
+    function se() {
+      F.value = !0, E.value = void 0;
     }
-    function se(t, i, o) {
-      $("select", { source: "item", item: t, sectionKey: i, groupKey: o });
+    function le(t, o, i) {
+      A("select", { source: "item", item: t, sectionKey: o, groupKey: i });
     }
-    return (t, i) => {
+    return (t, o) => {
       var u, d, m, v, f, p;
-      const o = ne, r = le;
-      return c(), g("aside", {
+      const i = ne, r = oe;
+      return c(), x("aside", {
         class: s(l(a).root({ class: (u = e.ui) == null ? void 0 : u.root }))
       }, [
         h("header", {
@@ -99,95 +100,96 @@ const xe = /* @__PURE__ */ ie({
           h("div", {
             class: s(l(a).logo({ class: (m = e.ui) == null ? void 0 : m.logo }))
           }, [
-            M(t.$slots, "logo")
+            T(t.$slots, "logo")
           ], 2),
-          e.searchGroups.length ? (c(), _(ve, {
+          e.searchGroups.length ? (c(), w(fe, {
             key: 0,
             groups: e.searchGroups,
             shortcut: e.shortcut,
             ui: (v = e.ui) == null ? void 0 : v.search,
-            onSelect: i[0] || (i[0] = (b) => $("select", b))
+            onSelect: o[0] || (o[0] = (b) => A("select", b))
           }, {
-            empty: C((b) => [
-              M(t.$slots, "search-empty", re(ue(b)))
+            empty: $((b) => [
+              T(t.$slots, "search-empty", ue(de(b)))
             ]),
             _: 3
-          }, 8, ["groups", "shortcut", "ui"])) : A("", !0)
+          }, 8, ["groups", "shortcut", "ui"])) : _("", !0)
         ], 2),
         h("nav", {
           class: s(l(a).viewport({ class: (f = e.ui) == null ? void 0 : f.viewport }))
         }, [
-          G(de, {
+          G(me, {
             mode: "out-in",
             "enter-active-class": z.value.enterActive,
             "leave-active-class": z.value.leaveActive,
             "enter-from-class": z.value.enterFrom,
             "leave-to-class": z.value.leaveTo
           }, {
-            default: C(() => {
-              var b, B, U, D, R, j, q, J;
+            default: $(() => {
+              var b, S, U, D, R, j, q, J, O;
               return [
-                w.value ? (c(), g("div", {
-                  key: w.value.key,
+                B.value ? (c(), x("div", {
+                  key: B.value.key,
                   class: s(l(a).panel({ class: (b = e.ui) == null ? void 0 : b.panel }))
                 }, [
                   h("div", {
-                    class: s(l(a).nestedHeader({ class: (B = e.ui) == null ? void 0 : B.nestedHeader }))
+                    class: s(l(a).nestedHeader({ class: (S = e.ui) == null ? void 0 : S.nestedHeader }))
                   }, [
                     G(r, {
                       "data-testid": "back-button",
                       color: "neutral",
                       variant: "ghost",
                       class: s(l(a).backButton({ class: [(D = (U = e.ui) == null ? void 0 : U.backButton) == null ? void 0 : D.base, (j = (R = e.ui) == null ? void 0 : R.backButton) == null ? void 0 : j.hover] })),
-                      onClick: ae
+                      onClick: se
                     }, {
-                      default: C(() => {
-                        var n, x, y, I;
+                      default: $(() => {
+                        var n, y, I, g;
                         return [
-                          G(o, {
+                          G(i, {
                             name: "solar:alt-arrow-left-linear",
-                            class: s(l(a).backButtonIcon({ class: (x = (n = e.ui) == null ? void 0 : n.backButton) == null ? void 0 : x.icon }))
+                            class: s(l(a).backButtonIcon({ class: (y = (n = e.ui) == null ? void 0 : n.backButton) == null ? void 0 : y.icon }))
                           }, null, 8, ["class"]),
                           h("span", {
-                            class: s(l(a).backButtonLabel({ class: (I = (y = e.ui) == null ? void 0 : y.backButton) == null ? void 0 : I.label }))
-                          }, K(w.value.label), 3)
+                            class: s(l(a).backButtonLabel({ class: (g = (I = e.ui) == null ? void 0 : I.backButton) == null ? void 0 : g.label }))
+                          }, K(B.value.label), 3),
+                          o[1] || (o[1] = h("span", { class: "size-4.5 shrink-0" }, null, -1))
                         ];
                       }),
                       _: 1
                     }, 8, ["class"])
                   ], 2),
-                  (c(!0), g(H, null, N(w.value.groups, (n) => {
-                    var x, y, I;
-                    return c(), g("div", {
+                  (c(!0), x(H, null, N(B.value.groups, (n) => {
+                    var y, I, g;
+                    return c(), x("div", {
                       key: n.key,
-                      class: s(l(a).group({ class: (x = e.ui) == null ? void 0 : x.group }))
+                      class: s(l(a).group({ class: (y = e.ui) == null ? void 0 : y.group }))
                     }, [
-                      n.label ? (c(), g("p", {
+                      n.label ? (c(), x("p", {
                         key: 0,
-                        class: s(l(a).groupLabel({ class: (y = e.ui) == null ? void 0 : y.groupLabel }))
-                      }, K(n.label), 3)) : A("", !0),
+                        class: s(l(a).groupLabel({ class: (I = e.ui) == null ? void 0 : I.groupLabel }))
+                      }, K(n.label), 3)) : _("", !0),
                       h("div", {
-                        class: s(l(a).childList({ class: (I = e.ui) == null ? void 0 : I.childList }))
+                        class: s(l(a).childList({ class: (g = e.ui) == null ? void 0 : g.childList }))
                       }, [
-                        (c(!0), g(H, null, N(n.items, (k) => (c(), _(r, {
+                        (c(!0), x(H, null, N(n.items, (k) => (c(), w(r, {
                           key: k.key,
                           "data-testid": `item-${k.key}`,
                           "data-active": k.key === e.activeKey,
                           color: "neutral",
                           variant: "ghost",
-                          class: s(ee(k)),
-                          onClick: (L) => se(k, w.value.key, n.key)
+                          class: s(te(k)),
+                          onClick: (L) => le(k, B.value.key, n.key)
                         }, {
-                          default: C(() => {
-                            var L, S, O, Q;
+                          default: $(() => {
+                            var L, C, Q, W;
                             return [
-                              k.icon ? (c(), _(o, {
+                              k.icon ? (c(), w(i, {
                                 key: 0,
                                 name: k.icon,
-                                class: s(l(a).childItemLeadingIcon({ class: (S = (L = e.ui) == null ? void 0 : L.childItem) == null ? void 0 : S.leadingIcon }))
-                              }, null, 8, ["name", "class"])) : A("", !0),
+                                class: s(l(a).childItemLeadingIcon({ class: (C = (L = e.ui) == null ? void 0 : L.childItem) == null ? void 0 : C.leadingIcon }))
+                              }, null, 8, ["name", "class"])) : _("", !0),
                               h("span", {
-                                class: s(l(a).childItemLabel({ class: (Q = (O = e.ui) == null ? void 0 : O.childItem) == null ? void 0 : Q.label }))
+                                class: s(l(a).childItemLabel({ class: (W = (Q = e.ui) == null ? void 0 : Q.childItem) == null ? void 0 : W.label }))
                               }, K(k.label), 3)
                             ];
                           }),
@@ -196,54 +198,61 @@ const xe = /* @__PURE__ */ ie({
                       ], 2)
                     ], 2);
                   }), 128))
-                ], 2)) : (c(), g("div", {
+                ], 2)) : (c(), x("div", {
                   key: "root",
                   class: s(l(a).panel({ class: (q = e.ui) == null ? void 0 : q.panel }))
                 }, [
                   h("div", {
                     class: s(l(a).sectionList({ class: (J = e.ui) == null ? void 0 : J.sectionList }))
                   }, [
-                    (c(!0), g(H, null, N(e.sections, (n) => (c(), _(r, {
+                    (c(!0), x(H, null, N(e.sections, (n) => (c(), w(r, {
                       key: n.key,
                       "data-testid": `section-${n.key}`,
                       "data-section": n.key,
                       "data-active": P(n),
                       color: "neutral",
                       variant: "ghost",
-                      class: s(Z(n)),
-                      onClick: (x) => te(n)
+                      class: s(ee(n)),
+                      onClick: (y) => ae(n)
                     }, {
-                      default: C(() => {
-                        var x, y, I, k, L, S;
+                      default: $(() => {
+                        var y, I, g, k, L, C;
                         return [
-                          n.icon ? (c(), _(o, {
+                          n.icon ? (c(), w(i, {
                             key: 0,
                             name: n.icon,
-                            class: s(l(a).sectionItemLeadingIcon({ class: (y = (x = e.ui) == null ? void 0 : x.sectionItem) == null ? void 0 : y.leadingIcon }))
-                          }, null, 8, ["name", "class"])) : A("", !0),
+                            class: s(l(a).sectionItemLeadingIcon({ class: (I = (y = e.ui) == null ? void 0 : y.sectionItem) == null ? void 0 : I.leadingIcon }))
+                          }, null, 8, ["name", "class"])) : _("", !0),
                           h("span", {
-                            class: s(l(a).sectionItemLabel({ class: (k = (I = e.ui) == null ? void 0 : I.sectionItem) == null ? void 0 : k.label }))
+                            class: s(l(a).sectionItemLabel({ class: (k = (g = e.ui) == null ? void 0 : g.sectionItem) == null ? void 0 : k.label }))
                           }, K(n.label), 3),
-                          E(n).length > 1 ? (c(), _(o, {
+                          M(n).length > 1 ? (c(), w(i, {
                             key: 1,
                             name: "solar:alt-arrow-right-linear",
-                            class: s(l(a).sectionItemTrailingIcon({ class: (S = (L = e.ui) == null ? void 0 : L.sectionItem) == null ? void 0 : S.trailingIcon }))
-                          }, null, 8, ["class"])) : A("", !0)
+                            class: s(l(a).sectionItemTrailingIcon({ class: (C = (L = e.ui) == null ? void 0 : L.sectionItem) == null ? void 0 : C.trailingIcon }))
+                          }, null, 8, ["class"])) : _("", !0)
                         ];
                       }),
                       _: 2
                     }, 1032, ["data-testid", "data-section", "data-active", "class", "onClick"]))), 128))
-                  ], 2)
+                  ], 2),
+                  t.$slots["root-footer"] ? (c(), x("div", {
+                    key: 0,
+                    "data-testid": "root-footer",
+                    class: s(l(a).rootFooter({ class: (O = e.ui) == null ? void 0 : O.rootFooter }))
+                  }, [
+                    T(t.$slots, "root-footer")
+                  ], 2)) : _("", !0)
                 ], 2))
               ];
             }),
-            _: 1
+            _: 3
           }, 8, ["enter-active-class", "leave-active-class", "enter-from-class", "leave-to-class"])
         ], 2),
         h("footer", {
           class: s(l(a).footer({ class: (p = e.ui) == null ? void 0 : p.footer }))
         }, [
-          M(t.$slots, "footer")
+          T(t.$slots, "footer")
         ], 2)
       ], 2);
     };

package/dist/components/SaberAppLayout.mjs

@@ -0,0 +1,4 @@
+import { _ as f } from "../SaberAppLayout.vue_vue_type_script_setup_true_lang-R7F5K7kj.js";
+export {
+  f as default
+};

package/dist/components/SaberAppSidebar.mjs

@@ -1,4 +1,4 @@
-import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-HXyIXiau.js";
+import { _ as f } from "../SaberAppSidebar.vue_vue_type_script_setup_true_lang-Cwuj9VNi.js";
 export {
   f as default
 };

package/dist/components/layout/SaberAppLayout.types.d.ts

@@ -0,0 +1,51 @@
+import { ButtonProps } from '@nuxt/ui/components/Button.vue';
+import { DrawerProps } from '@nuxt/ui/components/Drawer.vue';
+import { SaberNavigationSearchGroup, SaberNavigationSearchUI } from '../navigation/SaberAppSidebar.types';
+export type SaberAppLayoutMode = 'phone' | 'pad' | 'desktop';
+export type SaberAppLayoutMaxWidth = number | string | 'full' | false;
+export interface SaberAppLayoutProps {
+    title?: string;
+    description?: string;
+    maxWidth?: SaberAppLayoutMaxWidth;
+    navigationKey?: string | number;
+    sidebarWidth?: number | string;
+    phoneBreakpoint?: number;
+    padBreakpoint?: number;
+    searchGroups?: SaberNavigationSearchGroup[];
+    searchShortcut?: string;
+    searchLabel?: string;
+    menuOpenLabel?: string;
+    menuCloseLabel?: string;
+    menuOpenIcon?: string;
+    menuCloseIcon?: string;
+    ui?: SaberAppLayoutUI;
+}
+export interface SaberAppLayoutNavigationSlotContext {
+    mode: SaberAppLayoutMode;
+    drawerOpen: boolean;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    toggleDrawer: () => void;
+}
+export interface SaberAppLayoutUI {
+    root?: string;
+    desktopSidebar?: string;
+    main?: string;
+    header?: string;
+    headerHeading?: string;
+    title?: string;
+    description?: string;
+    headerSuffix?: string;
+    pageHeaderSuffixTarget?: string;
+    content?: string;
+    phoneDrawer?: DrawerProps['ui'];
+    phoneDrawerContent?: string;
+    phoneSidebarFrame?: string;
+    padDrawer?: DrawerProps['ui'];
+    padDrawerContent?: string;
+    padSidebarFrame?: string;
+    overlay?: string;
+    dock?: string;
+    search?: SaberNavigationSearchUI;
+    menuButton?: ButtonProps['ui'];
+}

package/dist/components/layout/SaberAppLayout.vue.d.ts

@@ -0,0 +1,78 @@
+import { SaberNavigationSelectPayload } from '../navigation/SaberAppSidebar.types';
+import { SaberAppLayoutNavigationSlotContext, SaberAppLayoutProps } from './SaberAppLayout.types';
+type __VLS_Props = SaberAppLayoutProps;
+type __VLS_PublicProps = {
+    'drawerOpen'?: boolean;
+    'searchOpen'?: boolean;
+} & __VLS_Props;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: Readonly<{
+        default?: () => unknown;
+        sidebar?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'phone-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'pad-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'header-title'?: (props: {
+            title?: string;
+        }) => unknown;
+        'header-description'?: (props: {
+            description?: string;
+        }) => unknown;
+        'header-suffix'?: () => unknown;
+        dock?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+    }> & {
+        default?: () => unknown;
+        sidebar?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'phone-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'pad-sidebar'?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+        'header-title'?: (props: {
+            title?: string;
+        }) => unknown;
+        'header-description'?: (props: {
+            description?: string;
+        }) => unknown;
+        'header-suffix'?: () => unknown;
+        dock?: (props: SaberAppLayoutNavigationSlotContext) => unknown;
+    };
+    refs: {
+        suffixTarget: HTMLDivElement;
+        menuButton: unknown;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    searchSelect: (payload: SaberNavigationSelectPayload) => any;
+    "update:drawerOpen": (value: boolean) => any;
+    "update:searchOpen": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearchSelect?: ((payload: SaberNavigationSelectPayload) => any) | undefined;
+    "onUpdate:drawerOpen"?: ((value: boolean) => any) | undefined;
+    "onUpdate:searchOpen"?: ((value: boolean) => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    ui: import('./SaberAppLayout.types').SaberAppLayoutUI;
+    maxWidth: import('./SaberAppLayout.types').SaberAppLayoutMaxWidth;
+    navigationKey: string | number;
+    sidebarWidth: number | string;
+    phoneBreakpoint: number;
+    padBreakpoint: number;
+    searchGroups: import('../..').SaberNavigationSearchGroup[];
+    searchShortcut: string;
+    searchLabel: string;
+    menuOpenLabel: string;
+    menuCloseLabel: string;
+    menuOpenIcon: string;
+    menuCloseIcon: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    suffixTarget: HTMLDivElement;
+    menuButton: unknown;
+}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/navigation/SaberAppSidebar.types.d.ts

@@ -49,6 +49,7 @@ export interface SaberAppSidebarUI {
     viewport?: string;
     panel?: string;
     sectionList?: string;
+    rootFooter?: string;
     group?: string;
     groupLabel?: string;
     childList?: string;

package/dist/components/navigation/SaberAppSidebar.vue.d.ts

@@ -16,6 +16,7 @@ declare function __VLS_template(): {
         'search-empty'?(_: {
             searchTerm: string;
         }): any;
+        'root-footer'?(_: {}): any;
         footer?(_: {}): any;
     };
     refs: {};

package/dist/composables/use-page-header.mjs

@@ -1,19 +1,21 @@
-import { reactive as c, provide as i, inject as o, watchEffect as d, toValue as r, onBeforeUnmount as s, ref as u } from "vue";
-const n = Symbol("saber-page-header-state"), a = Symbol("saber-page-header-suffix-target");
+import { reactive as c, provide as o, inject as r, watchEffect as u, toValue as i, onBeforeUnmount as d, ref as f } from "vue";
+const n = Symbol.for("@owocow/saber-ui:page-header-state"), a = Symbol.for(
+  "@owocow/saber-ui:page-header-suffix-target"
+);
 function l(t) {
   const e = c({ title: void 0, description: void 0 });
-  return i(n, e), i(a, t), e;
+  return o(n, e), o(a, t), e;
 }
 function E(t) {
-  const e = o(n, null);
-  e && (d(() => {
-    e.title = r(t.title), e.description = r(t.description);
-  }), s(() => {
+  const e = r(n, null);
+  e && (u(() => {
+    e.title = i(t.title), e.description = i(t.description);
+  }), d(() => {
     e.title = void 0, e.description = void 0;
   }));
 }
 function p() {
-  return o(a, u(null));
+  return r(a, f(null));
 }
 export {
   l as providePageHeader,

package/dist/forms/components/fields/SaberPopSelect.vue.d.ts

@@ -17,8 +17,8 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {},
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
 }>, {
     placeholder: string;
-    multiple: boolean;
     disabled: boolean;
+    multiple: boolean;
     clearable: boolean;
     items: PopSelectOption[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/forms/components/fields/SaberUploadImage.vue.d.ts

@@ -102,9 +102,9 @@ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onRemoveError?: ((error: Error, value: any) => any) | undefined;
 }>, {
-    multiple: boolean;
-    disabled: boolean;
     size: string;
+    disabled: boolean;
+    multiple: boolean;
     dataSource: UploadImageDataSource<any>;
     max: number;
     maxSize: number;

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { default as SaberInfoProvider } from './components/SaberInfoProvider.vue
 import { default as SaberModalWithMobile } from './components/SaberModalWithMobile.vue';
 import { default as SaberStatus } from './components/SaberStatus.vue';
 import { default as SaberSwitchBar } from './components/SaberSwitchBar.vue';
+import { default as SaberAppLayout } from './components/layout/SaberAppLayout.vue';
 import { default as SaberAppSidebar } from './components/navigation/SaberAppSidebar.vue';
 import { default as SaberNavigationSearch } from './components/navigation/SaberNavigationSearch.vue';
 import { default as SaberFilterBar } from './forms/components/SaberFilterBar.vue';
@@ -33,10 +34,11 @@ export { BadgeStatus as SaberBadgeStatus };
 export type { BadgeStatusProps } from './BadgeStatus.types';
 export { SaberNoData };
 export type { SaberNoDataProps } from './SaberNoData.types';
-export { SaberConfirmModal, SaberConfirmProvider, SaberInfo, SaberInfoProvider, SaberModalWithMobile, SaberAppSidebar, SaberNavigationSearch, SaberStatus, SaberSwitchBar, };
+export { SaberConfirmModal, SaberConfirmProvider, SaberInfo, SaberInfoProvider, SaberModalWithMobile, SaberAppLayout, SaberAppSidebar, SaberNavigationSearch, SaberStatus, SaberSwitchBar, };
 export type { SaberInfoContext, SaberInfoMode, SaberInfoProps, SaberInfoVariant } from './components/SaberInfo.types';
 export type { SaberStatusType } from './components/SaberStatus.types';
 export type { SaberSwitchBarItem, SaberSwitchBarUI, SaberSwitchBarValue } from './components/SaberSwitchBar.types';
+export type { SaberAppLayoutMaxWidth, SaberAppLayoutMode, SaberAppLayoutNavigationSlotContext, SaberAppLayoutProps, SaberAppLayoutUI, } from './components/layout/SaberAppLayout.types';
 export type { SaberAppSidebarUI, SaberNavigationGroup, SaberNavigationItem, SaberNavigationSearchGroup, SaberNavigationSearchUI, SaberNavigationSection, SaberNavigationSelectPayload, SaberNavigationSelectSource, } from './components/navigation/SaberAppSidebar.types';
 export { SaberFilterBar, SaberFormModal, SaberDictCheckbox, SaberDictRadio, SaberDictSelect, SaberDistrictSelect, SaberInput, SaberInputNumber, SaberModal, SaberPopSelect, SaberRadioGroup, SaberSelect, SaberTextarea, };
 export { installSaberForms, type SaberFormsOptions } from './forms/plugin';
@@ -55,6 +57,7 @@ declare module 'vue' {
         SaberSwitchBar: typeof SaberSwitchBar;
         SaberAppSidebar: typeof SaberAppSidebar;
         SaberNavigationSearch: typeof SaberNavigationSearch;
+        SaberAppLayout: typeof SaberAppLayout;
         SaberFilterBar: typeof SaberFilterBar;
         SaberFormModal: typeof SaberFormModal;
         SaberModal: typeof SaberModal;

package/dist/index.mjs

@@ -1,25 +1,26 @@
 import h from "@nuxt/ui/vue-plugin";
 import y from "@nuxt/ui/components/Badge.vue";
-import { defineComponent as _, computed as f, openBlock as s, createBlock as $, normalizeStyle as v, withCtx as C, createTextVNode as k, toDisplayString as d, createElementBlock as i, normalizeClass as B, createElementVNode as l, createVNode as I, createCommentVNode as m, renderSlot as u } from "vue";
+import { defineComponent as _, computed as f, openBlock as s, createBlock as $, normalizeStyle as v, withCtx as C, createTextVNode as k, toDisplayString as b, createElementBlock as i, normalizeClass as B, createElementVNode as l, createVNode as I, createCommentVNode as m, renderSlot as u } from "vue";
 import N from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import { _ as D } from "./SaberConfirmModal.vue_vue_type_script_setup_true_lang-Cqp9krYl.js";
 import { _ as M } from "./SaberConfirmProvider.vue_vue_type_script_setup_true_lang-DUJ6ftNJ.js";
 import { _ as w } from "./SaberInfo.vue_vue_type_script_setup_true_lang-B3W5VsGR.js";
-import { _ as P } from "./SaberInfoProvider.vue_vue_type_script_setup_true_lang-3rF6bSCn.js";
-import { _ as z } from "./SaberModalWithMobile.vue_vue_type_script_setup_true_lang-aQlToncY.js";
-import { _ as A } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
+import { _ as A } from "./SaberInfoProvider.vue_vue_type_script_setup_true_lang-3rF6bSCn.js";
+import { _ as P } from "./SaberModalWithMobile.vue_vue_type_script_setup_true_lang-aQlToncY.js";
+import { _ as z } from "./SaberStatus.vue_vue_type_script_setup_true_lang-D9aRVCow.js";
 import { _ as F } from "./SaberSwitchBar.vue_vue_type_script_setup_true_lang-CDx3Dcas.js";
-import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-HXyIXiau.js";
+import { _ as L } from "./SaberAppLayout.vue_vue_type_script_setup_true_lang-R7F5K7kj.js";
+import { _ as U } from "./SaberAppSidebar.vue_vue_type_script_setup_true_lang-Cwuj9VNi.js";
 import { _ as V } from "./SaberNavigationSearch.vue_vue_type_script_setup_true_lang-Bj96kMla.js";
 import { k as W } from "./plugin-Dr3z0YFg.js";
-import { _ as be, a as fe, b as ue, c as Se, d as _e, e as pe } from "./plugin-Dr3z0YFg.js";
-import { _ as xe } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";
-import { _ as ye } from "./SaberDictCheckbox.vue_vue_type_script_setup_true_lang-DUbzy_C6.js";
-import { _ as ve, a as Ce } from "./SaberDictRadio.vue_vue_type_script_setup_true_lang-DR6-jSID.js";
-import { _ as Be } from "./SaberDictSelect.vue_vue_type_script_setup_true_lang-B8PTKNKX.js";
-import { _ as Ne } from "./SaberDistrictSelect.vue_vue_type_script_setup_true_lang-BX8nLC35.js";
-import { _ as Me } from "./SaberPopSelect.vue_vue_type_script_setup_true_lang-BcS27NXI.js";
-const b = {
+import { _ as ue, a as Se, b as _e, c as pe, d as ge, e as xe } from "./plugin-Dr3z0YFg.js";
+import { _ as ye } from "./SaberModal.vue_vue_type_script_setup_true_lang-DJno3jA3.js";
+import { _ as ve } from "./SaberDictCheckbox.vue_vue_type_script_setup_true_lang-DUbzy_C6.js";
+import { _ as ke, a as Be } from "./SaberDictRadio.vue_vue_type_script_setup_true_lang-DR6-jSID.js";
+import { _ as Ne } from "./SaberDictSelect.vue_vue_type_script_setup_true_lang-B8PTKNKX.js";
+import { _ as Me } from "./SaberDistrictSelect.vue_vue_type_script_setup_true_lang-BX8nLC35.js";
+import { _ as Ae } from "./SaberPopSelect.vue_vue_type_script_setup_true_lang-BcS27NXI.js";
+const d = {
   red: { 500: "#ef4444", 600: "#dc2626" },
   orange: { 500: "#f97316", 600: "#ea580c" },
   amber: { 500: "#f59e0b", 600: "#d97706" },
@@ -42,10 +43,10 @@ const b = {
   zinc: { 500: "#71717a", 600: "#52525b" },
   neutral: { 500: "#737373", 600: "#525252" },
   stone: { 500: "#78716c", 600: "#57534e" }
-}, H = b.gray;
+}, H = d.gray;
 function S(e, t) {
   var o, a;
-  return ((o = b[e]) == null ? void 0 : o[t]) ?? ((a = b[e]) == null ? void 0 : a[500]) ?? H[500];
+  return ((o = d[e]) == null ? void 0 : o[t]) ?? ((a = d[e]) == null ? void 0 : a[500]) ?? H[500];
 }
 function R(e, t) {
   const o = parseInt(e.slice(1, 3), 16), a = parseInt(e.slice(3, 5), 16), r = parseInt(e.slice(5, 7), 16);
@@ -84,16 +85,16 @@ const T = /* @__PURE__ */ _({
         class: "inline-flex items-center rounded-full border-0 pt-0.75 pb-0.75 px-2 text-xs font-medium"
       }, {
         default: C(() => [
-          k(d(o.value.label), 1)
+          k(b(o.value.label), 1)
         ]),
         _: 1
       }, 8, ["style"]);
     };
   }
-}), E = { class: "rounded-md border border-accented p-3" }, L = { class: "flex flex-col gap-1" }, O = { class: "text-base font-semibold mb-2 text-highlighted w-60" }, j = {
+}), E = { class: "rounded-md border border-accented p-3" }, O = { class: "flex flex-col gap-1" }, j = { class: "text-base font-semibold mb-2 text-highlighted w-60" }, G = {
   key: 0,
   class: "text-sm text-muted w-60"
-}, G = { key: 0 }, K = { key: 1 }, q = /* @__PURE__ */ _({
+}, K = { key: 0 }, q = { key: 1 }, J = /* @__PURE__ */ _({
   name: "SaberNoData",
   __name: "SaberNoData",
   props: {
@@ -119,49 +120,50 @@ const T = /* @__PURE__ */ _({
             class: "size-5"
           }, null, 8, ["name"])
         ]),
-        l("div", L, [
-          l("h4", O, d(e.title), 1),
-          e.description ? (s(), i("p", j, d(e.description), 1)) : m("", !0)
+        l("div", O, [
+          l("h4", j, b(e.title), 1),
+          e.description ? (s(), i("p", G, b(e.description), 1)) : m("", !0)
         ]),
-        t.$slots.default ? (s(), i("div", G, [
+        t.$slots.default ? (s(), i("div", K, [
           u(t.$slots, "default")
         ])) : m("", !0),
-        t.$slots.extra ? (s(), i("p", K, [
+        t.$slots.extra ? (s(), i("p", q, [
           u(t.$slots, "extra")
         ])) : m("", !0)
       ], 2);
     };
   }
-}), le = {
+}), be = {
   install(e, t = {}) {
-    e.use(h), e.component("SaberBadgeStatus", T), e.component("SaberNoData", q), e.component("SaberConfirmModal", D), e.component("SaberConfirmProvider", M), e.component("SaberInfo", w), e.component("SaberInfoProvider", P), e.component("SaberModalWithMobile", z), e.component("SaberStatus", A), e.component("SaberSwitchBar", F), e.component("SaberAppSidebar", U), e.component("SaberNavigationSearch", V), W(e, t.forms);
+    e.use(h), e.component("SaberBadgeStatus", T), e.component("SaberNoData", J), e.component("SaberConfirmModal", D), e.component("SaberConfirmProvider", M), e.component("SaberInfo", w), e.component("SaberInfoProvider", A), e.component("SaberModalWithMobile", P), e.component("SaberStatus", z), e.component("SaberSwitchBar", F), e.component("SaberAppSidebar", U), e.component("SaberNavigationSearch", V), e.component("SaberAppLayout", L), W(e, t.forms);
   }
 };
 export {
+  L as SaberAppLayout,
   U as SaberAppSidebar,
   T as SaberBadgeStatus,
   D as SaberConfirmModal,
   M as SaberConfirmProvider,
-  ye as SaberDictCheckbox,
-  ve as SaberDictRadio,
-  Be as SaberDictSelect,
-  Ne as SaberDistrictSelect,
-  be as SaberFilterBar,
-  fe as SaberFormModal,
+  ve as SaberDictCheckbox,
+  ke as SaberDictRadio,
+  Ne as SaberDictSelect,
+  Me as SaberDistrictSelect,
+  ue as SaberFilterBar,
+  Se as SaberFormModal,
   w as SaberInfo,
-  P as SaberInfoProvider,
-  ue as SaberInput,
-  Se as SaberInputNumber,
-  xe as SaberModal,
-  z as SaberModalWithMobile,
+  A as SaberInfoProvider,
+  _e as SaberInput,
+  pe as SaberInputNumber,
+  ye as SaberModal,
+  P as SaberModalWithMobile,
   V as SaberNavigationSearch,
-  q as SaberNoData,
-  Me as SaberPopSelect,
-  Ce as SaberRadioGroup,
-  _e as SaberSelect,
-  A as SaberStatus,
+  J as SaberNoData,
+  Ae as SaberPopSelect,
+  Be as SaberRadioGroup,
+  ge as SaberSelect,
+  z as SaberStatus,
   F as SaberSwitchBar,
-  pe as SaberTextarea,
-  le as default,
+  xe as SaberTextarea,
+  be as default,
   W as installSaberForms
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owocow/saber-ui",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Saber application foundation for Vue 3 projects built on Nuxt UI",
   "type": "module",
   "sideEffects": false,
@@ -100,6 +100,10 @@
       "types": "./dist/components/SaberSwitchBar.vue.d.ts",
       "import": "./dist/components/SaberSwitchBar.mjs"
     },
+    "./components/SaberAppLayout": {
+      "types": "./dist/components/layout/SaberAppLayout.vue.d.ts",
+      "import": "./dist/components/SaberAppLayout.mjs"
+    },
     "./components/SaberAppSidebar": {
       "types": "./dist/components/navigation/SaberAppSidebar.vue.d.ts",
       "import": "./dist/components/SaberAppSidebar.mjs"
@@ -195,6 +199,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@vueuse/core": "^14.2.1",
     "crypto-js": "^4.2.0",
     "jsencrypt": "^3.5.4",
     "klona": "^2.0.6",