@blokkli/editor 2.0.0-alpha.42 → 2.0.0-alpha.43

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@blokkli/editor",
   "configKey": "blokkli",
-  "version": "2.0.0-alpha.42",
+  "version": "2.0.0-alpha.43",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -18,7 +18,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@blokkli/editor";
-const version = "2.0.0-alpha.42";
+const version = "2.0.0-alpha.43";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];
@@ -1417,6 +1417,7 @@ const USED_MATERIAL_ICONS = [
   "bk_mdi_arrow_right",
   "bk_mdi_arrow_right_alt",
   "bk_mdi_arrow_selector_tool",
+  "bk_mdi_arrow_top_left",
   "bk_mdi_arrow_upward",
   "bk_mdi_attach_file",
   "bk_mdi_bakery_dining",

package/dist/modules/agent/index.mjs

@@ -156,8 +156,12 @@ function createClientTemplate(toolCollector, promptCollector, skillsCollector, o
       );
       exports$1.push(`export const routeAgent = ${JSON.stringify(routes.agent)}`);
       exports$1.push(`export const routeFetch = ${JSON.stringify(routes.fetch)}`);
-      exports$1.push(`export const routeStream = ${JSON.stringify(routes.stream)}`);
-      exports$1.push(`export const routeRoute = ${JSON.stringify(routes.routing)}`);
+      exports$1.push(
+        `export const routeStream = ${JSON.stringify(routes.stream)}`
+      );
+      exports$1.push(
+        `export const routeRoute = ${JSON.stringify(routes.routing)}`
+      );
       exports$1.push(
         `export const toolNames = ${JSON.stringify(toolCollector.getNames())}`
       );

package/dist/runtime/editor/components/Actions/Interactions/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/components/Actions/Interactions/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="bk-blokkli-item-actions-interactions">
+    <button
+      type="button"
+      :disabled="!canSelectParent"
+      @click.prevent="onClickSelectParent"
+    >
+      <Icon name="bk_mdi_arrow_top_left" />
+      <div class="bk-tooltip">
+        {{
+          parentLabel ? $t("actionsSelectParent", "Select parent (@label)").replace(
+  "@label",
+  parentLabel
+) : $t("actionsSelectPage", "Select page")
+        }}
+      </div>
+    </button>
+    <button
+      type="button"
+      :disabled="!canMove"
+      @pointerdown.stop.prevent="onMovePointerDown"
+    >
+      <Icon name="bk_mdi_drag_pan" />
+      <div class="bk-tooltip">
+        {{
+          selection.uuids.value.length === 1 ? $t("actionsMoveBlock", "Move block") : $t("actionsMoveBlocks", "Move @count blocks").replace(
+  "@count",
+  String(selection.uuids.value.length)
+)
+        }}
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/editor/components";
+import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
+const { selection, $t, state, eventBus, ui, types } = useBlokkli();
+const canMove = computed(() => {
+  return !!selection.items.value.length;
+});
+const canSelectParent = computed(() => {
+  if (selection.hasHostSelected.value) {
+    return false;
+  }
+  const items = selection.items.value;
+  if (!items.length) {
+    return false;
+  }
+  const firstKey = state.getFieldKeyForUuid(items[0].uuid);
+  if (!firstKey) {
+    return false;
+  }
+  return items.every((item) => state.getFieldKeyForUuid(item.uuid) === firstKey);
+});
+const parentLabel = computed(() => {
+  const item = selection.items.value[0];
+  if (!item) {
+    return "";
+  }
+  const parentUuid = state.getParentEntityUuid(item.uuid);
+  if (!parentUuid) {
+    return "";
+  }
+  const parentItem = state.getFieldListItem(parentUuid);
+  if (!parentItem) {
+    return "";
+  }
+  return types.getBlockBundleDefinition(parentItem.bundle)?.label ?? "";
+});
+function onClickSelectParent() {
+  if (!canSelectParent.value) {
+    return;
+  }
+  const item = selection.items.value[0];
+  if (!item) {
+    return;
+  }
+  const parentUuid = state.getParentEntityUuid(item.uuid);
+  if (!parentUuid) {
+    return;
+  }
+  ui.actionsToolbarLocked.value = true;
+  if (state.getFieldListItem(parentUuid)) {
+    eventBus.emit("select", parentUuid);
+    eventBus.emit("scrollIntoView", { uuid: parentUuid });
+  } else {
+    eventBus.emit("select:unselect");
+    eventBus.emit("select:host");
+  }
+}
+function onMovePointerDown(e) {
+  eventBus.emit("dragging:start", {
+    items: toDraggableExisting(selection.items.value),
+    coords: {
+      x: e.clientX,
+      y: e.clientY
+    },
+    mode: "mouse"
+  });
+}
+</script>
+
+<script>
+export default {
+  name: "Interactions"
+};
+</script>

package/dist/runtime/editor/components/Actions/Interactions/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -5,7 +5,8 @@
   visibility: isVisible ? 'visible' : 'hidden'
 }"
     class="bk bk-blokkli-item-actions-inner"
