@cwa/nuxt-edge 1.0.0-29138192.e49c1a0

package/dist/runtime/templates/components/main/admin/header/Header.vue

@@ -0,0 +1,207 @@
+<template>
+  <div>
+    <div ref="spacer" />
+    <div
+      ref="header"
+      class="cwa:section cwa:border-0 cwa:border-b-2 cwa:border-b-light/30 cwa:fixed cwa:z-manager cwa:w-full cwa:h-18 cwa:top-0 cwa:dark-blur"
+      :class="highlightClass"
+      @click.stop
+    >
+      <div class="cwa:flex cwa:justify-between cwa:items-center">
+        <div class="cwa:absolute cwa:left-1/2 cwa:top-1/2 cwa:-translate-x-1/2 cwa:-translate-y-1/2 cwa:text-center cwa:text-gray-300 cwa:z-20">
+          <template v-if="!pageIsAdmin && !isErrorPage">
+            <CwaUiFormButton
+              v-if="!$cwa.admin.isEditing && $cwa.resources?.page?.value?.data"
+              color="dark"
+              class="cwa:min-w-[120px]"
+            >
+              <span
+                class="cwa:flex cwa:items-center cwa:gap-x-2 cwa:justify-center"
+                @click="showEditPage"
+              >
+                <span>{{ $cwa.resources.page.value.data?.reference }}</span> <CwaUiIconCogIcon
+                  class="cwa:h-5 cwa:w-5"
+                  aria-hidden="true"
+                />
+              </span>
+            </CwaUiFormButton>
+            <path-selector v-else-if="$cwa.admin.resourceStackManager.showManager.value" />
+          </template>
+          <template v-else>
+            <ul class="cwa:flex cwa:gap-x-8 cwa:text-stone-400 cwa:items-center">
+              <li>
+                <NuxtLink
+                  to="/_cwa/layouts"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconLayouts />
+                  <span class="cwa:sr-only">Layouts</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/pages"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconPages class="cwa:h-6" />
+                  <span class="cwa:sr-only">Pages</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/data"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconData class="cwa:h-6" />
+                  <span class="cwa:sr-only">Data</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/routes"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconRoutes class="cwa:h-6" />
+                  <span class="cwa:sr-only">Routes</span>
+                </NuxtLink>
+              </li>
+              <li>
+                <NuxtLink
+                  to="/_cwa/users"
+                  class="cwa:hover:text-white cwa:transition-colors"
+                  active-class="cwa:text-white"
+                >
+                  <IconUsers />
+                  <span class="cwa:sr-only">Users</span>
+                </NuxtLink>
+              </li>
+            </ul>
+          </template>
+        </div>
+        <div class="cwa:flex cwa:justify-start cwa:gap-x-4">
+          <template v-if="!pageIsAdmin && !isErrorPage">
+            <CwaUiFormButton
+              class="cwa:min-w-[100px]"
+              color="blue"
+              :loading="$cwa.resources.isLoading.value"
+              @click="$cwa.admin.toggleEdit()"
+            >
+              {{ $cwa.admin.isEditing ? "Done" : "Edit" }}
+            </CwaUiFormButton>
+            <!-- this will be used when cloning a component only -->
+            <CwaUiFormToggle
+              v-if="false"
+              v-model="isNavEnabled"
+              label="Enable Navigation"
+            />
+          </template>
+        </div>
+        <div
+          v-if="$cwa.admin.isEditing"
+          class="cwa:flex cwa:gap-x-4 cwa:items-center"
+        >
+          <SpinnerTick
+            :is-loading="isLoading"
+            :is-pending="!!$cwa.resources.newResource.value"
+          />
+        </div>
+        <div
+          v-else
+          class="cwa:flex cwa:self-stretch cwa:min-h-9"
+        >
+          <Menu />
+        </div>
+      </div>
+      <OutdatedContentNotice class="cwa:absolute cwa:top-full cwa:mt-1.5 cwa:left-1/2 cwa:-translate-x-1/2 cwa:z-20" />
+      <ResourceLoadingIndicator class="cwa:absolute cwa:top-full cwa:left-0 cwa:z-10" />
+    </div>
+    <RequestErrors />
+    <ResourceModalOverlayTemplate :show="showEditModal && !!($cwa.resources.pageDataIri.value || $cwa.resources.pageIri.value)">
+      <PageDataAdminModal
+        v-if="$cwa.resources.pageDataIri.value"
+        :resource-type="$cwa.resources.pageData?.value?.data?.['@type'] || ''"
+        :iri="$cwa.resources.pageDataIri.value"
+        :hide-view-link="true"
+        @close="closeModal"
+        @reload="goToAdminPagesView"
+      />
+      <PageAdminModal
+        v-else-if="$cwa.resources.pageIri.value"
+        :iri="$cwa.resources.pageIri.value"
+        :hide-view-link="true"
+        @close="closeModal"
+        @reload="goToAdminPagesView"
+      />
+    </ResourceModalOverlayTemplate>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useTemplateRef } from "vue";
+import ResourceLoadingIndicator from "../_common/ResourceLoadingIndicator.vue";
+import SpinnerTick from "../../../utils/SpinnerTick.vue";
+import PathSelector from "./_parts/PathSelector.vue";
+import RequestErrors from "./_parts/RequestErrors.vue";
+import Menu from "./_parts/Menu.vue";
+import { useRoute, useRouter } from "#app";
+import { useCwa } from "#imports";
+import OutdatedContentNotice from "#cwa/runtime/templates/components/main/admin/header/_parts/OutdatedContentNotice.vue";
+import IconPages from "#cwa/runtime/templates/components/core/assets/IconPages.vue";
+import IconLayouts from "#cwa/runtime/templates/components/core/assets/IconLayouts.vue";
+import IconUsers from "#cwa/runtime/templates/components/core/assets/IconUsers.vue";
+import ResourceModalOverlayTemplate from "#cwa/runtime/templates/components/core/admin/ResourceModalOverlayTemplate.vue";
+import PageAdminModal from "#cwa/runtime/templates/components/core/admin/PageAdminModal.vue";
+import PageDataAdminModal from "#cwa/runtime/templates/components/core/admin/PageDataAdminModal.vue";
+import IconRoutes from "#cwa/runtime/templates/components/core/assets/IconRoutes.vue";
+import IconData from "#cwa/runtime/templates/components/core/assets/IconData.vue";
+import { useError } from "#app/composables/error";
+const $cwa = useCwa();
+const route = useRoute();
+const router = useRouter();
+const header = useTemplateRef("header");
+const spacer = useTemplateRef("spacer");
+const error = useError();
+const pageIsAdmin = computed(() => route.meta.cwa?.admin);
+const isErrorPage = computed(() => !!error.value);
+const showEditModal = ref(false);
+const isNavEnabled = computed({
+  get: () => {
+    return $cwa.admin.navigationGuardDisabled;
+  },
+  set: (newValue) => {
+    $cwa.admin.setNavigationGuardDisabled(newValue);
+  }
+});
+const isLoading = computed(() => $cwa.resourcesManager.requestCount.value > 0);
+const highlightClass = computed(() => {
+  const classes = ['cwa:before:content-[""] cwa:before:absolute cwa:before:top-0 cwa:before:left-0 cwa:before:w-full cwa:before:h-0.5 cwa:before:transition-colors'];
+  if ($cwa.resources.isDynamicPage.value) {
+    return [...classes, "cwa:before:bg-yellow"];
+  }
+  if ($cwa.resources.isDataPage.value) {
+    return [...classes, $cwa.resources.pageData?.value?.data?.route ? "cwa:before:bg-green" : "cwa:before:bg-orange"];
+  }
+  if (pageIsAdmin.value) {
+    return [...classes, "cwa:before:bg-stone-400"];
+  }
+  return [...classes, "cwa:before:bg-blue-600"];
+});
+function showEditPage() {
+  showEditModal.value = true;
+}
+function closeModal() {
+  showEditModal.value = false;
+}
+function goToAdminPagesView() {
+  router.replace("/_cwa/pages");
+}
+onMounted(() => {
+  if (header.value && spacer.value) {
+    spacer.value.style.height = `${header.value.clientHeight}px`;
+  }
+});
+</script>

