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

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -200,9 +200,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    minHeight: number;
     tourText: string;
     minWidth: number;
+    minHeight: number;
     region: SidebarRegion;
     tooltipTitle: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
@@ -220,7 +220,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         shouldRender: any;
         width: any;
         height: any;
-        toggleSidebar: () => void;
+        toggleSidebar: () => Promise<void>;
         isResizing: any;
     }) => any;
 } & {
@@ -232,7 +232,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         shouldRender: any;
         width: undefined;
         height: undefined;
-        toggleSidebar: () => void;
+        toggleSidebar: () => Promise<void>;
         isResizing: boolean;
     }) => any;
 }>;

package/dist/runtime/editor/plugins/ToolbarButton/index.d.vue.ts

@@ -75,11 +75,17 @@ type __VLS_Props = {
      */
     noCommand?: boolean;
 };
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    after?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    el: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;

package/dist/runtime/editor/plugins/ToolbarButton/index.vue

@@ -1,37 +1,40 @@
 <template>
   <Teleport :to="'#bk-toolbar-' + region">
-    <button
-      ref="el"
-      class="bk-toolbar-button _bk_group/tooltip"
-      :disabled="disabled"
-      :class="[
+    <div :style="{ order: weight || 0 }" class="_bk_relative">
+      <button
+        ref="el"
+        class="bk-toolbar-button _bk_group/tooltip"
+        :disabled="disabled"
+        :class="[
   { 'bk-is-active': active },
   id ? 'bk-is-' + id : void 0,
   $attrs.class
 ]"
-      :style="{ order: weight || 0 }"
-      @click.prevent.stop="onClick"
-    >
-      <slot>
-        <Icon v-if="icon" :name="icon" />
-      </slot>
-      <Tooltip
-        :label="title"
-        :placement="tooltipPlacement"
-        :margin="region === 'before-sidebar'"
+        @click.prevent.stop="onClick"
       >
-        <template v-if="keyCode" #shortcut>
-          <ShortcutIndicator
-            :meta="meta"
-            :shift="shift"
-            :key-code="keyCode"
-            :label="title"
-            :group="shortcutGroup"
-            @pressed="onClick"
-          />
-        </template>
-      </Tooltip>
-    </button>
+        <slot>
+          <Icon v-if="icon" :name="icon" />
+          <slot name="icon-addon" />
+        </slot>
+        <Tooltip
+          :label="title"
+          :placement="tooltipPlacement"
+          :margin="region === 'before-sidebar'"
+        >
+          <template v-if="keyCode" #shortcut>
+            <ShortcutIndicator
+              :meta="meta"
+              :shift="shift"
+              :key-code="keyCode"
+              :label="title"
+              :group="shortcutGroup"
+              @pressed="onClick"
+            />
+          </template>
+        </Tooltip>
+      </button>
+      <slot name="after" />
+    </div>
   </Teleport>
 </template>
 
@@ -55,15 +58,16 @@ const props = defineProps({
   weight: { type: [Number, String], required: false },
   noCommand: { type: Boolean, required: false }
 });
-const { debug } = useBlokkli();
+const { debug, ui } = useBlokkli();
 const logger = debug.createLogger("PluginToolbar");
 const emit = defineEmits(["click"]);
 const el = ref(null);
