@blokkli/editor 2.0.0-alpha.5 → 2.0.0-alpha.51

package/dist/runtime/editor/features/debug/Section/Selection.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="bk-debug-list">
+    <div>
+      <div>Count</div>
+      <div>{{ selection.uuids.value.length }}</div>
+    </div>
+    <div>
+      <div>isDragging</div>
+      <div>{{ selection.isDragging.value }}</div>
+    </div>
+    <div>
+      <div>isDraggingExisting</div>
+      <div>{{ selection.isDraggingExisting.value }}</div>
+    </div>
+    <div>
+      <div>Is multiselecting</div>
+      <div>{{ selection.isMultiSelecting.value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli } from "#imports";
+const { selection } = useBlokkli();
+</script>

package/dist/runtime/editor/features/debug/Section/Selection.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/features/debug/Viewport/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/features/debug/Viewport/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="bk-debug-visible-viewport" :style="visibleViewportOverlayStyle">
+    <div>Visible Viewport</div>
+  </div>
+  <div
+    class="bk-debug-visible-viewport-padded"
+    :style="visibleViewportOverlayPaddedStyle"
+  >
+    <div>Visible Viewport Padded</div>
+  </div>
+  <div
+    v-for="(rect, i) in viewportBlockingRects"
+    :key="i"
+    class="bk-debug-viewport-blocking-rect"
+    :style="rect"
+  />
+
+  <div
+    v-for="(rect, i) in intersectionRects"
+    :key="'intersection_' + i"
+    class="bk-debug-intersection-rects"
+    :style="rect"
+  />
+
+  <div
+    v-for="(line, i) in linesRects"
+    :key="i"
+    class="bk-debug-viewport-lines"
+    :style="line"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, computed } from "#imports";
+import { subtractRectFromViewport } from "#blokkli/editor/helpers/geometry";
+const { ui } = useBlokkli();
+const rectToStyle = (rect) => {
+  return {
+    top: rect.y + "px",
+    left: rect.x + "px",
+    width: rect.width + "px",
+    height: rect.height + "px"
+  };
+};
+const viewportBlockingRects = computed(
+  () => ui.viewportBlockingRects.value.map(rectToStyle)
+);
+const linesRects = computed(() => {
+  const rects = [];
+  ui.viewportBlockingRects.value.forEach((rect) => {
+    rects.push(
+      rectToStyle({
+        x: rect.x,
+        y: 0,
+        width: 1,
+        height: window.innerHeight
+      })
+    );
+    rects.push(
+      rectToStyle({
+        x: rect.x + rect.width,
+        y: 0,
+        width: 1,
+        height: window.innerHeight
+      })
+    );
+    rects.push(
+      rectToStyle({
+        x: 0,
+        y: rect.y,
+        width: window.innerWidth,
+        height: 1
+      })
+    );
+    rects.push(
+      rectToStyle({
+        x: 0,
+        y: rect.y + rect.height,
+        width: window.innerWidth,
+        height: 1
+      })
+    );
+  });
+  return rects;
+});
+const visibleViewportOverlayStyle = computed(
+  () => rectToStyle(ui.visibleViewport.value)
+);
+const visibleViewportOverlayPaddedStyle = computed(
+  () => rectToStyle(ui.visibleViewportPadded.value)
+);
+const intersectionRects = computed(() => {
+  return subtractRectFromViewport(
+    ui.viewport.value,
+    ui.visibleViewport.value
+  ).map(rectToStyle);
+});
+</script>

package/dist/runtime/editor/features/debug/Viewport/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/features/debug/index.d.vue.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/features/debug/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <DebugMain v-if="debug.isEnabled.value" :logger />
+</template>
+
+<script setup>
+import { defineBlokkliFeature, useBlokkli } from "#imports";
+import DebugMain from "./Main.vue";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const { logger } = defineBlokkliFeature({
+  id: "debug",
+  label: "Debug",
+  icon: "bk_mdi_bug_report",
+  description: "Provides debugging functionality."
+});
+const { debug, ui } = useBlokkli();
+onBlokkliEvent("keyPressed", (e) => {
+  if (ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
+    return;
+  }
+  if (e.code === "=" && e.meta) {
+    e.originalEvent.preventDefault();
+    debug.toggle();
+  }
+});
+</script>
+
+<script>
+export default {
+  name: "Debug"
+};
+</script>

