@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.60

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

@@ -1,4 +1,4 @@
-type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'drop-up' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
+type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'drop-up' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip' | 'panel-sheet';
 type __VLS_Props = {
     name: TransitionName;
     enabled?: boolean;

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

@@ -25,7 +25,8 @@ const DURATION = {
   "touch-bar": 200,
   "command-palette": 100,
   "caret-tooltip": 150,
-  "drop-up": 200
+  "drop-up": 200,
+  "panel-sheet": 500
 };
 const name = computed(() => {
   if (!ui.useAnimations.value || !props.enabled) {

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

@@ -1,4 +1,4 @@
-type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'drop-up' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip';
+type TransitionName = 'transform-overlay' | 'fade' | 'touch-bar' | 'drag-item' | 'editable' | 'menu' | 'loading' | 'drop-up' | 'toolbar' | 'slide-in' | 'slide-up' | 'search' | 'context-menu' | 'command-palette' | 'caret-tooltip' | 'panel-sheet';
 type __VLS_Props = {
     name: TransitionName;
     enabled?: boolean;

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

@@ -1,6 +1,6 @@
 export { default as AddListItem } from './AddListItem/index.vue.js';
 export { default as ArtboardTooltip } from './ArtboardTooltip/index.vue.js';
-export { default as AutoHeight } from './AutoHeight/index.vue.js';
+export { default as Avatar } from './Avatar/index.vue.js';
 export { default as Banner } from './Banner/index.vue.js';
 export { default as BannerInner } from './Banner/Inner.vue.js';
 export { default as BetaIndicator } from './BetaIndicator/index.vue.js';
@@ -8,6 +8,7 @@ export { default as BlockPreviewItem } from './BlockPreviewItem/index.vue.js';
 export { default as BlokkliTransition } from './Transition/index.vue.js';
 export { default as ConfigForm } from './PluginConfigForm/index.vue.js';
 export { default as ConfigFormInline } from './PluginConfigFormInline/index.vue.js';
+export { default as DonutChart } from './DonutChart/index.vue.js';
 export { default as Dropdown } from './Dropdown/index.vue.js';
 export { default as DropdownItem } from './DropdownItem/index.vue.js';
 export { default as ErrorBoundary } from './BlokkliErrorBoundary.vue.js';
@@ -16,11 +17,16 @@ export { default as FlexTextarea } from './FlexTextarea/index.vue.js';
 export { default as FormCheckboxes } from './Form/Checkboxes/index.vue.js';
 export { default as FormGroup } from './Form/Group/index.vue.js';
 export { default as FormItem } from './Form/Item/index.vue.js';
+export { default as FormNumber } from './Form/Number/index.vue.js';
 export { default as FormOverlay } from './FormOverlay/index.vue.js';
 export { default as FormRadio } from './Form/Radio/index.vue.js';
+export { default as FormRadioBox } from './Form/RadioBox/index.vue.js';
 export { default as FormRadioTabs } from './Form/RadioTabs/index.vue.js';
+export { default as FormSearch } from './Form/Search/index.vue.js';
+export type { FormSearchItem } from './Form/Search/types.js';
 export { default as FormSelect } from './Form/Select/index.vue.js';
 export { default as FormText } from './Form/Text/index.vue.js';
+export { default as FormTextDark } from './Form/TextDark/index.vue.js';
 export { default as FormTextarea } from './Form/Textarea/index.vue.js';
 export { default as FormToggle } from './Form/Toggle/index.vue.js';
 export { default as GrowOnly } from './GrowOnly/index.vue.js';
@@ -33,6 +39,7 @@ export { default as Loading } from './Loading/index.vue.js';
 export { default as Pagination } from './Pagination/index.vue.js';
 export { default as Popup } from './Popup/index.vue.js';
 export { default as RelativeTime } from './RelativeTime/index.vue.js';
+export { default as Reorder } from './Reorder/index.vue.js';
 export { default as Resizable } from './Resizable/index.vue.js';
 export { default as ScaleToFit } from './ScaleToFit/index.vue.js';
 export { default as ScrollBoundary } from './ScrollBoundary/index.vue.js';
@@ -48,9 +55,12 @@ export { default as Tooltip } from './Tooltip/index.vue.js';
 export { default as TooltipContext } from './Tooltip/Context.vue.js';
 export { default as TooltipStatus } from './Tooltip/Status.vue.js';
 export { default as NotEditStateInfo } from './NotEditStateInfo/index.vue.js';
+export { default as ButtonAction } from './ButtonAction/index.vue.js';
+export { default as Pill } from './Pill/index.vue.js';
+export { default as DialogModal } from './Dialog/index.vue.js';
+export { default as ToolbarDropdown } from './ToolbarDropdown/index.vue.js';
 export declare const NestedEditorOverlay: any;
 export declare const BundleSelector: any;
-export declare const DialogModal: any;
 export declare const DiffApproval: any;
 export declare const BlockPreviewRenderer: any;
 export declare const ScheduleDate: any;

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

@@ -1,7 +1,7 @@
 import { defineAsyncComponent } from "vue";
 export { default as AddListItem } from "./AddListItem/index.vue";
 export { default as ArtboardTooltip } from "./ArtboardTooltip/index.vue";
-export { default as AutoHeight } from "./AutoHeight/index.vue";
+export { default as Avatar } from "./Avatar/index.vue";
 export { default as Banner } from "./Banner/index.vue";
 export { default as BannerInner } from "./Banner/Inner.vue";
 export { default as BetaIndicator } from "./BetaIndicator/index.vue";
@@ -9,6 +9,7 @@ export { default as BlockPreviewItem } from "./BlockPreviewItem/index.vue";
 export { default as BlokkliTransition } from "./Transition/index.vue";
 export { default as ConfigForm } from "./PluginConfigForm/index.vue";
 export { default as ConfigFormInline } from "./PluginConfigFormInline/index.vue";
+export { default as DonutChart } from "./DonutChart/index.vue";
 export { default as Dropdown } from "./Dropdown/index.vue";
 export { default as DropdownItem } from "./DropdownItem/index.vue";
 export { default as ErrorBoundary } from "./BlokkliErrorBoundary.vue";
@@ -17,11 +18,15 @@ export { default as FlexTextarea } from "./FlexTextarea/index.vue";
 export { default as FormCheckboxes } from "./Form/Checkboxes/index.vue";
 export { default as FormGroup } from "./Form/Group/index.vue";
 export { default as FormItem } from "./Form/Item/index.vue";
+export { default as FormNumber } from "./Form/Number/index.vue";
 export { default as FormOverlay } from "./FormOverlay/index.vue";
 export { default as FormRadio } from "./Form/Radio/index.vue";
+export { default as FormRadioBox } from "./Form/RadioBox/index.vue";
 export { default as FormRadioTabs } from "./Form/RadioTabs/index.vue";
+export { default as FormSearch } from "./Form/Search/index.vue";
 export { default as FormSelect } from "./Form/Select/index.vue";
 export { default as FormText } from "./Form/Text/index.vue";
+export { default as FormTextDark } from "./Form/TextDark/index.vue";
 export { default as FormTextarea } from "./Form/Textarea/index.vue";
 export { default as FormToggle } from "./Form/Toggle/index.vue";
 export { default as GrowOnly } from "./GrowOnly/index.vue";
@@ -34,6 +39,7 @@ export { default as Loading } from "./Loading/index.vue";
 export { default as Pagination } from "./Pagination/index.vue";
 export { default as Popup } from "./Popup/index.vue";
 export { default as RelativeTime } from "./RelativeTime/index.vue";
+export { default as Reorder } from "./Reorder/index.vue";
 export { default as Resizable } from "./Resizable/index.vue";
 export { default as ScaleToFit } from "./ScaleToFit/index.vue";
 export { default as ScrollBoundary } from "./ScrollBoundary/index.vue";
@@ -49,15 +55,16 @@ export { default as Tooltip } from "./Tooltip/index.vue";
 export { default as TooltipContext } from "./Tooltip/Context.vue";
 export { default as TooltipStatus } from "./Tooltip/Status.vue";
 export { default as NotEditStateInfo } from "./NotEditStateInfo/index.vue";
+export { default as ButtonAction } from "./ButtonAction/index.vue";
+export { default as Pill } from "./Pill/index.vue";
+export { default as DialogModal } from "./Dialog/index.vue";
+export { default as ToolbarDropdown } from "./ToolbarDropdown/index.vue";
 export const NestedEditorOverlay = defineAsyncComponent(
   () => import("./NestedEditorOverlay/index.vue")
 );
 export const BundleSelector = defineAsyncComponent(
   () => import("./BundleSelector/index.vue")
 );
-export const DialogModal = defineAsyncComponent(
-  () => import("./Dialog/index.vue")
-);
 export const DiffApproval = defineAsyncComponent(
   () => import("./DiffApproval/index.vue")
 );

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

@@ -0,0 +1,126 @@
+import type { AllowedComponentProps, Component, VNodeChild, VNodeProps } from 'vue';
+type AnyComponent = (abstract new (...args: any[]) => any) | ((...args: any[]) => any);
+type ExtractInstanceProps<C> = C extends abstract new (...args: any[]) => {
+    $props: infer P;
+} ? P : C extends (props: infer P, ...rest: any[]) => any ? P : Record<string, never>;
+/**
+ * Extracts the public props of a Vue component, with Vue's built-in keys
+ * (`key`, `ref`, `class`, `style`, …) stripped out so only the props the
+ * component itself declares — including `modelValue` and `onUpdate:*` — remain.
+ */
+export type ComponentProps<C> = Omit<ExtractInstanceProps<C>, keyof VNodeProps | keyof AllowedComponentProps>;
+export type EditorComponentVariantSlots = Record<string, (scope?: any) => VNodeChild | string>;
+export interface EditorComponentVariant<TProps extends Record<string, any>> {
+    /** Short label shown above the rendered variant. */
+    label: string;
+    /** Optional longer description. */
+    description?: string;
+    /** Props passed to the component, fully typed. */
+    props: Partial<TProps>;
+    /**
+     * Slot render functions, keyed by slot name. The default slot is `default`.
+     * Each function may return any VNode-compatible value.
+     */
+    slots?: EditorComponentVariantSlots;
+    /**
+     * Optional override for the entry-level `backgroundClass`. Useful when a
+     * single variant needs a different stage background to remain legible.
+     */
+    backgroundClass?: string;
+}
+export interface EditorComponentMeta<C extends AnyComponent = AnyComponent> {
+    /** Discriminator — distinguishes from snippet entries. */
+    kind: 'component';
+    /** Unique identifier (used in URLs / sidebar). */
+    id: string;
+    /** Display name. */
+    label: string;
+    /** Optional category — used to group entries in the styleguide sidebar. */
+    category?: string;
+    /** Optional description shown above the variants. */
+    description?: string;
+    /** The component being documented. */
+    component: C;
+    /**
+     * Optional class applied to each variant's stage in place of the default
+     * white background. Useful for components that need a themed background to
+     * be legible (e.g. white-on-dark).
+     */
+    backgroundClass?: string;
+    /** One or more variants demonstrating different prop/slot combinations. */
+    variants: EditorComponentVariant<ComponentProps<C>>[];
+}
+interface EditorSnippetVariantBase {
+    /** Short label shown above the rendered variant. */
+    label: string;
+    /** Optional longer description. */
+    description?: string;
+    /**
+     * Optional override for the entry-level `backgroundClass`. Useful when a
+     * single variant needs a different stage background to remain legible.
+     */
+    backgroundClass?: string;
+}
+interface EditorSnippetVariantRender extends EditorSnippetVariantBase {
+    /** Render function returning the VNodes that demonstrate the snippet. */
+    render: () => VNodeChild | string;
+    component?: never;
+}
+interface EditorSnippetVariantComponent extends EditorSnippetVariantBase {
+    /**
+     * Component that renders the snippet. Use when the example is large enough
+     * that a `<template>` is easier to read than a `render()` function.
+     */
+    component: Component;
+    render?: never;
+}
+export type EditorSnippetVariant = EditorSnippetVariantRender | EditorSnippetVariantComponent;
+export interface EditorSnippetMeta {
+    /** Discriminator — distinguishes from component entries. */
+    kind: 'snippet';
+    /** Unique identifier (used in URLs / sidebar). */
+    id: string;
+    /** Display name. */
+    label: string;
+    /** Optional category — used to group entries in the styleguide sidebar. */
+    category?: string;
+    /** Optional description shown above the variants. */
+    description?: string;
+    /**
+     * Optional class applied to each variant's stage in place of the default
+     * white background. Useful for snippets that need a themed background to be
+     * legible (e.g. white-on-dark).
+     */
+    backgroundClass?: string;
+    /** One or more variants demonstrating different renderings. */
+    variants: EditorSnippetVariant[];
+}
+export type EditorEntry = EditorComponentMeta | EditorSnippetMeta;
+/**
+ * Co-locates metadata for an editor component (currently used by the
+ * styleguide feature to render variants). The component's `$props` type
+ * drives autocomplete and type checking inside each `variants[].props`.
+ *
+ * Place this in a `story.ts` file next to the component:
+ *
+ * ```ts
+ * // components/Dropdown/story.ts
+ * import { defineEditorComponent } from '#blokkli/editor/composables'
+ * import Dropdown from './index.vue'
+ *
+ * export default defineEditorComponent({
+ *   id: 'dropdown',
+ *   label: 'Dropdown',
+ *   component: Dropdown,
+ *   variants: [{ label: 'Default', props: { position: 'bottom-left' } }],
+ * })
+ * ```
+ */
+export declare function defineEditorComponent<C extends AnyComponent>(meta: Omit<EditorComponentMeta<C>, 'kind'>): EditorComponentMeta<C>;
+/**
+ * Declare a non-component entry for the styleguide — typically used to show
+ * CSS-only patterns (button variants, pills, shortcuts, …). Each variant
+ * provides a `render()` function returning arbitrary VNodes.
+ */
+export declare function defineEditorSnippet(meta: Omit<EditorSnippetMeta, 'kind'>): EditorSnippetMeta;
+export {};

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

@@ -0,0 +1,6 @@
+export function defineEditorComponent(meta) {
+  return { ...meta, kind: "component" };
+}
+export function defineEditorSnippet(meta) {
+  return { ...meta, kind: "snippet" };
+}

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

@@ -0,0 +1,5 @@
+import type { ComputedRef } from 'vue';
+import type { ViewOption } from '../providers/plugin.js';
+export declare function defineViewOption(options: ViewOption): {
+    isVisible: ComputedRef<boolean>;
+};

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

@@ -0,0 +1,10 @@
+import { computed, onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineViewOption(options) {
+  const { storage, ui, plugins } = useBlokkli();
+  const isActive = storage.use("view_option_" + options.id, false, true);
+  const isVisible = computed(() => isActive.value && !ui.isMobile.value);
+  const cb = () => options;
+  onMounted(() => plugins.add("viewOption", cb));
+  onBeforeUnmount(() => plugins.remove("viewOption", cb));
+  return { isVisible };
+}

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

@@ -3,6 +3,7 @@ export { defineAddAction } from './defineAddAction.js';
 export { defineCommands } from './defineCommands.js';
 export { defineDropAreas } from './defineDropAreas.js';
 export { defineDropHandler } from './defineDropHandler.js';
+export { defineEditorComponent, defineEditorSnippet, } from './defineEditorComponent.js';
 export { defineElementStyle } from './defineElementStyle.js';
 export { defineHighlight } from './defineHighlight.js';
 export { defineItemDropdownAction } from './defineItemDropdownAction.js';
@@ -10,6 +11,7 @@ export { defineMenuButton } from './defineMenuButton.js';
 export { defineRenderer } from './defineRenderer.js';
 export { defineShortcut } from './defineShortcut.js';
 export { defineTourItem } from './defineTourItem.js';
+export { defineViewOption } from './defineViewOption.js';
 export { onBlokkliEvent } from './onBlokkliEvent.js';
 export { onBroadcastEvent } from './onBroadcastEvent.js';
 export { useAnimationFrame } from './useAnimationFrame.js';
@@ -17,6 +19,8 @@ export { useBlockRegistration } from './useBlockRegistration.js';
 export { useDebugLogger } from './useDebugLogger.js';
 export { useDelayedIntersectionObserver } from './useDelayedIntersectionObserver.js';
 export { useDialog } from './useDialog.js';
+export { useDismiss } from './useDismiss.js';
+export type { UseDismissOptions } from './useDismiss.js';
 export { useFocusTrap } from './useFocusTrap.js';
 export { useGlobalBlokkliObject } from './useGlobalBlokkliObject.js';
 export { useStateBasedCache } from './useStateBasedCache.js';

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

@@ -3,6 +3,10 @@ export { defineAddAction } from "./defineAddAction.js";
 export { defineCommands } from "./defineCommands.js";
 export { defineDropAreas } from "./defineDropAreas.js";
 export { defineDropHandler } from "./defineDropHandler.js";
+export {
+  defineEditorComponent,
+  defineEditorSnippet
+} from "./defineEditorComponent.js";
 export { defineElementStyle } from "./defineElementStyle.js";
 export { defineHighlight } from "./defineHighlight.js";
 export { defineItemDropdownAction } from "./defineItemDropdownAction.js";
@@ -10,6 +14,7 @@ export { defineMenuButton } from "./defineMenuButton.js";
 export { defineRenderer } from "./defineRenderer.js";
 export { defineShortcut } from "./defineShortcut.js";
 export { defineTourItem } from "./defineTourItem.js";
+export { defineViewOption } from "./defineViewOption.js";
 export { onBlokkliEvent } from "./onBlokkliEvent.js";
 export { onBroadcastEvent } from "./onBroadcastEvent.js";
 export { useAnimationFrame } from "./useAnimationFrame.js";
@@ -17,6 +22,7 @@ export { useBlockRegistration } from "./useBlockRegistration.js";
 export { useDebugLogger } from "./useDebugLogger.js";
 export { useDelayedIntersectionObserver } from "./useDelayedIntersectionObserver.js";
 export { useDialog } from "./useDialog.js";
+export { useDismiss } from "./useDismiss.js";
 export { useFocusTrap } from "./useFocusTrap.js";
 export { useGlobalBlokkliObject } from "./useGlobalBlokkliObject.js";
 export { useStateBasedCache } from "./useStateBasedCache.js";

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

@@ -1,3 +1,3 @@
 import { type WritableComputedRef } from '#imports';
 import type { GlobalUiDialog } from '../types/ui.js';
-export declare function useDialog(id: string, alignment: GlobalUiDialog['alignment']): WritableComputedRef<boolean>;
+export declare function useDialog(id: string, alignment: GlobalUiDialog['alignment'], zIndex?: 'default' | 'high'): WritableComputedRef<boolean>;

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

@@ -1,5 +1,5 @@
 import { computed, useBlokkli } from "#imports";
-export function useDialog(id, alignment) {
+export function useDialog(id, alignment, zIndex) {
   const { ui } = useBlokkli();
   return computed({
     get() {
@@ -7,7 +7,7 @@ export function useDialog(id, alignment) {
     },
     set(isOpen) {
       if (isOpen) {
-        ui.openDialog({ id, alignment });
+        ui.openDialog({ id, alignment, zIndex });
       } else {
         ui.closeDialog(id);
       }

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

@@ -0,0 +1,30 @@
+import type { MaybeRefOrGetter } from 'vue';
+export type UseDismissOptions = {
+    /** Boundary element; interactions outside it dismiss. Ref or getter. */
+    element: MaybeRefOrGetter<HTMLElement | null | undefined>;
+    /**
+     * Called when a dismiss condition (outside click, canvas clickAway, Escape
+     * or a selection change) fires.
+     */
+    onDismiss: () => void;
+    /** Dismiss on Escape (unless a dialog is open). Defaults to true. */
+    escape?: boolean;
+    /**
+     * An additional element whose clicks should NOT dismiss — typically the
+     * trigger that toggles the dismissable element.
+     *
+     * Needed because the document click listener runs in the capture phase: the
+     * trigger's own `@click.stop` can't prevent it, so without this a click on
+     * the trigger would dismiss and then immediately re-open.
+     */
+    ignore?: MaybeRefOrGetter<HTMLElement | null | undefined>;
+};
+/**
+ * Close a floating element (dropdown, menu, popover) when the user clicks
+ * outside of it, presses Escape, or changes the editor selection.
+ *
+ * @example
+ * const root = useTemplateRef('root')
+ * useDismiss({ element: root, onDismiss: () => emit('close') })
+ */
+export declare function useDismiss(options: UseDismissOptions): void;

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

@@ -0,0 +1,43 @@
+import {
+  onMounted,
+  onBeforeUnmount,
+  toValue,
+  useBlokkli,
+  watch
+} from "#imports";
+import { onBlokkliEvent } from "./onBlokkliEvent.js";
+export function useDismiss(options) {
+  const { ui, selection } = useBlokkli();
+  const onDocumentClick = (e) => {
+    const el = toValue(options.element);
+    if (!el) {
+      return;
+    }
+    const target = e.target;
+    if (el.contains(target)) {
+      return;
+    }
+    const ignore = toValue(options.ignore);
+    if (ignore && ignore.contains(target)) {
+      return;
+    }
+    options.onDismiss();
+  };
+  onBlokkliEvent("keyPressed", (e) => {
+    if (options.escape === false || ui.hasDialogOpen.value) {
+      return;
+    }
+    if (e.code === "Escape") {
+      options.onDismiss();
+    }
+  });
+  onBlokkliEvent("window:clickAway", options.onDismiss);
+  watch(selection.uuids, options.onDismiss);
+  watch(selection.isDragging, options.onDismiss);
+  onMounted(
+    () => document.addEventListener("click", onDocumentClick, { capture: true })
+  );
+  onBeforeUnmount(
+    () => document.removeEventListener("click", onDocumentClick, { capture: true })
+  );
+}

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

@@ -63,7 +63,17 @@ export function useEditableFieldOverride(fieldName, host) {
   const readResult = fieldValue.readFieldValue(fieldName, host);
   const originalValue = readResult?.value ?? "";
   const originalMutatedProp = usesMutatedProps && matchingProp ? state.mutatedItemProps[mutatedItemPropsKey]?.[matchingProp] : void 0;
+  let savedNodes = null;
+  function reattachOriginalNodes() {
+    if (savedNodes) {
+      element.replaceChildren(...savedNodes);
+      savedNodes = null;
+      return true;
+    }
+    return false;
+  }
   function setValue(value) {
+    reattachOriginalNodes();
     element.removeAttribute("data-bk-diff-active");
     if (usesMutatedProps && matchingProp) {
       if (!state.mutatedItemProps[mutatedItemPropsKey]) {
@@ -87,13 +97,18 @@ export function useEditableFieldOverride(fieldName, host) {
     }
   }
   function setDiffHtml(html) {
+    if (!element.hasAttribute("data-bk-diff-active")) {
+      savedNodes = Array.from(element.childNodes);
+    }
     element.setAttribute("data-bk-diff-active", "");
     element.innerHTML = html;
-    state.markDirty(host.uuid);
   }
   function restore() {
     const wasDiffActive = element.hasAttribute("data-bk-diff-active");
     element.removeAttribute("data-bk-diff-active");
+    if (wasDiffActive && reattachOriginalNodes()) {
+      return;
+    }
     if (usesMutatedProps && matchingProp) {
       const propsObj = state.mutatedItemProps[mutatedItemPropsKey];
       if (propsObj) {
@@ -106,13 +121,6 @@ export function useEditableFieldOverride(fieldName, host) {
           propsObj[matchingProp] = originalMutatedProp;
         }
       }
-      if (wasDiffActive) {
-        if (isMarkup) {
-          element.innerHTML = originalValue;
-        } else {
-          element.textContent = originalValue;
-        }
-      }
     }
     if (usesDirectDom) {
       if (isMarkup) {

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

@@ -1,11 +1,26 @@
 import type { LogMessage } from '#blokkli/editor/providers/debug';
-type BlokkliGlobalWindowObject = {
+import type { BlokkliApp } from '#blokkli/editor/types/app';
+export interface BlokkliGlobalWindowObject {
     messages: LogMessage[];
-};
+    /**
+     * The full editor API (the object returned by `useBlokkli()`).
+     *
+     * Assigned (see `setApp`) so E2E tests can both drive the editor (mutations,
+     * event bus) and assert against live state. Playground-only test scaffolding
+     * augments this interface with a `test` namespace (see the playground
+     * `test-cases` feature).
+     *
+     * The assignment is a test-only seam: its call site (in `EditProvider.vue`)
+     * is wrapped in `blokkli-test-only` markers and stripped from the published
+     * library during the dist build, so `.app` is never set in a real bundle.
+     */
+    app?: BlokkliApp;
+}
 export declare function useGlobalBlokkliObject(): {
     init: () => void;
     pushMessage: (message: LogMessage) => void;
     getMessages: () => LogMessage[];
+    setApp: (app: BlokkliApp) => void;
     cleanup: () => void;
 };
 declare global {
@@ -13,4 +28,3 @@ declare global {
         __BLOKKLI__?: BlokkliGlobalWindowObject;
     }
 }
-export {};

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

@@ -22,6 +22,11 @@ export function useGlobalBlokkliObject() {
     }
     return [];
   }
+  function setApp(app) {
+    if (typeof window !== "undefined" && window.__BLOKKLI__) {
+      window.__BLOKKLI__.app = app;
+    }
+  }
   function cleanup() {
     if (typeof window !== "undefined") {
       delete window.__BLOKKLI__;
@@ -31,6 +36,7 @@ export function useGlobalBlokkliObject() {
     init,
     pushMessage,
     getMessages,
+    setApp,
     cleanup
   };
 }