-function onClick() {
+async function onClick() {
   if (props.disabled) {
     return;
   }
   logger.log(`Click ${props.id}`);
+  await ui.flushPendingChanges();
   emit("click");
 }
 const tooltipPlacement = computed(() => {
@@ -98,8 +102,100 @@ defineTourItem(() => {
     element: () => el.value
   };
 });
+defineExpose({ el });
 defineOptions({
   name: "PluginToolbarButton",
   inheritAttrs: false
 });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-toolbar-button {
+  display: flex;
+  height: 40px;
+  min-width: 50px;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-mono-200) / 1);
+}
+@media (width >= 64rem) {
+  .bk .bk-toolbar-button {
+    height: 50px;
+  }
+}
+@media (width >= 64rem) {
+  @media (hover: hover) {
+    :is(.bk .bk-toolbar-button):not(.bk-is-active):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
+    }
+  }
+}
+.bk-has-dropdown-left:is(.bk .bk-toolbar-button):before,.bk-has-dropdown-bottom:is(.bk .bk-toolbar-button):before {
+  height: 0px;
+  width: 0px;
+  --bk-tw-border-style: solid;
+  border-style: solid;
+  --bk-tw-content: '';
+  content: var(--bk-tw-content);
+  position: absolute;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+}
+.bk-has-dropdown-bottom:is(.bk .bk-toolbar-button):before {
+  bottom: 0px;
+  transform-origin: bottom;
+  border-width: 0 10px 10px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: rgb(var(--bk-theme-mono-200) / 1);
+  border-left-color: transparent;
+  --bk-tw-scale-y: 0%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  left: calc(1 / 2 * 100%);
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk-has-dropdown-left:is(.bk .bk-toolbar-button):before {
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent #ffffff;
+  transform-origin: 0;
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-scale-x: 0%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  top: calc(1 / 2 * 100%);
+  left: 0px;
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk-is-active:is(.bk .bk-toolbar-button) {
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
+}
+.bk-is-active:is(.bk .bk-toolbar-button):before {
+  --bk-tw-scale-x: 100% !important;
+  --bk-tw-scale-y: 100% !important;
+  --bk-tw-scale-z: 100% !important;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y) !important;
+}
+.bk-is-inactive:is(.bk .bk-toolbar-button) {
+  color: rgb(var(--bk-theme-mono-600) / 1);
+}
+[disabled]:is(.bk .bk-toolbar-button) {
+  pointer-events: none;
+  color: rgb(var(--bk-theme-mono-700) / 1);
+}
+:is(.bk .bk-toolbar-button) svg {
+  width: 18px;
+  height: 18px;
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-toolbar-button) svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

package/dist/runtime/editor/plugins/ToolbarButton/index.vue.d.ts

@@ -75,11 +75,17 @@ type __VLS_Props = {
      */
     noCommand?: boolean;
 };
-declare var __VLS_7: {};
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_30: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_7) => any;
+} & {
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    after?: (props: typeof __VLS_30) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    el: any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;

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

@@ -5,5 +5,4 @@ import PluginItemAction from './ItemAction/index.vue.js';
 import PluginSidebar from './Sidebar/index.vue.js';
 import PluginToolbarButton from './ToolbarButton/index.vue.js';
 import PluginTourItem from './TourItem/index.vue.js';
-import PluginViewOption from './ViewOption/index.vue.js';
-export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };
+export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, };

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

@@ -5,7 +5,6 @@ import PluginItemAction from "./ItemAction/index.vue";
 import PluginSidebar from "./Sidebar/index.vue";
 import PluginToolbarButton from "./ToolbarButton/index.vue";
 import PluginTourItem from "./TourItem/index.vue";
