@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

package/dist/runtime/blokkliPlugins/TourItem/index.vue.d.ts

@@ -1,8 +1,30 @@
 type __VLS_Props = {
+    /**
+     * Unique identifier for this tour item.
+     */
     id: string;
+    /**
+     * The title of the tour step.
+     */
     title: string;
+    /**
+     * The description text explaining this feature.
+     *
+     * Supports markdown.
+     */
     text: string;
+    /**
+     * Optional CSS selector to find the target element.
+     *
+     * If provided, the tour will highlight this element.
+     */
     selector?: string;
+    /**
+     * Optional direct reference to the target element.
+     *
+     * Takes precedence over selector.
+     */
+    element?: HTMLElement | null;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/dist/runtime/blokkliPlugins/ViewOption/index.vue.d.ts

@@ -1,27 +1,125 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this view option.
+     *
+     * Used for storage key and event tracking.
+     */
     id: string;
+    /**
+     * The label used in commands and tour.
+     */
     label: string;
+    /**
+     * The tooltip text when the option is OFF.
+     *
+     * Should describe what happens when turned on.
+     * @example 'Show grid'
+     */
     titleOn: string;
+    /**
+     * The tooltip text when the option is ON.
+     *
+     * Should describe what happens when turned off.
+     * @example 'Hide grid'
+     */
     titleOff: string;
+    /**
+     * Whether the view option is only available in edit mode.
+     *
+     * If true, the option is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * Automatically includes Meta modifier.
+     * @example 'g' for Cmd+G / Ctrl+G
+     */
     keyCode?: string;
+    /**
+     * The icon displayed in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this option will be included in the editor tour.
+     */
     tourText?: string;
+    /**
+     * Two-way binding for the active state.
+     *
+     * Can be used with v-model to track the option state.
+     */
     modelValue?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
+     */
     weight?: number | string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (data: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this view option.
+     *
+     * Used for storage key and event tracking.
+     */
     id: string;
+    /**
+     * The label used in commands and tour.
+     */
     label: string;
+    /**
+     * The tooltip text when the option is OFF.
+     *
+     * Should describe what happens when turned on.
+     * @example 'Show grid'
+     */
     titleOn: string;
+    /**
+     * The tooltip text when the option is ON.
+     *
+     * Should describe what happens when turned off.
+     * @example 'Hide grid'
+     */
     titleOff: string;
+    /**
+     * Whether the view option is only available in edit mode.
+     *
+     * If true, the option is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * Automatically includes Meta modifier.
+     * @example 'g' for Cmd+G / Ctrl+G
+     */
     keyCode?: string;
+    /**
+     * The icon displayed in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this option will be included in the editor tour.
+     */
     tourText?: string;
+    /**
+     * Two-way binding for the active state.
+     *
+     * Can be used with v-model to track the option state.
+     */
     modelValue?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
+     */
     weight?: number | string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((data: boolean) => any) | undefined;

package/dist/runtime/blokkliPlugins/index.d.ts

@@ -1,11 +1,9 @@
-import PluginAddAction from './AddAction/index.vue.js';
 import PluginBlockIndicator from './BlockIndicator/index.vue.js';
 import PluginContextMenu from './ContextMenu/index.vue.js';
 import PluginDebugOverlay from './DebugOverlay/index.vue.js';
 import PluginItemAction from './ItemAction/index.vue.js';
-import PluginMenuButton from './MenuButton/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 { PluginAddAction, PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginMenuButton, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };
+export { PluginBlockIndicator, PluginContextMenu, PluginDebugOverlay, PluginItemAction, PluginSidebar, PluginToolbarButton, PluginTourItem, PluginViewOption, };

package/dist/runtime/blokkliPlugins/index.js

@@ -1,20 +1,16 @@
-import PluginAddAction from "./AddAction/index.vue";
 import PluginBlockIndicator from "./BlockIndicator/index.vue";
 import PluginContextMenu from "./ContextMenu/index.vue";
 import PluginDebugOverlay from "./DebugOverlay/index.vue";
 import PluginItemAction from "./ItemAction/index.vue";
-import PluginMenuButton from "./MenuButton/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 {
-  PluginAddAction,
   PluginBlockIndicator,
   PluginContextMenu,
   PluginDebugOverlay,
   PluginItemAction,
-  PluginMenuButton,
   PluginSidebar,
   PluginToolbarButton,
   PluginTourItem,

package/dist/runtime/components/Blocks/NotImplemented/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="bk bk-block-not-implemented">
+    <Icon name="alert" />
+    <div v-html="text" />
+  </div>
+</template>
+
+<script setup>
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  bundle: { type: String, required: true }
+});
+const { dom, $t } = useBlokkli();
+const text = computed(() => {
+  return $t(
+    "blockNotImplemented",
+    "Missing component for block bundle <strong>@bundle</strong>."
+  ).replace("@bundle", props.bundle);
+});
+useBlockRegistration(dom, props.uuid);
+</script>

