@aleph-alpha/settings-kit 0.0.0-stage → 1.0.0

package/dist/shell/index.js

@@ -0,0 +1,848 @@
+import { defineComponent, openBlock, createBlock, unref, withCtx, createElementBlock, Fragment, renderList, createVNode, createSlots, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, ref, onBeforeUnmount, getCurrentInstance, computed, useSlots, watch, nextTick, onMounted, onBeforeUpdate, normalizeStyle, renderSlot, toValue, inject, onDeactivated, onActivated, onUnmounted, useModel, mergeProps, toHandlers, mergeModels } from "vue";
+import { H as useSettingsLayout, r as provideSkLayoutContext, I as useSettingsLocale, S as SkLayoutPage, V as resolveKitMessage } from "../SkLayoutPage-DGbCpQFm.js";
+import { UiSidebarMenu, UiSidebarMenuItem, UiSidebarMenuButton, UiTopBar, UiSidebarTrigger, UiTooltip, UiButton, UiIcon, UiFloatActionItems, UiSidebar, UiSidebarContent, UiSidebarGroup, UiSidebarGroupLabel, UiSidebarGroupContent, UiLayoutContent } from "@aleph-alpha/ui-library";
+import { ArrowLeftIcon, ScanIcon, PanelRightIcon } from "@aleph-alpha/ui-library/icons";
+import { routerKey, routeLocationKey, matchedRouteKey, createWebHistory, isNavigationFailure } from "vue-router";
+function createShellRoutes(layout) {
+  return layout.pages.map(({ id, path }) => ({ id, path }));
+}
+function findShellRoute(routes, path) {
+  const wanted = normalizeRoutePath(path);
+  const exact = routes.find(
+    (route) => normalizeRoutePath(route.path) === wanted
+  );
+  if (exact) return exact;
+  const folded = wanted.toLowerCase();
+  return routes.find(
+    (route) => normalizeRoutePath(route.path).toLowerCase() === folded
+  );
+}
+function normalizeRoutePath(path) {
+  const segments = path.split("/").filter((segment) => segment !== "").map((segment) => encodeURIComponent(safeDecode(segment)));
+  return `/${segments.join("/")}`;
+}
+function safeDecode(segment) {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+}
+const _hoisted_1$1 = {
+  key: 0,
+  class: "sr-only"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkShellNav"
+  },
+  __name: "SkShellNav",
+  props: {
+    nodes: {},
+    activeId: {},
+    hrefOf: { type: Function },
+    pageHasErrors: {}
+  },
+  emits: ["navigate"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    function open(event, id) {
+      const modified = event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+      if (modified || event.defaultPrevented) return;
+      event.preventDefault();
+      emit("navigate", id);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiSidebarMenu), null, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes, (node) => {
+            return openBlock(), createBlock(unref(UiSidebarMenuItem), {
+              key: node.id
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(UiSidebarMenuButton), {
+                  as: "a",
+                  href: __props.hrefOf(node.id),
+                  tooltip: node.label,
+                  "is-active": __props.activeId === node.id,
+                  "aria-current": __props.activeId === node.id ? "page" : void 0,
+                  onClick: ($event) => open($event, node.id)
+                }, createSlots({
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(node.label) + " ", 1),
+                    node.invalid ? (openBlock(), createElementBlock("span", _hoisted_1$1, "(" + toDisplayString(__props.pageHasErrors) + ")", 1)) : createCommentVNode("", true)
+                  ]),
+                  _: 2
+                }, [
+                  node.invalid ? {
+                    name: "end-icon",
+                    fn: withCtx(() => [
+                      _cache[0] || (_cache[0] = createElementVNode("span", {
+                        "aria-hidden": "true",
+                        class: "size-2 rounded-full bg-background-status-error"
+                      }, null, -1))
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["href", "tooltip", "is-active", "aria-current", "onClick"])
+              ]),
+              _: 2
+            }, 1024);
+          }), 128))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+function useMediaQuery(query) {
+  const matches = ref(false);
+  if (typeof window === "undefined" || !window.matchMedia) return matches;
+  const list = window.matchMedia(query);
+  matches.value = list.matches;
+  const update = (event) => {
+    matches.value = event.matches;
+  };
+  list.addEventListener("change", update);
+  onBeforeUnmount(() => list.removeEventListener("change", update));
+  return matches;
+}
+const _hoisted_1 = { class: "flex min-w-0 items-center gap-2" };
+const _hoisted_2 = { class: "flex min-w-0 items-center gap-1" };
+const _hoisted_3 = ["href", "aria-label"];
+const _hoisted_4 = {
+  key: 1,
+  class: "body-s-medium truncate"
+};
+const _hoisted_5 = { class: "flex min-h-0 w-full flex-1" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkShellFrame"
+  },
+  __name: "SkShellFrame",
+  props: {
+    navigation: {},
+    activeId: { default: void 0 },
+    hrefOf: {},
+    sidebarMode: { default: "default" },
+    backHref: { default: void 0 },
+    labels: {}
+  },
+  emits: ["navigate", "back"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const instance = getCurrentInstance();
+    const hasBack = computed(
+      () => Boolean(props.backHref) || Boolean(instance?.vnode.props?.onBack)
+    );
+    const slots = useSlots();
+    const layout = ref("sidebar");
+    const isMobile = useMediaQuery("(max-width: 768px)");
+    const desktopOpen = ref(true);
+    const mobileOpen = ref(false);
+    watch(isMobile, () => {
+      mobileOpen.value = false;
+    });
+    const root = ref();
+    const topBar = ref();
+    const barToggle = ref();
+    const railToggle = ref();
+    const mobileToggle = ref();
+    function focusToggle(wrapper) {
+      wrapper?.querySelector('[data-sidebar="trigger"]')?.focus();
+    }
+    const sidebarOpen = computed({
+      get: () => isMobile.value ? mobileOpen.value : desktopOpen.value,
+      set: (open) => {
+        if (isMobile.value) {
+          mobileOpen.value = open;
+          return;
+        }
+        const focused = document.activeElement;
+        const refocus = focused instanceof HTMLElement && Boolean(root.value?.contains(focused)) && focused.closest('[data-sidebar="trigger"]') !== null;
+        desktopOpen.value = open;
+        if (refocus) {
+          nextTick(() => focusToggle(open ? barToggle.value : railToggle.value));
+        }
+      }
+    });
+    function closeDrawer() {
+      if (!isMobile.value || !mobileOpen.value) return;
+      mobileOpen.value = false;
+      nextTick(() => focusToggle(mobileToggle.value));
+    }
+    function onKeydown(event) {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      const target = event.target;
+      if (!target?.closest('[data-mobile="true"]')) return;
+      closeDrawer();
+    }
+    function onNavigate(id) {
+      emit("navigate", id);
+      closeDrawer();
+    }
+    const drawerOffset = ref(0);
+    let observer;
+    onMounted(() => {
+      const bar = topBar.value;
+      if (!bar) return;
+      const measure = () => {
+        drawerOffset.value = bar.getBoundingClientRect().bottom;
+      };
+      measure();
+      observer = new ResizeObserver(measure);
+      observer.observe(bar);
+    });
+    onBeforeUnmount(() => observer?.disconnect());
+    const hasSidebar = ref(Boolean(slots.sidebar));
+    onBeforeUpdate(() => {
+      const present = Boolean(slots.sidebar);
+      if (present && !hasSidebar.value) layout.value = "sidebar";
+      hasSidebar.value = present;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        class: "flex h-svh w-full flex-col overflow-hidden bg-background-surface-primary text-content-on-surface-primary",
+        style: normalizeStyle({ "--sidebar-offset-top": `${drawerOffset.value}px` }),
+        onKeydown
+      }, [
+        createElementVNode("div", {
+          ref_key: "topBar",
+          ref: topBar,
+          class: "shrink-0"
+        }, [
+          createVNode(unref(UiTopBar), {
+            "aria-label": __props.labels.title,
+            "leading-width": "calc(var(--sidebar-width, 16rem) - 1rem)"
+          }, createSlots({
+            logo: withCtx(() => [
+              createElementVNode("span", _hoisted_1, [
+                renderSlot(_ctx.$slots, "logo"),
+                createElementVNode("span", _hoisted_2, [
+                  hasBack.value ? (openBlock(), createBlock(unref(UiTooltip), {
+                    key: 0,
+                    content: __props.labels.back,
+                    side: "bottom"
+                  }, {
+                    default: withCtx(() => [
+                      __props.backHref ? (openBlock(), createBlock(unref(UiButton), {
+                        key: 0,
+                        "as-child": "",
+                        variant: "ghost",
+                        size: "icon-sm"
+                      }, {
+                        default: withCtx(() => [
+                          createElementVNode("a", {
+                            href: __props.backHref,
+                            "aria-label": __props.labels.back
+                          }, [
+                            createVNode(unref(UiIcon), {
+                              name: unref(ArrowLeftIcon),
+                              size: "s"
+                            }, null, 8, ["name"])
+                          ], 8, _hoisted_3)
+                        ]),
+                        _: 1
+                      })) : (openBlock(), createBlock(unref(UiButton), {
+                        key: 1,
+                        variant: "ghost",
+                        size: "icon-sm",
+                        "aria-label": __props.labels.back,
+                        onClick: _cache[0] || (_cache[0] = ($event) => emit("back"))
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(UiIcon), {
+                            name: unref(ArrowLeftIcon),
+                            size: "s"
+                          }, null, 8, ["name"])
+                        ]),
+                        _: 1
+                      }, 8, ["aria-label"]))
+                    ]),
+                    _: 1
+                  }, 8, ["content"])) : createCommentVNode("", true),
+                  __props.labels.title ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.labels.title), 1)) : createCommentVNode("", true)
+                ])
+              ])
+            ]),
+            "mobile-sidebar-toggle": withCtx(() => [
+              createElementVNode("span", {
+                ref_key: "mobileToggle",
+                ref: mobileToggle,
+                class: "contents",
+                "data-sk-toggle": "mobile"
+              }, [
+                createVNode(unref(UiSidebarTrigger), {
+                  open: sidebarOpen.value,
+                  "onUpdate:open": _cache[2] || (_cache[2] = ($event) => sidebarOpen.value = $event),
+                  tooltip: __props.labels.toggleSidebar,
+                  "aria-label": __props.labels.toggleSidebar
+                }, null, 8, ["open", "tooltip", "aria-label"])
+              ], 512)
+            ]),
+            _: 2
+          }, [
+            desktopOpen.value ? {
+              name: "sidebar-toggle",
+              fn: withCtx(() => [
+                createElementVNode("span", {
+                  ref_key: "barToggle",
+                  ref: barToggle,
+                  class: "contents",
+                  "data-sk-toggle": "bar"
+                }, [
+                  createVNode(unref(UiSidebarTrigger), {
+                    open: sidebarOpen.value,
+                    "onUpdate:open": _cache[1] || (_cache[1] = ($event) => sidebarOpen.value = $event),
+                    tooltip: __props.labels.toggleSidebar,
+                    "aria-label": __props.labels.toggleSidebar
+                  }, null, 8, ["open", "tooltip", "aria-label"])
+                ], 512)
+              ]),
+              key: "0"
+            } : void 0,
+            hasSidebar.value ? {
+              name: "layout-actions",
+              fn: withCtx(() => [
+                createVNode(unref(UiFloatActionItems), {
+                  modelValue: layout.value,
+                  "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => layout.value = $event),
+                  "aria-label": __props.labels.layout
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(UiTooltip), {
+                      content: __props.labels.focusLayout,
+                      side: "bottom"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(UiFloatActionItems), {
+                          type: "button",
+                          value: "focus",
+                          "aria-label": __props.labels.focusLayout
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(UiIcon), {
+                              name: unref(ScanIcon),
+                              size: "s"
+                            }, null, 8, ["name"])
+                          ]),
+                          _: 1
+                        }, 8, ["aria-label"])
+                      ]),
+                      _: 1
+                    }, 8, ["content"]),
+                    createVNode(unref(UiTooltip), {
+                      content: __props.labels.sidebarLayout,
+                      side: "bottom"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(UiFloatActionItems), {
+                          type: "button",
+                          value: "sidebar",
+                          "aria-label": __props.labels.sidebarLayout
+                        }, {
+                          default: withCtx(() => [
+                            createVNode(unref(UiIcon), {
+                              name: unref(PanelRightIcon),
+                              size: "s"
+                            }, null, 8, ["name"])
+                          ]),
+                          _: 1
+                        }, 8, ["aria-label"])
+                      ]),
+                      _: 1
+                    }, 8, ["content"])
+                  ]),
+                  _: 1
+                }, 8, ["modelValue", "aria-label"])
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.profile ? {
+              name: "profile",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "profile")
+              ]),
+              key: "2"
+            } : void 0
+          ]), 1032, ["aria-label"])
+        ], 512),
+        createElementVNode("div", _hoisted_5, [
+          createVNode(unref(UiSidebar), {
+            open: sidebarOpen.value,
+            "onUpdate:open": _cache[4] || (_cache[4] = ($event) => sidebarOpen.value = $event),
+            collapsible: "icon",
+            class: "isolate",
+            role: "navigation",
+            "aria-label": __props.labels.navigation
+          }, {
+            "start-action": withCtx(() => [
+              createVNode(unref(UiSidebarMenu), null, {
+                default: withCtx(() => [
+                  createVNode(unref(UiSidebarMenuItem), null, {
+                    default: withCtx(() => [
+                      createElementVNode("span", {
+                        ref_key: "railToggle",
+                        ref: railToggle,
+                        class: "contents",
+                        "data-sk-toggle": "rail"
+                      }, [
+                        createVNode(unref(UiSidebarTrigger), {
+                          tooltip: __props.labels.toggleSidebar,
+                          "aria-label": __props.labels.toggleSidebar
+                        }, null, 8, ["tooltip", "aria-label"])
+                      ], 512)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            default: withCtx(() => [
+              createVNode(unref(UiSidebarContent), null, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.navigation, (group) => {
+                    return openBlock(), createBlock(unref(UiSidebarGroup), {
+                      key: group.id,
+                      "default-open": true
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(UiSidebarGroupLabel), {
+                          size: "xs",
+                          "show-action": false
+                        }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(group.label), 1)
+                          ]),
+                          _: 2
+                        }, 1024),
+                        createVNode(unref(UiSidebarGroupContent), null, {
+                          default: withCtx(() => [
+                            createVNode(_sfc_main$2, {
+                              nodes: group.children,
+                              "active-id": __props.activeId,
+                              "href-of": __props.hrefOf,
+                              "page-has-errors": __props.labels.pageHasErrors,
+                              onNavigate
+                            }, null, 8, ["nodes", "active-id", "href-of", "page-has-errors"])
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ]),
+                      _: 2
+                    }, 1024);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["open", "aria-label"]),
+          createVNode(unref(UiLayoutContent), {
+            class: "min-h-0 min-w-0 flex-1 overflow-auto mb-4",
+            "sidebar-mode": __props.sidebarMode
+          }, createSlots({
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 2
+          }, [
+            hasSidebar.value && layout.value === "sidebar" ? {
+              name: "sidebar",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "sidebar")
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["sidebar-mode"])
+        ])
+      ], 36);
+    };
+  }
+});
+const skShellHistoryKey = /* @__PURE__ */ Symbol("sk-shell-history");
+function normalizeShellBase(base) {
+  if (!base || base === "/") return "";
+  const prefixed = base.startsWith("/") ? base : `/${base}`;
+  let end = prefixed.length;
+  while (end > 0 && prefixed[end - 1] === "/") end -= 1;
+  return prefixed.slice(0, end);
+}
+function shellPath(base, pagePath2) {
+  const normalized = normalizeShellBase(base);
+  if (!normalized) return pagePath2 || "/";
+  if (!pagePath2 || pagePath2 === "/") return normalized;
+  const path = pagePath2.startsWith("/") ? pagePath2 : `/${pagePath2}`;
+  return `${normalized}${path}`;
+}
+function pagePath(base, fullPath) {
+  const pathname = splitLocation(fullPath).path;
+  const normalized = normalizeShellBase(base);
+  if (!normalized) return pathname;
+  const folded = pathname.toLowerCase();
+  const prefix = normalized.toLowerCase();
+  if (folded === prefix || folded === `${prefix}/`) return "/";
+  if (folded.startsWith(`${prefix}/`)) return pathname.slice(normalized.length);
+  return void 0;
+}
+function splitLocation(location) {
+  const index = location.search(/[?#]/);
+  const pathname = index === -1 ? location : location.slice(0, index);
+  const suffix = index === -1 ? "" : location.slice(index);
+  return {
+    path: pathname.startsWith("/") ? pathname : `/${pathname}`,
+    suffix
+  };
+}
+function useShellLocation(options) {
+  const routes = computed(() => toValue(options.routes));
+  const base = computed(() => normalizeShellBase(toValue(options.base)));
+  const injected = inject(skShellHistoryKey, void 0);
+  const hostRouter = injected ? void 0 : inject(routerKey, void 0);
+  const hostRoute = hostRouter ? inject(routeLocationKey, void 0) : void 0;
+  const anchor = (hostRouter && inject(matchedRouteKey, void 0)?.value) ?? hostRoute?.matched.at(-1);
+  const canUseDom = typeof window !== "undefined";
+  let owned;
+  let stopListen;
+  let active = true;
+  const selected = ref();
+  let committed;
+  function history() {
+    return injected ?? owned;
+  }
+  function createOwned() {
+    if (injected || hostRouter || !canUseDom) return;
+    owned = createWebHistory(base.value || void 0);
+    if (insideBase() && !hasHistoryCurrent(owned)) {
+      owned.replace(owned.location);
+    }
+  }
+  function destroyOwned() {
+    stopListen?.();
+    stopListen = void 0;
+    owned?.destroy();
+    owned = void 0;
+  }
+  function listen() {
+    stopListen?.();
+    stopListen = history()?.listen(() => apply());
+  }
+  function insideBase() {
+    if (!owned || !base.value) return true;
+    return pagePath(base.value, window.location.pathname) !== void 0;
+  }
+  function hostShowsShell() {
+    if (!hostRoute || !anchor) return false;
+    return hostRoute.matched.some((record) => sameRouteRecord(record, anchor));
+  }
+  function readLocation() {
+    const current = history();
+    if (current) {
+      if (current === owned && !insideBase()) return void 0;
+      return splitLocation(current.location);
+    }
+    if (hostRoute) {
+      const path = pagePath(base.value, hostRoute.path);
+      if (path === void 0) return void 0;
+      return { path, suffix: "" };
+    }
+    return void 0;
+  }
+  function ownsUnknownPaths() {
+    if (history()) return history() !== owned || insideBase();
+    return base.value !== "" && hostShowsShell();
+  }
+  function fallbackId(preferred = selected.value) {
+    const ids = routes.value.map((route) => route.id);
+    return preferred && ids.includes(preferred) ? preferred : ids[0];
+  }
+  function apply() {
+    if (!active) return;
+    show();
+    committed = selected.value;
+  }
+  function show() {
+    const location = readLocation();
+    if (!location) {
+      selected.value = fallbackId();
+      return;
+    }
+    const match = findShellRoute(routes.value, location.path);
+    if (match) {
+      selected.value = match.id;
+      const current = history();
+      if (current && location.path !== match.path) {
+        current.replace(match.path + location.suffix);
+      }
+      return;
+    }
+    const first = routes.value[0];
+    if (!first) {
+      selected.value = void 0;
+      return;
+    }
+    if (!ownsUnknownPaths()) {
+      selected.value = fallbackId();
+      return;
+    }
+    navigate(first, "replace", location.suffix);
+  }
+  function navigate(route, mode, suffix = "") {
+    selected.value = route.id;
+    const current = history();
+    if (current) {
+      committed = route.id;
+      if (current === owned && !insideBase() && mode === "push") {
+        return;
+      }
+      current[mode](route.path + suffix);
+      return;
+    }
+    const local = () => {
+      committed = route.id;
+    };
+    if (!hostRouter || !hostRoute || !anchor || !hostShowsShell()) {
+      return local();
+    }
+    const target = hostRouter.resolve(shellPath(base.value, route.path));
+    if (samePath(target.path, hostRoute.path)) return local();
+    if (!target.matched.some((record) => sameRouteRecord(record, anchor))) {
+      return local();
+    }
+    const location = mode === "replace" ? { path: target.path, query: hostRoute.query, hash: hostRoute.hash } : { path: target.path };
+    const resync = () => {
+      if (selected.value !== route.id) return;
+      const match = findShellRoute(
+        routes.value,
+        pagePath(base.value, hostRoute.path) ?? ""
+      );
+      selected.value = match?.id ?? fallbackId(committed);
+      committed = selected.value;
+    };
+    hostRouter[mode](location).then((failure) => {
+      if (isNavigationFailure(failure)) resync();
+    }, resync);
+  }
+  function openPage(id) {
+    if (!id || id === selected.value) return;
+    const route = routes.value.find((entry) => entry.id === id);
+    if (route) navigate(route, "push");
+  }
+  function hrefOf(id) {
+    const route = routes.value.find((entry) => entry.id === id);
+    if (!route) return "#";
+    const current = history();
+    if (current) return current.createHref(route.path);
+    if (hostRouter) {
+      return hostRouter.resolve(shellPath(base.value, route.path)).href;
+    }
+    return shellPath(base.value, route.path);
+  }
+  createOwned();
+  listen();
+  if (hostRoute) {
+    watch(
+      () => hostRoute.path,
+      () => {
+        if (hostShowsShell()) apply();
+      }
+    );
+  }
+  watch(
+    () => routes.value.map((route) => `${route.id}
+${route.path}`).join("\n"),
+    apply,
+    { immediate: true, flush: "sync" }
+  );
+  watch(base, (_next, previous) => {
+    if (owned) {
+      const page = pagePath(previous, window.location.pathname);
+      destroyOwned();
+      createOwned();
+      listen();
+      if (page !== void 0 && owned) {
+        owned.replace(page + window.location.search + window.location.hash);
+      }
+    }
+    apply();
+  });
+  onDeactivated(() => {
+    active = false;
+  });
+  onActivated(() => {
+    active = true;
+    apply();
+  });
+  onUnmounted(() => {
+    stopListen?.();
+    owned?.destroy();
+  });
+  return {
+    activeId: computed(() => selected.value),
+    openPage,
+    hrefOf
+  };
+}
+function hasHistoryCurrent(history) {
+  const current = history.state?.current;
+  return typeof current === "string";
+}
+function samePath(left, right) {
+  return normalizeRoutePath(left).toLowerCase() === normalizeRoutePath(right).toLowerCase();
+}
+function sameRouteRecord(record, anchor) {
+  if (anchor.name != null && record.name === anchor.name) return true;
+  return record.path === anchor.path;
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "SkShell"
+  },
+  __name: "SkShell",
+  props: /* @__PURE__ */ mergeModels({
+    layout: {},
+    session: { default: void 0 },
+    fields: { default: void 0 },
+    base: { default: "" },
+    backHref: { default: void 0 },
+    labels: { default: void 0 },
+    validators: { default: void 0 },
+    blocks: { default: void 0 },
+    headingLevel: { default: 1 }
+  }, {
+    "page": {},
+    "pageModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["action", "error", "back"], ["update:page"]),
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const page = useModel(__props, "page");
+    const emit = __emit;
+    const model = useSettingsLayout({
+      layout: () => props.layout,
+      session: props.session,
+      fields: () => props.fields,
+      validators: props.validators
+    });
+    provideSkLayoutContext(model, {
+      blocks: () => props.blocks,
+      headingLevel: () => props.headingLevel,
+      onAction: (event) => emit("action", event),
+      onError: (error) => emit("error", error)
+    });
+    const { message } = useSettingsLocale();
+    const labels = computed(() => ({
+      title: message("shell.title"),
+      back: message("shell.back"),
+      toggleSidebar: message("shell.toggleSidebar"),
+      navigation: message("shell.navigation"),
+      layout: message("shell.layout"),
+      focusLayout: message("shell.focusLayout"),
+      sidebarLayout: message("shell.sidebarLayout"),
+      pageHasErrors: message("shell.pageHasErrors"),
+      ...props.labels
+    }));
+    const routes = computed(() => createShellRoutes(model.resolved.value));
+    const { activeId, openPage, hrefOf } = useShellLocation({
+      routes,
+      base: () => props.base
+    });
+    const active = computed(() => model.page(activeId.value));
+    const activeCategory = computed(
+      () => model.resolved.value.categories.find(
+        (category) => category.uid === active.value?.categoryId
+      )
+    );
+    watch(
+      activeId,
+      (id) => {
+        if (id !== void 0 && id !== page.value) page.value = id;
+      },
+      { immediate: true }
+    );
+    watch(page, (id) => openPage(id));
+    const instance = getCurrentInstance();
+    const backListeners = computed(
+      () => instance?.vnode.props?.onBack ? { back: () => emit("back") } : {}
+    );
+    __expose({
+      /** The layout model: session, resolved tree, navigation, validator. */
+      model,
+      /** Opens a page by id, updating the URL where the shell may. */
+      openPage
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, mergeProps({
+        navigation: unref(model).navigation.value,
+        "active-id": unref(activeId),
+        "href-of": unref(hrefOf),
+        "sidebar-mode": active.value?.sidebarMode,
+        "back-href": __props.backHref,
+        labels: labels.value
+      }, toHandlers(backListeners.value), { onNavigate: unref(openPage) }), createSlots({
+        default: withCtx(() => [
+          active.value ? (openBlock(), createBlock(unref(SkLayoutPage), {
+            key: active.value.id,
+            page: active.value
+          }, null, 8, ["page"])) : renderSlot(_ctx.$slots, "empty", { key: 1 })
+        ]),
+        _: 2
+      }, [
+        _ctx.$slots.logo ? {
+          name: "logo",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "logo")
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.profile ? {
+          name: "profile",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "profile")
+          ]),
+          key: "1"
+        } : void 0,
+        active.value?.sidebar && activeCategory.value && _ctx.$slots.sidebar ? {
+          name: "sidebar",
+          fn: withCtx(() => [
+            renderSlot(_ctx.$slots, "sidebar", {
+              page: active.value,
+              category: activeCategory.value
+            })
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["navigation", "active-id", "href-of", "sidebar-mode", "back-href", "labels", "onNavigate"]);
+    };
+  }
+});
+const english = (key) => resolveKitMessage(key, "en");
+const defaultShellLabels = {
+  title: english("shell.title"),
+  back: english("shell.back"),
+  toggleSidebar: english("shell.toggleSidebar"),
+  navigation: english("shell.navigation"),
+  layout: english("shell.layout"),
+  focusLayout: english("shell.focusLayout"),
+  sidebarLayout: english("shell.sidebarLayout"),
+  pageHasErrors: english("shell.pageHasErrors")
+};
+export {
+  _sfc_main as SkShell,
+  _sfc_main$1 as SkShellFrame,
+  _sfc_main$2 as SkShellNav,
+  createShellRoutes,
+  defaultShellLabels,
+  findShellRoute,
+  normalizeRoutePath,
+  normalizeShellBase,
+  pagePath,
+  shellPath,
+  skShellHistoryKey,
+  splitLocation,
+  useShellLocation
+};