-import PluginViewOption from "./ViewOption/index.vue";
 export {
   PluginBlockIndicator,
   PluginContextMenu,
@@ -13,6 +12,5 @@ export {
   PluginItemAction,
   PluginSidebar,
   PluginToolbarButton,
-  PluginTourItem,
-  PluginViewOption
+  PluginTourItem
 };

package/dist/runtime/editor/providers/config.d.ts

@@ -0,0 +1,8 @@
+import { type ComputedRef } from '#imports';
+import type { ColorOption } from '../types/config.js';
+export type ConfigProvider = {
+    colorOptions: ComputedRef<ColorOption[]>;
+    getColorOption: (id: string) => ColorOption | undefined;
+    getColorHex: (id: string) => string;
+};
+export default function (): ConfigProvider;

package/dist/runtime/editor/providers/config.js

@@ -0,0 +1,18 @@
+import { computed } from "#imports";
+import { colorOptions as moduleColorOptions } from "#blokkli-build/editor-config";
+export default function() {
+  const colorOptions = computed(
+    () => Object.entries(moduleColorOptions).map(([id, entry]) => ({
+      id,
+      hex: entry.hex,
+      label: entry.label
+    }))
+  );
+  function getColorOption(id) {
+    return colorOptions.value.find((c) => c.id === id);
+  }
+  function getColorHex(id) {
+    return getColorOption(id)?.hex || "#888888";
+  }
+  return { colorOptions, getColorOption, getColorHex };
+}

package/dist/runtime/editor/providers/directive.d.ts

@@ -92,6 +92,14 @@ export type DirectiveProvider = {
      * @returns Array of editable fields for the block
      */
     getEditablesForBlock: (uuid: string) => EditableFieldData[];
+    /**
+     * Get all currently registered editable fields, across both the host entity
+     * and all blocks. Intended for debug/test tooling that needs to enumerate
+     * every editable on the page.
+     *
+     * @returns Array of all 'editable' type directive fields
+     */
+    getAllEditables: () => EditableFieldData[];
     /**
      * Get all droppable field elements.
      *

package/dist/runtime/editor/providers/directive.js

@@ -217,6 +217,11 @@ export default function(debug, ui) {
     }
     return Object.values(editables).filter(falsy);
   }
+  function getAllEditables() {
+    return [...fieldData.values()].filter(
+      (item) => item.directiveType === "editable"
+    );
+  }
   function getDroppableElements() {
     const droppableElements = [];
     for (const item of fieldData.values()) {
@@ -266,6 +271,7 @@ export default function(debug, ui) {
     getDroppableAtPoint,
     findEditable,
     getEditablesForBlock,
+    getAllEditables,
     findEditableElement,
     getDroppableElements,
     registerValueElement,

package/dist/runtime/editor/providers/fieldValue.js

@@ -17,11 +17,6 @@ export default function fieldValueProvider(directive, state, types, definitions,
     )?.[0] ?? null;
   }
   function readFieldValue(fieldName, host) {
-    const element = directive.findEditableElement(fieldName, host);
-    if (!element) {
-      return null;
-    }
-    const editableData = directive.findEditable(fieldName, host);
     const cfg = types.editableFieldConfig.forName(
       host.type,
       host.bundle,
@@ -31,8 +26,6 @@ export default function fieldValueProvider(directive, state, types, definitions,
       return null;
     }
     const fieldType = cfg.type === "frame" || cfg.type === "markup" ? "markup" : "plain";
-    const isMarkup = cfg.type !== "plain";
-    const isComponent = !!editableData?.isComponent;
     const providerDefinition = definitions.getProviderDefinition(
       host.type,
       host.bundle
@@ -54,15 +47,20 @@ export default function fieldValueProvider(directive, state, types, definitions,
         matchingProp = findMatchingProp(mapping, fieldName);
       }
     }
+    if (matchingProp) {
+      const value2 = providerDefinition ? state.mutatedEntity.value[matchingProp] || "" : state.getFieldListItem(host.uuid)?.props?.[matchingProp] ?? "";
+      return { value: value2, fieldType };
+    }
+    const element = directive.findEditableElement(fieldName, host);
+    if (!element) {
+      return null;
+    }
+    const editableData = directive.findEditable(fieldName, host);
+    const isMarkup = cfg.type !== "plain";
+    const isComponent = !!editableData?.isComponent;
     let value;
     if (isComponent && editableData?.getValue) {
       value = editableData.getValue();
-    } else if (matchingProp) {
-      if (providerDefinition) {
-        value = state.mutatedEntity.value[matchingProp] || "";
-      } else {
-        value = state.getFieldListItem(host.uuid)?.props?.[matchingProp] ?? "";
-      }
     } else if (isMarkup) {
       value = element.innerHTML;
     } else {

package/dist/runtime/editor/providers/plugin.d.ts

@@ -39,17 +39,29 @@ export type HighlightItem = {
     onClick: () => void;
 };
 type HighlightFunction = PluginAddFunction<HighlightItem>;
+export type ViewOption = {
+    id: string;
+    label: string;
+    description: string;
+    icon: BlokkliIcon;
+    keyCode?: string;
+    tourText?: string;
+    weight?: number;
+};
+type ViewOptionFunction = PluginAddFunction<ViewOption>;
 type PluginFunctionMap = {
     addAction: AddActionFunction;
     itemDropdownAction: ItemDropdownActionFunction;
     menuButton: MenuButtonFunction;
     highlight: HighlightFunction;
+    viewOption: ViewOptionFunction;
 };
 type PluginDataMap = {
     addAction: AddAction;
     itemDropdownAction: ItemDropdownAction;
     menuButton: MenuButtonPlugin;
     highlight: HighlightItem;
+    viewOption: ViewOption;
 };
 export type PluginProvider = {
     /**

package/dist/runtime/editor/providers/plugin.js

@@ -4,6 +4,7 @@ export default function() {
   const itemDropdownActionPlugins = ref([]);
   const menuButtonPlugins = ref([]);
   const highlightPlugins = ref([]);
+  const viewOptionPlugins = ref([]);
   function add(type, fn) {
     if (type === "addAction") {
       addActionPlugins.value.push(fn);
@@ -13,6 +14,8 @@ export default function() {
       menuButtonPlugins.value.push(fn);
     } else if (type === "highlight") {
       highlightPlugins.value.push(fn);
+    } else if (type === "viewOption") {
+      viewOptionPlugins.value.push(fn);
     }
   }
   function remove(type, fn) {
@@ -32,6 +35,10 @@ export default function() {
       highlightPlugins.value = highlightPlugins.value.filter(
         (v) => v !== fn
       );
+    } else if (type === "viewOption") {
+      viewOptionPlugins.value = viewOptionPlugins.value.filter(
+        (v) => v !== fn
+      );
     }
   }
   function get(type) {
@@ -44,6 +51,8 @@ export default function() {
       storage = menuButtonPlugins.value;
     } else if (type === "highlight") {
       storage = highlightPlugins.value;
+    } else if (type === "viewOption") {
+      storage = viewOptionPlugins.value;
     } else {
       return [];
     }

package/dist/runtime/editor/providers/state.d.ts

@@ -245,21 +245,5 @@ export type StateProvider = {
      * @returns The parent entity UUID, or null if block not found
      */
     getParentEntityUuid: (uuid: string) => string | null;
-    /**
-     * Mark block UUIDs as dirty for forced re-render.
-     *
-     * When code bypasses Vue's reactivity (e.g. direct innerHTML writes),
-     * the VDOM gets out of sync with the actual DOM.  Calling markDirty
-     * schedules a forced re-render for the given blocks after the next
-     * successful mutation.
-     */
-    markDirty: (...uuids: string[]) => void;
-    /**
-     * Force re-render all blocks marked as dirty.
-     *
-     * Call this when cancelling an operation that used setDiffHtml to restore
-     * the DOM from reactive state without going through a mutation.
-     */
-    flushDirty: () => Promise<void>;
 };
 export default function (eventBus: BlokkliEventBus, adapter: BlokkliAdapter<any>, context: ComputedRef<AdapterContext>, $t: TextProvider, providerKey: string, permissions: EditPermission[]): Promise<StateProvider>;

package/dist/runtime/editor/providers/state.js

@@ -25,21 +25,6 @@ function mapPublishOptions(context) {
   };
 }
 export default async function(eventBus, adapter, context, $t, providerKey, permissions) {
-  const dirtyUuids = /* @__PURE__ */ new Set();
-  function markDirty(...uuids) {
-    for (const uuid of uuids) {
-      dirtyUuids.add(uuid);
-    }
-  }
-  async function flushDirty() {
-    if (dirtyUuids.size === 0) {
-      return;
-    }
-    const uuids = [...dirtyUuids];
-    dirtyUuids.clear();
-    await nextTick();
-    eventBus.emit("block:rerender", uuids);
-  }
   let _mappedState = null;
   const overrideHostOptions = useState("options:" + providerKey);
   const stateLoaded = ref(false);
@@ -315,7 +300,6 @@ export default async function(eventBus, adapter, context, $t, providerKey, permi
         const errorMessage2 = result.errors?.join("\n") || $t("unexpectedMutationError", "An unexpected error happened.");
         throw new Error(errorMessage2);
       }
-      await flushDirty();
       if (successMessage) {
         emitMessage(successMessage);
       }
@@ -424,8 +408,6 @@ export default async function(eventBus, adapter, context, $t, providerKey, permi
     fromLibraryUuids: readonly(fromLibraryUuids),
     permissions: computed(() => permissions),
     getFieldKeyForUuid,
-    getParentEntityUuid,
-    markDirty,
-    flushDirty
+    getParentEntityUuid
   };
 }

