@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.37

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

@@ -34,12 +34,17 @@
         class="bk bk-library-edit-overlay"
         :class="'bk-is-' + theme"
       >
-        <iframe
-          ref="iframe"
-          :src="url"
-          style="width: 100%; height: 100%"
-          @load="onLoad"
-        />
+        <div class="bk-library-edit-overlay-frame">
+          <slot>
+            <iframe
+              v-if="url"
+              ref="iframe"
+              :src="url"
+              style="width: 100%; height: 100%"
+              @load="onLoad"
+            />
+          </slot>
+        </div>
       </div>
     </Transition>
   </Teleport>
@@ -57,7 +62,7 @@ import {
 import { Icon } from "#blokkli/editor/components";
 import { onBroadcastEvent } from "#blokkli/editor/composables";
 const props = defineProps({
-  url: { type: String, required: true },
+  url: { type: String, required: false },
   uuid: { type: String, required: true },
   title: { type: String, required: true },
   theme: { type: String, required: true },
@@ -127,19 +132,28 @@ function onEnter(el, done) {
   const overlayRect = el.getBoundingClientRect();
   const scaleX = originatingRect.width / overlayRect.width;
   const scaleY = originatingRect.height / overlayRect.height;
-  const offsetX = originatingRect.x - overlayRect.x;
-  const offsetY = originatingRect.y - overlayRect.y;
+  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(${scaleX}, ${scaleY})`;
+  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}`;
-      el.style.transform = "translate(0px, 0px) scale(1, 1)";
+      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();
@@ -153,6 +167,7 @@ function onAfter(el) {
     el.style.transition = "";
     el.style.opacity = "";
     el.style.transformOrigin = "";
+    el.style.clipPath = "";
   }
   pendingTimeouts = [];
 }
@@ -161,6 +176,7 @@ function onBeforeLeave(el) {
   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) {
@@ -180,11 +196,19 @@ function onLeave(el, done) {
   const overlayRect = el.getBoundingClientRect();
   const scaleX = originatingRect.width / overlayRect.width;
   const scaleY = originatingRect.height / overlayRect.height;
-  const offsetX = originatingRect.x - overlayRect.x;
-  const offsetY = originatingRect.y - overlayRect.y;
-  el.style.transition = `transform ${DURATION}ms ${EASING}`;
+  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(${scaleX}, ${scaleY})`;
+  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";
@@ -241,6 +265,9 @@ function onEditorLoaded({ uuid }) {
 onMounted(() => {
   isLoaded.value = true;
   ui.setNestedEditor(props.uuid);
+  if (!props.url) {
+    isLoaded.value = true;
+  }
 });
 onBeforeUnmount(() => {
   ui.setNestedEditor(null);

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

@@ -1,19 +1,29 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 export type NestedEditorOverlayProps = {
-    url: string;
+    url?: string;
     uuid: string;
     title: string;
-    theme: 'lime' | 'red';
+    theme: 'lime' | 'red' | 'accent';
     icon: BlokkliIcon;
     blockUuid?: string;
     element?: HTMLElement | null;
 };
-declare const __VLS_export: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare var __VLS_38: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_38) => 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/Popup/index.d.vue.ts

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    id: string;
+    title: string;
+    text?: string;
+    cta: string;
+    theme: 'default' | 'warning' | 'primary' | 'danger' | 'lime';
+    position: 'top-left' | 'bottom-right';
+};
+declare function closePopup(): void;
+declare var __VLS_25: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    closePopup: typeof closePopup;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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/Popup/index.vue

@@ -0,0 +1,82 @@
+<template>
+  <Teleport :to="ui.mainLayoutElement.value">
+    <BlokkliTransition name="drop-up">
+      <ViewportBlockingRect
+        v-if="shouldRender"
+        :id="'popup-' + id"
+        class="bk bk-popup"
+        :class="['bk-is-' + position, 'bk-is-' + id]"
+      >
+        <div class="bk-popup-title">
+          <h2>{{ title }}</h2>
+          <button class="bk-popup-close" @click="onClose">
+            <Icon name="bk_mdi_close" />
+          </button>
+        </div>
+
+        <div class="bk-popup-content">
+          <div class="bk-popup-content-text">
+            <slot>
+              <p v-if="text" v-html="text" />
+            </slot>
+          </div>
+
+          <button class="bk-button" :class="'bk-is-' + theme" @click="onSubmit">
+            {{ cta }}
+          </button>
+        </div>
+      </ViewportBlockingRect>
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  Icon,
+  ViewportBlockingRect,
+  BlokkliTransition
+} from "#blokkli/editor/components";
+import { onBeforeUnmount, onMounted, ref, useBlokkli } from "#imports";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  text: { type: String, required: false },
+  cta: { type: String, required: true },
+  theme: { type: String, required: true },
+  position: { type: String, required: true }
+});
+const { ui, storage } = useBlokkli();
+const hasClosed = storage.use(`popup:${props.id}:closed`, false);
+const shouldRender = ref(false);
+let timeout = null;
+const emit = defineEmits(["submit", "close"]);
+function closePopup() {
+  hasClosed.value = true;
+  shouldRender.value = false;
+}
+function onSubmit() {
+  closePopup();
+  emit("submit");
+}
+function onClose() {
+  closePopup();
+  emit("close");
+}
+defineExpose({
+  closePopup
+});
+onMounted(() => {
+  if (hasClosed.value) {
+    return;
+  }
+  timeout = window.setTimeout(() => {
+    shouldRender.value = true;
+  }, 1e3);
+});
+onBeforeUnmount(() => {
+  if (timeout) {
+    window.clearTimeout(timeout);
+    timeout = null;
+  }
+});
+</script>

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

@@ -0,0 +1,30 @@
+type __VLS_Props = {
+    id: string;
+    title: string;
+    text?: string;
+    cta: string;
+    theme: 'default' | 'warning' | 'primary' | 'danger' | 'lime';
+    position: 'top-left' | 'bottom-right';
+};
+declare function closePopup(): void;
+declare var __VLS_25: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_25) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    closePopup: typeof closePopup;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+    submit: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & 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/PreviewProvider.d.vue.ts

@@ -1,4 +1,5 @@
 import '#blokkli-build/styles.css';
+import type { ValidProviderTypes } from '#blokkli-build/generated-types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         entity?: T;
@@ -6,6 +7,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         entityUuid: string;
         entityBundle: string;
         language: string;
+        providerType: ValidProviderTypes;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/editor/components/PreviewProvider.vue

@@ -31,7 +31,8 @@ const props = defineProps({
   entityType: { type: String, required: true },
   entityUuid: { type: String, required: true },
   entityBundle: { type: String, required: true },
-  language: { type: String, required: true }
+  language: { type: String, required: true },
+  providerType: { type: null, required: true }
 });
 defineSlots();
 const context = computed(() => {
@@ -45,7 +46,7 @@ const context = computed(() => {
 const adapter = await getAdapter(context);
 const router = useRouter();
 const broadcast = broadcastProvider();
-const definitions = definitionProvider();
+const definitions = definitionProvider(props.providerType);
 let timeout = null;
 let lastChanged = 0;
 const mutatedFieldsMap = reactive({});

package/dist/runtime/editor/components/PreviewProvider.vue.d.ts

@@ -1,4 +1,5 @@
 import '#blokkli-build/styles.css';
+import type { ValidProviderTypes } from '#blokkli-build/generated-types';
 declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<{
         entity?: T;
@@ -6,6 +7,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         entityUuid: string;
         entityBundle: string;
         language: string;
+        providerType: ValidProviderTypes;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

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

@@ -8,7 +8,10 @@
     <div class="bk-resizable-inner">
       <slot />
     </div>
-    <button class="bk-resizable-handle" @mousedown="onMouseDown" />
+    <button
+      class="bk-resizable-handle bk-is-vertical"
+      @mousedown="onMouseDown"
+    />
   </div>
 </template>
 

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

@@ -53,7 +53,7 @@ if (!props.viewOnly) {
   });
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (ui.hasDialogOpen.value) {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   const checkKey = [e.meta, e.shift, e.code.toLowerCase()].join("-");

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

@@ -7,11 +7,39 @@
   />
 
   <div
-    v-show="activeSidebarRight"
-    id="bk-sidebar-content-right"
-    class="bk-sidebar bk-is-right"
-    :class="{ 'bk-is-hidden': !sidebarVisible }"
-  />
+    v-show="activeSidebarRight || activeSidebarRightBottom"
+    ref="sidebarRightWrapper"
+    class="bk-sidebar-right-wrapper"
+    :class="{
+  'bk-is-resizing-split': isResizingSplit,
+  'bk-is-split': activeSidebarRightBottom
+}"
+  >
+    <div
+      v-show="activeSidebarRight"
+      id="bk-sidebar-content-right"
+      class="bk-sidebar bk-is-right"
+      :class="{ 'bk-is-hidden': !sidebarVisible }"
+      :style="rightSidebarStyle"
+    />
+    <div
+      v-show="activeSidebarRight && activeSidebarRightBottom"
+      class="bk bk-sidebar-resize"
+      @mousedown.prevent.stop="onSplitMouseDown"
+    >
+      <div>
+        <hr />
+        <hr />
+        <hr />
+      </div>
+    </div>
+    <div
+      v-show="activeSidebarRightBottom"
+      id="bk-sidebar-content-right-bottom"
+      class="bk-sidebar bk-is-right-bottom"
+      :class="{ 'bk-is-hidden': !sidebarVisible }"
+    />
+  </div>
 
   <AppMenu />
 
@@ -44,12 +72,23 @@
       id="bk-sidebar-tabs-right"
       class="bk-sidebar-container-tabs bk-is-right"
     />
+    <div
+      id="bk-sidebar-tabs-right-bottom"
+      class="bk-sidebar-container-tabs bk-is-right"
+    />
   </div>
 </template>
 
 <script setup>
 import { Icon } from "#blokkli/editor/components";
-import { onMounted, useBlokkli, onBeforeUnmount, computed } from "#imports";
+import {
+  onMounted,
+  useBlokkli,
+  onBeforeUnmount,
+  computed,
+  ref,
+  useTemplateRef
+} from "#imports";
 import AppMenu from "./../AppMenu/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const { ui, selection, storage, eventBus } = useBlokkli();
@@ -65,7 +104,67 @@ const sidebarVisible = computed(() => {
 });
 const activeSidebarLeft = storage.use("sidebar:active:left", "");
 const activeSidebarRight = storage.use("sidebar:active:right", "");
+const activeSidebarRightBottom = storage.use("sidebar:active:right-bottom", "");
 const focusedSidebar = storage.use("sidebar:focused", "");
+const splitPercent = storage.use("sidebar:right:split-percent", 50);
+const sidebarRightWrapper = useTemplateRef("sidebarRightWrapper");
+const activeSplitHeight = ref(null);
+const isResizingSplit = ref(false);
+const splitStartY = ref(0);
+const splitStartHeight = ref(0);
+const bothSidebarsVisible = computed(
+  () => !!activeSidebarRight.value && !!activeSidebarRightBottom.value
+);
+const rightSidebarStyle = computed(() => {
+  if (!bothSidebarsVisible.value) {
+    return {};
+  }
+  if (activeSplitHeight.value !== null) {
+    return { flex: `0 0 ${activeSplitHeight.value}px` };
+  }
+  return { flex: `0 0 ${splitPercent.value}%` };
+});
+function onSplitPointerMove(e) {
+  const wrapper = sidebarRightWrapper.value;
+  if (!wrapper) {
+    return;
+  }
+  const wrapperHeight = wrapper.clientHeight;
+  const delta = e.clientY - splitStartY.value;
+  const newHeight = Math.min(
+    Math.max(splitStartHeight.value + delta, 100),
+    wrapperHeight - 100
+  );
+  activeSplitHeight.value = newHeight;
+}
+function onSplitPointerUp() {
+  const wrapper = sidebarRightWrapper.value;
+  if (wrapper && activeSplitHeight.value !== null) {
+    const wrapperHeight = wrapper.clientHeight;
+    splitPercent.value = activeSplitHeight.value / wrapperHeight * 100;
+  }
+  activeSplitHeight.value = null;
+  isResizingSplit.value = false;
+  document.documentElement.style.cursor = "";
+  window.removeEventListener("mousemove", onSplitPointerMove);
+  window.removeEventListener("mouseup", onSplitPointerUp);
+}
+function onSplitMouseDown(e) {
+  if (ui.isMobile.value || e.button !== 0) {
+    return;
+  }
+  const wrapper = sidebarRightWrapper.value;
+  if (!wrapper) {
+    return;
+  }
+  const wrapperHeight = wrapper.clientHeight;
+  splitStartY.value = e.clientY;
+  splitStartHeight.value = splitPercent.value / 100 * wrapperHeight;
+  isResizingSplit.value = true;
+  document.documentElement.style.cursor = "ns-resize";
+  window.addEventListener("mousemove", onSplitPointerMove);
+  window.addEventListener("mouseup", onSplitPointerUp);
+}
 const emit = defineEmits(["loaded"]);
 const onWindowMouseDown = (e) => {
   if ((e.target instanceof HTMLElement || e.target instanceof SVGElement) && !e.target.closest(".bk-sidebar-detached")) {
@@ -79,6 +178,8 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   document.documentElement.removeEventListener("mousedown", onWindowMouseDown);
+  window.removeEventListener("mousemove", onSplitPointerMove);
+  window.removeEventListener("mouseup", onSplitPointerUp);
 });
 </script>
 

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

@@ -10,6 +10,8 @@ import ConfigForm from './PluginConfigForm/index.vue.js';
 import DialogModal from './Dialog/index.vue.js';
 import DiffValue from './DiffViewer/DiffValue.vue.js';
 import DiffViewerState from './DiffViewer/State.vue.js';
+import Dropdown from './Dropdown/index.vue.js';
+import DropdownItem from './DropdownItem/index.vue.js';
 import ErrorBoundary from './BlokkliErrorBoundary.vue.js';
 import FlexTextarea from './FlexTextarea/index.vue.js';
 import FormCheckboxes from './Form/Checkboxes/index.vue.js';
@@ -31,6 +33,7 @@ import ItemIconBox from './ItemIconBox/index.vue.js';
 import Loading from './Loading/index.vue.js';
 import NestedEditorOverlay from './NestedEditorOverlay/index.vue.js';
 import Pagination from './Pagination/index.vue.js';
+import Popup from './Popup/index.vue.js';
 import RelativeTime from './RelativeTime/index.vue.js';
 import Resizable from './Resizable/index.vue.js';
 import ScaleToFit from './ScaleToFit/index.vue.js';
@@ -41,4 +44,4 @@ import Sortli from './Sortli/index.vue.js';
 import StatusIcon from './StatusIcon/index.vue.js';
 import TransitionHeight from './Transition/Height.vue.js';
 import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-export { AddListItem, ArtboardTooltip, AutoHeight, Banner, BlockPreviewItem, BlockPreviewRenderer, BlokkliTransition, BundleSelector, ConfigForm, DialogModal, DiffValue, DiffViewerState, ErrorBoundary, FlexTextarea, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, ItemIconBox, Loading, NestedEditorOverlay, Pagination, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, StatusIcon, TransitionHeight, ViewportBlockingRect, };
+export { AddListItem, ArtboardTooltip, AutoHeight, Banner, BlockPreviewItem, BlockPreviewRenderer, BlokkliTransition, BundleSelector, ConfigForm, DialogModal, DiffValue, DiffViewerState, Dropdown, DropdownItem, ErrorBoundary, FlexTextarea, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, ItemIconBox, Loading, NestedEditorOverlay, Pagination, Popup, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, StatusIcon, TransitionHeight, ViewportBlockingRect, };

package/dist/runtime/editor/components/index.js

@@ -10,6 +10,8 @@ import ConfigForm from "./PluginConfigForm/index.vue";
 import DialogModal from "./Dialog/index.vue";
 import DiffValue from "./DiffViewer/DiffValue.vue";
 import DiffViewerState from "./DiffViewer/State.vue";
+import Dropdown from "./Dropdown/index.vue";
+import DropdownItem from "./DropdownItem/index.vue";
 import ErrorBoundary from "./BlokkliErrorBoundary.vue";
 import FlexTextarea from "./FlexTextarea/index.vue";
 import FormCheckboxes from "./Form/Checkboxes/index.vue";
@@ -31,6 +33,7 @@ import ItemIconBox from "./ItemIconBox/index.vue";
 import Loading from "./Loading/index.vue";
 import NestedEditorOverlay from "./NestedEditorOverlay/index.vue";
 import Pagination from "./Pagination/index.vue";
+import Popup from "./Popup/index.vue";
 import RelativeTime from "./RelativeTime/index.vue";
 import Resizable from "./Resizable/index.vue";
 import ScaleToFit from "./ScaleToFit/index.vue";
@@ -54,6 +57,8 @@ export {
   DialogModal,
   DiffValue,
   DiffViewerState,
+  Dropdown,
+  DropdownItem,
   ErrorBoundary,
   FlexTextarea,
   FormCheckboxes,
@@ -75,6 +80,7 @@ export {
   Loading,
   NestedEditorOverlay,
   Pagination,
+  Popup,
   RelativeTime,
   Resizable,
   ScaleToFit,

package/dist/runtime/editor/composables/defineDropAreas.js

@@ -1,10 +1,10 @@
 import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
 export function defineDropAreas(cb) {
-  const { dropAreas } = useBlokkli();
+  const { dragdrop } = useBlokkli();
   onMounted(() => {
-    dropAreas.add(cb);
+    dragdrop.addDropArea(cb);
   });
   onBeforeUnmount(() => {
-    dropAreas.remove(cb);
+    dragdrop.removeDropArea(cb);
   });
 }

package/dist/runtime/editor/composables/defineDropHandler.d.ts

@@ -0,0 +1,3 @@
+import type { DraggableItemTypes } from '../types/draggable.js';
+import type { DropHandler } from '../providers/dragdrop.js';
+export declare function defineDropHandler<K extends keyof DraggableItemTypes>(itemType: K, handler: DropHandler<K>): void;

package/dist/runtime/editor/composables/defineDropHandler.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineDropHandler(itemType, handler) {
+  const { dragdrop } = useBlokkli();
+  onMounted(() => {
+    dragdrop.registerDropHandler(itemType, handler);
+  });
+  onBeforeUnmount(() => {
+    dragdrop.unregisterDropHandler(itemType, handler);
+  });
+}

package/dist/runtime/editor/composables/index.d.ts

@@ -2,6 +2,7 @@ export { addElementClasses } from './addElementClasses.js';
 export { defineAddAction } from './defineAddAction.js';
 export { defineCommands } from './defineCommands.js';
 export { defineDropAreas } from './defineDropAreas.js';
+export { defineDropHandler } from './defineDropHandler.js';
 export { defineElementStyle } from './defineElementStyle.js';
 export { defineItemDropdownAction } from './defineItemDropdownAction.js';
 export { defineMenuButton } from './defineMenuButton.js';

package/dist/runtime/editor/composables/index.js

@@ -2,6 +2,7 @@ export { addElementClasses } from "./addElementClasses.js";
 export { defineAddAction } from "./defineAddAction.js";
 export { defineCommands } from "./defineCommands.js";
 export { defineDropAreas } from "./defineDropAreas.js";
+export { defineDropHandler } from "./defineDropHandler.js";
 export { defineElementStyle } from "./defineElementStyle.js";
 export { defineItemDropdownAction } from "./defineItemDropdownAction.js";
 export { defineMenuButton } from "./defineMenuButton.js";

package/dist/runtime/editor/composables/onElementResize.js

@@ -23,7 +23,6 @@ export function onElementResize(el, cb) {
         if (!boxSize) {
           return;
         }
-        console.log("CB");
         cb({
           width: boxSize.inlineSize,
           height: boxSize.blockSize

package/dist/runtime/editor/composables/useEditableFieldOverride.js

@@ -1,5 +1,4 @@
 import { useBlokkli } from "#imports";
-import { FIELD_MAPPING } from "#blokkli-build/runtime-options";
 import { itemEntityType } from "#blokkli-build/config";
 const NOOP_OVERRIDE = {
   element: null,
@@ -32,7 +31,7 @@ export function useEditableFieldOverride(fieldName, host) {
   const isComponent = !!editableData?.isComponent;
   function findMatchingProp(mapping) {
     return Object.entries(mapping).find(
-      ([_prop, field]) => field === fieldName
+      ([_prop, propMapping]) => propMapping?.name === fieldName && propMapping.type === "editable"
     )?.[0] ?? null;
   }
   const providerDefinition = definitions.getProviderDefinition(
@@ -41,9 +40,9 @@ export function useEditableFieldOverride(fieldName, host) {
   );
   let matchingProp = null;
   if (host.type === itemEntityType) {
-    const mapping = FIELD_MAPPING[host.bundle];
-    if (mapping) {
-      matchingProp = findMatchingProp(mapping);
+    const defintion = definitions.getBlockDefinition(host.bundle, "default");
+    if (defintion?.propsFieldMapping) {
+      matchingProp = findMatchingProp(defintion.propsFieldMapping);
     }
   } else if (providerDefinition) {
     const mapping = providerDefinition.propsFieldMapping;