@revenexx/editor 0.1.0

package/dist/runtime/editor/components/DraggableList.d.vue.ts

@@ -0,0 +1,31 @@
+import type { FieldListItem, EntityContext } from '#blokkli/types';
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
+import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
+import type { FieldDropAlignment } from '#blokkli/types/field';
+type __VLS_Props = {
+    name: string;
+    fieldKey: string;
+    list: FieldListItem[];
+    entity: EntityContext;
+    language?: string;
+    tag?: string;
+    isNested: boolean;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment?: FieldDropAlignment;
+    zIndex?: number | string;
+    proxyMode?: boolean;
+    globalProxyMode?: boolean;
+    nestingLevel: number;
+    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
+    language: string;
+    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,238 @@
+<template>
+  <div
+    v-if="proxyMode || globalProxyMode"
+    class="bk bk-field-list-proxy"
+    :class="[
+  {
+    'bk-is-visible': proxyVisible
+  },
+  'bk-is-' + (dropAlignment || (nestingLevel === 0 ? 'vertical' : 'horizontal'))
+]"
+  >
+    <div
+      ref="root"
+      class="bk-field-list-proxy-list bk-draggable-list-container"
+      :class="{
+  'bk-is-compact': list.length > 8
+}"
+    >
+      <BlokkliItem
+        v-for="(item, i) in list"
+        :key="item.uuid + fieldListType"
+        class="bk-field-list-item"
+        :uuid="item.uuid"
+        :bundle="item.bundle"
+        :options="item.options"
+        :props="item.props"
+        is-editing
+        :index="i"
+        :data-bk-uuid="item.uuid"
+        :parent-type="isNested ? entity.bundle : ''"
+        :data-bk-is-muted="isMuted(item)"
+      />
+    </div>
+  </div>
+  <Component
+    :is="tag"
+    v-else
+    ref="root"
+    class="bk-vars"
+    :class="['bk-draggable-list-container', attrs.class]"
+  >
+    <BlokkliItem
+      v-for="(item, i) in list"
+      :key="item.uuid + fieldListType"
+      class="bk-field-list-item"
+      :uuid="item.uuid"
+      :bundle="item.bundle"
+      :options="item.options"
+      :props="item.props"
+      is-editing
+      :index="i"
+      :parent-type="isNested ? entity.bundle : ''"
+      :data-bk-uuid="item.uuid"
+      :data-bk-is-muted="isMuted(item)"
+    />
+  </Component>
+</template>
+
+<script setup>
+import {
+  computed,
+  useBlokkli,
+  onMounted,
+  onBeforeUnmount,
+  useAttrs,
+  provide,
+  watch,
+  useTemplateRef
+} from "#imports";
+import BlokkliItem from "./../../components/BlokkliItem.vue?blokkliEditing=true";
+import { isVisibleByOptions } from "#blokkli/helpers/runtimeHelpers";
+import {
+  INJECT_FIELD_PROXY_MODE,
+  INJECT_IS_EDITING
+} from "#blokkli/helpers/injections";
+const { dom, selection } = useBlokkli();
+const root = useTemplateRef("root");
+const props = defineProps({
+  name: { type: String, required: true },
+  fieldKey: { type: String, required: true },
+  list: { type: Array, required: true },
+  entity: { type: Object, required: true },
+  language: { type: String, required: false, default: void 0 },
+  tag: { type: String, required: false, default: "div" },
+  isNested: { type: Boolean, required: true },
+  fieldListType: { type: null, required: true },
+  allowedFragments: { type: null, required: false, default: () => {
+    return [];
+  } },
+  dropAlignment: { type: String, required: false, default: void 0 },
+  zIndex: { type: [Number, String], required: false, default: 0 },
+  proxyMode: { type: Boolean, required: false },
+  globalProxyMode: { type: Boolean, required: false },
+  nestingLevel: { type: Number, required: true },
+  shouldRenderItem: { type: Function, required: false, default: void 0 }
+});
+const attrs = useAttrs();
+provide(INJECT_FIELD_PROXY_MODE, props.proxyMode);
+provide(INJECT_IS_EDITING, true);
+const proxyVisible = computed(
+  () => props.proxyMode && (selection.uuids.value.length || selection.isDragging.value || selection.isMultiSelecting.value || selection.hasHostSelected.value)
+);
+function isMuted(item) {
+  if (!item) {
+    return true;
+  }
+  if (!item.editContext?.isPublished) {
+    return true;
+  }
+  const isVisible = isVisibleByOptions(item, props.language);
+  const isVisibleCustom = props.shouldRenderItem ? props.shouldRenderItem(item) : true;
+  return !(isVisible && isVisibleCustom);
+}
+const data = computed(() => {
+  const allowedFragments = Array.isArray(props.allowedFragments) ? props.allowedFragments : [props.allowedFragments];
+  const zIndex = Number(props.zIndex);
+  return {
+    fieldListType: props.fieldListType,
+    allowedFragments,
+    isNested: props.isNested,
+    nestingLevel: props.nestingLevel,
+    dropAlignment: props.dropAlignment ?? null,
+    zIndex: Number.isNaN(zIndex) ? 0 : zIndex
+  };
+});
+watch(
+  () => root.value,
+  function(newRoot) {
+    if (newRoot instanceof HTMLElement) {
+      dom.updateFieldElement(props.entity, props.name, newRoot, data.value);
+    }
+  }
+);
+onMounted(() => {
+  if (root.value instanceof HTMLElement) {
+    dom.registerField(props.entity, props.name, root.value, data.value);
+  }
+});
+onBeforeUnmount(() => {
+  dom.unregisterField(props.entity, props.name);
+});
+defineOptions({
+  inheritAttrs: false
+});
+if (import.meta.hot) {
+  import.meta.hot.accept("#blokkli/helpers/runtimeHelpers", () => {
+  });
+}
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-vars.bk-draggable-list-container .bk-list-item {
+  border-radius: 0 !important;
+  background-color: white;
+  padding: 20px;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk-vars.bk-draggable-list-container .bk-list-item):after {
+  display: none;
+}
+.bk-vars.bk-draggable-list-container .bk-list-item-inner {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  gap: 20px;
+}
+.bk-vars.bk-draggable-list-container .bk-list-item-icon {
+  width: 32px;
+  height: 32px;
+}
+.bk.bk-field-list-proxy {
+  position: absolute;
+  z-index: calc(var(--bk-z-index-base) + 350000) /* "dialog" */;
+  min-height: 40px;
+  padding: 20px;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  transition-property: opacity;
+  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-duration: 100ms;
+  transition-duration: 100ms;
+  pointer-events: none;
+  opacity: 0%;
+}
+html.bk-is-proxy-mode .bk.bk-field-list-proxy {
+  pointer-events: auto;
+  position: static;
+  opacity: 100%;
+  margin-inline: 10px;
+  width: auto;
+  max-width: 100%;
+  min-width: 0px;
+}
+:is(html.bk-is-proxy-mode .bk.bk-field-list-proxy) .bk-block-proxy {
+  min-width: 200px;
+}
+.bk.bk-field-list-proxy.bk-is-visible {
+  pointer-events: auto;
+  opacity: 100%;
+}
+.bk.bk-field-list-proxy.bk-is-horizontal  > .bk-field-list-proxy-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+.bk-is-compact:is(.bk.bk-field-list-proxy.bk-is-horizontal > .bk-field-list-proxy-list) {
+  gap: 5px !important;
+}
+.bk-is-compact:is(.bk.bk-field-list-proxy.bk-is-horizontal > .bk-field-list-proxy-list) .bk-blokkli-item-icon {
+  display: none;
+}
+.bk-is-compact:is(.bk.bk-field-list-proxy.bk-is-horizontal > .bk-field-list-proxy-list) .bk-block-proxy {
+  padding: 5px;
+}
+:is(.bk-is-compact:is(.bk.bk-field-list-proxy.bk-is-horizontal > .bk-field-list-proxy-list) .bk-block-proxy) .bk-block-proxy-component {
+  margin-top: 2px;
+}
+.bk.bk-field-list-proxy.bk-is-vertical  > .bk-field-list-proxy-list {
+  display: grid;
+  gap: 15px;
+}
+.bk.bk-field-list-proxy .bk-field-list-proxy {
+  position: relative;
+  z-index: auto;
+  margin-inline: 0px !important;
+  height: auto;
+  width: auto;
+  background-image: none;
+  padding: 0px;
+}
+:is(.bk.bk-field-list-proxy .bk-field-list-proxy) .bk-block-proxy {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+</style>

package/dist/runtime/editor/components/DraggableList.vue.d.ts

@@ -0,0 +1,31 @@
+import type { FieldListItem, EntityContext } from '#blokkli/types';
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
+import type { FieldListItemTyped, ValidFieldListTypes } from '#blokkli-build/generated-types';
+import type { FieldDropAlignment } from '#blokkli/types/field';
+type __VLS_Props = {
+    name: string;
+    fieldKey: string;
+    list: FieldListItem[];
+    entity: EntityContext;
+    language?: string;
+    tag?: string;
+    isNested: boolean;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments?: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment?: FieldDropAlignment;
+    zIndex?: number | string;
+    proxyMode?: boolean;
+    globalProxyMode?: boolean;
+    nestingLevel: number;
+    shouldRenderItem?: (item: FieldListItem | FieldListItemTyped) => boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+    allowedFragments: BlokkliFragmentName[] | BlokkliFragmentName;
+    dropAlignment: FieldDropAlignment;
+    zIndex: number | string;
+    language: string;
+    shouldRenderItem: (item: FieldListItem | FieldListItemTyped) => boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Dropdown/index.d.vue.ts

@@ -0,0 +1,29 @@
+type DropdownPosition = 'bottom-left' | 'top-left' | 'top-right';
+type __VLS_Props = {
+    position?: DropdownPosition;
+    disabled?: boolean;
+    buttonClass?: string;
+};
+declare function close(): void;
+declare var __VLS_1: {}, __VLS_15: {
+    close: typeof close;
+};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    close: typeof close;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    position: DropdownPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,214 @@
+<template>
+  <div ref="container" class="bk-dropdown-menu _bk_relative">
+    <button
+      class="bk-dropdown-menu-trigger"
+      :disabled="disabled"
+      :class="buttonClass"
+      @click="showMenu = !showMenu"
+    >
+      <slot name="button" />
+    </button>
+    <Teleport :to="teleport ?? 'body'" :disabled="!teleport">
+      <BlokkliTransition name="drop-up">
+        <div
+          v-if="showMenu"
+          ref="contentEl"
+          class="bk-dropdown-menu-content _bk_rounded"
+          :class="[originClass, !teleport ? positionClass : null]"
+          :style="teleport ? floatingStyle : void 0"
+          @keydown="onContentKeydown"
+        >
+          <slot :close="close" />
+        </div>
+      </BlokkliTransition>
+    </Teleport>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref,
+  computed,
+  watch,
+  nextTick,
+  onMounted,
+  onBeforeUnmount,
+  useTemplateRef,
+  inject
+} from "#imports";
+import { BlokkliTransition } from "#blokkli/editor/components";
+import { onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  offset,
+  shift
+} from "@floating-ui/dom";
+import { INJECT_POPUP_HOST } from "#blokkli/editor/helpers/injections";
+const props = defineProps({
+  position: { type: String, required: false, default: "bottom-left" },
+  disabled: { type: Boolean, required: false, default: false },
+  buttonClass: { type: String, required: false }
+});
+const popupHostRef = inject(INJECT_POPUP_HOST, null);
+const teleport = computed(() => popupHostRef?.value ?? null);
+const container = useTemplateRef("container");
+const contentEl = useTemplateRef("contentEl");
+const showMenu = ref(false);
+const positionClass = computed(() => `bk-is-${props.position}`);
+const originClass = computed(() => `bk-origin-${props.position}`);
+const PLACEMENT_MAP = {
+  "bottom-left": "top-start",
+  "top-left": "bottom-start",
+  "top-right": "bottom-end"
+};
+const floatingX = ref(0);
+const floatingY = ref(0);
+const floatingStyle = computed(() => ({
+  position: "fixed",
+  top: `${floatingY.value}px`,
+  left: `${floatingX.value}px`
+}));
+let stopAutoUpdate = null;
+function getTriggerEl() {
+  return container.value?.querySelector(".bk-dropdown-menu-trigger") ?? null;
+}
+async function updateFloatingPosition() {
+  const triggerEl = getTriggerEl();
+  const floatingEl = contentEl.value;
+  if (!triggerEl || !floatingEl) return;
+  const { x, y } = await computePosition(triggerEl, floatingEl, {
+    placement: PLACEMENT_MAP[props.position],
+    strategy: "fixed",
+    middleware: [offset(5), flip(), shift({ padding: 8 })]
+  });
+  floatingX.value = x;
+  floatingY.value = y;
+}
+function stopFloating() {
+  if (stopAutoUpdate) {
+    stopAutoUpdate();
+    stopAutoUpdate = null;
+  }
+}
+function getFocusableItems() {
+  if (!contentEl.value) return [];
+  return Array.from(
+    contentEl.value.querySelectorAll("button, input, [tabindex]")
+  );
+}
+function focusTrigger() {
+  getTriggerEl()?.focus();
+}
+function close() {
+  if (!showMenu.value) return;
+  showMenu.value = false;
+  focusTrigger();
+}
+watch(showMenu, (open) => {
+  if (open) {
+    nextTick(() => {
+      if (teleport.value) {
+        const triggerEl = getTriggerEl();
+        const floatingEl = contentEl.value;
+        if (triggerEl && floatingEl) {
+          stopAutoUpdate = autoUpdate(
+            triggerEl,
+            floatingEl,
+            updateFloatingPosition
+          );
+        }
+      }
+      const items = getFocusableItems();
+      items[0]?.focus();
+    });
+  } else {
+    stopFloating();
+  }
+});
+function onContentKeydown(e) {
+  const { key } = e;
+  if (key === "Escape") {
+    e.preventDefault();
+    e.stopPropagation();
+    close();
+    return;
+  }
+  if (key === "ArrowDown" || key === "ArrowUp") {
+    e.preventDefault();
+    e.stopPropagation();
+    const items = getFocusableItems();
+    if (!items.length) return;
+    const current = items.indexOf(document.activeElement);
+    let next;
+    if (key === "ArrowDown") {
+      next = current < items.length - 1 ? current + 1 : 0;
+    } else {
+      next = current > 0 ? current - 1 : items.length - 1;
+    }
+    items[next]?.focus();
+    return;
+  }
+  e.stopPropagation();
+}
+function onDocumentClick(e) {
+  const target = e.target;
+  if (container.value?.contains(target)) return;
+  if (contentEl.value?.contains(target)) return;
+  close();
+}
+onBlokkliEvent("mouse:up", close);
+onMounted(() => {
+  document.addEventListener("click", onDocumentClick);
+});
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onDocumentClick);
+  stopFloating();
+});
+defineExpose({ close });
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-dropdown-menu-trigger {
+  appearance: none;
+}
+.bk .bk-dropdown-menu-content {
+  position: absolute;
+  z-index: 50;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: white;
+  --bk-tw-shadow: 0 10px 15px -3px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+  pointer-events: auto;
+}
+:is(.bk .bk-dropdown-menu-content) hr {
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk-is-bottom-left:is(.bk .bk-dropdown-menu-content) {
+  bottom: 100%;
+  left: 0px;
+  margin-bottom: 5px;
+}
+.bk-is-top-left:is(.bk .bk-dropdown-menu-content) {
+  top: 100%;
+  left: 0px;
+  margin-top: 5px;
+}
+.bk-is-top-right:is(.bk .bk-dropdown-menu-content) {
+  top: 100%;
+  right: 0px;
+  margin-top: 5px;
+}
+.bk-origin-bottom-left:is(.bk .bk-dropdown-menu-content) {
+  transform-origin: 0 100%;
+}
+.bk-origin-top-left:is(.bk .bk-dropdown-menu-content) {
+  transform-origin: 0 0;
+}
+.bk-origin-top-right:is(.bk .bk-dropdown-menu-content) {
+  transform-origin: 100% 0;
+}
+</style>

package/dist/runtime/editor/components/Dropdown/index.vue.d.ts

@@ -0,0 +1,29 @@
+type DropdownPosition = 'bottom-left' | 'top-left' | 'top-right';
+type __VLS_Props = {
+    position?: DropdownPosition;
+    disabled?: boolean;
+    buttonClass?: string;
+};
+declare function close(): void;
+declare var __VLS_1: {}, __VLS_15: {
+    close: typeof close;
+};
+type __VLS_Slots = {} & {
+    button?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_15) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    close: typeof close;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    disabled: boolean;
+    position: DropdownPosition;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/DropdownItem/index.d.vue.ts

@@ -0,0 +1,23 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon?: BlokkliIcon;
+    text: string;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,60 @@
+<template>
+  <button class="bk-dropdown-menu-item" :disabled @click="$emit('click')">
+    <slot>
+      <Icon v-if="icon" :name="icon" />
+    </slot>
+    <span>{{ text }}</span>
+  </button>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  icon: { type: null, required: false },
+  text: { type: String, required: true },
+  disabled: { type: Boolean, required: false }
+});
+defineEmits(["click"]);
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-dropdown-menu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+  padding-inline: 10px;
+  padding-block: 10px;
+  text-align: left;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-theme-mono-700) / 1);
+  cursor: pointer;
+  --bk-tw-border-style: none;
+  border-style: none;
+  background-color: transparent;
+}
+@media (hover: hover) {
+  :is(.bk .bk-dropdown-menu-item):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
+}
+@media (hover: hover) {
+  :is(.bk .bk-dropdown-menu-item):hover {
+    color: rgb(var(--bk-theme-mono-950) / 1);
+  }
+}
+.bk .bk-dropdown-menu-item {
+  --bk-tw-leading: 1;
+  line-height: 1;
+  white-space: nowrap;
+}
+:is(.bk .bk-dropdown-menu-item):hover svg {
+  fill: rgb(var(--bk-theme-accent-700) / 1);
+}
+:is(.bk .bk-dropdown-menu-item) svg {
+  width: 18px;
+  height: 18px;
+  fill: currentcolor;
+}
+</style>

package/dist/runtime/editor/components/DropdownItem/index.vue.d.ts

@@ -0,0 +1,23 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    icon?: BlokkliIcon;
+    text: string;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};