package/dist/runtime/editor/providers/texts.d.ts

@@ -1,2 +1,9 @@
-export type TextProvider = (key: string, defaultValue?: string) => string;
+type TextOptions = {
+    /**
+     * Appends "..." to the string.
+     */
+    more?: boolean;
+};
+export type TextProvider = (key: string, defaultValue?: string, options?: TextOptions) => string;
 export default function (requestedLanguage: string): Promise<TextProvider>;
+export {};

package/dist/runtime/editor/providers/texts.js

@@ -7,6 +7,7 @@ import {
   forceDefaultLanguage
 } from "#blokkli-build/editor-config";
 import { TRANSLATION_LANGUAGES } from "../../../global/constants";
+import { HORIZONTAL_ELLIPSIS } from "../helpers/string/index.js";
 function isInterfaceLanguage(value) {
   return TRANSLATION_LANGUAGES.includes(value);
 }
@@ -44,7 +45,9 @@ export default async function(requestedLanguage) {
     });
   }
   await loadTranslations(translationLoaders, language);
-  return (key, defaultValue) => {
-    return currentTranslations.value[key] || defaultValue || key;
+  return (key, defaultValue, options) => {
+    const text = currentTranslations.value[key] || defaultValue || key;
+    const suffix = options?.more ? HORIZONTAL_ELLIPSIS : "";
+    return text + suffix;
   };
 }

