@wssto2/vue-core 0.2.0 → 0.4.0

package/README.md

@@ -18,6 +18,9 @@ Its plan and rules are in [PLAN.md](PLAN.md).
 | `@wssto2/vue-core/resource`, `/page` | `useRouteResource`, `ResourcePage`, `SectionNavigator`, `AdaptivePageShell` |
 | `@wssto2/vue-core/button`, `/controls`, `/content`, `/state`, `/overlay`, `/modal`, `/icon` | the primitives |
 | `@wssto2/vue-core/i18n`, `/format`, `/client` | messages, `useDescribeError`, formatting, `HttpClient` and `ApiError` |
+| `@wssto2/vue-core/identity`, `/access` | go-core's module contracts (types, route tables) and, in `/identity`, `identityFeature` (sign-in page, language), `identityPlatform()` and `usersFeature` (users, "my profile"): [sign-in](docs/recipes/sign-in.md), [users](docs/recipes/users.md) |
+| `@wssto2/vue-core/access` (screens) | `accessFeature({ catalogue })`: roles list and editor, compare, replace, a person's roles (`PersonAccess`) and what they can do: [roles and access](docs/recipes/access.md) |
+| `@wssto2/vue-core/notifications` | go-core's notification and events modules: `notificationsFeature({ categories, deadLetters })`: the bell with the unread count, the inbox (popover, bottom sheet on phones), the live stream, the failed-events page: [notifications](docs/recipes/notifications.md) |
 | `@wssto2/vue-core/testing` | `createTestPlatform`, `createTestApp`, fake transports: for your tests, [testing](docs/recipes/testing.md) |
 
 Nothing is reachable by a deep import. The peers are `vue`, `vue-router` and `vue-i18n`; the library never bundles them.
@@ -190,6 +193,25 @@ Its texts are JSON files under the feature, loaded the first time one of its rou
 
 The views are [a list page](docs/recipes/list-page.md) and [a record page](docs/recipes/record-page.md).
 
+## Typed routes
+
+go-core's generator writes one `route<In, Out>(method, path, options?)` per endpoint; `client.request(route, input)` calls it with the input and the answer typed. Details, a list from a route and the errors: [typed routes](docs/recipes/typed-routes.md).
+
+<!-- example: docs/examples/routes/api.ts:1-11 -->
+```ts
+import { createHttpClient, isApiError } from "@wssto2/vue-core/client";
+import { ticketsRoutes } from "./routes";
+import { route } from "@wssto2/vue-core/client";
+
+const http = createHttpClient({ baseUrl: "/api" });
+
+// A path parameter and the rest as the query: GET /api/v1/tickets/7
+export async function loadTicket(id: number, signal: AbortSignal) {
+  const result = await http.request(ticketsRoutes.show, { id }, { signal });
+  return result.data; // typed as Ticket
+}
+```
+
 ## Permissions, destinations and icons
 
 The library knows none of your permissions, none of your backend's menu destinations and none of your icons. You declare them by merging into three interfaces, like vue-router's `RouteMeta`; after that a typo in `meta.access`, in a navigation binding or in `<Icon name>` is a compile error:
@@ -206,6 +228,12 @@ declare module "@wssto2/vue-core/platform" {
     "tickets:view": true;
     "tickets:update": true;
     "accounts:view": true;
+    // go-core's access module defines these in the catalogue, so a generated union has them (the roles screens name them).
+    "iam.role:view": true;
+    "iam.role:manage": true;
+    "iam.role:delete": true;
+    "iam.user:view": true;
+    "iam.user:manage": true;
   }
 }
 
@@ -213,6 +241,9 @@ declare module "@wssto2/vue-core/router" {
   interface DestinationRegistry {
     tickets: true;
     accounts: true;
+    users: true;
+    "iam.roles": true;
+    "events.deadletters": true;
   }
 }
 
@@ -299,6 +330,11 @@ The library's own texts are under the `core` namespace in English, Croatian, Bos
 - [Shell](docs/recipes/shell.md): the default shell, contributions from features, keyboard shortcuts and their help, running inside a frame, a custom shell
 - [App setup](docs/recipes/app-setup.md): config, session, effects, locales and flags, permissions in the UI, error sentences, startup errors
 - [Forms](docs/recipes/forms.md): form state, fields, a record edited in group sheets, a long form, commands
