@revenexx/editor 0.1.0

package/dist/runtime/editor/components/Messages/index.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="bk bk-messages">
+    <TransitionGroup :name="ui.useAnimations.value ? 'bk-message' : void 0">
+      <Item
+        v-for="(message, index) in messages"
+        v-bind="message"
+        :key="index"
+        @close="removeMessage(index)"
+      />
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup>
+import { ref, useBlokkli } from "#imports";
+import Item from "./Item/index.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const { ui } = useBlokkli();
+const messages = ref([
+  // {
+  //   type: 'success',
+  //   message: 'Foobar this is just a message',
+  // },
+]);
+function removeMessage(index) {
+  messages.value = messages.value.filter((_v, i) => i !== index);
+}
+onBlokkliEvent("message", (message) => {
+  if (message.replace) {
+    messages.value = [message];
+  } else {
+    messages.value.push(message);
+  }
+});
+onBlokkliEvent("message:clear", () => {
+  messages.value = [];
+});
+</script>
+
+<script>
+export default {
+  name: "Messages"
+};
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+@keyframes bk-message-timer {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
+.bk.bk-messages {
+  pointer-events: auto;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 380000) /* "messages" */;
+  width: 100%;
+  overflow: hidden;
+}
+.bk.bk-messages .bk-message {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+@media (width >= 48rem) {
+  .bk.bk-messages .bk-message {
+    flex-direction: row;
+  }
+}
+.bk-has-timer:is(.bk.bk-messages .bk-message):before {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  height: 5px;
+  width: 100%;
+  transform-origin: 0 0;
+  background-color: color-mix(in oklab, white 50%, transparent);
+  animation: 6.1s bk-message-timer linear;
+}
+.bk-is-success:is(.bk.bk-messages .bk-message) {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+.bk-is-success:is(.bk.bk-messages .bk-message) .bk-message-content {
+  color: white;
+}
+.bk-is-error:is(.bk.bk-messages .bk-message) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+.bk-is-error:is(.bk.bk-messages .bk-message) .bk-message-content {
+  color: white;
+}
+.bk-is-warning:is(.bk.bk-messages .bk-message) {
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+}
+.bk-is-warning:is(.bk.bk-messages .bk-message) .bk-message-content {
+  color: rgb(var(--bk-theme-yellow-dark) / 1);
+}
+.bk.bk-messages .bk-message-content {
+  position: relative;
+  flex: 1;
+  padding: 20px;
+  text-align: center;
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+@media (width >= 64rem) {
+  .bk.bk-messages .bk-message-content {
+    font-size: var(--text-2xl, 24px);
+    line-height: var(--bk-tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+  }
+}
+@media (hover: hover) {
+  :is(.bk.bk-messages .bk-message-content):hover {
+    background-color: rgb(var(--bk-theme-red-dark) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(.bk.bk-messages .bk-message-content):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-red-dark) / 1) 15%, transparent);
+    }
+  }
+}
+.bk.bk-messages .bk-message-additional {
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  --bk-tw-font-weight: var(--font-weight-normal, 400);
+  font-weight: var(--font-weight-normal, 400);
+}
+@media (width >= 64rem) {
+  .bk.bk-messages .bk-message-additional {
+    font-size: var(--text-xl, 20px);
+    line-height: var(--bk-tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+  }
+}
+.bk.bk-messages .bk-message-actions {
+  padding: 10px;
+}
+:is(.bk.bk-messages .bk-message-actions) button {
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-red-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk.bk-messages .bk-message-actions) button {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 60%, transparent);
+  }
+}
+@media (hover: hover) {
+  :is(:is(.bk.bk-messages .bk-message-actions) button):hover {
+    border-color: rgb(var(--bk-theme-red-dark) / 1);
+  }
+}
+.bk.bk-message-error {
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  padding: 20px;
+  -webkit-user-select: text;
+  user-select: text;
+}
+</style>

package/dist/runtime/editor/components/Messages/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+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>;

package/dist/runtime/editor/components/NestedEditorOverlay/index.d.vue.ts

@@ -0,0 +1,31 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from '../../../../global/types/theme.js';
+export type NestedEditorOverlayProps = {
+    url?: string;
+    uuid: string;
+    title: string;
+    theme: ThemeColorName;
+    icon: BlokkliIcon;
+    blockUuid?: string;
+    element?: HTMLElement | null;
+    autoSave?: boolean;
+};
+declare var __VLS_44: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_44) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<NestedEditorOverlayProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/editor/components/NestedEditorOverlay/index.vue