package/dist/runtime/editor/features/debug/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/features/delete/index.d.vue.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/features/delete/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <PluginItemAction
+    id="delete"
+    edit-only
+    :title="$t('deleteButton', 'Delete')"
+    :disabled="deleteDisabledReason"
+    multiple
+    key-code="Delete"
+    icon="bk_mdi_delete"
+    :weight="-80"
+    @click="onClick"
+  />
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import { PluginItemAction } from "#blokkli/editor/plugins";
+import { itemEntityType } from "#blokkli-build/config";
+const { state, $t, eventBus, dom, selection, permissions } = useBlokkli();
+const { adapter } = defineBlokkliFeature({
+  id: "delete",
+  icon: "bk_mdi_delete",
+  label: "Delete",
+  requiredAdapterMethods: ["deleteBlocks"],
+  description: "Provides an action to delete one or more blocks."
+});
+const deleteDisabledReason = computed(() => {
+  const bundles = selection.bundles.value;
+  if (!bundles.length) {
+    return false;
+  }
+  const denied = permissions.filterDeniedBundles(bundles, "delete");
+  if (denied.length) {
+    return $t(
+      "deleteNoPermission",
+      "You do not have permission to delete this block."
+    );
+  }
+  return false;
+});
+function getSelectionAfterDelete(items) {
+  if (items.length !== 1) {
+    return;
+  }
+  const uuid = items[0].uuid;
+  const field = state.getFieldListForBlock(uuid);
+  if (!field) {
+    return;
+  }
+  const index = field.list.findIndex((v) => v.uuid === uuid);
+  if (index === -1) {
+    return;
+  }
+  const inList = field.list[index + 1]?.uuid || field.list[index - 1]?.uuid;
+  if (inList) {
+    return inList;
+  }
+  if (field.entityType !== itemEntityType) {
+    return;
+  }
+  return field.entityUuid;
+}
+async function onClick(items) {
+  const selectedUuidsAfter = getSelectionAfterDelete(items);
+  await state.mutateWithLoadingState(
+    () => adapter.deleteBlocks(items.map((v) => v.uuid)),
+    $t("deleteError", "The block could not be deleted.")
+  );
+  if (selectedUuidsAfter) {
+    eventBus.emit("select", selectedUuidsAfter);
+    dom.refreshBlockRect(selectedUuidsAfter);
+    eventBus.emit("scrollIntoView", { uuid: selectedUuidsAfter });
+  } else {
+    eventBus.emit("select:unselect");
+  }
+}
+</script>
+
+<script>
+export default {
+  name: "Delete"
+};
+</script>

package/dist/runtime/editor/features/delete/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/features/delete/types.d.ts

@@ -0,0 +1,8 @@
+declare module '#blokkli/editor/adapter' {
+    interface BlokkliAdapter<T> {
+        /**
+         * Delete multiple items.
+         */
+        deleteBlocks?: (uuids: string[]) => Promise<MutationResponseLike<T>>;
+    }
+}