package/dist/runtime/components/Blocks/NotImplemented/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    uuid: string;
+    bundle: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/BlokkliEditable.vue.d.ts

@@ -1,6 +1,17 @@
 type __VLS_Props = {
+    /**
+     * The (machine) name of the field that is editable.
+     */
     name: string;
+    /**
+     * The text value.
+     */
     value?: string;
+    /**
+     * The tag to use for rendering the wrapper.
+     *
+     * @default "div"
+     */
     tag?: string;
 };
 type __VLS_Slots = {

package/dist/runtime/components/BlokkliItem.vue

@@ -14,7 +14,12 @@
     v-bind="props"
     :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
   />
-  <div v-else-if="isEditing">Block not implemented</div>
+  <Component
+    :is="blockNotImplemented"
+    v-else-if="blockNotImplemented"
+    :uuid
+    :bundle
+  />
 </template>
 
 <script setup>
@@ -27,6 +32,7 @@ import {
 } from "#imports";
 import { getComponent } from "#blokkli/helpers/imports";
 import {
+  INJECT_ALL_COMPONENTS_CHUNK,
   INJECT_BLOCK_ITEM,
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
@@ -43,9 +49,14 @@ const componentProps = defineProps({
   index: { type: Number, required: false, default: 0 },
   editContext: { type: Object, required: false, default: void 0 },
   parentType: { type: String, required: false, default: "" },
-  isEditing: { type: Boolean, required: false, default: false }
+  isEditing: { type: Boolean, required: false, default: false },
+  isNew: { type: Boolean, required: false }
 });
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
+const allComponentsChunk = inject(
+  INJECT_ALL_COMPONENTS_CHUNK,
+  null
+);
 const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
 const isGlobalProxyMode = inject(
   INJECT_GLOBAL_PROXY_MODE,
@@ -59,8 +70,10 @@ const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent
   "block",
   componentProps.bundle,
   fieldListType?.value || "default",
-  componentProps.parentType
+  componentProps.parentType,
+  allComponentsChunk
 );
+const blockNotImplemented = componentProps.isEditing ? defineAsyncComponent(() => import("./Blocks/NotImplemented/index.vue")) : null;
 const index = computed(() => componentProps.index);
 const item = computed(() => ({
   index,

package/dist/runtime/components/BlokkliItem.vue.d.ts

@@ -8,6 +8,7 @@ declare const _default: import("vue").DefineComponent<{
     editContext?: BlockEditContext;
     parentType?: string;
     isEditing?: boolean;
+    isNew?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     uuid: string;
     bundle: string;
@@ -17,6 +18,7 @@ declare const _default: import("vue").DefineComponent<{
     editContext?: BlockEditContext;
     parentType?: string;
     isEditing?: boolean;
+    isNew?: boolean;
 }> & Readonly<{}>, {
     index: number;
     options: any;

package/dist/runtime/components/BlokkliProvider.vue.d.ts

@@ -36,7 +36,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         /**
          * The edit permissions.
          */
-        permissions?: EditPermission[];
+        permissions?: Array<EditPermission | null>;
         /**
          * Whether to isolate the provider element during editing.
          */

package/dist/runtime/components/Edit/Actions/ItemDropdown.vue

@@ -34,7 +34,7 @@ import { ItemIcon, Icon } from "#blokkli/components";
 const emit = defineEmits(["close"]);
 const { plugins } = useBlokkli();
 function getGroupedActions() {
-  const actions = plugins.getItemDropdownActions();
+  const actions = plugins.get("itemDropdownAction");
   const groups2 = /* @__PURE__ */ new Map();
   for (const action of actions) {
     const groupName = action.group;

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

@@ -1,108 +1,110 @@
 <template>
-  <Teleport to="body">
-    <div class="bk bk-blokkli-item-actions bk-control" @click.stop>
-      <div
-        v-show="
-  !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected && shouldRender && !ui.hasTooltipOpen.value
-"
-        ref="el"
-        class="bk-blokkli-item-actions-inner"
-      >
-        <div
-          id="bk-blokkli-item-actions-controls"
-          ref="controlsEl"
-          class="bk-blokkli-item-actions-controls"
-          :class="{
+  <div
+    ref="el"
+    :style="{
+  visibility: isVisible ? 'visible' : 'hidden'
+}"
+    class="bk bk-blokkli-item-actions-inner"
+    @click.stop
+  >
+    <div
+      id="bk-blokkli-item-actions-controls"
+      ref="controlsEl"
+      class="bk-blokkli-item-actions-controls"
+      :class="{
   'bk-is-locked': ui.isTransforming.value
 }"
-        >
-          <div id="bk-blokkli-item-actions-title">
-            <button
-              class="bk-blokkli-item-actions-type-button"
-              tabindex="-1"
-              :disabled="!shouldRenderButton"
-              :class="{
+    >
+      <div id="bk-blokkli-item-actions-title">
+        <button
+          class="bk-blokkli-item-actions-type-button bk-item-icon-hover-parent"
+          tabindex="-1"
+          :disabled="!shouldRenderButton"
+          :class="{
   'is-open': showDropdown,
-  'is-interactive': shouldRenderButton,
-  'bk-is-reusable': itemBundle?.id === 'from_library',
-  'bk-is-fragment': itemBundle?.id === 'blokkli_fragment'
+  'is-interactive': shouldRenderButton
 }"
-              @click.prevent="showDropdown = !showDropdown"
-            >
-              <div v-if="shouldRenderButton" class="bk-tooltip">
-                {{ $t("actionsDropdownToolip", "Further actions") }}
-              </div>
-              <div
-                v-show="!hasSelectedHost"
-                class="bk-blokkli-item-actions-title-icon"
-              >
-                <Icon v-if="ui.isTransforming.value" name="loader" />
-                <ItemIcon v-else-if="bundleIcon" :bundle="bundleIcon" />
-                <Icon v-else name="selection" />
-                <div
-                  v-if="itemBundle?.id === 'from_library'"
-                  class="bk-blokkli-item-actions-title-icon-reusable"
-                >
-                  <Icon name="reusable" />
-                </div>
-              </div>
-              <span class="bk-blokkli-item-actions-title-label">{{
-                title
-              }}</span>
-              <span
-                v-if="selection.items.value.length > 1"
-                class="bk-blokkli-item-actions-title-count"
-                >{{ selection.items.value.length }}</span
-              >
-              <span
-                v-show="selectedIsNew"
-                class="bk-blokkli-item-actions-title-pill"
-                >{{ $t("selectedIsNew", "New") }}</span
-              >
-              <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
-            </button>
-            <EditActionsItemDropdown
-              v-if="showDropdown && editingEnabled"
-              @close="showDropdown = false"
-            />
+          @click.prevent="showDropdown = !showDropdown"
+        >
+          <div v-if="shouldRenderButton" class="bk-tooltip">
+            {{ $t("actionsDropdownToolip", "Further actions") }}
           </div>
-
           <div
-            v-show="!selection.hasHostSelected.value"
-            id="bk-blokkli-item-actions"
-            class="bk-blokkli-item-actions-buttons"
-          />
-        </div>
+            v-show="!hasSelectedHost"
+            class="bk-blokkli-item-actions-title-icon"
+          >
+            <Icon v-if="ui.isTransforming.value" name="loader" />
+            <ItemIconBox
+              v-else-if="bundleIcon"
+              :bundle="bundleIcon"
+              :color="isReusable ? 'lime' : void 0"
+              is-small
+            />
+            <Icon v-else name="selection" />
+            <div
+              v-if="itemBundle?.id === 'from_library'"
+              class="bk-blokkli-item-actions-title-icon-reusable"
+            >
+              <Icon name="reusable" />
+            </div>
+          </div>
+          <span class="bk-blokkli-item-actions-title-label">{{ title }}</span>
+          <span
+            v-if="selection.items.value.length > 1"
+            class="bk-blokkli-item-actions-title-count"
+            >{{ selection.items.value.length }}</span
+          >
+          <span
+            v-show="selectedIsNew"
+            class="bk-blokkli-item-actions-title-pill"
+            >{{ $t("selectedIsNew", "New") }}</span
+          >
+          <Icon v-if="shouldRenderButton" name="caret" class="bk-caret" />
+        </button>
+        <EditActionsItemDropdown
+          v-if="showDropdown && editingEnabled"
+          @close="showDropdown = false"
+        />
       </div>
+
+      <div
+        v-show="!selection.hasHostSelected.value"
+        id="bk-blokkli-item-actions"
+        class="bk-blokkli-item-actions-buttons"
+      />
     </div>
-  </Teleport>
+  </div>
 </template>
 
 <script setup>
 import { watch, ref, computed, useBlokkli, useTemplateRef } from "#imports";
 import { falsy } from "#blokkli/helpers";
-import { ItemIcon, Icon } from "#blokkli/components";
+import { Icon, ItemIconBox } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
 import EditActionsItemDropdown from "./ItemDropdown.vue";
+import { BUNDLE_FROM_LIBRARY } from "#blokkli/constants";
 const { selection, $t, types, state, ui, definitions, debug } = useBlokkli();
 const editingEnabled = computed(
   () => state.editMode.value === "editing" || state.editMode.value === "translating"
 );
 const ACTIONS_HEIGHT = 52;
 const el = useTemplateRef("el");
-const { shouldRender } = useStickyToolbar(el, {
+useStickyToolbar(el, {
   getPlacementY: () => "top",
-  shouldUpdate: () => !selection.isChangingOptions.value,
+  shouldUpdate: () => !selection.isChangingOptions.value && isVisible.value,
   getHeight: () => ACTIONS_HEIGHT,
   getMargin: () => 20,
   allowHorizontalOverflow: true
 });
-const controlsEl = ref(null);
+const controlsEl = useTemplateRef("controlsEl");
 const showDropdown = ref(false);
 const hasAnythingSelected = computed(
   () => selection.hasHostSelected.value || !!selection.items.value.length
 );
+const isVisible = computed(() => {
+  return !selection.isDragging.value && !selection.editableActive.value && !ui.isAnimating.value && !ui.hasTransformOverlayOpen.value && hasAnythingSelected.value && !ui.hasTooltipOpen.value;
+});
 watch(selection.items, () => {
   showDropdown.value = false;
 });
@@ -118,6 +120,9 @@ const bundleIcon = computed(() => {
   }
   return itemBundle.value?.id;
 });
+const isReusable = computed(() => {
+  return itemBundle.value?.id === BUNDLE_FROM_LIBRARY;
+});
 const hasSelectedHost = computed(() => {
   return selection.items.value.length === 0;
 });

package/dist/runtime/components/Edit/AddListItem/index.vue

@@ -1,40 +1,23 @@
 <template>
   <PluginContextMenu
-    :id="'add_list_item_' + id"
+    :id="'add_list_item_' + context + id"
     ref="el"
     tag="button"
-    class="bk-list-item"
-    data-element-type="action"
+    type="button"
+    class="bk-add-item"
     :menu="menu"
     :data-sortli-id="id"
     :class="[
   {
     'bk-is-disabled': disabled
   },
-  'bk-is-' + orientation,
   'bk-is-' + color
 ]"
   >
-    <div class="bk-list-item-inner">
-      <AddListItemIcon :orientation :color :bundle :icon />
-      <div
-        class="bk-list-item-label"
-        :class="{
-  'bk-tooltip': orientation === 'horizontal' && !ui.isMobile.value
-}"
-      >
-        <span>{{ label }}</span>
-      </div>
+    <div class="bk-add-item-icon">
+      <ItemIconBox :color :bundle :icon />
     </div>
-
-    <div
-      class="bk-add-list-drop bk-drop-element"
-      :class="['bk-is-' + color, { 'bk-is-dark': isDark }]"
-    >
-      <div class="bk-add-list-drop-icon">
-        <ItemIcon v-if="bundle" :bundle="bundle" />
-        <Icon v-else-if="icon" :name="icon" />
-      </div>
+    <div class="bk-add-item-label">
       <span>{{ label }}</span>
     </div>
   </PluginContextMenu>
@@ -42,13 +25,13 @@
 
 <script setup>
 import { useBlokkli, computed, ref } from "#imports";
-import { ItemIcon, Icon, AddListItemIcon } from "#blokkli/components";
+import { ItemIconBox } from "#blokkli/components";
 import { PluginContextMenu } from "#blokkli/plugins";
-const { ui, storage, $t } = useBlokkli();
+const { storage, $t } = useBlokkli();
 const props = defineProps({
   id: { type: String, required: true },
+  context: { type: String, required: true },
   label: { type: String, required: true },
-  orientation: { type: String, required: true },
   color: { type: String, required: false, default: "default" },
   bundle: { type: String, required: false, default: "" },
   icon: { type: null, required: false, default: void 0 },
@@ -58,9 +41,6 @@ const props = defineProps({
 const el = ref(null);
 const favorites = storage.use("blockFavorites", []);
 const isFavorite = computed(() => favorites.value.includes(props.id));
-const isDark = computed(
-  () => props.orientation !== "sidebar" && props.color === "default"
-);
 const toggleFavorite = () => {
   if (favorites.value.includes(props.id)) {
     favorites.value = favorites.value.filter((v) => v !== props.id);
@@ -84,9 +64,3 @@ const menu = computed(() => {
 const getElement = () => el.value?.$el;
 defineExpose({ getElement });
 </script>
-
-<script>
-export default {
-  name: "AddListItem"
-};
-</script>

package/dist/runtime/components/Edit/AddListItem/index.vue.d.ts

@@ -1,26 +1,17 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
-import type { AddListOrientation } from '#blokkli/types';
-declare const _default: import("vue").DefineComponent<{
+export type AddListItemProps = {
     id: string;
+    context: string;
     label: string;
-    orientation: AddListOrientation;
-    color?: "rose" | "lime" | "default" | "yellow" | "accent";
+    color?: 'rose' | 'lime' | 'default' | 'yellow' | 'accent';
     bundle?: string;
     icon?: BlokkliIcon;
     disabled?: boolean;
     noContextMenu?: boolean;
-}, {
+};
+declare const _default: import("vue").DefineComponent<AddListItemProps, {
     getElement: () => HTMLElement | null;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
-    id: string;
-    label: string;
-    orientation: AddListOrientation;
-    color?: "rose" | "lime" | "default" | "yellow" | "accent";
-    bundle?: string;
-    icon?: BlokkliIcon;
-    disabled?: boolean;
-    noContextMenu?: boolean;
-}> & Readonly<{}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AddListItemProps> & Readonly<{}>, {
     bundle: string;
     icon: BlokkliIcon;
     color: "rose" | "lime" | "default" | "yellow" | "accent";