package/dist/runtime/editor/providers/ui.d.ts

@@ -2,12 +2,14 @@ import { type Ref, type ComputedRef } from '#imports';
 import type { ShallowRef } from 'vue';
 import type { StorageProvider } from './storage.js';
 import type { GlobalUiDialog, SidebarRegion } from '#blokkli/editor/types/ui';
+import { type BlokkliClipboardPayload } from '#blokkli/editor/types/clipboard';
 import type { Viewport } from '../../../global/constants/index.js';
 import type { AdapterContext } from '#blokkli/editor/adapter';
 import type { ThemeColorName } from './../../../global/types/theme.js';
 import type { ElementProvider } from './element.js';
-import type { BlokkliEventBus } from '../events/index.js';
+import { type BlokkliEventBus } from '../events/index.js';
 import type { Coord, Rectangle, Size } from '../types/geometry.js';
+import type { TextProvider } from './texts.js';
 export type UiProvider = {
     /**
      * Get the Nuxt root element (#nuxt-root).
@@ -415,6 +417,31 @@ export type UiProvider = {
      * only locks toolbar position.
      */
     isChangingOptions: Ref<boolean>;
+    /**
+     * Register a handler that persists pending, not-yet-saved changes.
+     *
+     * Some features buffer changes locally while the user is interacting (e.g.
+     * the options form defers persisting option changes while the user tries
+     * them out). Such a feature registers a flush handler here so the rest of
+     * the editor can trigger and await that persistence via
+     * {@link flushPendingChanges}.
+     *
+     * Each handler is responsible for being safe to call when nothing is pending
+     * (resolve immediately) and for de-duping concurrent calls.
+     *
+     * @returns A function that unregisters the handler.
+     */
+    registerFlushHandler: (handler: () => Promise<unknown>) => () => void;
+    /**
+     * Persist any pending changes from all registered flush handlers and resolve
+     * once they are done.
+     *
+     * Action buttons should await this before they run, so that an action which
+     * depends on persisted state (e.g. opening an edit form built from server
+     * state, or publishing) sees the latest values. Resolves immediately when no
+     * handlers are registered.
+     */
+    flushPendingChanges: () => Promise<unknown>;
     /**
      * ID of the currently active (focused) highlight, or empty string.
      *
@@ -426,5 +453,19 @@ export type UiProvider = {
      * Whether the item actions are open.
      */
     itemActionsOpen: Ref<boolean>;
+    copyTextToClipboard: (text: string | number) => void;
+    /**
+     * Write a typed blökkli clipboard payload to the system clipboard.
+     *
+     * Wraps the payload in a marker envelope so paste detection never
+     * confuses arbitrary user-pasted JSON with a blökkli payload. The
+     * `BlokkliClipboardPayload` discriminated union is augmentable by
+     * features (`#blokkli/editor/types/clipboard`), so each call site is
+     * type-checked against the registered clipboard types.
+     *
+     * Throws on `navigator.clipboard.writeText` failure so callers can
+     * surface a domain-specific error message.
+     */
+    setClipboardData: (payload: BlokkliClipboardPayload) => Promise<void>;
 };
-export default function (eventBus: BlokkliEventBus, providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>): UiProvider;
+export default function (eventBus: BlokkliEventBus, providerElement: HTMLElement, storage: StorageProvider, context: ComputedRef<AdapterContext>, element: ElementProvider, mainLayoutElement: Readonly<ShallowRef<HTMLDivElement | null>>, visibleViewportElement: Readonly<ShallowRef<HTMLDivElement | null>>, $t: TextProvider): UiProvider;