package/dist/runtime/editor/features/dev-mode/index.d.vue.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/features/dev-mode/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <PluginViewOption
+    id="dev_mode"
+    v-model="isEnabled"
+    :label="$t('toggleInteractionLayers', 'Toggle interaction layers')"
+    :title-on="$t('interactionLayersOn', 'Hide interaction layers')"
+    :title-off="$t('interactionLayerOff', 'Show interaction layers')"
+    icon="bk_mdi_logo_dev"
+    key-code="I"
+    weight="-99999"
+  />
+  <Teleport :to="ui.mainLayoutElement.value">
+    <div v-if="fieldMappingValidations.length" class="bk bk-dev-mode">
+      <div class="bk-dev-mode-inner">
+        <Banner
+          id="dev-mode"
+          icon="bk_mdi_logo_dev"
+          text="Invalid definitions found!"
+          scheme="red"
+        >
+          <div class="bk-dev-mode-banner">
+            <h3>Some block components are invalid:</h3>
+            <table>
+              <thead>
+                <tr>
+                  <th>Bundle</th>
+                  <th>Error</th>
+                </tr>
+              </thead>
+
+              <tbody>
+                <tr
+                  v-for="(item, index) in fieldMappingValidations"
+                  :key="index"
+                >
+                  <td>{{ item.bundle }}</td>
+                  <td v-html="item.validation" />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </Banner>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  defineBlokkliFeature,
+  ref,
+  computed,
+  onMounted
+} from "#imports";
+import { PluginViewOption } from "#blokkli/editor/plugins";
+import { Banner } from "#blokkli/editor/components";
+import { addElementClasses } from "#blokkli/editor/composables";
+import { falsy } from "#blokkli/helpers";
+import { itemEntityType } from "#blokkli-build/config";
+defineBlokkliFeature({
+  id: "dev-mode",
+  label: "Dev Mode",
+  icon: "bk_mdi_logo_dev",
+  description: "Feature enabled in development mode.",
+  viewports: ["desktop"]
+});
+const { $t, types, definitions, ui } = useBlokkli();
+const isEnabled = ref(false);
+const fieldMappingValidations = computed(() => {
+  return definitions.blockDefinitions.value.flatMap((definition) => {
+    if (definition.renderFor) {
+      return null;
+    }
+    const propsFieldMapping = definition.propsFieldMapping ?? {};
+    const bundle = definition.bundle;
+    const fields = new Set(
+      types.fieldConfig.forEntityTypeAndBundle(itemEntityType, bundle).map((field) => field.name)
+    );
+    const mappings = Object.entries(propsFieldMapping).map(([propName, mapping]) => {
+      if (mapping && mapping.type === "field") {
+        return {
+          propName,
+          fieldName: mapping.name
+        };
+      }
+      return null;
+    }).filter(falsy);
+    const invalidMappings = mappings.filter((mapping) => {
+      return !fields.has(mapping.fieldName);
+    }).map((mapping) => {
+      return {
+        bundle,
+        validation: `The props field mapping <code>'${mapping.propName}': '${mapping.fieldName}'</code> is invalid, because <strong>${bundle}</strong> has no field <strong>${mapping.fieldName}</strong>`
+      };
+    });
+    const missingMappings = [...fields.values()].filter((fieldName) => {
+      return !mappings.find((mapping) => mapping.fieldName === fieldName);
+    }).map((fieldName) => {
+      return {
+        bundle,
+        validation: `Missing props field mapping for field <strong>${fieldName}</strong>`
+      };
+    });
+    return [...invalidMappings, ...missingMappings];
+  }).filter(falsy);
+});
+addElementClasses(
+  document.documentElement,
+  "bk-hide-interaction-layers",
+  isEnabled
+);
+onMounted(() => {
+  console.log(fieldMappingValidations.value);
+});
+</script>
+
+<script>
+export default {
+  name: "DevMode"
+};
+</script>

package/dist/runtime/editor/features/dev-mode/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/features/diff/DiffView/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/features/diff/DiffView/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="bk bk-diff-sidebar-pane">
+    <DiffViewerState
+      v-if="stateBefore"
+      :state-before
+      :state-after
+      scheme="orange"
+    />
+  </div>
+</template>
+
+<script setup>
+import { useBlokkli, useAsyncData } from "#imports";
+import { DiffViewerState } from "#blokkli/editor/components";
+const { adapter, state } = useBlokkli();
+const { data: stateBefore } = await useAsyncData("stateBefore", () => {
+  return adapter.loadStateAtIndex(-1).then((v) => adapter.mapState(v));
+});
+const stateAfter = state.getMappedState();
+</script>

package/dist/runtime/editor/features/diff/DiffView/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/features/diff/index.d.vue.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/features/diff/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <PluginSidebar
+    id="diff"
+    :title="$t('diffSidebarTitle', 'Changes')"
+    :tour-text="
+  $t('diffSidebarTourText', 'Displays all the changes made during editing.')
+"
+    icon="bk_mdi_text_compare"
+    weight="-400"
+    beta
+  >
+    <DiffView :key="state.currentMutationIndex.value" />
+  </PluginSidebar>
+</template>
+
+<script setup>
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import { PluginSidebar } from "#blokkli/editor/plugins";
+import DiffView from "./DiffView/index.vue";
+defineBlokkliFeature({
+  id: "diff",
+  label: "Diff",
+  icon: "bk_mdi_text_compare",
+  description: "Displays a diff of all changes in the edit state.",
+  requiredAdapterMethods: ["loadStateAtIndex"],
+  beta: true
+});
+const { $t, state } = useBlokkli();
+</script>
+
+<script>
+export default {
+  name: "Diff"
+};
+</script>

package/dist/runtime/editor/features/diff/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/features/dragging-overlay/DragItems/DragItem.d.vue.ts

