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

package/dist/modules/tailwind/index.mjs

@@ -1,2 +1,228 @@
-export { default as tailwindConfig } from '../../chunks/tailwindConfig.mjs';
-import 'tailwindcss/plugin';
+import plugin from 'tailwindcss/plugin';
+
+const z = (index, key) => {
+  return `calc(var(--bk-z-index-base) + ${index}) /* "${key}" */`;
+};
+const zIndexKeys = [
+  "main-layout",
+  "canvas-overlay",
+  "animation-canvas",
+  "selection",
+  "analyze-tooltip",
+  "interaction-overlay",
+  "comments-overlay",
+  "comments-overlay-active",
+  "artboard-scrollbar",
+  "artboard-overview",
+  "translations-banner-mobile",
+  "editable-field",
+  "translations-banner-desktop",
+  "sidebar",
+  "sidebar-tabs",
+  "toolbar",
+  "actions",
+  "selection-add",
+  "add-buttons-label",
+  "add-list",
+  "add-list-info",
+  "tour-popup",
+  "preview",
+  "toolbar-dropdown",
+  "drop-targets",
+  "dragging-overlay",
+  "touch-action-bar",
+  "tour-overlay",
+  "tour-item",
+  "context-menu",
+  "resizable",
+  "transform-overlay",
+  "sidebar-detached",
+  "search",
+  "overlay",
+  "dialog",
+  "nested-editor-overlay-bg",
+  "nested-editor-overlay-iframe",
+  "messages",
+  "form-overlay",
+  "form-overlay-header",
+  "menu",
+  "command-palette",
+  "library-edit-dialog",
+  "init-overlay",
+  "overlay-high",
+  "dialog-high"
+];
+const zIndexCssVars = ["sidebar-detached"];
+const zIndex = zIndexKeys.reduce((acc, key, index) => {
+  acc[key] = z(index * 1e4, key);
+  return acc;
+}, {});
+const tailwindConfig = {
+  content: ["./src/runtime/**/*.vue", "./src/modules/*/runtime/**/*.vue"],
+  theme: {
+    fontFamily: {
+      sans: ["PB Inter, sans-serif"],
+      mono: ["monospace"]
+    },
+    colors: {
+      accent: {
+        50: "rgb(var(--bk-theme-accent-50) / <alpha-value>)",
+        100: "rgb(var(--bk-theme-accent-100) / <alpha-value>)",
+        200: "rgb(var(--bk-theme-accent-200) / <alpha-value>)",
+        300: "rgb(var(--bk-theme-accent-300) / <alpha-value>)",
+        400: "rgb(var(--bk-theme-accent-400) / <alpha-value>)",
+        500: "rgb(var(--bk-theme-accent-500) / <alpha-value>)",
+        600: "rgb(var(--bk-theme-accent-600) / <alpha-value>)",
+        700: "rgb(var(--bk-theme-accent-700) / <alpha-value>)",
+        800: "rgb(var(--bk-theme-accent-800) / <alpha-value>)",
+        900: "rgb(var(--bk-theme-accent-900) / <alpha-value>)",
+        950: "rgb(var(--bk-theme-accent-950) / <alpha-value>)"
+      },
+      mono: {
+        50: "rgb(var(--bk-theme-mono-50) / <alpha-value>)",
+        100: "rgb(var(--bk-theme-mono-100) / <alpha-value>)",
+        200: "rgb(var(--bk-theme-mono-200) / <alpha-value>)",
+        300: "rgb(var(--bk-theme-mono-300) / <alpha-value>)",
+        400: "rgb(var(--bk-theme-mono-400) / <alpha-value>)",
+        500: "rgb(var(--bk-theme-mono-500) / <alpha-value>)",
+        600: "rgb(var(--bk-theme-mono-600) / <alpha-value>)",
+        700: "rgb(var(--bk-theme-mono-700) / <alpha-value>)",
+        800: "rgb(var(--bk-theme-mono-800) / <alpha-value>)",
+        900: "rgb(var(--bk-theme-mono-900) / <alpha-value>)",
+        950: "rgb(var(--bk-theme-mono-950) / <alpha-value>)"
+      },
+      teal: {
+        light: "rgb(var(--bk-theme-teal-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-teal-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-teal-dark) / <alpha-value>)"
+      },
+      yellow: {
+        light: "rgb(var(--bk-theme-yellow-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-yellow-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-yellow-dark) / <alpha-value>)"
+      },
+      red: {
+        light: "rgb(var(--bk-theme-red-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-red-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-red-dark) / <alpha-value>)"
+      },
+      lime: {
+        light: "rgb(var(--bk-theme-lime-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-lime-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-lime-dark) / <alpha-value>)"
+      },
+      orange: {
+        light: "rgb(var(--bk-theme-orange-light) / <alpha-value>)",
+        normal: "rgb(var(--bk-theme-orange-normal) / <alpha-value>)",
+        dark: "rgb(var(--bk-theme-orange-dark) / <alpha-value>)"
+      },
+      scheme: {
+        light: "rgb(var(--bk-scheme-light, var(--bk-theme-accent-100)) / <alpha-value>)",
+        "light-hover": "var(--bk-scheme-light-hover)",
+        normal: "rgb(var(--bk-scheme-normal, var(--bk-theme-accent-600)) / <alpha-value>)",
+        "normal-hover": "var(--bk-scheme-normal-hover)",
+        dark: "rgb(var(--bk-scheme-dark, var(--bk-theme-accent-800)) / <alpha-value>)",
+        "dark-hover": "var(--bk-scheme-dark-hover)",
+        text: "rgb(var(--bk-scheme-text, var(--bk-scheme-dark)) / <alpha-value>)"
+      },
+      white: "white",
+      black: "black",
+      transparent: "transparent",
+      current: "currentColor"
+    },
+    extend: {
+      screens: {
+        "3xl": "1920px",
+        "4xl": "2440px"
+      },
+      transitionTimingFunction: {
+        swing: "cubic-bezier(0.56, 0.04, 0.25, 1)"
+      },
+      zIndex: {
+        ...zIndex
+      },
+      borderRadius: {
+        DEFAULT: "4px"
+      },
+      boxShadow: {
+        sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+        DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+        md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+        "md-even": "0 0px 10px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
+        inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+        none: "none",
+        "lg-inverted": "0 -10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+        "xl-inverted": "0 -20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        "xl-left": "-20px 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
+        "xl-even": "0 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
+      }
+    },
+    spacing: {
+      770: "770px",
+      340: "340px",
+      300: "300px",
+      200: "200px",
+      120: "120px",
+      100: "100px",
+      90: "90px",
+      80: "80px",
+      70: "70px",
+      60: "60px",
+      50: "50px",
+      40: "40px",
+      30: "30px",
+      25: "25px",
+      24: "24px",
+      20: "20px",
+      18: "18px",
+      15: "15px",
+      10: "10px",
+      8: "8px",
+      5: "5px",
+      3: "3px",
+      2: "2px",
+      1: "1px",
+      0: "0px",
+      "offset-t": "var(--bk-root-offset-top)",
+      "offset-r": "var(--bk-root-offset-right)",
+      "offset-b": "var(--bk-root-offset-bottom)",
+      scrollbar: "var(--bk-artboard-scrollbar-size)",
+      "sidebar-right": "var(--bk-sidebar-width-right)",
+      "toolbar-left": "var(--bk-toolbar-left-width)",
+      "panel-gap": "var(--bk-panel-gap)"
+    },
+    borderWidth: {
+      DEFAULT: "1px",
+      0: "0",
+      2: "2px",
+      3: "3px",
+      4: "4px"
+    }
+  },
+  plugins: [
+    plugin(function({ addVariant, addBase }) {
+      addVariant(
+        "mobile-only",
+        "@media screen and (max-width: theme('screens.sm'))"
+      );
+      const cssVars = zIndexCssVars.reduce(
+        (acc, key) => {
+          const index = zIndexKeys.indexOf(key);
+          if (index !== -1) {
+            acc[`--bk-z-index-${key}`] = `calc(var(--bk-z-index-base) + ${index * 1e4})`;
+          }
+          return acc;
+        },
+        {}
+      );
+      addBase({
+        ":root": cssVars
+      });
+    })
+  ]
+};
+
+export { tailwindConfig as default };

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

