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

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

@@ -0,0 +1,20 @@
+<template>
+  <Transition name="bk-collapse-transition">
+    <slot />
+  </Transition>
+</template>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-collapse-transition-enter-active,
+.bk-collapse-transition-leave-active {
+  interpolate-size: allow-keywords;
+  transition: height 250ms cubic-bezier(0.56, 0.04, 0.25, 1),
+    opacity 200ms ease;
+  overflow: hidden;
+}
+.bk-collapse-transition-enter-from,
+.bk-collapse-transition-leave-to {
+  height: 0;
+  opacity: 0;
+}
+</style>

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

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/Transition/List/index.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /**
+     * Tag rendered by the underlying `<TransitionGroup>`. Defaults to `div`.
+     */
+    tag?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, 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/Transition/List/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <TransitionGroup :tag name="bk-list-transition" class="bk-list-transition">
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+defineProps({
+  tag: { type: String, required: false, default: "div" }
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-list-transition {
+  interpolate-size: allow-keywords;
+}
+.bk-list-transition-enter-active,
+.bk-list-transition-leave-active {
+  transition: height 250ms cubic-bezier(0.56, 0.04, 0.25, 1),
+    opacity 200ms ease;
+  overflow: hidden;
+}
+.bk-list-transition-enter-from,
+.bk-list-transition-leave-to {
+  height: 0;
+  opacity: 0;
+}
+.bk-list-transition-move {
+  transition: transform 250ms cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+</style>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /**
+     * Tag rendered by the underlying `<TransitionGroup>`. Defaults to `div`.
+     */
+    tag?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, 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/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,11 @@ 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 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,15 @@ 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 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/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';

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";

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/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).
+     *
+     * TODO: currently assigned unconditionally so E2E can run against a production
+     * build (dev-mode E2E triggers HMR reloads). Re-gate behind `import.meta.dev`
+     * so it never reaches a real production bundle once E2E can run in dev mode.
+     */
+    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
   };
 }