-    @click.stop
+    @mouseleave="onMouseLeave"
+    @mouseenter="onMouseEnter"
   >
     <div
       id="bk-blokkli-item-actions-controls"
@@ -15,6 +16,7 @@
   'bk-is-locked': ui.isTransforming.value
 }"
     >
+      <Interactions />
       <div id="bk-blokkli-item-actions-title">
         <button
           class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent"
@@ -82,10 +84,18 @@
 </template>
 
 <script setup>
-import { watch, ref, computed, useBlokkli, useTemplateRef } from "#imports";
+import {
+  watch,
+  ref,
+  computed,
+  useBlokkli,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
 import { falsy } from "#blokkli/helpers";
 import { Icon, ItemIconBox } from "#blokkli/editor/components";
 import EditActionsItemDropdown from "./ItemDropdown.vue";
+import Interactions from "./Interactions/index.vue";
 import { onBlokkliEvent, useStickyToolbar } from "#blokkli/editor/composables";
 import {
   fragmentBlockBundle,
@@ -99,11 +109,32 @@ const ACTIONS_HEIGHT = 52;
 const el = useTemplateRef("el");
 useStickyToolbar(el, {
   getPlacementY: () => "top",
-  shouldUpdate: () => !selection.isChangingOptions.value && isVisible.value,
+  shouldUpdate: () => !ui.actionsToolbarLocked.value && isVisible.value,
   getHeight: () => ACTIONS_HEIGHT,
   getMargin: () => 20,
   allowHorizontalOverflow: true
 });
+let mouseLeaveTimeout = null;
+function onMouseLeave() {
+  onMouseEnter();
+  if (ui.actionsToolbarLocked.value || ui.isChangingOptions.value) {
+    mouseLeaveTimeout = window.setTimeout(() => {
+      ui.actionsToolbarLocked.value = false;
+      ui.isChangingOptions.value = false;
+    }, 500);
+  }
+}
+function onMouseEnter() {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+    mouseLeaveTimeout = null;
+  }
+}
+onBeforeUnmount(() => {
+  if (mouseLeaveTimeout) {
+    window.clearTimeout(mouseLeaveTimeout);
+  }
+});
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length

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

@@ -34,6 +34,7 @@ import {
 } from "#imports";
 import { itemEntityType } from "#blokkli-build/config";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
 const {
   dom,
   eventBus,
@@ -133,15 +134,6 @@ function getInteractedElement(e) {
   }
   return null;
 }
-function toDraggableExisting(v) {
-  const blocks2 = Array.isArray(v) ? v : [v];
-  return blocks2.map((block) => {
-    return {
-      itemType: "existing",
-      block
-    };
-  });
-}
 function onPointerMove(e) {
   if (!handlePointerMove) {
     return;
@@ -475,7 +467,7 @@ function onClick(e) {
     }
     return;
   }
-  if (canvasEl.value && !selection.activeEditableLabel.value) {
+  if (canvasEl.value && !selection.activeEditableLabel.value && !ui.hasTooltipOpen.value) {
     canvasEl.value.focus();
   }
 }

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

@@ -6,6 +6,7 @@
     :anchor-coordinates
     class="bk-selection-add-overlay"
     @close="$emit('close')"
+    @wheel.stop
   >
     <div
       ref="scrollEl"
@@ -48,8 +49,7 @@
       >
         <div class="bk-selection-add-overlay-list" @wheel.passive="onWheel">
           <AddListItem
-            v-for="item in items"
-            v-show="isVisible(item)"
+            v-for="item in filteredItems"
             :key="item.props.id"
             v-bind="item.props"
             @click.prevent="onClick(item)"
@@ -61,9 +61,17 @@
 </template>
 
 <script setup>
-import { useTemplateRef, useBlokkli, computed, ref, watch } from "#imports";
+import {
+  useTemplateRef,
+  useBlokkli,
+  computed,
+  ref,
+  watch,
+  onMounted
+} from "#imports";
 import { ArtboardTooltip, AddListItem, Icon } from "#blokkli/editor/components";
 import { isInternalBundle } from "#blokkli/editor/helpers/bundles";
+import { Fzf } from "fzf";
 const props = defineProps({
   bundles: { type: Array, required: true },
   anchorEl: { type: null, required: false },
@@ -107,6 +115,7 @@ const blocks = computed(() => {
       bundle,
       label: definition?.label ?? bundle,
       isAutoAdd: definitions.bundlesWithAutoAdd.value.includes(bundle),
+      description: definition?.description ?? "",
       isFavorite: favorites.value.includes(bundle)
     };
   }).sort((a, b) => {
@@ -117,7 +126,8 @@ const blocks = computed(() => {
     return {
       type: "block",
       bundle: block.bundle,
-      searchText: block.label.toLowerCase(),
+      label: block.label.toLowerCase(),
+      description: block.description,
       props: {
         id: block.bundle,
         label: block.label,
@@ -142,7 +152,8 @@ const actions = computed(() => {
     return {
       type: "action",
       action,
-      searchText: action.title + " " + (action.description ?? ""),
+      label: action.title,
+      description: action.description ?? "",
       props: {
         id: action.id,
         label: action.title,
@@ -157,12 +168,24 @@ const actions = computed(() => {
 const items = computed(() => {
   return [...blocks.value, ...actions.value];
 });
-function isVisible(item) {
-  if (!searchText.value) {
-    return true;
+const fzf = new Fzf(items.value, {
+  selector: (item) => item.label + " " + item.description
+});
+const filteredItems = computed(() => {
+  const text = searchText.value.trim();
+  if (!text) {
+    return items.value;
   }
-  return item.searchText.includes(searchText.value);
-}
+  const results = fzf.find(text);
+  const textLower = text.toLowerCase();
+  return results.map((r) => r.item).sort((a, b) => {
+    const aInLabel = a.label.toLowerCase().includes(textLower);
+    const bInLabel = b.label.toLowerCase().includes(textLower);
+    if (aInLabel && !bInLabel) return -1;
+    if (!aInLabel && bInLabel) return 1;
+    return 0;
+  });
+});
 const onWheel = (e) => {
   if (hasScrollbar === null) {
     const element = scrollEl.value;
@@ -182,9 +205,14 @@ function onClick(item) {
   }
 }
 function onSubmitForm() {
-  const firstResult = items.value.find((item) => isVisible(item));
+  const firstResult = filteredItems.value[0];
   if (firstResult) {
     onClick(firstResult);
   }
 }
+onMounted(() => {
+  if (inputEl.value) {
+    inputEl.value.focus();
+  }
+});
 </script>

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

@@ -70,7 +70,7 @@ function updateMutatedFields(fields) {
   for (let i = 0; i < existingKeys.length; i++) {
     const key = existingKeys[i];
     if (!newKeys.has(key)) {
-      delete mutatedFieldsMap[key];
+      mutatedFieldsMap[key] = void 0;
     }
   }
 }