@@ -0,0 +1,27 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type AnimationRectangleValues = {
+    opacity: number;
+    scaleX: number;
+    scaleY: number;
+    x: number;
+    y: number;
+};
+export type DragItemData = {
+    isTop: boolean;
+    from: AnimationRectangleValues;
+    to: AnimationRectangleValues;
+    width: number;
+    height: number;
+    transformOrigin: string;
+    markup: string;
+    background: string;
+    bundle?: string;
+    icon?: BlokkliIcon;
+    label?: string;
+    prevVisibility?: string;
+    element: HTMLElement;
+    borderRadius: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<DragItemData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragItemData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/dragging-overlay/DragItems/DragItem.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    ref="rootEl"
+    class="bk-dragging-overlay-item"
+    :class="{ 'bk-is-top': isTop, 'bk-is-fallback': !markup }"
+    :style="{
+  width: width + 'px',
+  height: height + 'px',
+  transformOrigin,
+  background,
+  '--bk-dragging-scale': to.scaleX,
+  '--bk-dragging-radius': Math.max(props.borderRadius, 4)
+}"
+  >
+    <div v-if="markup" class="bk-dragging-overlay-markup" v-html="markup" />
+    <div v-else class="bk-dragging-overlay-fallback">
+      <div :style="{ transform: `scale(${1 / to.scaleX})` }">
+        <template v-if="isTop">
+          <ItemIcon v-if="bundle" :bundle="bundle" />
+          <Icon v-else-if="icon" :name="icon" />
+          <div v-if="label">{{ label }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, useBlokkli, useTemplateRef } from "#imports";
+import { Icon, ItemIcon } from "#blokkli/editor/components";
+import { lerp } from "#blokkli/editor/helpers/math";
+import { easeOutElastic } from "#blokkli/editor/helpers/easing";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+const props = defineProps({
+  isTop: { type: Boolean, required: true },
+  from: { type: Object, required: true },
+  to: { type: Object, required: true },
+  width: { type: Number, required: true },
+  height: { type: Number, required: true },
+  transformOrigin: { type: String, required: true },
+  markup: { type: String, required: true },
+  background: { type: String, required: true },
+  bundle: { type: String, required: false },
+  icon: { type: null, required: false },
+  label: { type: String, required: false },
+  prevVisibility: { type: String, required: false },
+  element: { type: null, required: true },
+  borderRadius: { type: Number, required: true }
+});
+const DURATION = 500;
+const { ui } = useBlokkli();
+const rootEl = useTemplateRef("rootEl");
+let isDone = false;
+let animationStart = 0;
+onBlokkliEvent("canvas:draw", (e) => {
+  if (isDone || !rootEl.value) {
+    return;
+  }
+  if (!animationStart) {
+    animationStart = e.time;
+  }
+  const elapsed = e.time - animationStart;
+  const alphaX = easeOutElastic(elapsed / DURATION, 1.92, 0.91);
+  const alphaY = easeOutElastic(elapsed / DURATION, 2.2, 0.76);
+  const opacityAlpha = Math.min(Math.max(elapsed - 300, 0) / 200, 1);
+  const from = props.from;
+  const to = props.to;
+  if (elapsed > DURATION || !ui.useAnimations.value || ui.lowPerformanceMode.value) {
+    rootEl.value.style.transform = `translate(${to.x}px, ${to.y}px) scale(${to.scaleX}, ${to.scaleY})`;
+    rootEl.value.style.opacity = String(to.opacity);
+    isDone = true;
+    return;
+  }
+  const newX = lerp(from.x, to.x, alphaX);
+  const newY = lerp(from.y, to.y, alphaY);
+  const newOpacity = lerp(from.opacity, to.opacity, opacityAlpha);
+  const newScaleX = lerp(from.scaleX, to.scaleX, alphaX);
+  const newScaleY = lerp(from.scaleY, to.scaleY, alphaY);
+  rootEl.value.style.transform = `translate(${newX}px, ${newY}px) scale(${newScaleX}, ${newScaleY})`;
+  rootEl.value.style.opacity = String(newOpacity);
+});
+onMounted(() => {
+  if (rootEl.value) {
+    rootEl.value.style.transform = `translate(${props.from.x}px, ${props.from.y}px) scale(${props.from.scaleX}, ${props.from.scaleY})`;
+    rootEl.value.style.opacity = String(props.from.opacity);
+  }
+});
+</script>

package/dist/runtime/editor/features/dragging-overlay/DragItems/DragItem.vue.d.ts

@@ -0,0 +1,27 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type AnimationRectangleValues = {
+    opacity: number;
+    scaleX: number;
+    scaleY: number;
+    x: number;
+    y: number;
+};
+export type DragItemData = {
+    isTop: boolean;
+    from: AnimationRectangleValues;
+    to: AnimationRectangleValues;
+    width: number;
+    height: number;
+    transformOrigin: string;
+    markup: string;
+    background: string;
+    bundle?: string;
+    icon?: BlokkliIcon;
+    label?: string;
+    prevVisibility?: string;
+    element: HTMLElement;
+    borderRadius: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<DragItemData, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DragItemData> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;