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

package/dist/runtime/editor/components/Actions/useToolbarScroll.d.ts

@@ -0,0 +1,25 @@
+import type { Ref } from 'vue';
+export type UseToolbarScrollOptions = {
+    viewportEl: Readonly<Ref<HTMLElement | null>>;
+    contentEl: Readonly<Ref<HTMLElement | null>>;
+};
+/**
+ * Drives horizontal scroll of the actions toolbar's inner content via a
+ * transform translate, exposing arrow visibility flags and press-and-hold
+ * scroll controls.
+ *
+ * The viewport caps at the editor's safe area on desktop; when the content
+ * (icons, options, action buttons) is wider, the user scrolls by pressing
+ * and holding the arrow buttons rendered on the viewport edges. The
+ * underlying transform is applied without a CSS transition so selection
+ * changes don't animate back to zero. Mobile is unaffected — the options
+ * strip keeps its own native horizontal overflow there.
+ */
+export declare function useToolbarScroll(options: UseToolbarScrollOptions): {
+    scrollX: any;
+    showLeft: any;
+    showRight: any;
+    startScroll: (direction: -1 | 1) => void;
+    stopScroll: () => void;
+    scrollIntoView: (element: HTMLElement) => void;
+};

package/dist/runtime/editor/components/Actions/useToolbarScroll.js