package/dist/runtime/templates/components/main/admin/header/Header.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/header/_parts/Menu.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="cwa:flex cwa:relative cwa:h-full cwa:items-center cwa:z-50">
+    <CwaUiHamburger
+      ref="hamburger"
+      v-model="showMenu"
+      class="cwa:relative cwa:z-20"
+    />
+    <Transition
+      enter-from-class="cwa:transform cwa:opacity-0 cwa:scale-[0.97]"
+      enter-active-class="cwa:duration-200 cwa:ease-out"
+      enter-to-class="cwa:opacity-100"
+      leave-from-class="cwa:opacity-100"
+      leave-active-class="cwa:duration-200 cwa:ease-in"
+      leave-to-class="cwa:transform cwa:opacity-0 cwa:scale-[0.97]"
+    >
+      <div
+        v-show="showMenu"
+        ref="menu"
+        class="cwa:absolute cwa:z-10 cwa:-top-1.5 cwa:-right-2 cwa:bg-dark cwa:pt-6 cwa:pb-12 cwa:px-12 cwa:w-[90vw] cwa:max-w-xl cwa:origin-top-right"
+      >
+        <div class="cwa:text-light cwa:flex cwa:flex-col cwa:text-center cwa:gap-y-2 cwa:mb-5">
+          <div class="cwa:flex cwa:justify-center cwa:opacity-[.35]">
+            <CwaLogo class="cwa:h-8 cwa:w-auto" />
+          </div>
+          <h2 class="cwa:opacity-50 cwa:text-sm cwa:font-bold">
+            {{ $cwa.appName }}
+          </h2>
+        </div>
+        <div class="cwa:flex cwa:justify-center">
+          <div class="cwa:flex cwa:justify-between cwa:w-full cwa:max-w-[400px]">
+            <div class="cwa:mt-2">
+              <ul class="cwa:text-xl cwa:flex cwa:flex-col cwa:gap-y-5">
+                <li>
+                  <MenuPrimaryLink
+                    label="Layouts"
+                    to="/_cwa/layouts"
+                  >
+                    <IconLayouts class="cwa:w-7" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Pages"
+                    to="/_cwa/pages"
+                  >
+                    <IconPages class="cwa:w-5 cwa:mx-1" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Data"
+                    to="/_cwa/data"
+                  >
+                    <IconData class="cwa:w-6 cwa:mx-0.5" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Routes"
+                    to="/_cwa/routes"
+                  >
+                    <IconRoutes class="cwa:w-7" />
+                  </MenuPrimaryLink>
+                </li>
+                <li>
+                  <MenuPrimaryLink
+                    label="Users"
+                    to="/_cwa/users"
+                  >
+                    <IconUsers class="cwa:w-7" />
+                  </MenuPrimaryLink>
+                </li>
+              </ul>
+            </div>
+            <div class="cwa:flex cwa:flex-col cwa:gap-y-4">
+              <div>
+                <h3>Account</h3>
+                <ul class="cwa:text-sm">
+                  <li>
+                    <MenuLink>
+                      My account
+                    </MenuLink>
+                  </li>
+                  <li>
+                    <MenuLink @click="signOut">
+                      Sign out
+                    </MenuLink>
+                  </li>
+                </ul>
+              </div>
+              <div class="cwa:pr-8">
+                <h3>CWA</h3>
+                <ul class="cwa:text-sm">
+                  <li>
+                    <MenuLink
+                      to="https://cwa.rocks"
+                      target="_blank"
+                    >
+                      About CWA
+                    </MenuLink>
+                  </li>
+                  <li>
+                    <MenuLink
+                      :to="moduleLink"
+                      target="_blank"
+                    >
+                      App <span class="cwa:text-xs">{{ displayAppVersion }}</span>
+                    </MenuLink>
+                  </li>
+                  <li>
+                    <MenuLink
+                      :to="$cwa.apiUrlBase"
+                      target="_blank"
+                    >
+                      API <span class="cwa:text-xs">{{ displayApiVersion }}</span>
+                    </MenuLink>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import MenuPrimaryLink from "./MenuPrimaryLink.vue";
+import CwaLogo from "#cwa/runtime/templates/components/core/assets/CwaLogo.vue";
+import { useCwa, useRoute } from "#imports";
+import IconLayouts from "#cwa/runtime/templates/components/core/assets/IconLayouts.vue";
+import IconPages from "#cwa/runtime/templates/components/core/assets/IconPages.vue";
+import IconUsers from "#cwa/runtime/templates/components/core/assets/IconUsers.vue";
+import MenuLink from "#cwa/runtime/templates/components/main/admin/header/_parts/MenuLink.vue";
+import IconRoutes from "#cwa/runtime/templates/components/core/assets/IconRoutes.vue";
+import IconData from "#cwa/runtime/templates/components/core/assets/IconData.vue";
+const $cwa = useCwa();
+const route = useRoute();
+const showMenu = ref(false);
+const apiVersion = ref("");
+const menu = useTemplateRef("menu");
+const hamburger = ref();
+onClickOutside(menu, () => {
+  showMenu.value = false;
+}, {
+  ignore: [hamburger]
+});
+async function signOut() {
+  if ($cwa.navigationDisabled) {
+    return;
+  }
+  await $cwa.auth.signOut();
+}
+const moduleLink = computed(() => {
+  return `https://www.npmjs.com/package/${$cwa.currentModulePackageInfo.name}/v/${$cwa.currentModulePackageInfo.version}`;
+});
+async function setApiVersion() {
+  const docs = await $cwa.getApiDocumentation();
+  const version = docs?.docs?.info.version;
+  if (!version) {
+    return;
+  }
+  const matches = version.match(/ \(([a-zA-Z0-9\-@]+)\)$/);
+  apiVersion.value = matches ? matches[1] : version;
+}
+function truncateVersion(version) {
+  return version.length > 9 ? `${version.substring(0, 3)}..${version.substring(version.length - 4)}` : version;
+}
+const displayApiVersion = computed(() => {
+  const unstablePostfix = apiVersion.value.substring(0, 3) === "dev" ? " (unstable)" : "";
+  return truncateVersion(apiVersion.value) + unstablePostfix;
+});
+const displayAppVersion = computed(() => {
+  const unstablePostfix = $cwa.currentModulePackageInfo.name.substring($cwa.currentModulePackageInfo.name.length - 4) === "edge" ? " (unstable)" : "";
+  return truncateVersion($cwa.currentModulePackageInfo.version) + unstablePostfix;
+});
+watch(
+  () => route.path,
+  () => {
+    showMenu.value = false;
+  }
+);
+onMounted(() => {
+  setApiVersion();
+});
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/Menu.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/header/_parts/MenuLink.vue