+- [Typed routes](docs/recipes/typed-routes.md): generated routes, `client.request`, a list from a route
+- [Sign-in](docs/recipes/sign-in.md): go-core's identity module: the sign-in page, the session wiring, the language, the module's committed types, the dev server
+- [Users and profile](docs/recipes/users.md): the users list and a person's record, "my profile" with the e-mail change by code, opting out, extra sections, refusals
+- [Roles and access](docs/recipes/access.md): go-core's access module: the roles list and editor from your catalogue, a person's roles and effective access, where a role applies, the refusals
+- [Notifications](docs/recipes/notifications.md): the bell, the inbox and the live stream, categories, the failed-events page, trying it against go-core's dev server
 - [Theming](docs/recipes/theming.md): brand accent, dark mode, tokens, status tones and category hues
 - [Testing](docs/recipes/testing.md): the application's environment and a fake backend for your tests
 

package/dist/AccessGate.vue_vue_type_script_setup_true_lang-DcbZBINh.js

@@ -0,0 +1,22 @@
+import { defineComponent as t, computed as i, renderSlot as n } from "vue";
+import { u as l } from "./platform-q3cjODLx.js";
+const m = /* @__PURE__ */ t({
+  __name: "AccessGate",
+  props: {
+    permission: {},
+    any: {},
+    all: {}
+  },
+  setup(r) {
+    const o = r, e = l().access, a = i(() => {
+      if (o.permission !== void 0) return e.can(o.permission);
+      if (o.any !== void 0) return e.canAny(o.any);
+      if (o.all !== void 0) return e.canAll(o.all);
+      throw new Error("AccessGate needs one of the props permission, any or all.");
+    });
+    return (s, c) => a.value ? n(s.$slots, "default", {}, void 0, void 0, 0) : n(s.$slots, "fallback", {}, void 0, void 0, 1);
+  }
+});
+export {
+  m as _
+};

package/dist/AccountMenuItem.vue_vue_type_script_setup_true_lang-CPeNxh5K.js

@@ -0,0 +1,76 @@
+import { defineComponent as p, computed as r, openBlock as o, createElementBlock as d, normalizeClass as a, createBlock as c, resolveDynamicComponent as C, unref as i, mergeProps as E, withCtx as S, createCommentVNode as f, createElementVNode as m, toDisplayString as O } from "vue";
+import { RouterLink as R } from "vue-router";
+import { _ as s } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { _ as z } from "./CountryFlag.vue_vue_type_script_setup_true_lang-Kry_vPPZ.js";
+import { d as v } from "./context-Ch1r4fdN.js";
+const [D, B] = v("vue-core.accountMenu"), [F] = v("vue-core.headerSurface"), h = "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-border-focus", I = "relative not-first:before:absolute not-first:before:top-0 not-first:before:right-0 not-first:before:left-[calc(var(--app-row-inset)+2.25rem)] not-first:before:border-t not-first:before:border-border-separator", H = /* @__PURE__ */ p({
+  __name: "AccountMenuItem",
+  props: {
+    label: {},
+    icon: { default: void 0 },
+    to: { default: void 0 },
+    checked: { type: Boolean, default: void 0 },
+    selected: { type: Boolean, default: void 0 },
+    tone: { default: void 0 },
+    flag: { default: void 0 }
+  },
+  emits: ["click"],
+  setup(e, { emit: k }) {
+    const l = e, b = k, u = B(), t = r(() => u.appearance === "sheet"), x = r(() => l.checked !== void 0 || l.selected !== void 0), n = r(() => l.tone === "critical"), w = `flex w-full cursor-pointer items-center gap-3 rounded-md px-2 py-1.5 text-left text-sm hover:bg-fill ${h}`, y = `flex min-h-row w-full cursor-pointer items-center gap-3 px-row-inset py-2 text-left text-body transition-colors duration-motion-fast active:bg-fill ${h}`;
+    function g() {
+      x.value || u.close(), b("click");
+    }
+    return (M, N) => (o(), d("div", {
+      class: a(t.value ? I : "")
+    }, [
+      (o(), c(C(e.to ? i(R) : "button"), E(e.to ? { to: e.to } : { type: "button" }, {
+        class: [t.value ? y : w, n.value ? "text-content-destructive" : "text-content-strong", t.value && n.value ? "justify-center" : ""],
+        role: e.checked !== void 0 ? "switch" : void 0,
+        "aria-checked": e.checked,
+        "aria-current": e.selected ? "true" : void 0,
+        "data-account-menu-item": "",
+        onClick: g
+      }), {
+        default: S(() => [
+          e.flag ? (o(), c(z, {
+            key: 0,
+            country: e.flag
+          }, null, 8, ["country"])) : e.icon && !(t.value && n.value) ? (o(), c(i(s), {
+            key: 1,
+            name: e.icon,
+            size: t.value ? 22 : 16,
+            class: a(["shrink-0", n.value ? "" : "text-content-muted"])
+          }, null, 8, ["name", "size", "class"])) : f("", !0),
+          m("span", {
+            class: a(["min-w-0 truncate", t.value && n.value ? "" : "flex-1"])
+          }, O(e.label), 3),
+          e.checked !== void 0 ? (o(), d("span", {
+            key: 2,
+            "aria-hidden": "true",
+            class: a(["relative inline-flex shrink-0 rounded-full transition-colors duration-motion-fast", [e.checked ? "bg-control-on" : "bg-fill-strong", t.value ? "h-switch-height w-switch-width" : "h-5 w-9"]])
+          }, [
+            m("span", {
+              class: a(["absolute top-0.5 left-0.5 aspect-square h-[calc(100%-0.25rem)] rounded-full bg-white shadow-knob transition-transform duration-motion-fast", e.checked ? t.value ? "translate-x-[calc(var(--app-switch-width)-var(--app-switch-height))]" : "translate-x-4" : "translate-x-0"])
+            }, null, 2)
+          ], 2)) : e.selected ? (o(), c(i(s), {
+            key: 3,
+            name: "checkCustom",
+            size: 16,
+            class: "shrink-0 text-content-link"
+          })) : e.to && t.value ? (o(), c(i(s), {
+            key: 4,
+            name: "arrowRightSLine",
+            size: 18,
+            class: "shrink-0 text-content-disabled"
+          })) : f("", !0)
+        ]),
+        _: 1
+      }, 16, ["class", "role", "aria-checked", "aria-current"]))
+    ], 2));
+  }
+});
+export {
+  H as _,
+  D as a,
+  F as h
+};

