@cwa/nuxt-edge 0.0.0-29696494.72f11a4

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

@@ -0,0 +1,16 @@
+type __VLS_Slots = {
+    default(): any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onClear?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

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

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

@@ -0,0 +1,19 @@
+<script setup>
+import { useCwa } from "#cwa/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,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+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/composables/cwa";
+import { useTransitions } from "#cwa/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,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

@@ -0,0 +1,52 @@
+<script setup>
+import Notification from "./Notification.vue";
+import { useCwa } from "#imports";
+import { ErrorType } from "#cwa/storage/stores/error/state";
+const $cwa = useCwa();
+function removeError(timestamp) {
+  $cwa.resourcesManager.removeError(timestamp);
+}
+</script>
+
+<template>
+  <div
+    aria-live="assertive"
+    class="cwa:pointer-events-none cwa:fixed cwa:inset-0 cwa:flex cwa:items-end cwa:pt-20 cwa:pb-4 cwa:py-6 cwa:sm:px-4 cwa:sm:items-start cwa:z-notifications"
+  >
+    <TransitionGroup
+      tag="ul"
+      class="cwa:list-none cwa:flex cwa:w-full cwa:flex-col cwa:items-center cwa:gap-y-4 cwa:sm:items-end"
+      enter-active-class="cwa:transform cwa:ease-out cwa:duration-300 cwa:transition"
+      enter-from-class="cwa:translate-y-2 cwa:opacity-0 cwa:sm:translate-y-0 cwa:sm:translate-x-2"
+      enter-to-class="cwa:translate-y-0 cwa:opacity-100 cwa:sm:translate-x-0"
+      leave-active-class="cwa:transition cwa:ease-in cwa:duration-100"
+      leave-from-class="cwa:opacity-100"
+      leave-to-class="cwa:translate-y-2 cwa:opacity-0 cwa:sm:translate-y-0 cwa:sm:translate-x-2"
+    >
+      <Notification
+        v-for="(error, index) in $cwa.resourcesManager.errors"
+        :key="error.timestamp"
+        :data-index="index"
+        @clear="() => removeError(error.timestamp)"
+      >
+        <p class="cwa:text-md cwa:font-bold cwa:text-white">
+          Oops! There was a problem.
+        </p>
+        <ul v-if="error.type === ErrorType.VALIDATION">
+          <li
+            v-for="violation in error.violations"
+            :key="`violation-${violation.property}-${error.timestamp}`"
+          >
+            {{ violation.property }}: {{ violation.message }}
+          </li>
+        </ul>
+        <p
+          v-else
+          class="cwa:mt-1 cwa:text-sm cwa:text-gray-500"
+        >
+          {{ error?.statusCode || "Network Error" }}: {{ error.detail }}
+        </p>
+      </Notification>
+    </TransitionGroup>
+  </div>
+</template>

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

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

package/dist/runtime/templates/components/main/admin/resource-manager/ComponentFocus.d.vue.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, Ref } from 'vue';
+type __VLS_Props = {
+    iri: Ref<string | undefined>;
+    domElements: ComputedRef<HTMLElement[]>;
+};
+declare function redraw(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    redraw: typeof redraw;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/ComponentFocus.vue

@@ -0,0 +1,159 @@
+<script setup>
+import { computed, onBeforeUnmount, onMounted, ref, toRef, useTemplateRef, watch } from "vue";
+import { useElementSize, useWindowSize } from "@vueuse/core";
+import { v4 as uuidv4 } from "uuid";
+import { useCwa } from "#imports";
+import { getPublishedResourceState } from "#cwa/resources/resource-utils";
+const props = defineProps({
+  iri: { type: Object, required: true },
+  domElements: { type: Object, required: true }
+});
+const $cwa = useCwa();
+const domElements = toRef(props, "domElements");
+const iri = toRef(props, "iri");
+const canvas = useTemplateRef("canvas");
+const windowSize = useWindowSize();
+const elementSizeInstances = ref([]);
+const reorderId = ref();
+watch(props.domElements, (newDomElements) => {
+  for (const esInstance of elementSizeInstances.value) {
+    esInstance.stop();
+  }
+  elementSizeInstances.value = [];
+  const newInstances = [];
+  for (const el of newDomElements) {
+    newInstances.push(useElementSize(el));
+  }
+  elementSizeInstances.value = newInstances;
+}, {
+  immediate: true
+});
+const totalWidthAndHeight = computed(() => {
+  let totalValue = 0;
+  for (const esInstance of elementSizeInstances.value) {
+    totalValue += esInstance.width + esInstance.height;
+  }
+  return totalValue;
+});
+const resource = computed(() => {
+  if (!iri.value) {
+    return;
+  }
+  return $cwa.resources.getResource(iri.value).value;
+});
+const position = computed(() => {
+  const clearCoords = {
+    top: 999999999999,
+    left: 99999999999,
+    width: 0,
+    height: 0,
+    windowSize: {
+      width: windowSize.width.value,
+      height: windowSize.height.value
+    },
+    totalWidthAndHeight: totalWidthAndHeight.value,
+    reorderId: reorderId.value
+  };
+  for (const domElement of domElements.value) {
+    if (domElement.nodeType !== 1) {
+      continue;
+    }
+    const domRect = domElement.getBoundingClientRect();
+    clearCoords.top = Math.min(clearCoords.top, domRect.top);
+    clearCoords.left = Math.min(clearCoords.left, domRect.left);
+    clearCoords.width = Math.max(clearCoords.width, domRect.right - clearCoords.left);
+    clearCoords.height = Math.max(clearCoords.height, domRect.bottom - clearCoords.top);
+  }
+  const addY = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
+  clearCoords.top += addY;
+  const addX = Math.max(document.body.scrollLeft, document.documentElement.scrollLeft);
+  clearCoords.left += addX;
+  return {
+    top: clearCoords.top,
+    left: clearCoords.left,
+    width: clearCoords.width,
+    height: clearCoords.height
+  };
+});
+const cssStyle = computed(() => {
+  return {
+    top: `${position.value.top}px`,
+    left: `${position.value.left}px`,
+    width: `${position.value.width}px`,
+    height: `${position.value.height}px`
+  };
+});
+const borderColor = computed(() => {
+  if (!resource.value) {
+    return;
+  }
+  if (resource.value.data?._metadata.adding) {
+    return "cwa:outline-orange";
+  }
+  const publishedState = getPublishedResourceState(resource.value);
+  if (publishedState !== void 0) {
+    return publishedState ? "cwa:outline-green" : "cwa:outline-orange";
+  }
+  return iri.value?.startsWith("/_/") ? "cwa:outline-magenta" : "cwa:outline-green";
+});
+async function redraw() {
+  drawCanvas();
+}
+function drawCanvas() {
+  if (!canvas.value) {
+    return;
+  }
+  const ctx = canvas.value.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const offset = 7;
+  const width = Math.max(windowSize.width.value, document.body.clientWidth);
+  const height = Math.max(windowSize.height.value, document.body.clientHeight);
+  ctx.reset();
+  canvas.value.width = width;
+  canvas.value.height = height;
+  ctx.fillStyle = "rgba(0,0,0,0.4)";
+  ctx.beginPath();
+  ctx.rect(0, 0, width, height);
+  drawRoundedRect(ctx, position.value.left - offset, position.value.top - offset, position.value.width + offset * 2, position.value.height + offset * 2, 8);
+  ctx.fill();
+}
+function drawRoundedRect(ctx, x, y, width, height, radius) {
+  ctx.moveTo(x, y + radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.arcTo(x, y, x, y + radius, radius);
+}
+function assignReorderId() {
+  reorderId.value = uuidv4();
+}
+onMounted(() => {
+  $cwa.admin.eventBus.on("redrawFocus", redraw);
+  $cwa.admin.eventBus.on("reorder", assignReorderId);
+  watch([totalWidthAndHeight, position], $cwa.admin.emitRedraw);
+  watch(canvas, (newCanvas) => newCanvas && redraw());
+});
+onBeforeUnmount(() => {
+  $cwa.admin.eventBus.off("redrawFocus", redraw);
+  $cwa.admin.eventBus.off("reorder", assignReorderId);
+});
+defineExpose({
+  redraw
+});
+</script>
+
+<template>
+  <client-only>
+    <canvas
+      ref="canvas"
+      class="cwa:z-manager-focus cwa:pointer-events-none cwa:absolute cwa:top-0 cwa:left-0"
+    />
+    <div
+      :class="[borderColor]"
+      :style="cssStyle"
+      class="cwa:animate-pulse cwa:absolute cwa:outline-2 cwa:outline-offset-4 cwa:pointer-events-none cwa:outline cwa:rounded-[1px]"
+    />
+  </client-only>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/ComponentFocus.vue.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, Ref } from 'vue';
+type __VLS_Props = {
+    iri: Ref<string | undefined>;
+    domElements: ComputedRef<HTMLElement[]>;
+};
+declare function redraw(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    redraw: typeof redraw;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/LayoutPageOverlay.d.vue.ts

@@ -0,0 +1,10 @@
+interface BoundedElement {
+    getBoundingClientRect(): DOMRect;
+}
+type __VLS_Props = {
+    page: BoundedElement;
+    layout: BoundedElement;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/LayoutPageOverlay.vue

@@ -0,0 +1,198 @@
+<script setup>
+import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from "vue";
+import { useWindowSize } from "@vueuse/core";
+import { useCwa } from "#cwa/composables/cwa";
+const canvas = useTemplateRef("canvas");
+const windowSize = useWindowSize();
+const $cwa = useCwa();
+const props = defineProps({
+  page: { type: Object, required: true },
+  layout: { type: Object, required: true }
+});
+async function redraw() {
+  divElementOverlays.value = [];
+  nextTick().then(() => {
+    drawCanvas();
+    divElementOverlays.value = getDivElementOverlays();
+  });
+}
+function getHatchCanvas() {
+  const p = document.createElement("canvas");
+  p.width = 32;
+  p.height = 16;
+  const pctx = p.getContext("2d");
+  if (!pctx) {
+    return;
+  }
+  const x0 = 36;
+  const x1 = -4;
+  const y0 = -2;
+  const y1 = 18;
+  const offset = 32;
+  pctx.strokeStyle = "rgba(255,255,255, .1)";
+  pctx.lineWidth = 5;
+  pctx.beginPath();
+  pctx.moveTo(x0, y0);
+  pctx.lineTo(x1, y1);
+  pctx.moveTo(x0 - offset, y0);
+  pctx.lineTo(x1 - offset, y1);
+  pctx.moveTo(x0 + offset, y0);
+  pctx.lineTo(x1 + offset, y1);
+  pctx.stroke();
+  return p;
+}
+function drawCanvas() {
+  if (!canvas.value) {
+    return;
+  }
+  const ctx = canvas.value.getContext("2d");
+  if (!ctx) {
+    return;
+  }
+  const width = Math.max(windowSize.width.value, document.body.clientWidth);
+  const height = Math.max(windowSize.height.value, document.body.clientHeight);
+  ctx.reset();
+  canvas.value.width = width;
+  canvas.value.height = height;
+  const hatchCanvas = getHatchCanvas();
+  ctx.fillStyle = hatchCanvas ? ctx.createPattern(hatchCanvas, "repeat") || "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.4)";
+  ctx.beginPath();
+  if ($cwa.admin.resourceStackManager.isEditingLayout.value) {
+    drawLayoutFocus(ctx);
+  } else {
+    drawPageFocus(ctx);
+  }
+  ctx.fill();
+}
+function drawPageFocus(ctx) {
+  const [layoutRect] = getBoundingRect();
+  const pageCoords = getPageCoords();
+  const rightPage = pageCoords.left + pageCoords.width;
+  const bottomPage = pageCoords.top + pageCoords.height;
+  const coordsThree = { x: layoutRect.width, y: bottomPage };
+  const pageFocusCoords = [
+    { x: layoutRect.width, y: 0 },
+    // 2
+    coordsThree,
+    // 3
+    { x: rightPage, y: bottomPage },
+    // 4
+    { x: rightPage, y: pageCoords.top },
+    // 5
+    { x: pageCoords.left, y: pageCoords.top },
+    // 6
+    { x: pageCoords.left, y: bottomPage },
+    // 7
+    coordsThree,
+    // 8
+    { x: layoutRect.width, y: layoutRect.height },
+    // 9
+    { x: 0, y: layoutRect.height }
+    // 10
+    // it will return to start automatically when finished 0:0
+  ];
+  ctx.moveTo(0, 0);
+  for (const coords of pageFocusCoords) {
+    ctx.lineTo(coords.x, coords.y);
+  }
+}
+function drawLayoutFocus(ctx) {
+  const pageCoords = getPageCoords();
+  ctx.moveTo(pageCoords.left, pageCoords.top);
+  ctx.lineTo(pageCoords.left + pageCoords.width, pageCoords.top);
+  ctx.lineTo(pageCoords.left + pageCoords.width, pageCoords.top + pageCoords.height);
+  ctx.lineTo(pageCoords.left, pageCoords.top + pageCoords.height);
+}
+function getBoundingRect() {
+  return [
+    props.layout.getBoundingClientRect() || { width: 0, height: 0, top: 0, left: 0 },
+    props.page.getBoundingClientRect() || { width: 0, height: 0, top: 0, left: 0 }
+  ];
+}
+const getPageCoords = () => {
+  const [layoutRect, pageRect] = getBoundingRect();
+  return {
+    top: (pageRect?.top || 0) - (layoutRect?.top || 0),
+    left: (pageRect?.left || 0) - (layoutRect?.left || 0),
+    width: pageRect?.width || 0,
+    height: pageRect?.height || 0
+  };
+};
+onMounted(() => {
+  $cwa.admin.eventBus.on("redrawFocus", redraw);
+  watch(canvas, (newCanvas) => newCanvas && redraw());
+});
+onBeforeUnmount(() => {
+  $cwa.admin.eventBus.off("redrawFocus", redraw);
+});
+function getDivElementOverlays() {
+  const pageCoords = getPageCoords();
+  const numberToPx = (size) => {
+    return `${size}px`;
+  };
+  if ($cwa.admin.resourceStackManager.isEditingLayout.value) {
+    return [
+      {
+        top: numberToPx(pageCoords.top),
+        left: numberToPx(pageCoords.left),
+        width: numberToPx(pageCoords.width),
+        height: numberToPx(pageCoords.height)
+      }
+    ];
+  }
+  const [layoutRect] = getBoundingRect();
+  if (!layoutRect) {
+    return;
+  }
+  const rightPage = pageCoords.left + pageCoords.width;
+  const bottomPage = pageCoords.top + pageCoords.height;
+  return [
+    {
+      top: "0",
+      left: "0",
+      width: numberToPx(layoutRect.width),
+      height: numberToPx(pageCoords.top)
+    },
+    {
+      top: numberToPx(pageCoords.top),
+      left: "0",
+      width: numberToPx(pageCoords.left),
+      height: numberToPx(pageCoords.height)
+    },
+    {
+      top: numberToPx(pageCoords.top),
+      left: numberToPx(rightPage),
+      width: numberToPx(layoutRect.width - rightPage),
+      height: numberToPx(pageCoords.height)
+    },
+    {
+      top: numberToPx(bottomPage),
+      left: "0",
+      width: numberToPx(layoutRect.width),
+      height: numberToPx(layoutRect.height - bottomPage)
+    }
+  ];
+}
+const divElementOverlays = ref(getDivElementOverlays());
+</script>
+
+<template>
+  <ClientOnly>
+    <div
+      id="cwa-layout-page-overlay"
+      class="cwa:z-overlay cwa:pointer-events-none cwa:absolute cwa:top-0 cwa:left-0"
+    >
+      <div
+        v-for="(overlay, index) of divElementOverlays"
+        :key="`cwa-admin-overlay-${index}`"
+        :style="overlay"
+        class="cwa:absolute cwa:pointer-events-none cwa:backdrop-blur-[1.5px] cwa:bg-black/30"
+      />
+      <canvas
+        id="cwa-layout-page-overlay"
+        ref="canvas"
+        class="cwa:absolute cwa:top-0 cwa:left-0 cwa:pointer-events-none"
+      />
+    </div>
+  </ClientOnly>
+</template>

package/dist/runtime/templates/components/main/admin/resource-manager/LayoutPageOverlay.vue.d.ts

@@ -0,0 +1,10 @@
+interface BoundedElement {
+    getBoundingClientRect(): DOMRect;
+}
+type __VLS_Props = {
+    page: BoundedElement;
+    layout: BoundedElement;
+};
+declare const __VLS_export: 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: typeof __VLS_export;
+export default _default;

package/dist/runtime/templates/components/main/admin/resource-manager/ResourceManager.d.vue.ts

@@ -0,0 +1,10 @@
+declare function contextMenuHandler(e: MouseEvent, type: 'page' | 'layout'): void;
+declare function closeContextMenu(e: MouseEvent): void;
+declare function clickHandler(e: MouseEvent, type: 'page' | 'layout'): void;
+declare const __VLS_export: import("vue").DefineComponent<{}, {
+    clickHandler: typeof clickHandler;
+    contextMenuHandler: typeof contextMenuHandler;
+    closeContextMenu: typeof closeContextMenu;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;