@@ -0,0 +1,14 @@
+<template>
+  <NuxtLink
+    :to="to || '#'"
+    class="cwa:font-medium cwa:text-neutral-400 cwa:hover:text-white"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup>
+defineProps({
+  to: { type: null, required: false }
+});
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/MenuLink.vue.d.ts

@@ -0,0 +1,16 @@
+import type { RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    to?: RouteLocationRaw;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/MenuPrimaryLink.vue

@@ -0,0 +1,19 @@
+<template>
+  <NuxtLink
+    to="#"
+    class="cwa:font-medium cwa:text-neutral-400 cwa:hover:text-white cwa:flex cwa:gap-x-2 cwa:items-center"
+  >
+    <div class="cwa:w-10">
+      <slot />
+    </div>
+    <span>
+      {{ label }}
+    </span>
+  </NuxtLink>
+</template>
+
+<script setup>
+defineProps({
+  label: { type: String, required: true }
+});
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/MenuPrimaryLink.vue.d.ts

@@ -0,0 +1,15 @@
+type __VLS_Props = {
+    label: string;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/Notification.vue

@@ -0,0 +1,69 @@
+<template>
+  <li
+    class="cwa:pointer-events-auto cwa:w-full cwa:max-w-sm cwa:overflow-hidden cwa:rounded-lg cwa:dark-blur cwa:ring-2 cwa:ring-magenta"
+    @mouseout="setEmitTimeout"
+    @mouseover="clearEmitTimeout"
+  >
+    <div class="cwa:p-4">
+      <div class="cwa:flex cwa:items-start cwa:relative">
+        <div class="cwa:ml-3 cwa:w-0 cwa:flex-1 cwa:pt-0.5">
+          <slot />
+        </div>
+        <div class="cwa:ml-4 cwa:flex cwa:shrink-0">
+          <button
+            type="button"
+            class="cwa:inline-flex cwa:rounded-md cwa:text-stone-400 cwa:hover:text-white cwa:transition cwa:cursor-pointer"
+            @click="$emit('clear')"
+          >
+            <span class="cwa:sr-only">Close</span>
+            <CwaUiIconXMarkIcon
+              class="cwa:h-5 cwa:w-5"
+              aria-hidden="true"
+            />
+          </button>
+        </div>
+        <svg
+          class="cwa:absolute cwa:-top-0.5 cwa:-right-0.5 countdown-icon cwa:w-6 cwa:h-6 cwa:pointer-events-none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 100 100"
+          xml:space="preserve"
+          :class="{ 'is-progressing': emitTimeout !== void 0 }"
+        >
+          <circle
+            class="circle cwa:stroke-stone-400"
+            cx="50"
+            cy="50"
+            r="44"
+            fill="transparent"
+          />
+        </svg>
+      </div>
+    </div>
+  </li>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+const emitTimeout = ref();
+const emit = defineEmits(["clear"]);
+function setEmitTimeout() {
+  emitTimeout.value = setTimeout(() => {
+    emit("clear");
+  }, 6e3);
+}
+function clearEmitTimeout() {
+  if (emitTimeout.value) {
+    clearTimeout(emitTimeout.value);
+    emitTimeout.value = void 0;
+  }
+}
+onMounted(() => {
+  setTimeout(() => {
+    setEmitTimeout();
+  }, 20);
+});
+</script>
+
+<style>
+.countdown-icon .circle{stroke-width:12;transform-origin:50% 50% 0;stroke-dasharray:314;stroke-dashoffset:0;transform:rotate(-90deg);transition:stroke-dashoffset .6s linear}.countdown-icon.is-progressing .circle{transition-duration:6s;stroke-dashoffset:314}
+</style>

package/dist/runtime/templates/components/main/admin/header/_parts/Notification.vue.d.ts

@@ -0,0 +1,12 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, any, string, import("vue").PublicProps, any, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/templates/components/main/admin/header/_parts/OutdatedContentNotice.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { useCwa } from "#cwa/runtime/composables/cwa";
+const $cwa = useCwa();
+</script>
+
+<template>
+  <div
+    v-if="$cwa.resources.hasNewResources"
+    class="cwa:dark-blur cwa:py-2 cwa:px-3 cwa:rounded-full cwa:flex cwa:gap-x-1.5 cwa:items-center cwa:opacity-75 cwa:hover:opacity-100 cwa:transition"
+  >
+    <span class="cwa:text-stone-300">The content on this page is outdated</span>
+    <button
+      class="cwa:bg-light/90 cwa:hover:bg-light cwa:text-dark cwa:py-1 cwa:px-2 cwa:rounded-full cwa:cursor-pointer"
+      @click.stop="$cwa.resourcesManager.mergeNewResources"
+    >
+      Update
+    </button>
+  </div>
+</template>

package/dist/runtime/templates/components/main/admin/header/_parts/OutdatedContentNotice.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/runtime/templates/components/main/admin/header/_parts/PathSelector.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="stackItem && stackSize"
+    ref="pathSelector"
+  >
+    <div
+      class="cwa:py-1.5 cwa:px-3 cwa:bg-neutral-800 cwa:border cwa:border-dashed cwa:text-white"
+      :class="[isEnabled ? 'cwa:hover:bg-dark cwa:cursor-pointer' : '']"
+      @click="openMenu"
+    >
+      <span :class="{ 'cwa:opacity-0 cwa:duration-200': isOpen }">{{ stackItem.displayName }}</span>
+    </div>
+    <Transition v-bind="transitions.context">
+      <div
+        v-if="isOpen"
+        class="cwa:absolute cwa:top-0 cwa:left-1/2 cwa:-translate-x-1/2 cwa:min-w-full cwa:box-content cwa:inline-block"
+        :style="{ marginTop, transformOrigin: tOrig }"
+      >
+        <div class="cwa:relative cwa:bg-dark cwa:inline-block">
+          <resource-context-item
+            :index="stackSize - 1"
+            :root-width="selectorWidth"
+            :use-current-stack="true"
+            @click="(index) => selectResource(index)"
+          />
+        </div>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useTemplateRef } from "vue";
+import { onClickOutside } from "@vueuse/core";
+import ResourceContextItem from "../../_common/ResourceContextItem.vue";
+import { useCwa } from "#cwa/runtime/composables/cwa";
+import { useTransitions } from "#cwa/runtime/composables/transitions";
+const $cwa = useCwa();
+const transitions = useTransitions();
+const isOpen = ref(false);
+const pathSelector = useTemplateRef("pathSelector");
+const stackSize = computed(() => $cwa.admin.resourceStackManager.resourceStack.value.length);
+const spacingStackSize = computed(() => stackSize.value - 1);
+const tOrig = computed(() => {
+  const pathSelectorEl = pathSelector.value;
+  if (!pathSelectorEl) {
+    return;
+  }
+  const buttonOffset = Math.round(pathSelectorEl.offsetHeight / 2);
+  return `50% calc(${buttonOffset}px + ${stackSize.value}px + ${spacingStackSize.value * 0.25}rem)`;
+});
+const isEnabled = computed(() => {
+  return stackSize.value > 1;
+});
+const marginTop = computed(() => {
+  return spacingStackSize.value ? `calc(0px - ${spacingStackSize.value}px - ${spacingStackSize.value * 0.25}rem)` : 0;
+});
+const stackItem = computed(() => {
+  return $cwa.admin.resourceStackManager.resourceStack.value[0];
+});
+const selectorWidth = computed(() => {
+  const pathSelectorEl = pathSelector.value;
+  return stackItem.value?.displayName && pathSelectorEl ? pathSelectorEl.clientWidth : void 0;
+});
+function selectResource(index) {
+  $cwa.admin.resourceStackManager.selectStackIndex(index, false);
+  isOpen.value = false;
+}
+function openMenu() {
+  if (!isEnabled.value) {
+    isOpen.value = false;
+    return;
+  }
+  isOpen.value = true;
+}
+onClickOutside(pathSelector, () => {
+  isOpen.value = false;
+});
+</script>

package/dist/runtime/templates/components/main/admin/header/_parts/PathSelector.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;