package/dist/ActionRow.vue_vue_type_script_setup_true_lang-LlfIPWsJ.js

@@ -0,0 +1,45 @@
+import { defineComponent as r, openBlock as s, createBlock as d, unref as n, withCtx as f, createElementVNode as t, normalizeClass as m, toDisplayString as l, createElementBlock as u, createCommentVNode as p, createVNode as b } from "vue";
+import { e as _ } from "./control-7EP4tjYy.js";
+import { _ as x } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+const k = ["disabled"], y = { class: "flex min-w-0 flex-1 flex-col" }, h = {
+  key: 0,
+  class: "text-footnote text-content-muted"
+}, N = /* @__PURE__ */ r({
+  __name: "ActionRow",
+  props: {
+    label: {},
+    sub: { default: void 0 },
+    tone: { default: "link" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(i, { emit: a }) {
+    const e = i, c = a;
+    return (v, o) => (s(), d(n(_), { layout: "stacked" }, {
+      default: f(() => [
+        t("button", {
+          type: "button",
+          disabled: e.disabled,
+          class: "flex w-full items-center gap-3 py-0.5 text-left focus-visible:outline-2 focus-visible:outline-border-focus disabled:opacity-50",
+          onClick: o[0] || (o[0] = (w) => c("click"))
+        }, [
+          t("span", y, [
+            t("span", {
+              class: m(["text-body", e.tone === "critical" ? "text-content-destructive" : "text-content-link"])
+            }, l(e.label), 3),
+            e.sub ? (s(), u("span", h, l(e.sub), 1)) : p("", !0)
+          ]),
+          b(n(x), {
+            name: "arrowRightSLine",
+            size: 18,
+            class: "shrink-0 text-content-disabled"
+          })
+        ], 8, k)
+      ]),
+      _: 1
+    }));
+  }
+});
+export {
+  N as _
+};

package/dist/Activity-2gGxQn7v.js

@@ -0,0 +1,156 @@
+import { defineComponent as S, ref as g, watch as w, computed as k, openBlock as i, createElementBlock as y, createVNode as _, unref as t, createElementVNode as r, withCtx as f, toDisplayString as u, Fragment as C, renderList as N, createBlock as x, createTextVNode as j, createCommentVNode as R } from "vue";
+import { useI18n as q } from "vue-i18n";
+import { _ as D } from "./IconTile.vue_vue_type_script_setup_true_lang-BpIjgu5E.js";
+import { _ as I } from "./Tabs.vue_vue_type_script_setup_true_lang-CcMcE38r.js";
+import { u as O } from "./format-B8mJm946.js";
+import { _ as U } from "./DateField.vue_vue_type_script_setup_true_lang-GVasv8ao.js";
+import { _ as T } from "./FormGroup.vue_vue_type_script_setup_true_lang-DG2zdG_a.js";
+import { e as z } from "./control-7EP4tjYy.js";
+import { P as G, c as H, i as J } from "./index-CGv-u1Ws.js";
+import { u as K } from "./platform-q3cjODLx.js";
+import { b as M } from "./routeResource-DstM0hvf.js";
+import { _ as Q } from "./AsyncSection.vue_vue_type_script_setup_true_lang-Blj6KgCr.js";
+import { _ as W } from "./Badge.vue_vue_type_script_setup_true_lang-DJyZc0C7.js";
+import { u as X } from "./useLoad-CYRVx6HW.js";
+import { _ as Y } from "./PageBar.vue_vue_type_script_setup_true_lang-B7qdEeej.js";
+import { _ as Z } from "./SectionIntro.vue_vue_type_script_setup_true_lang-CZtPrmXD.js";
+const ee = {
+  class: "flex min-w-0 flex-col gap-group-gap",
+  "data-person-activity": ""
+}, te = { class: "flex flex-wrap items-end justify-between gap-3" }, ae = {
+  class: "flex items-end gap-2",
+  "data-activity-range": ""
+}, se = {
+  key: 0,
+  class: "px-row-inset py-4 text-body text-content-muted",
+  "data-activity-empty": ""
+}, oe = {
+  key: 1,
+  class: "flex min-w-0 flex-col gap-group-gap",
+  "data-activity-feed": ""
+}, le = { class: "flex flex-wrap items-center gap-x-1.5" }, ne = { class: "text-body tabular-nums text-content-muted" }, ie = { class: "px-row-inset text-footnote text-content-muted" }, we = /* @__PURE__ */ S({
+  __name: "Activity",
+  setup(re) {
+    const { t: o, te: $ } = q(), { http: A } = K(), V = O(), b = M(G), { activityAreas: B } = H(), c = g("all"), d = g(null), m = g(null), v = g(1), p = X(
+      async ({ signal: a }) => {
+        const e = b.id.value;
+        if (e === null) return null;
+        const s = { id: e, page: v.value, per_page: 20, ...c.value === "all" ? {} : { area: c.value }, ...d.value ? { from: d.value } : {}, ...m.value ? { to: m.value } : {} };
+        return (await A.request(J.usersActivity, s, { signal: a })).data;
+      },
+      { watch: () => b.id.value }
+    );
+    w([c, d, m], () => {
+      v.value = 1, p.reload();
+    }), w(v, () => void p.reload());
+    const h = (a) => {
+      if (a === "all" || a === "identity" || a === "other") return o(`core.users.activity.areas.${a}`);
+      const e = B[a];
+      return e && $(e) ? o(e) : o("core.users.activity.areas.other");
+    }, E = k(() => p.data.value?.meta?.views ?? []), P = k(() => {
+      const a = E.value.filter((e) => e.key === "all" || e.key === c.value || e.count > 0).map((e) => ({ value: e.key, label: h(e.key), badge: e.count }));
+      return a.length > 0 ? a : [{ value: "all", label: h("all") }];
+    }), F = (a) => $(`core.users.activity.actions.${a}`) ? o(`core.users.activity.actions.${a}`) : o("core.users.activity.actions.other"), L = k(() => {
+      const a = [];
+      for (const e of p.data.value?.data ?? []) {
+        const s = e.created_at.slice(0, 10), l = a[a.length - 1];
+        l && l.key === s ? l.rows.push(e) : a.push({ key: s, header: V.date(e.created_at), rows: [e] });
+      }
+      return a;
+    });
+    return (a, e) => (i(), y("div", ee, [
+      _(Z, {
+        title: t(o)("core.users.sections.activity"),
+        description: t(o)("core.users.intro.activity", { name: t(b).data.value?.name ?? "" })
+      }, null, 8, ["title", "description"]),
+      r("div", te, [
+        _(t(I), {
+          modelValue: c.value,
+          "onUpdate:modelValue": e[0] || (e[0] = (s) => c.value = s),
+          tabs: P.value,
+          presentation: "scope",
+          label: t(o)("core.users.activity.areas_label")
+        }, null, 8, ["modelValue", "tabs", "label"]),
+        r("div", ae, [
+          _(t(U), {
+            modelValue: d.value,
+            "onUpdate:modelValue": e[1] || (e[1] = (s) => d.value = s),
+            label: t(o)("core.users.activity.since"),
+            max: m.value ?? void 0
+          }, null, 8, ["modelValue", "label", "max"]),
+          _(t(U), {
+            modelValue: m.value,
+            "onUpdate:modelValue": e[2] || (e[2] = (s) => m.value = s),
+            label: t(o)("core.users.activity.until"),
+            min: d.value ?? void 0
+          }, null, 8, ["modelValue", "label", "min"])
+        ])
+      ]),
+      _(t(Q), {
+        state: t(p).state.value,
+        "skeleton-rows": 5,
+        "is-empty": () => !1,
+        onRetry: e[4] || (e[4] = (s) => t(p).reload())
+      }, {
+        default: f(({ value: s }) => [
+          !s || s.data.length === 0 ? (i(), y("p", se, u(t(o)("core.users.activity.empty")), 1)) : (i(), y("div", oe, [
+            (i(!0), y(C, null, N(L.value, (l) => (i(), x(t(T), {
+              key: l.key,
+              header: l.header
+            }, {
+              default: f(() => [
+                (i(!0), y(C, null, N(l.rows, (n) => (i(), x(t(z), {
+                  key: n.id,
+                  layout: "setting",
+                  label: `${F(n.action)}`,
+                  "data-activity-row": ""
+                }, {
+                  leading: f(() => [
+                    _(t(D), {
+                      tone: "anchor",
+                      icon: "listCheck"
+                    })
+                  ]),
+                  sub: f(() => [
+                    r("span", le, [
+                      r("span", null, u(h(n.area)), 1),
+                      e[5] || (e[5] = r("span", { "aria-hidden": "true" }, "·", -1)),
+                      r("span", null, u(n.record_type) + " #" + u(n.record_id), 1)
+                    ])
+                  ]),
+                  default: f(() => [
+                    n.signed_in_as ? (i(), x(t(W), {
+                      key: 0,
+                      tone: "warning",
+                      "data-activity-signed-in-as": ""
+                    }, {
+                      default: f(() => [
+                        j(u(n.signed_in_as.name ? t(o)("core.users.activity.signed_in_as", { name: n.signed_in_as.name }) : t(o)("core.users.activity.signed_in_as_other")), 1)
+                      ]),
+                      _: 2
+                    }, 1024)) : R("", !0),
+                    r("span", ne, u(t(V).time(n.created_at)), 1)
+                  ]),
+                  _: 2
+                }, 1032, ["label"]))), 128))
+              ]),
+              _: 2
+            }, 1032, ["header"]))), 128))
+          ])),
+          s ? (i(), x(Y, {
+            key: 2,
+            page: v.value,
+            "onUpdate:page": e[3] || (e[3] = (l) => v.value = l),
+            "last-page": s.last_page,
+            total: s.total
+          }, null, 8, ["page", "last-page", "total"])) : R("", !0),
+          r("p", ie, u(t(o)("core.users.activity.footer")), 1)
+        ]),
+        _: 1
+      }, 8, ["state"])
+    ]));
+  }
+});
+export {
+  we as default
+};

package/dist/{AdaptivePageShell.vue_vue_type_script_setup_true_lang-CeKK8_g5.js → AdaptivePageShell.vue_vue_type_script_setup_true_lang-BoinCY93.js}

@@ -1,11 +1,12 @@
-import { defineComponent as $, getCurrentInstance as D, inject as F, computed as k, openBlock as l, createBlock as _, Teleport as O, renderSlot as v, createElementBlock as p, Fragment as I, renderList as M, withCtx as x, createTextVNode as w, toDisplayString as h, unref as s, createElementVNode as f, mergeProps as H, createVNode as b, createCommentVNode as m, toValue as z, watch as B, onMounted as R, onBeforeUnmount as S, useTemplateRef as V, provide as A, ref as K, createSlots as q, normalizeClass as Q } from "vue";
+import { defineComponent as $, getCurrentInstance as D, inject as F, computed as k, openBlock as l, createBlock as _, Teleport as O, renderSlot as v, createElementBlock as p, Fragment as I, renderList as M, withCtx as x, createTextVNode as w, toDisplayString as h, unref as s, createElementVNode as m, mergeProps as H, createVNode as b, createCommentVNode as f, toValue as z, watch as B, onMounted as R, onBeforeUnmount as S, useTemplateRef as V, provide as A, ref as K, createSlots as q, normalizeClass as Q } from "vue";
 import { a as j } from "./mediaQuery-CygcXmFW.js";
-import { b as U, f as N, c as W, p as Y } from "./chrome-D9pwD6iS.js";
+import { b as U } from "./bottomDock-BZEiOPYZ.js";
 import { useI18n as E } from "vue-i18n";
-import { _ as G } from "./Button.vue_vue_type_script_setup_true_lang-B1eZgLae.js";
-import { _ as y } from "./Icon.vue_vue_type_script_lang-DtC4_mkz.js";
-import { _ as J } from "./Menu.vue_vue_type_script_setup_true_lang-CrMj6KPD.js";
-import { RouterLink as L, useRoute as X } from "vue-router";
+import { _ as W } from "./Button.vue_vue_type_script_setup_true_lang-CL9Qh5yq.js";
+import { _ as y } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { _ as Y } from "./Menu.vue_vue_type_script_setup_true_lang-DTbAcDzL.js";
+import { RouterLink as L, useRoute as G } from "vue-router";
+import { b as N, c as J, p as X } from "./chrome-BS3xJcad.js";
 import { d as Z } from "./context-Ch1r4fdN.js";
 const ee = /* @__PURE__ */ $({
   __name: "BottomDockPortal",
@@ -44,7 +45,7 @@ const ee = /* @__PURE__ */ $({
       return t === e.leading || t.prominence === "plain" ? "plain" : t.prominence === "standard" ? "standard" : t.placement === "primary" ? "primary" : "standard";
     }
     return (t, a) => i.value.length || r.value.length ? (l(), p("div", te, [
-      (l(!0), p(I, null, M(i.value, (d) => (l(), _(G, {
+      (l(!0), p(I, null, M(i.value, (d) => (l(), _(W, {
         key: d.id,
         prominence: c(d),
         icon: d.icon,
@@ -59,13 +60,13 @@ const ee = /* @__PURE__ */ $({
         ]),
         _: 2
       }, 1032, ["prominence", "icon", "disabled", "processing", "keyboard-shortcut", "data-page-action", "onClick"]))), 128)),
-      r.value.length ? (l(), _(J, {
+      r.value.length ? (l(), _(Y, {
         key: 0,
         items: r.value,
         label: s(n)("core.page.more_actions")
       }, {
         trigger: x(({ toggle: d, attrs: g }) => [
-          f("button", H({ type: "button" }, g, {
+          m("button", H({ type: "button" }, g, {
             "aria-label": s(n)("core.page.more_actions"),
             "data-page-overflow": "",
             class: "hit-target flex size-9 cursor-pointer items-center justify-center rounded-button bg-fill text-content-strong transition-colors duration-motion-fast hover:bg-fill-strong focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus",
@@ -75,10 +76,10 @@ const ee = /* @__PURE__ */ $({
           ], 16, ne)
         ]),
         _: 1
-      }, 8, ["items", "label"])) : m("", !0)
-    ])) : m("", !0);
+      }, 8, ["items", "label"])) : f("", !0)
+    ])) : f("", !0);
   }
-}), ae = { class: "sticky top-0 z-20 flex min-h-bar-height min-w-0 flex-wrap items-center gap-2.5 border-b border-border-separator bg-surface-page/85 py-2 pr-6 pl-4 backdrop-blur-xl" }, oe = ["aria-label"], se = {
+}), ae = { class: "sticky top-[var(--shell-banner-h,0px)] z-20 flex min-h-bar-height min-w-0 flex-wrap items-center gap-2.5 border-b border-border-separator bg-surface-page/85 py-2 pr-6 pl-4 backdrop-blur-xl" }, oe = ["aria-label"], se = {
   class: "flex shrink-0 text-content-link",
   "aria-hidden": "true"
 }, le = { class: "flex min-w-0 items-center" }, re = {
@@ -106,13 +107,13 @@ const ee = /* @__PURE__ */ $({
         "aria-label": s(n)("core.page.breadcrumbs"),
         class: "-ml-1 flex min-w-0 items-center"
       }, [
-        f("span", se, [
+        m("span", se, [
           b(s(y), {
             name: "arrowLeftSLine",
             size: 20
           })
         ]),
-        f("ol", le, [
+        m("ol", le, [
           (l(!0), p(I, null, M(i.value, (a) => (l(), p("li", {
             key: a.label,
             class: "flex min-w-0 max-w-48 shrink items-center max-lg:hidden"
@@ -127,14 +128,14 @@ const ee = /* @__PURE__ */ $({
               ]),
               _: 2
             }, 1032, ["to"]),
-            f("span", re, [
+            m("span", re, [
               b(s(y), {
                 name: "arrowRightSLine",
                 size: 14
               })
             ])
           ]))), 128)),
-          f("li", ie, [
+          m("li", ie, [
             b(s(L), {
               to: r.value.to,
               "data-page-back": "",
@@ -158,19 +159,19 @@ const ee = /* @__PURE__ */ $({
             name: "arrowLeftSLine",
             size: 20
           }),
-          f("span", ce, h(e.back.label), 1)
+          m("span", ce, h(e.back.label), 1)
         ]),
         _: 1
-      }, 8, ["to"])) : m("", !0),
-      t[1] || (t[1] = f("div", { class: "min-w-0 flex-1" }, null, -1)),
+      }, 8, ["to"])) : f("", !0),
+      t[1] || (t[1] = m("div", { class: "min-w-0 flex-1" }, null, -1)),
       v(c.$slots, "pager"),
       e.status ? (l(), p("span", ue, [
-        t[0] || (t[0] = f("span", {
+        t[0] || (t[0] = m("span", {
           class: "size-1.75 rounded-full bg-tint",
           "aria-hidden": "true"
         }, null, -1)),
         w(h(e.status), 1)
-      ])) : m("", !0),
+      ])) : f("", !0),
       b(P, {
         actions: e.actions,
         leading: e.leading
@@ -189,7 +190,7 @@ function pe(u, e, n = !0) {
     c?.disconnect(), r.clearTitle();
   });
 }
-const fe = { class: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-3" }, me = { class: "flex min-w-0 flex-[1_1_16rem] items-center gap-3.5" }, ge = {
+const me = { class: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-3" }, fe = { class: "flex min-w-0 flex-[1_1_16rem] items-center gap-3.5" }, ge = {
   key: 0,
   "aria-hidden": "true",
   class: "flex size-10 shrink-0 items-center justify-center rounded-group bg-tile-brand text-tile-brand-foreground compact:hidden"
@@ -222,47 +223,47 @@ const fe = { class: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-3" }, me
   },
   setup(u) {
     const e = u, { locale: n } = E(), i = j("(max-width: 47.999rem)"), r = k(() => e.count == null ? null : new Intl.NumberFormat(n.value).format(e.count)), c = V("titleElement");
-    return pe(c, () => e.title), (t, a) => (l(), p("div", fe, [
-      f("div", me, [
+    return pe(c, () => e.title), (t, a) => (l(), p("div", me, [
+      m("div", fe, [
         v(t.$slots, "leading", {}, () => [
           e.icon ? (l(), p("span", ge, [
             b(s(y), {
               name: e.icon,
               size: 20
             }, null, 8, ["name"])
-          ])) : m("", !0)
+          ])) : f("", !0)
         ]),
-        f("div", ve, [
-          f("div", be, [
-            f("h1", {
+        m("div", ve, [
+          m("div", be, [
+            m("h1", {
               ref_key: "titleElement",
               ref: c,
               class: "min-w-0 text-large-title font-semibold tracking-tight break-words text-content-strong"
             }, h(e.title), 513),
-            r.value !== null ? (l(), p("span", he, h(r.value), 1)) : m("", !0)
+            r.value !== null ? (l(), p("span", he, h(r.value), 1)) : f("", !0)
           ]),
-          e.description ? (l(), p("p", ke, h(e.description), 1)) : m("", !0),
+          e.description ? (l(), p("p", ke, h(e.description), 1)) : f("", !0),
           v(t.$slots, "description")
         ])
       ]),
       e.inlineActions || !s(i) ? (l(), p("div", _e, [
         e.status ? (l(), p("span", xe, [
-          a[0] || (a[0] = f("span", {
+          a[0] || (a[0] = m("span", {
             class: "size-1.75 rounded-full bg-tint",
             "aria-hidden": "true"
           }, null, -1)),
           w(h(e.status), 1)
-        ])) : m("", !0),
+        ])) : f("", !0),
         b(P, {
           actions: e.actions,
           leading: e.leading
         }, null, 8, ["actions", "leading"])
-      ])) : m("", !0)
+      ])) : f("", !0)
     ]));
   }
-}), [ye, Ve] = Z("vue-core.pageSectionBack");
+}), [ye, je] = Z("vue-core.pageSectionBack");
 function $e(u, e) {
-  const i = X().fullPath;
+  const i = G().fullPath;
   let r, c;
   function t() {
     r?.disconnect(), clearTimeout(c), document.removeEventListener("pointerdown", t, !0), document.removeEventListener("keydown", t, !0);
@@ -285,7 +286,7 @@ function $e(u, e) {
 const Se = { key: 1 }, Te = {
   key: 2,
   class: "flex justify-center pt-2"
-}, Ce = { class: "dock-safe-area pointer-events-auto order-1 border-t border-border-separator bg-surface-cell pt-screen-padding pr-[max(var(--app-screen-padding),var(--app-safe-right))] pb-screen-padding pl-[max(var(--app-screen-padding),var(--app-safe-left))]" }, je = /* @__PURE__ */ $({
+}, Ce = { class: "dock-safe-area pointer-events-auto order-1 border-t border-border-separator bg-surface-cell pt-screen-padding pr-[max(var(--app-screen-padding),var(--app-safe-right))] pb-screen-padding pl-[max(var(--app-screen-padding),var(--app-safe-left))]" }, Ne = /* @__PURE__ */ $({
   __name: "AdaptivePageShell",
   props: {
     title: {},
@@ -299,8 +300,8 @@ const Se = { key: 1 }, Te = {
     width: { default: "full" }
   },
   setup(u) {
-    const e = u, n = N() ?? W();
-    A(Y, n);
+    const e = u, n = N() ?? J();
+    A(X, n);
     const i = n.claimShell();
     S(i);
     const r = V("root");
@@ -345,8 +346,8 @@ const Se = { key: 1 }, Te = {
           ]),
           key: "0"
         } : void 0
-      ]), 1032, ["back", "path", "actions", "leading", "status"])) : m("", !0),
-      f("div", {
+      ]), 1032, ["back", "path", "actions", "leading", "status"])) : f("", !0),
+      m("div", {
         class: Q(["mx-auto flex min-w-0 flex-col gap-section-gap pt-section-gap pr-[max(var(--app-screen-padding),var(--app-safe-right))] pb-[max(var(--app-screen-padding),var(--app-safe-bottom),calc(var(--bottom-dock-h,0px)+var(--app-screen-padding)))] pl-[max(var(--app-screen-padding),var(--app-safe-left))] lg:pt-[calc(var(--app-section-gap)*1.5)] lg:pr-[max(2.5rem,var(--app-safe-right))] lg:pl-[max(2.5rem,var(--app-safe-left))]", T[e.width]])
       }, [
         v(o.$slots, "header", {}, () => [
@@ -364,33 +365,33 @@ const Se = { key: 1 }, Te = {
           key: 0,
           actions: s(n).actions.value,
           leading: s(n).leading.value
-        }, null, 8, ["actions", "leading"])) : m("", !0),
+        }, null, 8, ["actions", "leading"])) : f("", !0),
         o.$slots.notices ? (l(), p("div", Se, [
           v(o.$slots, "notices")
-        ])) : m("", !0),
+        ])) : f("", !0),
         v(o.$slots, "default"),
         o.$slots.pager && s(c) ? (l(), p("div", Te, [
           v(o.$slots, "pager")
-        ])) : m("", !0)
+        ])) : f("", !0)
       ], 2),
       o.$slots.bottom ? (l(), _(ee, { key: 1 }, {
         default: x(() => [
-          f("div", Ce, [
+          m("div", Ce, [
             v(o.$slots, "bottom")
           ])
         ]),
         _: 3
-      })) : m("", !0)
+      })) : f("", !0)
     ], 512));
   }
 });
 export {
   ee as _,
-  je as a,
+  Ne as a,
   P as b,
   de as c,
   we as d,
-  Ve as e,
+  je as e,
   ye as p,
   pe as u
 };

package/dist/{AlertDialog.vue_vue_type_script_setup_true_lang-e4hzkzg3.js → AlertDialog.vue_vue_type_script_setup_true_lang-whA4WLdl.js}

@@ -1,6 +1,6 @@
 import { defineComponent as H, ref as L, useId as S, computed as u, watch as J, openBlock as a, createBlock as p, Teleport as K, createElementBlock as r, unref as t, createVNode as T, Transition as z, withCtx as I, createCommentVNode as s, createElementVNode as o, toDisplayString as l, renderSlot as V, normalizeClass as d, createTextVNode as $ } from "vue";
 import { useI18n as Q } from "vue-i18n";
-import { _ as j } from "./Icon.vue_vue_type_script_lang-DtC4_mkz.js";
+import { _ as j } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
 import { u as R } from "./mediaQuery-CygcXmFW.js";
 import { u as U } from "./useDialog-CXR3hN0G.js";
 const X = ["aria-labelledby", "aria-describedby", "data-presentation"], Y = { class: "overflow-hidden rounded-menu bg-surface-overlay/95 backdrop-blur-xl" }, Z = { class: "flex flex-col gap-1 px-4 py-3.5 text-center" }, ee = ["id"], te = ["id"], ae = ["disabled"], ne = ["disabled"], oe = ["id"], ie = ["id"], se = ["disabled"], le = ["disabled"], pe = /* @__PURE__ */ H({

package/dist/{AsyncSection.vue_vue_type_script_setup_true_lang-CWLB3xsR.js → AsyncSection.vue_vue_type_script_setup_true_lang-Blj6KgCr.js}

@@ -1,9 +1,9 @@
 import { defineComponent as h, openBlock as a, createElementBlock as n, computed as $, Fragment as _, unref as o, renderSlot as y, renderList as w, createBlock as v, createVNode as u, withCtx as c, createElementVNode as d, toDisplayString as i, createCommentVNode as m, createTextVNode as g, normalizeClass as b, createSlots as x } from "vue";
 import { useI18n as C } from "vue-i18n";
-import { _ as k } from "./Button.vue_vue_type_script_setup_true_lang-B1eZgLae.js";
-import { _ as E } from "./Icon.vue_vue_type_script_lang-DtC4_mkz.js";
-import { _ as S } from "./Banner.vue_vue_type_script_setup_true_lang-n_wGPIIu.js";
-import { _ as V } from "./EmptyState.vue_vue_type_script_setup_true_lang-BeGpHMUP.js";
+import { _ as k } from "./Button.vue_vue_type_script_setup_true_lang-CL9Qh5yq.js";
+import { _ as E } from "./Icon.vue_vue_type_script_lang-D7oC-d-S.js";
+import { _ as S } from "./Banner.vue_vue_type_script_setup_true_lang-DSStj_5z.js";
+import { _ as V } from "./EmptyState.vue_vue_type_script_setup_true_lang-50p-Mp8I.js";
 function K(s) {
   return s.status === "loading" || s.status === "failed" ? void 0 : s.value;
 }