@@ -23,59 +23,32 @@ const text = computed(() => {
 useBlockRegistration(dom, props.uuid);
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-block-not-implemented {
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
-
-    padding-top: 15px;
-
-    padding-bottom: 15px;
-
-    font-family: PB Inter, sans-serif;
-
-    font-weight: 500;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
-
-    border-radius: 6px;
-
-    font-size: 18px;
-
-    line-height: 28px;
-
-    outline-style: solid;
-
-    outline-width: 1px;
-
-    outline-offset: -1px;
-
-    outline-color: rgb(var(--bk-theme-red-normal) / 0.3);
-
-    display: flex;
-
-    align-items: center;
-
-    justify-content: center;
-
-    gap: 5px
+  background-color: rgb(var(--bk-theme-red-light) / 1);
+  padding-block: 15px;
+  font-family: PB Inter, sans-serif;
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: rgb(var(--bk-theme-red-normal) / 1);
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-offset: calc(1px * -1);
+  outline-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 30%, transparent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
 }
-
-  .bk.bk-block-not-implemented strong {
-
-    font-weight: 700 !important
+.bk.bk-block-not-implemented strong {
+  --bk-tw-font-weight: var(--font-weight-bold, 700) !important;
+  font-weight: var(--font-weight-bold, 700) !important;
 }
-
-  .bk.bk-block-not-implemented svg {
-
-    fill: currentColor;
-
-    width: 25px;
-
-    height: 25px
+.bk.bk-block-not-implemented svg {
+  fill: currentcolor;
+  width: 25px;
+  height: 25px;
 }
 </style>

package/dist/runtime/components/BlokkliItem.vue

@@ -2,7 +2,7 @@
   <Component
     :is="component"
     v-if="isProxyMode || isGlobalProxyMode"
-    :key="'component_' + renderKey"
+    :key="'component'"
     :bundle="bundle"
     :uuid="uuid"
     :field-list-type="fieldListType"
@@ -13,7 +13,7 @@
     :is="component"
     v-else-if="component"
     v-bind="itemProps"
-    :key="'proxy_' + renderKey"
+    :key="'proxy'"
     :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
   />
   <Component
@@ -25,21 +25,11 @@
 </template>
 
 <script setup>
-import {
-  computed,
-  provide,
-  inject,
-  defineAsyncComponent,
-  ref,
-  getCurrentInstance,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
+import { computed, provide, inject, defineAsyncComponent } from "#imports";
 import { getComponent } from "#blokkli/helpers/imports";
 import {
   INJECT_ALL_COMPONENTS_CHUNK,
   INJECT_BLOCK_ITEM,
-  INJECT_EDIT_CONTEXT,
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
   INJECT_FIELD_PROXY_MODE,
@@ -60,7 +50,6 @@ const componentProps = defineProps({
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });
-const renderKey = ref(0);
 const isEditingComponent = import.meta.blokkliEditing;
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
 const mutatedItemProps = inject(INJECT_ITEM_PROPS_OVERRIDE, null);
@@ -69,7 +58,6 @@ const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
 const isGlobalProxyMode = inject(INJECT_GLOBAL_PROXY_MODE, null);
 const fieldListType = inject(INJECT_FIELD_LIST_TYPE, void 0);
 const providerType = inject(INJECT_PROVIDER_TYPE, void 0);
-const editingContext = inject(INJECT_EDIT_CONTEXT, null);
 const itemProps = computed(() => {
   if (mutatedItemProps && componentProps.isEditing) {
     const mutatedProps = mutatedItemProps[componentProps.uuid];
@@ -110,22 +98,6 @@ provide(INJECT_ENTITY_CONTEXT, {
   type: itemEntityType,
   bundle: componentProps.bundle
 });
-if (isEditingComponent && editingContext) {
-  const instance = getCurrentInstance();
-  if (instance) {
-    let onForceRerender = function(uuids) {
-      if (uuids.includes(componentProps.uuid)) {
-        renderKey.value++;
-      }
-    };
-    onMounted(() => {
-      editingContext.eventBus.on("block:rerender", onForceRerender);
-    });
-    onBeforeUnmount(() => {
-      editingContext.eventBus.off("block:rerender", onForceRerender);
-    });
-  }
-}
 </script>
 
 <script>

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

@@ -5,6 +5,7 @@ import type { EntityTranslation, MappedState } from '../types/state.js';
 import type { BlockBundleDefinition, EntityTypeBundleInfo, EntityTypeInfo, FieldConfig } from '../types/definitions.js';
 import type { EditBlockEvent } from '../features/edit/types.js';
 import type { UserPermissions } from '../types/permissions.js';
+import type { BlokkliUser } from '../types/user.js';
 export interface MutationResponseLike<T> {
     success: boolean;
     state?: T;
@@ -73,6 +74,21 @@ export interface BlokkliAdapter<T> {
     loadStateAtIndex?: (index: number) => Promise<T | undefined>;
     mapState(state: T): MappedState;
     getUserPermissions: () => Promise<UserPermissions[]>;
+    /**
+     * Return the user currently editing. Must always return a non-null user;
+     * adapters should treat this as a hard requirement (anonymous editing is
+     * not supported by features that consume the user provider).
+     */
+    getCurrentUser: () => Promise<BlokkliUser>;
+    /**
+     * Return the list of users that can be referenced in the editor (e.g. for
+     * `@` mentions in comments). Called lazily on demand and cached by the
+     * user provider, so this may be a relatively expensive operation.
+     *
+     * Optional. Adapters that don't implement this expose an empty user list
+     * to consumers — mention pickers will simply show no suggestions.
+     */
+    getBlokkliUsers?: () => Promise<BlokkliUser[]>;
     /**
      * Get disabled features at runtime.
      *

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

@@ -0,0 +1,9 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    disabled: boolean;
+    icon: BlokkliIcon;
+    label: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,19 @@
+<template>
+  <button
+    type="button"
+    :disabled
+    class="_bk_group/tooltip _bk_size-25 _bk_flex _bk_items-center _bk_justify-center _bk_text-mono-300 _bk_hover:bg-mono-700 _bk_hover:text-mono-50 _bk_disabled:pointer-events-none _bk_disabled:text-mono-500"
+  >
+    <Icon :name="icon" class="_bk_size-[13px]" />
+    <Tooltip :label placement="above-left" />
+  </button>
+</template>
+
+<script setup>
+import { Icon, Tooltip } from "#blokkli/editor/components";
+defineProps({
+  disabled: { type: Boolean, required: true },
+  icon: { type: null, required: true },
+  label: { type: String, required: true }
+});
+</script>

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

@@ -0,0 +1,9 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    disabled: boolean;
+    icon: BlokkliIcon;
+    label: string;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,46 +1,26 @@
 <template>
-  <div class="bk-blokkli-item-actions-interactions">
-    <button
-      type="button"
+  <div class="_bk_h-50 _bk_w-25 _bk_relative _bk_border-r _bk_border-r-mono-500">
+    <InteractionButton
       :disabled="!canSelectParent"
-      class="_bk_group/tooltip"
+      icon="bk_mdi_arrow_top_left"
+      :label="parentButtonLabel"
+      class="_bk_border-b _bk_border-b-mono-500"
       @click.prevent="onClickSelectParent"
-    >
-      <Icon name="bk_mdi_arrow_top_left" />
-      <Tooltip
-        :label="
-  parentLabel ? $t('actionsSelectParent', 'Select parent (@label)').replace(
-    '@label',
-    parentLabel
-  ) : $t('actionsSelectPage', 'Select page')
-"
-        placement="above-left"
-      />
-    </button>
-    <button
-      type="button"
-      class="_bk_group/tooltip"
+    />
+    <InteractionButton
       :disabled="!canMove"
+      icon="bk_mdi_drag_pan"
+      :label="moveButtonLabel"
+      class="_bk_cursor-grab"
       @pointerdown.stop.prevent="onMovePointerDown"
-    >
-      <Icon name="bk_mdi_drag_pan" />
-      <Tooltip
-        :label="
-  selection.uuids.value.length === 1 ? $t('actionsMoveBlock', 'Move block') : $t('actionsMoveBlocks', 'Move @count blocks').replace(
-    '@count',
-    String(selection.uuids.value.length)
-  )
-"
-        placement="above-left"
-      />
-    </button>
+    />
   </div>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon, Tooltip } from "#blokkli/editor/components";
 import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
+import InteractionButton from "./Button.vue";
 const { selection, $t, state, eventBus, ui, types } = useBlokkli();
 const canMove = computed(() => {
   return !!selection.items.value.length;
@@ -74,6 +54,18 @@ const parentLabel = computed(() => {
   }
   return types.getBlockBundleDefinition(parentItem.bundle)?.label ?? "";
 });
+const parentButtonLabel = computed(() => {
+  return parentLabel.value ? $t("actionsSelectParent", "Select parent (@label)").replace(
+    "@label",
+    parentLabel.value
+  ) : $t("selectPage", "Select page");
+});
+const moveButtonLabel = computed(() => {
+  return selection.uuids.value.length === 1 ? $t("actionsMoveBlock", "Move block") : $t("actionsMoveBlocks", "Move @count blocks").replace(
+    "@count",
+    String(selection.uuids.value.length)
+  );
+});
 function onClickSelectParent() {
   if (!canSelectParent.value) {
     return;
@@ -112,59 +104,3 @@ export default {
   name: "Interactions"
 };
 </script>
-
-<style>
-.bk .bk-blokkli-item-actions-interactions {
-    position: relative;
-    height: 50px;
-    width: 25px
-}
-@media (min-width: 1024px) {
-    .bk .bk-blokkli-item-actions-interactions {
-        border-right-width: 1px;
-        --bk-tw-border-opacity: 1;
-        border-right-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
-    }
-}
-
-  .bk .bk-blokkli-item-actions-interactions > button {
-    width: 25px;
-    height: 25px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
-}
-
-  .bk .bk-blokkli-item-actions-interactions > button:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1))
-}
-
-  .bk .bk-blokkli-item-actions-interactions > button[disabled] {
-    pointer-events: none;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
-}
-
-  .bk .bk-blokkli-item-actions-interactions > button:first-child {
-    border-top-left-radius: 6px;
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
-}
-
-  .bk .bk-blokkli-item-actions-interactions > button:nth-child(2) {
-    cursor: grab;
-    border-bottom-left-radius: 6px
-}
-
-  .bk .bk-blokkli-item-actions-interactions > button svg {
-    width: 13px;
-    height: 13px;
-    fill: currentColor
-}
-</style>

package/dist/runtime/editor/components/Actions/ItemDropdown/Item.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ItemDropdownAction } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    action: ItemDropdownAction;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Actions/ItemDropdown/Item.vue

@@ -0,0 +1,50 @@
+<template>
+  <button
+    :data-test="`item-dropdown-action-${action.id}`"
+    class="_bk_gap-10 _bk_group/tooltip _bk_grid _bk_grid-cols-[20px_1fr] _bk_w-full _bk_text-mono-300 _bk_items-center _bk_left-left _bk_leading-none _bk_disabled:opacity-20 _bk_disabled:pointer-events-none _bk_hover:text-white _bk_hover:bg-mono-800 _bk_px-10"
+    :class="{
+  '_bk_hover:bg-orange-normal/10! _bk_hover:text-orange-light!': action.variant === 'agent',
+  '_bk_text-base _bk_font-semibold _bk_py-15': isLarge,
+  '_bk_text-sm _bk_font-medium _bk_py-10': !isLarge
+}"
+    :disabled="action.enabled === false"
+  >
+    <div
+      class="_bk_flex _bk_items-center _bk_justify-center _bk_shrink-0 _bk_col-start-1 _bk_row-start-1"
+      :class="{
+  '_bk_text-orange-normal': action.variant === 'agent'
+}"
+    >
+      <div
+        :class="{
+  '_bk_size-20': isLarge,
+  '_bk_size-15': !isLarge
+}"
+      >
+        <Icon v-if="action.icon" :name="action.icon" class="_bk_size-full" />
+        <ItemIcon
+          v-else-if="action.bundle"
+          :bundle="action.bundle"
+          class="_bk_size-full"
+        />
+      </div>
+    </div>
+    <div class="_bk_col-start-2 _bk_row-start-1">
+      <div>{{ action.label }}</div>
+    </div>
+    <Tooltip
+      v-if="action.description"
+      :label="action.description"
+      placement="center-after"
+    />
+  </button>
+</template>
+
+<script setup>
+import { ItemIcon, Icon, Tooltip } from "#blokkli/editor/components";
+import { computed } from "#imports";
+const props = defineProps({
+  action: { type: Object, required: true }
+});
+const isLarge = computed(() => props.action.variant === "agent");
+</script>

package/dist/runtime/editor/components/Actions/ItemDropdown/Item.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ItemDropdownAction } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    action: ItemDropdownAction;
+};
+declare const __VLS_export: 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>;
+declare const _default: typeof __VLS_export;
+export default _default;