@@ -0,0 +1,346 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <Transition name="bk-library-edit-header">
+      <div
+        v-show="isLoaded"
+        class="bk bk-nested-editor-overlay _bk_bg-scheme-light _bk_text-scheme-dark _bk_fixed _bk_top-0 _bk_left-0 _bk_size-full _bk_pointer-events-auto _bk_z-nested-editor-overlay-bg"
+        :class="'bk-scheme-' + theme"
+      >
+        <Icon
+          :name="icon"
+          class="_bk_size-120 _bk_-rotate-12 _bk_absolute _bk_-left-15 _bk_-top-30 _bk_text-scheme-normal _bk_opacity-10"
+        />
+        <header class="_bk_flex _bk_items-center _bk_h-40 _bk_3xl:h-50 _bk_relative _bk_pl-10">
+          <h2 class="_bk_text-lg _bk_3xl:text-xl _bk_leading-none _bk_font-bold">
+            <span>{{ title }}</span>
+          </h2>
+          <button
+            class="_bk_h-40 _bk_3xl:h-50 _bk_flex _bk_items-center _bk_px-10 _bk_gap-10 _bk_font-semibold _bk_leading-none _bk_ml-auto _bk_hover:bg-scheme-light-hover _bk_text-sm _bk_3xl:text-base"
+            @click.prevent="closeOverlay"
+          >
+            <Icon name="bk_mdi_arrow_left_alt" class="_bk_size-[1.25em]" />
+            <span>{{ backLabel }}</span>
+          </button>
+        </header>
+      </div>
+    </Transition>
+    <Transition
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfter"
+      @enter-cancelled="onAfter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+      @leave-cancelled="onAfterLeave"
+    >
+      <PopupHost
+        v-show="isLoaded"
+        class="bk bk-library-edit-overlay _bk_fixed _bk_top-40 _bk_3xl:top-50 _bk_left-0 _bk_w-screen _bk_bottom-0 _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-nested-editor-overlay-iframe"
+        :class="'bk-is-' + theme"
+      >
+        <div
+          class="_bk_relative _bk_top-0 _bk_left-0 _bk_w-full _bk_h-full _bk_bg-white _bk_overflow-hidden"
+        >
+          <slot>
+            <div class="_bk_flex _bk_flex-col _bk_h-full">
+              <NotEditStateInfo />
+              <iframe
+                v-if="url"
+                ref="iframe"
+                :src="url"
+                class="_bk_block _bk_size-full"
+                @load="onLoad"
+              />
+            </div>
+          </slot>
+        </div>
+      </PopupHost>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  onUnmounted,
+  ref,
+  useBlokkli,
+  useTemplateRef
+} from "#imports";
+import { Icon, NotEditStateInfo, PopupHost } from "#blokkli/editor/components";
+import { onBroadcastEvent } from "#blokkli/editor/composables";
+const props = defineProps({
+  url: { type: String, required: false },
+  uuid: { type: String, required: true },
+  title: { type: String, required: true },
+  theme: { type: String, required: true },
+  icon: { type: null, required: true },
+  blockUuid: { type: String, required: false },
+  element: { type: null, required: false },
+  autoSave: { type: Boolean, required: false }
+});
+const { $t, ui, dom, blocks, state } = useBlokkli();
+const DURATION = 600;
+const emit = defineEmits(["submit", "close"]);
+function getOriginatingElement() {
+  if (props.element) {
+    return props.element;
+  }
+  if (props.blockUuid) {
+    const block = blocks.getBlock(props.blockUuid);
+    if (block) {
+      return dom.getDragElement(block) ?? null;
+    }
+  }
+  return null;
+}
+const backLabel = computed(() => {
+  const entityLabel = state.entity.value.label;
+  if (!entityLabel) {
+    return $t("libraryItemEditOverlayBack", "Back to page");
+  }
+  const entityLabelShort = entityLabel.length > 40 ? entityLabel.substring(0, 37) + "..." : entityLabel;
+  if (props.autoSave) {
+    return $t(
+      "libraryItemEditOverlayBackWithPage",
+      'Save and go back to "@label"'
+    ).replace("@label", entityLabelShort);
+  }
+  return $t(
+    "libraryItemEditOverlayBackWithPageNoSave",
+    'Go back to "@label"'
+  ).replace("@label", entityLabelShort);
+});
+const FADE_DURATION = 150;
+const EASING = "cubic-bezier(0.56, 0.04, 0.25, 1)";
+let pendingTimeouts = [];
+let raf = null;
+function cancelPendingTimeouts() {
+  pendingTimeouts.forEach((id) => window.clearTimeout(id));
+  pendingTimeouts = [];
+}
+function withTimeout(callback, duration) {
+  const id = window.setTimeout(callback, duration);
+  pendingTimeouts.push(id);
+}
+function onBeforeEnter(el) {
+  cancelPendingTimeouts();
+  if (el instanceof HTMLElement) {
+    el.style.transition = "none";
+    el.style.opacity = "0";
+  }
+}
+function onEnter(el, done) {
+  isLoading.value = false;
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+  }
+  if (!(el instanceof HTMLElement)) {
+    done();
+    return;
+  }
+  const originating = getOriginatingElement();
+  if (!originating) {
+    done();
+    return;
+  }
+  const originatingRect = originating.getBoundingClientRect();
+  const overlayRect = el.getBoundingClientRect();
+  const scaleX = originatingRect.width / overlayRect.width;
+  const scaleY = originatingRect.height / overlayRect.height;
+  const scale = Math.max(scaleX, scaleY);
+  const scaledW = overlayRect.width * scale;
+  const scaledH = overlayRect.height * scale;
+  const centerX = originatingRect.x + originatingRect.width / 2;
+  const centerY = originatingRect.y + originatingRect.height / 2;
+  const offsetX = centerX - scaledW / 2 - overlayRect.x;
+  const offsetY = centerY - scaledH / 2 - overlayRect.y;
+  const clipY = (overlayRect.height - originatingRect.height / scale) / 2;
+  const clipX = (overlayRect.width - originatingRect.width / scale) / 2;
+  el.style.transition = "none";
+  el.style.opacity = "0";
+  el.style.transformOrigin = "0px 0px";
+  el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+  el.style.clipPath = `inset(${clipY}px ${clipX}px ${clipY}px ${clipX}px round 4px)`;
+  el.getBoundingClientRect();
+  raf = requestAnimationFrame(() => {
+    el.style.transition = `opacity ${FADE_DURATION}ms ease-out`;
+    el.style.opacity = "1";
+    withTimeout(() => {
+      el.style.transition = `transform ${DURATION}ms ${EASING}, clip-path ${DURATION}ms ${EASING}`;
+      el.style.transform = "translate(0px, 0px) scale(1)";
+      el.style.clipPath = "inset(0px 0px 0px 0px round 0px)";
+      withTimeout(() => {
+        pendingTimeouts = [];
+        done();
+      }, DURATION);
+    }, FADE_DURATION);
+  });
+}
+function onAfter(el) {
+  if (el instanceof HTMLElement) {
+    el.style.transform = "";
+    el.style.transition = "";
+    el.style.opacity = "";
+    el.style.transformOrigin = "";
+    el.style.clipPath = "";
+  }
+  pendingTimeouts = [];
+}
+function onBeforeLeave(el) {
+  cancelPendingTimeouts();
+  if (el instanceof HTMLElement) {
+    el.style.transform = "none";
+    el.style.opacity = "1";
+    el.style.clipPath = "inset(0px 0px 0px 0px round 0px)";
+  }
+}
+function onLeave(el, done) {
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+  }
+  if (!(el instanceof HTMLElement)) {
+    done();
+    return;
+  }
+  const originating = getOriginatingElement();
+  if (!originating) {
+    done();
+    return;
+  }
+  const originatingRect = originating.getBoundingClientRect();
+  const overlayRect = el.getBoundingClientRect();
+  const scaleX = originatingRect.width / overlayRect.width;
+  const scaleY = originatingRect.height / overlayRect.height;
+  const scale = Math.max(scaleX, scaleY);
+  const scaledW = overlayRect.width * scale;
+  const scaledH = overlayRect.height * scale;
+  const centerX = originatingRect.x + originatingRect.width / 2;
+  const centerY = originatingRect.y + originatingRect.height / 2;
+  const offsetX = centerX - scaledW / 2 - overlayRect.x;
+  const offsetY = centerY - scaledH / 2 - overlayRect.y;
+  const clipY = (overlayRect.height - originatingRect.height / scale) / 2;
+  const clipX = (overlayRect.width - originatingRect.width / scale) / 2;
+  el.style.transition = `transform ${DURATION}ms ${EASING}, clip-path ${DURATION}ms ${EASING}`;
+  el.style.transformOrigin = "0px 0px";
+  el.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+  el.style.clipPath = `inset(${clipY}px ${clipX}px ${clipY}px ${clipX}px round 4px)`;
+  withTimeout(() => {
+    el.style.transition = `opacity ${FADE_DURATION}ms ease-out`;
+    el.style.opacity = "0";
+    withTimeout(() => {
+      pendingTimeouts = [];
+      done();
+    }, FADE_DURATION);
+  }, DURATION);
+}
+function onAfterLeave(el) {
+  onAfter(el);
+  pendingTimeouts = [];
+  if (raf) {
+    window.cancelAnimationFrame(raf);
+    raf = null;
+  }
+  if (hasPublished.value) {
+    emit("submit");
+  } else {
+    emit("close");
+  }
+}
+const iframe = useTemplateRef("iframe");
+const isLoaded = ref(false);
+const isLoading = ref(true);
+const hasPublished = ref(false);
+function onPublished({ uuid }) {
+  if (props.uuid === uuid) {
+    hasPublished.value = true;
+    isLoaded.value = false;
+  }
+}
+function onLoad() {
+  if (!iframe.value) {
+    return;
+  }
+  iframe.value.focus();
+  iframe.value.contentWindow?.focus();
+}
+function closeOverlay() {
+  hasPublished.value = false;
+  isLoaded.value = false;
+}
+function onClosed({ uuid }) {
+  if (props.uuid === uuid) {
+    closeOverlay();
+  }
+}
+function onEditorLoaded({ uuid }) {
+  if (props.uuid === uuid) {
+    isLoaded.value = true;
+  }
+}
+onMounted(() => {
+  isLoaded.value = true;
+  ui.setNestedEditor(props.uuid);
+  if (!props.url) {
+    isLoaded.value = true;
+  }
+});
+onBeforeUnmount(() => {
+  ui.setNestedEditor(null);
+});
+function onMessage(e) {
+  if (!e.data || typeof e.data !== "object") {
+    return;
+  }
+  if (e.data.event !== "BLOKKLI") {
+    return;
+  }
+  const { action } = e.data;
+  if (action === "SAVE") {
+    emit("submit");
+  } else if (action === "CANCEL") {
+    emit("close");
+  }
+}
+onMounted(() => {
+  window.addEventListener("message", onMessage);
+});
+onUnmounted(() => {
+  window.removeEventListener("message", onMessage);
+});
+onBroadcastEvent("published", onPublished);
+onBroadcastEvent("closeEditor", onClosed);
+onBroadcastEvent("editorLoaded", onEditorLoaded);
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-use-animations .bk-library-edit-header-enter-active,.bk-use-animations .bk-library-edit-header-leave-active {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 700ms;
+  transition-duration: 700ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk-use-animations .bk-library-edit-header-enter-active,.bk-use-animations .bk-library-edit-header-leave-active)  > header {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 700ms;
+  transition-duration: 700ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+.bk-use-animations .bk-library-edit-header-enter-from,.bk-use-animations .bk-library-edit-header-leave-to {
+  opacity: 0%;
+}
+:is(.bk-use-animations .bk-library-edit-header-enter-from,.bk-use-animations .bk-library-edit-header-leave-to)  > header {
+  --bk-tw-translate-y: -100%;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+</style>

package/dist/runtime/editor/components/NestedEditorOverlay/index.vue.d.ts

@@ -0,0 +1,31 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from '../../../../global/types/theme.js';
+export type NestedEditorOverlayProps = {
+    url?: string;
+    uuid: string;
+    title: string;
+    theme: ThemeColorName;
+    icon: BlokkliIcon;
+    blockUuid?: string;
+    element?: HTMLElement | null;
+    autoSave?: boolean;
+};
+declare var __VLS_44: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_44) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<NestedEditorOverlayProps> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, 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/editor/components/NotEditStateInfo/index.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/editor/components/NotEditStateInfo/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div
+    class="_bk_p-10 _bk_bg-red-normal _bk_text-red-light _bk_font-semibold _bk_flex _bk_items-center _bk_gap-5 _bk_text-sm _bk_text-pretty"
+  >
+    <Icon name="bk_mdi_warning" class="_bk_size-25 _bk_shrink-0" />
+    <span>{{
+      $t(
+  "formSaveNotEditStateInfo",
+  "Saving this form applies changes immediately \u2014 they take effect without publishing the current bl\xF6kkli page."
+)
+    }}</span>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+import { useBlokkli } from "#imports";
+const { $t } = useBlokkli();
+</script>

package/dist/runtime/editor/components/NotEditStateInfo/index.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/editor/components/Overlay/index.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;