@blokkli/editor 2.0.0-alpha.36 → 2.0.0-alpha.38

package/dist/modules/charts/runtime/types.d.ts

@@ -1,4 +1,6 @@
+import type { ChartTypeOptionsMap } from './chartTypes/index.js';
 export type ChartType = 'bar' | 'line' | 'pie' | 'area' | 'donut' | 'heatmap' | 'radialBar' | 'radar';
+export type ChartTypeOptions = ChartTypeOptionsMap[ChartType];
 export type ChartSeries = {
     name: string;
     /**
@@ -7,9 +9,8 @@ export type ChartSeries = {
     color: string;
     data: number[];
 };
-export type BlokkliChartData = {
+type ChartDataBase = {
     title: string;
-    type: ChartType;
     categories: string[];
     series: ChartSeries[];
     /**
@@ -18,34 +19,15 @@ export type BlokkliChartData = {
      */
     categoryColors: string[];
     footnotes: string[];
-    typeOptions?: Record<string, unknown>;
 };
-declare const SUPERSCRIPTS: Record<string, string>;
-export { SUPERSCRIPTS };
-/**
- * Replace `{1}`, `{2}`, etc. with Unicode superscript characters.
- */
-export declare function applyFootnotes(text: string): string;
+export type BlokkliChartData = {
+    [K in ChartType]: ChartDataBase & {
+        type: K;
+        typeOptions?: Partial<ChartTypeOptionsMap[K]>;
+    };
+}[ChartType];
 export type ChartColor = {
     color: string;
     label: string;
 };
-/**
- * Resolve a color ID to a concrete CSS color value that ApexCharts can use.
- *
- * Plain values like '#ff0000' or 'rgb(255, 0, 0)' are returned as-is.
- * Values containing 'var(' (e.g. 'rgb(var(--theme-primary))') are resolved
- * by setting the value on a DOM element and reading the computed color.
- *
- * Falls back to the first defined color if the ID is not found.
- */
-export declare function resolveChartColor(colorId: string, colors: Record<string, ChartColor>, el?: HTMLElement | null): string;
-/**
- * Get the fallback color ID (first defined color).
- */
-export declare function getFirstColorId(colors: Record<string, ChartColor>): string;
-/**
- * Get a color ID for the given index, cycling through available colors.
- */
-export declare function getColorIdAtIndex(index: number, colors: Record<string, ChartColor>): string;
-export declare function getDefaultChartData(colors: Record<string, ChartColor>): BlokkliChartData;
+export {};

package/dist/modules/charts/runtime/types.js

@@ -1,64 +0,0 @@
-const SUPERSCRIPTS = {
-  "1": "\xB9",
-  "2": "\xB2",
-  "3": "\xB3",
-  "4": "\u2074",
-  "5": "\u2075",
-  "6": "\u2076",
-  "7": "\u2077",
-  "8": "\u2078",
-  "9": "\u2079",
-  "0": "\u2070"
-};
-export { SUPERSCRIPTS };
-export function applyFootnotes(text) {
-  return text.replace(
-    /\{(\d)\}/g,
-    (_, d) => SUPERSCRIPTS[d] || `{${d}}`
-  );
-}
-export function resolveChartColor(colorId, colors, el) {
-  const ids = Object.keys(colors);
-  const entry = colors[colorId] || colors[ids[0] || ""];
-  if (!entry) {
-    return "#888888";
-  }
-  const value = entry.color;
-  if (!value.includes("var(")) {
-    return value;
-  }
-  const target = el || document.documentElement;
-  const prev = target.style.color;
-  target.style.color = value;
-  const resolved = getComputedStyle(target).color;
-  target.style.color = prev;
-  return resolved || value;
-}
-export function getFirstColorId(colors) {
-  return Object.keys(colors)[0] || "";
-}
-export function getColorIdAtIndex(index, colors) {
-  const ids = Object.keys(colors);
-  return ids[index % ids.length] || ids[0] || "";
-}
-export function getDefaultChartData(colors) {
-  return {
-    title: "",
-    type: "bar",
-    categories: ["Category 1", "Category 2", "Category 3"],
-    series: [
-      {
-        name: "Series 1",
-        color: getColorIdAtIndex(0, colors),
-        data: [30, 40, 35]
-      }
-    ],
-    categoryColors: [
-      getColorIdAtIndex(0, colors),
-      getColorIdAtIndex(1, colors),
-      getColorIdAtIndex(2, colors)
-    ],
-    footnotes: [],
-    typeOptions: {}
-  };
-}