@@ -0,0 +1,125 @@
+import { ref, computed, onBeforeUnmount } from "#imports";
+import { onElementResize } from "#blokkli/editor/composables";
+const LG_MEDIA_QUERY = "(min-width: 1024px)";
+const SCROLL_SPEED_PX_PER_SEC = 1400;
+const ARROW_OVERLAP_PX = 60;
+export function useToolbarScroll(options) {
+  const scrollX = ref(0);
+  const viewportWidth = ref(0);
+  const contentWidth = ref(0);
+  const isLg = ref(
+    typeof window !== "undefined" ? window.matchMedia(LG_MEDIA_QUERY).matches : false
+  );
+  const maxScroll = computed(() => {
+    if (!isLg.value) {
+      return 0;
+    }
+    return Math.max(0, contentWidth.value - viewportWidth.value);
+  });
+  const showLeft = computed(() => maxScroll.value > 0 && scrollX.value > 0);
+  const showRight = computed(
+    () => maxScroll.value > 0 && scrollX.value < maxScroll.value
+  );
+  function clamp() {
+    if (scrollX.value > maxScroll.value) {
+      scrollX.value = maxScroll.value;
+    } else if (scrollX.value < 0) {
+      scrollX.value = 0;
+    }
+  }
+  let rafId = null;
+  let lastTime = null;
+  let currentDirection = 0;
+  function tick(now) {
+    if (lastTime === null) {
+      lastTime = now;
+    }
+    const dt = (now - lastTime) / 1e3;
+    lastTime = now;
+    const next = Math.max(
+      0,
+      Math.min(
+        maxScroll.value,
+        scrollX.value + currentDirection * SCROLL_SPEED_PX_PER_SEC * dt
+      )
+    );
+    scrollX.value = next;
+    if (currentDirection < 0 && next === 0 || currentDirection > 0 && next >= maxScroll.value) {
+      stopScroll();
+      return;
+    }
+    rafId = window.requestAnimationFrame(tick);
+  }
+  function startScroll(direction) {
+    if (rafId !== null) {
+      return;
+    }
+    currentDirection = direction;
+    lastTime = null;
+    rafId = window.requestAnimationFrame(tick);
+  }
+  function stopScroll() {
+    if (rafId !== null) {
+      window.cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+    lastTime = null;
+    currentDirection = 0;
+  }
+  function scrollIntoView(element) {
+    const viewport = options.viewportEl.value;
+    if (!viewport || !isLg.value || maxScroll.value <= 0) {
+      return;
+    }
+    if (!viewport.contains(element)) {
+      return;
+    }
+    const viewportRect = viewport.getBoundingClientRect();
+    const elRect = element.getBoundingClientRect();
+    const leftOverflow = viewportRect.left + ARROW_OVERLAP_PX - elRect.left;
+    const rightOverflow = elRect.right - (viewportRect.right - ARROW_OVERLAP_PX);
+    let next = scrollX.value;
+    if (leftOverflow > 0) {
+      next -= leftOverflow;
+    } else if (rightOverflow > 0) {
+      next += rightOverflow;
+    } else {
+      return;
+    }
+    scrollX.value = Math.max(0, Math.min(maxScroll.value, next));
+  }
+  onElementResize(options.viewportEl, (size) => {
+    viewportWidth.value = size.width;
+    clamp();
+  });
+  onElementResize(options.contentEl, (size) => {
+    contentWidth.value = size.width;
+    clamp();
+  });
+  let mql = null;
+  function onMediaChange(e) {
+    isLg.value = e.matches;
+    if (!e.matches) {
+      scrollX.value = 0;
+      stopScroll();
+    } else {
+      clamp();
+    }
+  }
+  if (typeof window !== "undefined") {
+    mql = window.matchMedia(LG_MEDIA_QUERY);
+    mql.addEventListener("change", onMediaChange);
+  }
+  onBeforeUnmount(() => {
+    mql?.removeEventListener("change", onMediaChange);
+    stopScroll();
+  });
+  return {
+    scrollX,
+    showLeft,
+    showRight,
+    startScroll,
+    stopScroll,
+    scrollIntoView
+  };
+}

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

@@ -135,7 +135,7 @@ function getInteractedElement(e) {
       droppableField.fieldName,
       droppableField
     );
-    if (config.type === "reference") {
+    if (config.type === "reference" && config.cardinality !== 1) {
       const droppableUuid = droppableField.type === itemEntityType ? droppableField.uuid : void 0;
       if (!droppableUuid || droppableUuid === deepestUuid) {
         return {
@@ -361,7 +361,9 @@ function onPointerUp(e) {
         if (!block) {
           return;
         }
-        eventBus.emit("item:doubleClick", block);
+        ui.flushPendingChanges().then(
+          () => eventBus.emit("item:doubleClick", block)
+        );
       }
     }
   }

package/dist/runtime/editor/components/AppMenu/Inner.vue

@@ -11,8 +11,11 @@
     >
       <Icon name="bk_mdi_close" class="_bk_size-20 _bk_md:size-30 _bk_mr-25" />
     </button>
-    <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col">
-      <div id="bk-menu-primary" class="_bk_grid _bk_border-t _bk_border-t-mono-200">
+    <div class="_bk_flex-1 _bk_overflow-auto _bk_flex _bk_flex-col _bk_bg-mono-200">
+      <div
+        id="bk-menu-primary"
+        class="_bk_grid _bk_border-t _bk_border-t-mono-200 _bk_bg-white"
+      >
         <MenuButton
           v-for="button in primaryButtons"
           :id="button.id"
@@ -25,7 +28,7 @@
           @click="onClick(button)"
         />
       </div>
-      <div id="bk-menu-secondary" class="_bk_mt-auto">
+      <div id="bk-menu-secondary" class="_bk_mt-auto _bk_grid _bk_grid-cols-2">
         <MenuButton
           v-for="button in secondaryButtons"
           :id="button.id"
@@ -35,16 +38,17 @@
           :icon="button.icon"
           :type="button.type"
           :disabled="button.disabled"
+          small
           @click="onClick(button)"
         />
       </div>
       <aside
-        class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-mono-100 _bk_text-mono-600 _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
+        class="_bk_px-15 _bk_py-10 _bk_text-xs _bk_bg-accent-600 _bk_text-white _bk_items-center _bk_leading-none _bk_flex _bk_justify-between"
       >
         <div class="_bk_flex _bk_gap-5 _bk_items-center">
           <Icon
             name="logo"
-            class="_bk_bg-accent-700 _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-white"
+            class="_bk_bg-white _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded _bk_text-accent-600"
           />
           <div><strong>@blokkli/editor</strong> {{ blokkliVersion }}</div>
         </div>
@@ -67,7 +71,7 @@ import { computed, useBlokkli } from "#imports";
 import { Icon } from "#blokkli/editor/components";
 import { blokkliVersion } from "#blokkli-build/editor-config";
 import MenuButton from "./MenuButton.vue";
-const { plugins } = useBlokkli();
+const { plugins, ui } = useBlokkli();
 const emit = defineEmits(["close"]);
 const allButtons = computed(() => plugins.get("menuButton"));
 const primaryButtons = computed(() => {
@@ -76,7 +80,8 @@ const primaryButtons = computed(() => {
 const secondaryButtons = computed(() => {
   return allButtons.value.filter((button) => button.secondary).sort((a, b) => (a.weight || 0) - (b.weight || 0));
 });
-function onClick(button) {
+async function onClick(button) {
+  await ui.flushPendingChanges();
   button.callback();
   emit("close");
 }

package/dist/runtime/editor/components/AppMenu/MenuButton.d.vue.ts

@@ -1,13 +1,14 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const __VLS_export: import("vue").DefineComponent<{
     id: string;
     title: string;
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,13 +18,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/AppMenu/MenuButton.vue

@@ -1,18 +1,61 @@
 <template>
   <button
     :id="'bk-menu-list-button-' + id"
-    class="bk-menu-list-button _bk_grid _bk_items-center _bk_pl-15 _bk_pr-20 _bk_py-15 _bk_gap-x-10 _bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_text-sm _bk_lg:hover:bg-mono-100 _bk_border-b _bk_border-b-mono-200"
-    :disabled="disabled"
-    :class="type ? 'bk-is-' + type : ''"
+    class="_bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_group"
+    :disabled
+    :class="[
+  {
+    'bk-scheme-lime': type === 'success',
+    'bk-scheme-red': type === 'danger',
+    'bk-scheme-yellow': type === 'yellow',
+    'bk-scheme-mono': !type,
+    '_bk_pointer-events-none': disabled,
+    '_bk_lg:hover:bg-mono-100 _bk_border-b _bk_border-b-mono-200': !small
+  }
+]"
     @click.prevent.stop="onClick"
   >
-    <div class="bk-menu-list-icon">
-      <slot>
-        <Icon v-if="icon" :name="icon" />
-      </slot>
+    <div
+      class="_bk_grid _bk_pl-15 _bk_pr-20 _bk_grid-cols-[auto_1fr]"
+      :class="{
+  '_bk_py-8 _bk_gap-x-5': small,
+  '_bk_py-15 _bk_gap-x-10': !small,
+  '_bk_opacity-30': disabled
+}"
+    >
+      <div
+        class="_bk_flex _bk_items-center _bk_justify-center _bk_border _bk_bg-scheme-light _bk_text-scheme-dark _bk_border-scheme-normal/50 _bk_group-hover:border-scheme-normal _bk_group-hover:text-scheme-dark _bk_rounded"
+        :class="{
+  '_bk_size-25': small,
+  '_bk_size-50': !small
+}"
+      >
+        <Icon v-if="icon" :name="icon" class="_bk_size-[60%]" />
+      </div>
+      <div
+        class="_bk_flex _bk_flex-col _bk_justify-center"
+        :class="{
+  '_bk_gap-2': !small
+}"
+      >
+        <strong
+          :class="{
+  '_bk_text-xs _bk_font-medium': small,
+  '_bk_text-base _bk_font-semibold': !small
+}"
+          >{{ title }}</strong
+        >
+        <span
+          v-if="!small"
+          class="_bk_text-mono-500 _bk_group-hover:text-mono-700"
+          :class="{
+  '_bk_text-xs': small,
+  '_bk_text-sm': !small
+}"
+          >{{ description }}</span
+        >
+      </div>
     </div>
-    <strong>{{ title }}</strong>
-    <span>{{ description }}</span>
   </button>
 </template>
 
@@ -24,7 +67,8 @@ defineProps({
   description: { type: String, required: true },
   disabled: { type: Boolean, required: false },
   icon: { type: null, required: false },
-  type: { type: String, required: false }
+  type: { type: String, required: false },
+  small: { type: Boolean, required: false }
 });
 const emit = defineEmits(["click"]);
 function onClick() {
@@ -37,187 +81,3 @@ export default {
   name: "MenuButton"
 };
 </script>
-
-<style>
-@media screen and (min-height: 900px) {
-.bk .bk-menu-list-button {
-
-column-gap: 15px !important;
-
-font-size: 16px !important;
-
-line-height: 24px !important;
-}
-  }
-  .bk .bk-menu-list-button {
-
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto auto;
-}
-  .bk .bk-menu-list-button[disabled] {
-
-pointer-events: none;
-}
-  .bk .bk-menu-list-button[disabled] .bk-menu-list-icon {
-
---bk-tw-border-opacity: 1;
-
-border-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-border-opacity, 1));
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button[disabled] span,
-    .bk .bk-menu-list-button[disabled] strong {
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button strong {
-
-font-weight: 600;
-}
-  .bk .bk-menu-list-button span {
-    grid-column: 2;
-    font-size: 14px;
-    line-height: 20px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
-  }
-  .bk .bk-menu-list-button:not([disabled]).bk-is-danger .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-red-normal) / 0.4);
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-danger:hover .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-red-normal) / 0.5);
-
-background-color: rgb(var(--bk-theme-red-normal) / 0.2);
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-success .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-lime-normal) / 0.4);
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-success:hover .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-lime-normal) / 0.4);
-
-background-color: rgb(var(--bk-theme-lime-normal) / 0.2);
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-yellow .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-yellow-normal) / 0.4);
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-bg-opacity, 1));
-
-color: rgb(var(--bk-theme-yellow-dark) / 0.6);
-}
-  .bk .bk-menu-list-button:not([disabled]).bk-is-yellow:hover .bk-menu-list-icon {
-
-border-color: rgb(var(--bk-theme-yellow-dark) / 0.5);
-
-background-color: rgb(var(--bk-theme-yellow-normal) / 0.2);
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk .bk-menu-list-button:hover .bk-menu-list-icon {
-
---bk-tw-border-opacity: 1;
-
-border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1));
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
-}
-
-.bk .bk-menu-list-icon {
-
-display: flex;
-
-align-items: center;
-
-justify-content: center;
-
-border-radius: 4px;
-
-border-width: 1px;
-
---bk-tw-border-opacity: 1;
-
-border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-
---bk-tw-bg-opacity: 1;
-
-background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-
---bk-tw-text-opacity: 1;
-
-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-
-height: 40px;
-
-width: 40px;
-  grid-column: 1;
-  grid-row: 1 / -1;
-}
-
-@media screen and (min-height: 900px) {
-
-.bk .bk-menu-list-icon {
-
-width: 50px;
-
-height: 50px;
-}
-  }
-
-.bk .bk-menu-list-icon svg {
-
-pointer-events: none;
-
-height: 25px;
-
-width: 25px;
-
-fill: currentColor;
-}
-</style>

package/dist/runtime/editor/components/AppMenu/MenuButton.vue.d.ts

@@ -1,13 +1,14 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: typeof __VLS_export;
 export default _default;
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
+declare const __VLS_export: import("vue").DefineComponent<{
     id: string;
     title: string;
     description: string;
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
@@ -17,13 +18,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     disabled?: boolean;
     icon?: BlokkliIcon;
     type?: "success" | "danger" | "yellow";
+    small?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    default?: (props: {}) => any;
-}>;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;