@blokkli/editor 2.0.0-alpha.61 → 2.0.0-alpha.63

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

@@ -1,9 +1,11 @@
 <template>
   <Toolbar
-    v-if="currentItem"
-    :current-item
-    :current-index
-    :total-items="items.length"
+    v-if="currentUnit"
+    :current-unit
+    :current-item="currentUnit.item"
+    :unit-index="currentIndex + 1"
+    :total-units="units.length"
+    :segment-index="segmentIndex"
     :selected
     :reasons
     :apply-label
@@ -20,6 +22,7 @@
     ref="highlight"
     v-model="currentIndex"
     :items
+    :units
     :selected
     :insertions-only
     @toggle="onToggle"
@@ -41,6 +44,7 @@ import Toolbar from "./Toolbar/index.vue";
 import Highlight from "./Highlight/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 import { itemEntityType } from "#blokkli-build/config";
+import { unitsFromItems } from "./types";
 const props = defineProps({
   items: { type: Array, required: true },
   showReason: { type: Boolean, required: false },
@@ -76,31 +80,40 @@ const items = [...props.items].sort((a, b) => {
   if (dy !== 0) return dy;
   return rectA.x - rectB.x;
 });
+const units = computed(() => unitsFromItems(items));
 const currentIndex = ref(0);
-const currentItem = computed(() => {
-  return items.at(currentIndex.value) ?? null;
+const currentUnit = computed(() => {
+  return units.value.at(currentIndex.value) ?? null;
+});
+const segmentIndex = computed(() => {
+  const unit = currentUnit.value;
+  if (!unit || unit.kind !== "segment") return 0;
+  const fieldUnits = units.value.filter(
+    (u) => u.kind === "segment" && u.item.id === unit.item.id
+  );
+  return fieldUnits.findIndex((u) => u.key === unit.key) + 1;
 });
 const selected = reactive(
-  Object.fromEntries(items.map((item) => [item.id, true]))
+  Object.fromEntries(units.value.map((u) => [u.key, true]))
 );
 const reasons = reactive(
-  Object.fromEntries(items.map((item) => [item.id, ""]))
+  Object.fromEntries(units.value.map((u) => [u.key, ""]))
 );
 const selectedCount = computed(
-  () => items.filter((item) => selected[item.id]).length
+  () => units.value.filter((u) => selected[u.key]).length
 );
 const applyLabel = computed(() => {
-  return $t("aiAgentBatchRewriteApply", "Apply @count of @total").replace("@count", selectedCount.value.toString()).replace("@total", items.length.toString());
+  return $t("aiAgentBatchRewriteApply", "Apply @count of @total").replace("@count", selectedCount.value.toString()).replace("@total", units.value.length.toString());
 });
-function onUpdateSelected(id, value) {
-  selected[id] = value;
+function onUpdateSelected(key, value) {
+  selected[key] = value;
   nextTick(() => highlight.value?.updateRects());
 }
-function onToggle(id) {
-  onUpdateSelected(id, !selected[id]);
+function onToggle(key) {
+  onUpdateSelected(key, !selected[key]);
 }
-function onUpdateReasons(id, value) {
-  reasons[id] = value;
+function onUpdateReasons(key, value) {
+  reasons[key] = value;
 }
 function onApply() {
   highlight.value?.commitSelected();
@@ -109,24 +122,37 @@ function onApply() {
     reasons: { ...reasons }
   });
 }
-function scrollToItem(item) {
-  const host = resolveHost(item.uuid);
+function scrollToUnit(unit) {
+  const host = resolveHost(unit.item.uuid);
   if (host) {
-    const el = directive.findEditableElement(item.fieldName, host);
-    if (el) {
-      eventBus.emit("scrollIntoView", { element: el, immediate: false });
+    const fieldEl = directive.findEditableElement(unit.item.fieldName, host);
+    if (fieldEl) {
+      let target = fieldEl;
+      if (unit.kind === "segment") {
+        const segEl = fieldEl.querySelector(
+          `[data-chunk-index="${CSS.escape(unit.segment.id)}"]`
+        );
+        if (segEl) target = segEl;
+      }
+      eventBus.emit("scrollIntoView", { element: target, immediate: false });
       return;
     }
   }
-  eventBus.emit("scrollIntoView", { uuid: item.uuid, immediate: false });
+  eventBus.emit("scrollIntoView", { uuid: unit.item.uuid, immediate: false });
 }
 function prev() {
-  currentIndex.value = (currentIndex.value - 1 + items.length) % items.length;
-  scrollToItem(items[currentIndex.value]);
+  const total = units.value.length;
+  if (total === 0) return;
+  currentIndex.value = (currentIndex.value - 1 + total) % total;
+  const u = units.value[currentIndex.value];
+  if (u) scrollToUnit(u);
 }
 function next() {
-  currentIndex.value = (currentIndex.value + 1) % items.length;
-  scrollToItem(items[currentIndex.value]);
+  const total = units.value.length;
+  if (total === 0) return;
+  currentIndex.value = (currentIndex.value + 1) % total;
+  const u = units.value[currentIndex.value];
+  if (u) scrollToUnit(u);
 }
 onBlokkliEvent("keyPressed", (e) => {
   if (e.code === "Tab" && !e.shift || e.code === "ArrowDown") {
@@ -137,25 +163,26 @@ onBlokkliEvent("keyPressed", (e) => {
     prev();
   } else if (e.code === " ") {
     e.originalEvent.preventDefault();
-    const item = items[currentIndex.value];
-    if (item) {
-      onUpdateSelected(item.id, !selected[item.id]);
+    const u = units.value[currentIndex.value];
+    if (u) {
+      onUpdateSelected(u.key, !selected[u.key]);
     }
   }
 });
 onBlokkliEvent("editable:focus", (e) => {
-  const index = items.findIndex(
-    (item) => item.fieldName === e.fieldName && item.uuid === e.uuid
+  const idx = units.value.findIndex(
+    (u) => u.item.fieldName === e.fieldName && u.item.uuid === e.uuid
   );
-  if (index !== -1) {
-    currentIndex.value = index;
+  if (idx !== -1) {
+    currentIndex.value = idx;
   }
 });
 onMounted(async () => {
   ui.setIsApproving(true);
   await nextTick();
-  if (items[0]) {
-    scrollToItem(items[0]);
+  const first = units.value[0];
+  if (first) {
+    scrollToUnit(first);
   }
 });
 onBeforeUnmount(() => {

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

@@ -2,14 +2,14 @@ import type { ApprovalItem } from './types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
     /**
-     * Whether to show the per-item rejection reason input.
+     * Whether to show the per-unit rejection reason input.
      *
      * Used by the agent tools to feed feedback back to the LLM. Leave it off when
      * changes are applied directly with no agent loop.
      */
     showReason?: boolean;
     /**
-     * Render the new value entirely as an insertion (<ins>) instead of a diff
+     * Render new values entirely as insertions (<ins>) instead of a diff
      * against the original.
      *
      * For features like translation the new text bears little resemblance to the
@@ -21,14 +21,22 @@ type __VLS_Props = {
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;
     apply: (data: {
-        selected: Record<number, boolean>;
-        reasons: Record<number, string>;
+        /**
+         * Acceptance keyed by unit. For unsegmented items the key is the
+         * stringified item id; for segmented items it's `${itemId}:${segmentId}`.
+         */
+        selected: Record<string, boolean>;
+        reasons: Record<string, string>;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: ((data: {
-        selected: Record<number, boolean>;
-        reasons: Record<number, string>;
+        /**
+         * Acceptance keyed by unit. For unsegmented items the key is the
+         * stringified item id; for segmented items it's `${itemId}:${segmentId}`.
+         */
+        selected: Record<string, boolean>;
+        reasons: Record<string, string>;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/DiffApproval/types.d.ts

@@ -1,7 +1,39 @@
+import type { AtomicSegment, Segment } from '#blokkli/editor/helpers/diff';
 export type ApprovalItem = {
     id: number;
     uuid: string;
     fieldName: string;
     fieldLabel: string;
+    /**
+     * The fully-accepted value for the field. When `segments` is present this is
+     * still the canonical "all accepted" value (`reassembleValue(segments, {})`),
+     * kept for tools that don't care about chunk-level acceptance.
+     */
     value: string;
+    /**
+     * Two-level segmentation of the rewrite: top-level blocks plus one-level
+     * recursion into <ul>/<ol> for per-<li> toggles. When absent the field is
+     * treated as a single all-or-nothing unit.
+     */
+    segments?: Segment[];
 };
+/**
+ * One thing the user can accept or reject from the keyboard or a click.
+ * For unsegmented items there's one whole-field unit; for segmented items
+ * there's one unit per atomic, *changed* segment.
+ */
+export type ApprovalUnit = {
+    kind: 'whole';
+    key: string;
+    item: ApprovalItem;
+} | {
+    kind: 'segment';
+    key: string;
+    item: ApprovalItem;
+    segment: AtomicSegment;
+};
+/**
+ * Expand items into their toggle units. Unchanged segments inside a list are
+ * skipped — they're context, not choices.
+ */
+export declare function unitsFromItems(items: ApprovalItem[]): ApprovalUnit[];

package/dist/runtime/editor/components/DiffApproval/types.js

@@ -0,0 +1,22 @@
+import { flattenSegments } from "#blokkli/editor/helpers/diff";
+export function unitsFromItems(items) {
+  const units = [];
+  for (const item of items) {
+    if (item.segments) {
+      const atoms = flattenSegments(item.segments).filter(
+        (s) => s.status !== "matched" || s.beforeHtml !== s.afterHtml
+      );
+      for (const segment of atoms) {
+        units.push({
+          kind: "segment",
+          key: `${item.id}:${segment.id}`,
+          item,
+          segment
+        });
+      }
+    } else {
+      units.push({ kind: "whole", key: String(item.id), item });
+    }
+  }
+  return units;
+}

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

@@ -1,22 +1,23 @@
+type DropdownPosition = 'bottom-left' | 'top-left' | 'top-right';
 type __VLS_Props = {
-    position?: 'bottom-left' | 'top-left' | 'top-right';
+    position?: DropdownPosition;
     disabled?: boolean;
     buttonClass?: string;
 };
 declare function close(): void;
-declare var __VLS_1: {}, __VLS_9: {
+declare var __VLS_1: {}, __VLS_15: {
     close: typeof close;
 };
 type __VLS_Slots = {} & {
     button?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     close: typeof close;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
-    position: "bottom-left" | "top-left" | "top-right";
+    position: DropdownPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -8,17 +8,20 @@
     >
       <slot name="button" />
     </button>
-    <BlokkliTransition name="drop-up">
-      <div
-        v-if="showMenu"
-        ref="contentEl"
-        class="bk-dropdown-menu-content _bk_rounded"
-        :class="positionClass"
-        @keydown="onContentKeydown"
-      >
-        <slot :close="close" />
-      </div>
-    </BlokkliTransition>
+    <Teleport :to="teleport ?? 'body'" :disabled="!teleport">
+      <BlokkliTransition name="drop-up">
+        <div
+          v-if="showMenu"
+          ref="contentEl"
+          class="bk-dropdown-menu-content _bk_rounded"
+          :class="[originClass, !teleport ? positionClass : null]"
+          :style="teleport ? floatingStyle : void 0"
+          @keydown="onContentKeydown"
+        >
+          <slot :close="close" />
+        </div>
+      </BlokkliTransition>
+    </Teleport>
   </div>
 </template>
 
@@ -30,19 +33,65 @@ import {
   nextTick,
   onMounted,
   onBeforeUnmount,
-  useTemplateRef
+  useTemplateRef,
+  inject
 } from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift
+} from "@floating-ui/dom";
+import { INJECT_POPUP_HOST } from "#blokkli/editor/helpers/injections";
 const props = defineProps({
   position: { type: String, required: false, default: "bottom-left" },
   disabled: { type: Boolean, required: false, default: false },
   buttonClass: { type: String, required: false }
 });
+const popupHostRef = inject(INJECT_POPUP_HOST, null);
+const teleport = computed(() => popupHostRef?.value ?? null);
 const container = useTemplateRef("container");
 const contentEl = useTemplateRef("contentEl");
 const showMenu = ref(false);
 const positionClass = computed(() => `bk-is-${props.position}`);
+const originClass = computed(() => `bk-origin-${props.position}`);
+const PLACEMENT_MAP = {
+  "bottom-left": "top-start",
+  "top-left": "bottom-start",
+  "top-right": "bottom-end"
+};
+const floatingX = ref(0);
+const floatingY = ref(0);
+const floatingStyle = computed(() => ({
+  position: "fixed",
+  top: `${floatingY.value}px`,
+  left: `${floatingX.value}px`
+}));
+let stopAutoUpdate = null;
+function getTriggerEl() {
+  return container.value?.querySelector(".bk-dropdown-menu-trigger") ?? null;
+}
+async function updateFloatingPosition() {
+  const triggerEl = getTriggerEl();
+  const floatingEl = contentEl.value;
+  if (!triggerEl || !floatingEl) return;
+  const { x, y } = await computePosition(triggerEl, floatingEl, {
+    placement: PLACEMENT_MAP[props.position],
+    strategy: "fixed",
+    middleware: [offset(5), flip(), shift({ padding: 8 })]
+  });
+  floatingX.value = x;
+  floatingY.value = y;
+}
+function stopFloating() {
+  if (stopAutoUpdate) {
+    stopAutoUpdate();
+    stopAutoUpdate = null;
+  }
+}
 function getFocusableItems() {
   if (!contentEl.value) return [];
   return Array.from(
@@ -50,10 +99,7 @@ function getFocusableItems() {
   );
 }
 function focusTrigger() {
-  const trigger = container.value?.querySelector(
-    ".bk-dropdown-menu-trigger"
-  );
-  trigger?.focus();
+  getTriggerEl()?.focus();
 }
 function close() {
   if (!showMenu.value) return;
@@ -63,9 +109,22 @@ function close() {
 watch(showMenu, (open) => {
   if (open) {
     nextTick(() => {
+      if (teleport.value) {
+        const triggerEl = getTriggerEl();
+        const floatingEl = contentEl.value;
+        if (triggerEl && floatingEl) {
+          stopAutoUpdate = autoUpdate(
+            triggerEl,
+            floatingEl,
+            updateFloatingPosition
+          );
+        }
+      }
       const items = getFocusableItems();
       items[0]?.focus();
     });
+  } else {
+    stopFloating();
   }
 });
 function onContentKeydown(e) {
@@ -94,9 +153,10 @@ function onContentKeydown(e) {
   e.stopPropagation();
 }
 function onDocumentClick(e) {
-  if (!container.value?.contains(e.target)) {
-    close();
-  }
+  const target = e.target;
+  if (container.value?.contains(target)) return;
+  if (contentEl.value?.contains(target)) return;
+  close();
 }
 onBlokkliEvent("mouse:up", close);
 onMounted(() => {
@@ -104,31 +164,25 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   document.removeEventListener("click", onDocumentClick);
+  stopFloating();
 });
 defineExpose({ close });
 </script>
 
 <style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-dropdown-menu-trigger {
-  margin: 0px;
-  display: block;
-  cursor: pointer;
   appearance: none;
-  --bk-tw-border-style: none;
-  border-style: none;
-  background-color: transparent;
-  padding: 0px;
 }
 .bk .bk-dropdown-menu-content {
   position: absolute;
   z-index: 50;
-  overflow: hidden;
   border-style: var(--bk-tw-border-style);
   border-width: 1px;
   border-color: rgb(var(--bk-theme-mono-300) / 1);
   background-color: white;
   --bk-tw-shadow: 0 10px 15px -3px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  pointer-events: auto;
 }
 :is(.bk .bk-dropdown-menu-content) hr {
   border-top-color: rgb(var(--bk-theme-mono-300) / 1);
@@ -137,18 +191,24 @@ defineExpose({ close });
   bottom: 100%;
   left: 0px;
   margin-bottom: 5px;
-  transform-origin: 0 100%;
 }
 .bk-is-top-left:is(.bk .bk-dropdown-menu-content) {
   top: 100%;
   left: 0px;
   margin-top: 5px;
-  transform-origin: 0 0;
 }
 .bk-is-top-right:is(.bk .bk-dropdown-menu-content) {
   top: 100%;
   right: 0px;
   margin-top: 5px;
+}
+.bk-origin-bottom-left:is(.bk .bk-dropdown-menu-content) {
+  transform-origin: 0 100%;
+}
+.bk-origin-top-left:is(.bk .bk-dropdown-menu-content) {
+  transform-origin: 0 0;
+}
+.bk-origin-top-right:is(.bk .bk-dropdown-menu-content) {
   transform-origin: 100% 0;
 }
 </style>

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

@@ -1,22 +1,23 @@
+type DropdownPosition = 'bottom-left' | 'top-left' | 'top-right';
 type __VLS_Props = {
-    position?: 'bottom-left' | 'top-left' | 'top-right';
+    position?: DropdownPosition;
     disabled?: boolean;
     buttonClass?: string;
 };
 declare function close(): void;
-declare var __VLS_1: {}, __VLS_9: {
+declare var __VLS_1: {}, __VLS_15: {
     close: typeof close;
 };
 type __VLS_Slots = {} & {
     button?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_9) => any;
+    default?: (props: typeof __VLS_15) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
     close: typeof close;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     disabled: boolean;
-    position: "bottom-left" | "top-left" | "top-right";
+    position: DropdownPosition;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -10,9 +10,9 @@ export type NestedEditorOverlayProps = {
     element?: HTMLElement | null;
     autoSave?: boolean;
 };
-declare var __VLS_38: {};
+declare var __VLS_44: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_38) => any;
+    default?: (props: typeof __VLS_44) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;

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

@@ -35,7 +35,7 @@
       @after-leave="onAfterLeave"
       @leave-cancelled="onAfterLeave"
     >
-      <div
+      <PopupHost
         v-show="isLoaded"
         class="bk bk-library-edit-overlay _bk_fixed _bk_top-40 _bk_3xl:top-50 _bk_left-0 _bk_w-screen _bk_bottom-0 _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-nested-editor-overlay-iframe"
         :class="'bk-is-' + theme"
@@ -56,7 +56,7 @@
             </div>
           </slot>
         </div>
-      </div>
+      </PopupHost>
     </Transition>
   </Teleport>
 </template>
@@ -71,7 +71,7 @@ import {
   useBlokkli,
   useTemplateRef
 } from "#imports";
-import { Icon, NotEditStateInfo } from "#blokkli/editor/components";
+import { Icon, NotEditStateInfo, PopupHost } from "#blokkli/editor/components";
 import { onBroadcastEvent } from "#blokkli/editor/composables";
 const props = defineProps({
   url: { type: String, required: false },

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

@@ -10,9 +10,9 @@ export type NestedEditorOverlayProps = {
     element?: HTMLElement | null;
     autoSave?: boolean;
 };
-declare var __VLS_38: {};
+declare var __VLS_44: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_38) => any;
+    default?: (props: typeof __VLS_44) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<NestedEditorOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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/PopupHost/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <div ref="root">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { provide, useTemplateRef } from "#imports";
+import { INJECT_POPUP_HOST } from "#blokkli/editor/helpers/injections";
+const root = useTemplateRef("root");
+provide(INJECT_POPUP_HOST, root);
+</script>

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

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => 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;
+    };
+};