package/dist/modules/drupal/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.CWQIFIEQ.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/modules/drupal/runtime/adapter/index.d.ts

@@ -1,2 +1,4 @@
-declare const _default: any;
+import { type BlokkliAdapterFactory } from '#blokkli/editor/adapter';
+import type { ParagraphsBlokkliEditStateFragment } from '#graphql-operations';
+declare const _default: BlokkliAdapterFactory<ParagraphsBlokkliEditStateFragment>;
 export default _default;

package/dist/modules/drupal/runtime/adapter/index.js

@@ -852,19 +852,19 @@ export default defineBlokkliEditAdapter(
               }
             }
             return false;
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "plaintext") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardRichText";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "image") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardImage";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         } else if (e.type === "file") {
           return config.clipboard.find((v) => {
             return v?.__typename === "ParagraphsBlokkliSupportedClipboardFile";
-          })?.possibleParagraphBundles?.[0];
+          })?.possibleParagraphBundles;
         }
       };
     }

package/dist/modules/table-of-contents/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.CWQIFIEQ.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BdBm1Z7C.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/runtime/components/BlokkliItem.vue

@@ -56,7 +56,7 @@ const isGlobalProxyMode = inject(INJECT_GLOBAL_PROXY_MODE, null);
 const fieldListType = inject(INJECT_FIELD_LIST_TYPE, void 0);
 const providerType = inject(INJECT_PROVIDER_TYPE, void 0);
 const itemProps = computed(() => {
-  if (mutatedItemProps) {
+  if (mutatedItemProps && componentProps.isEditing) {
     const mutatedProps = mutatedItemProps[componentProps.uuid];
     if (mutatedProps) {
       return {

package/dist/runtime/composables/defineBlokkli.js

@@ -92,7 +92,7 @@ export function defineBlokkli(arg) {
   }
   if (editContext?.useBlockRegistration && editContext.dom && bundle !== fromLibraryBlockBundle && bundle !== fragmentBlockBundle) {
     const isProxyMode = inject(INJECT_FIELD_USES_PROXY, false);
-    if (!isProxyMode) {
+    if (!isProxyMode && isEditing) {
       editContext.useBlockRegistration(editContext.dom, reusableUuid ?? uuid);
     }
   }

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

@@ -79,6 +79,7 @@ let pointerDownElement = null;
 let mouseStartCoordinates = null;
 let pointerDownTimestamp = 0;
 let pointerUpTimestamp = 0;
+let pointerDownOnCanvas = false;
 function getInteractedElement(e) {
   const { x, y } = getInteractionCoordinates(e);
   const visibleUuids = dom.getVisibleBlocks();
@@ -144,7 +145,7 @@ function onPointerMove(e) {
   if (!handlePointerMove) {
     return;
   }
-  if (keyboard.isPressingSpace.value || e.buttons === MOUSE_BUTTONS.AUXILIARY) {
+  if (keyboard.isPressingSpace.value || e.buttons & MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
   e.preventDefault();
@@ -201,9 +202,10 @@ function onPointerMove(e) {
   }
 }
 function onPointerDown(e) {
-  if (e.buttons === MOUSE_BUTTONS.AUXILIARY) {
+  if (e.buttons & MOUSE_BUTTONS.AUXILIARY) {
     return;
   }
+  pointerDownOnCanvas = true;
   if (canvasEl.value) {
     canvasEl.value.focus();
   }
@@ -251,15 +253,15 @@ function isClickInArtboard(coords) {
   return isInsideRect(coords.x, coords.y, rect);
 }
 function onPointerUp(e) {
-  handlePointerMove = false;
   if (e.button === MOUSE_BUTTON.AUXILIARY) {
     e.preventDefault();
     return;
   }
+  handlePointerMove = false;
   e.preventDefault();
   e.stopPropagation();
   e.stopImmediatePropagation();
-  if (ui.openTooltip.value) {
+  if (ui.openTooltip.value && !selection.activeEditableLabel.value) {
     ui.openTooltip.value = "";
     return;
   }
@@ -289,8 +291,11 @@ function onPointerUp(e) {
     return;
   }
   if (selection.activeEditableLabel.value) {
-    eventBus.emit("window:clickAway");
-    lastInteractedElement = null;
+    if (pointerDownOnCanvas) {
+      eventBus.emit("window:clickAway");
+      lastInteractedElement = null;
+    }
+    pointerDownOnCanvas = false;
     return;
   }
   if (animation.handleClick(e.clientX, e.clientY)) {
@@ -303,6 +308,7 @@ function onPointerUp(e) {
     const deltaY = Math.abs(lastInteractedElement.y - e.clientY);
     if (deltaTime < 400 && deltaX < 3 && deltaY < 3) {
       if (clicked.editableFieldName) {
+        pointerDownOnCanvas = false;
         eventBus.emit("editable:focus", {
           fieldName: clicked.editableFieldName,
           uuid: clicked.uuid
@@ -448,7 +454,7 @@ function onClick(e) {
   e.preventDefault();
   e.stopImmediatePropagation();
   e.stopPropagation();
-  if (canvasEl.value) {
+  if (canvasEl.value && !selection.activeEditableLabel.value) {
     canvasEl.value.focus();
   }
 }

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

@@ -16,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
+    text: string;
     button: string;
     scheme: ThemeColorName;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -26,7 +26,7 @@ import {
 const props = defineProps({
   id: { type: String, required: true },
   icon: { type: null, required: true },
-  text: { type: String, required: false },
+  text: { type: String, required: false, default: void 0 },
   button: { type: String, required: false, default: void 0 },
   scheme: { type: String, required: false, default: "accent" }
 });

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

@@ -16,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: (() => any) | undefined;
 }>, {
+    text: string;
     button: string;
     scheme: ThemeColorName;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -2,6 +2,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     icon: BlokkliIcon;
     text: string;
+    disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

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

@@ -1,5 +1,5 @@
 <template>
-  <button class="bk-dropdown-menu-item" @click="$emit('click')">
+  <button class="bk-dropdown-menu-item" :disabled @click="$emit('click')">
     <Icon :name="icon" />
     <span>{{ text }}</span>
   </button>
@@ -9,7 +9,8 @@
 import { Icon } from "#blokkli/editor/components";
 defineProps({
   icon: { type: null, required: true },
-  text: { type: String, required: true }
+  text: { type: String, required: true },
+  disabled: { type: Boolean, required: false }
 });
 defineEmits(["click"]);
 </script>

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

@@ -2,6 +2,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
     icon: BlokkliIcon;
     text: string;
+    disabled?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

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

@@ -100,7 +100,6 @@ import commandsProvider from "#blokkli/editor/providers/commands";
 import tourProvider from "#blokkli/editor/providers/tour";
 import debugProvider from "#blokkli/editor/providers/debug";
 import definitionProvider from "#blokkli/editor/providers/definition";
-import dropAreasProvider from "#blokkli/editor/providers/dropArea";
 import blocksProvider from "#blokkli/editor/providers/blocks";
 import indicatorsProvider from "#blokkli/editor/providers/indicators";
 import pluginProvider from "#blokkli/editor/providers/plugin";
@@ -109,6 +108,8 @@ import fieldsProvider from "#blokkli/editor/providers/fields";
 import iconsProvider from "#blokkli/editor/providers/icons";
 import permissionsProvider from "#blokkli/editor/providers/permissions";
 import adaptersProvider from "#blokkli/editor/providers/adapters";
+import analyzeProviderFn from "#blokkli/editor/providers/analyze";
+import dragdropProvider from "#blokkli/editor/providers/dragdrop";
 import { eventBus } from "#blokkli/editor/events";
 import "#blokkli-build/styles.css";
 import getAdapter from "#blokkli-build/edit-adapter";
@@ -186,7 +187,6 @@ const element = elementProvider(debug);
 const features = featuresProvider(storage);
 const commands = commandsProvider();
 const tour = tourProvider();
-const dropAreas = dropAreasProvider();
 const broadcast = broadcastProvider();
 const icons = iconsProvider();
 const ui = uiProvider(
@@ -216,6 +216,8 @@ const indicators = indicatorsProvider();
 const directive = directiveProvider(debug, ui);
 const fields = fieldsProvider(dom, types, state);
 const permissionsInstance = await permissionsProvider(adapter);
+const analyze = analyzeProviderFn(adapters, state, ui, context, $t);
+const dragdrop = dragdropProvider();
 const mutatedEntityProps = computed(() => state.mutatedItemProps.HOST);
 const mutatedEntity = computed(() => {
   return {
@@ -283,7 +285,6 @@ const app = {
   debug,
   definitions,
   dom,
-  dropAreas,
   element,
   eventBus,
   directive,
@@ -301,7 +302,9 @@ const app = {
   ui,
   fields,
   icons,
-  permissions: permissionsInstance
+  permissions: permissionsInstance,
+  analyze,
+  dragdrop
 };
 provide(INJECT_APP, app);
 function textWithHighlight(title, text) {

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

@@ -1,10 +1,14 @@
+import { ClipboardData } from '#blokkli/editor/helpers/clipboardData';
 type __VLS_Props = {
     maxHeight?: number;
     minHeight?: number;
     submitOnEnter?: boolean;
     /** When true, convert pasted HTML to markdown */
     pasteMarkdown?: boolean;
+    /** Called before the built-in paste handling. Return true to skip it. */
+    onBeforePaste?: (data: ClipboardData) => boolean;
     textareaClass?: boolean;
+    autofocus?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue: string;

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

@@ -15,14 +15,16 @@
 }"
       @keydown.capture.stop="onKeydown"
       @keyup.capture.stop
+      @pointerdown="onPointerDown"
       @paste="onPaste"
     />
   </div>
 </template>
 
 <script setup>
-import { useTemplateRef, ref, computed, watch } from "#imports";
+import { useTemplateRef, ref, computed, watch, onMounted } from "#imports";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { ClipboardData } from "#blokkli/editor/helpers/clipboardData";
 defineOptions({
   inheritAttrs: false
 });
@@ -31,7 +33,9 @@ const props = defineProps({
   minHeight: { type: Number, required: false, default: 70 },
   submitOnEnter: { type: Boolean, required: false },
   pasteMarkdown: { type: Boolean, required: false },
-  textareaClass: { type: Boolean, required: false }
+  onBeforePaste: { type: Function, required: false },
+  textareaClass: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false }
 });
 const emit = defineEmits(["submit", "keydown"]);
 const modelValue = defineModel({ type: String, ...{ required: true } });
@@ -41,6 +45,11 @@ const isScrollable = computed(() => {
   if (!props.maxHeight) return false;
   return height.value >= props.maxHeight;
 });
+function onPointerDown(e) {
+  if (e.target instanceof HTMLElement) {
+    e.target.setPointerCapture(e.pointerId);
+  }
+}
 function onKeydown(e) {
   emit("keydown", e);
   if (props.submitOnEnter && e.key === "Enter" && !e.shiftKey) {
@@ -48,107 +57,16 @@ function onKeydown(e) {
     emit("submit");
   }
 }
-function convertNode(node) {
-  if (node.nodeType === Node.TEXT_NODE) {
-    return node.textContent || "";
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) {
-    return "";
-  }
-  const el = node;
-  const tag = el.tagName.toLowerCase();
-  const children = Array.from(el.childNodes).map(convertNode).join("");
-  switch (tag) {
-    case "br":
-      return "\n";
-    case "p":
-    case "div":
-      return children + "\n\n";
-    case "strong":
-    case "b":
-      return `**${children}**`;
-    case "em":
-    case "i":
-      return `*${children}*`;
-    case "del":
-    case "s":
-      return `~~${children}~~`;
-    case "code":
-      if (el.parentElement?.tagName.toLowerCase() === "pre") {
-        return children;
-      }
-      return `\`${children}\``;
-    case "pre": {
-      const codeEl = el.querySelector("code");
-      const content = codeEl ? convertNode(codeEl) : children;
-      return `
-\`\`\`
-${content}
-\`\`\`
-`;
-    }
-    case "h1":
-      return `# ${children}
-
-`;
-    case "h2":
-      return `## ${children}
-
-`;
-    case "h3":
-      return `### ${children}
-
-`;
-    case "h4":
-      return `#### ${children}
-
-`;
-    case "h5":
-      return `##### ${children}
-
-`;
-    case "h6":
-      return `###### ${children}
-
-`;
-    case "a": {
-      const href = el.getAttribute("href");
-      return href ? `[${children}](${href})` : children;
-    }
-    case "ul":
-    case "ol":
-      return "\n" + children + "\n";
-    case "li": {
-      const parent = el.parentElement;
-      if (parent?.tagName.toLowerCase() === "ol") {
-        const index = Array.from(parent.children).indexOf(el) + 1;
-        return `${index}. ${children.trim()}
-`;
-      }
-      return `- ${children.trim()}
-`;
-    }
-    case "blockquote":
-      return children.trim().split("\n").map((line) => `> ${line}`).join("\n") + "\n";
-    case "hr":
-      return "\n---\n";
-    case "style":
-    case "script":
-      return "";
-    default:
-      return children;
-  }
-}
-function htmlToMarkdown(html) {
-  const doc = new DOMParser().parseFromString(html, "text/html");
-  return convertNode(doc.body).replace(/\n{3,}/g, "\n\n").trim();
-}
 function onPaste(e) {
-  if (!props.pasteMarkdown) return;
-  const html = e.clipboardData?.getData("text/html");
-  if (!html) return;
+  if (!e.clipboardData) return;
+  const data = new ClipboardData(e.clipboardData);
+  if (props.onBeforePaste?.(data)) {
+    e.preventDefault();
+    return;
+  }
+  if (!props.pasteMarkdown || !data.hasHtml()) return;
   e.preventDefault();
-  const markdown = htmlToMarkdown(html);
+  const markdown = data.toMarkdown();
   const el = textarea.value;
   if (!el) return;
   const start = el.selectionStart;
@@ -171,6 +89,11 @@ onBlokkliEvent("animationFrame", () => {
   const newHeight = Math.max(scrollHeight, props.minHeight);
   height.value = props.maxHeight ? Math.min(newHeight, props.maxHeight) : newHeight;
 });
+onMounted(() => {
+  if (props.autofocus && textarea.value) {
+    textarea.value.focus();
+  }
+});
 defineExpose({
   focus: () => textarea.value?.focus(),
   blur: () => textarea.value?.blur(),

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

@@ -1,10 +1,14 @@
+import { ClipboardData } from '#blokkli/editor/helpers/clipboardData';
 type __VLS_Props = {
     maxHeight?: number;
     minHeight?: number;
     submitOnEnter?: boolean;
     /** When true, convert pasted HTML to markdown */
     pasteMarkdown?: boolean;
+    /** Called before the built-in paste handling. Return true to skip it. */
+    onBeforePaste?: (data: ClipboardData) => boolean;
     textareaClass?: boolean;
+    autofocus?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue: string;

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

@@ -132,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();
@@ -158,6 +167,7 @@ function onAfter(el) {
     el.style.transition = "";
     el.style.opacity = "";
     el.style.transformOrigin = "";
+    el.style.clipPath = "";
   }
   pendingTimeouts = [];
 }
@@ -166,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) {
@@ -185,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";