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

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

@@ -1,13 +1,23 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
-    icon: BlokkliIcon;
+    icon?: BlokkliIcon;
     text: string;
     disabled?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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

@@ -1,6 +1,8 @@
 <template>
   <button class="bk-dropdown-menu-item" :disabled @click="$emit('click')">
-    <Icon :name="icon" />
+    <slot>
+      <Icon v-if="icon" :name="icon" />
+    </slot>
     <span>{{ text }}</span>
   </button>
 </template>
@@ -8,9 +10,51 @@
 <script setup>
 import { Icon } from "#blokkli/editor/components";
 defineProps({
-  icon: { type: null, required: true },
+  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

@@ -1,13 +1,23 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 type __VLS_Props = {
-    icon: BlokkliIcon;
+    icon?: BlokkliIcon;
     text: string;
     disabled?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+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/FlexTextarea/index.d.vue.ts

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    minHeight: number;
     maxHeight: number;
+    minHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    minHeight: number;
     maxHeight: number;
+    minHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/Form/Datepicker/index.vue

@@ -37,7 +37,6 @@
         :key="day.key"
         type="button"
         class="_bk_flex _bk_items-center _bk_justify-center _bk_py-3 _bk_disabled:cursor-not-allowed _bk_group"
-        :data-test="'datepicker-day-' + day.dateString"
         :disabled="disabled || day.isDisabled"
         @click="selectDate(day)"
       >

package/dist/runtime/editor/components/Form/TextDark/index.vue

@@ -11,7 +11,6 @@
       ref="inputEl"
       v-model="value"
       type="text"
-      data-test="text-input"
       class="_bk_h-60 _bk_appearance-none _bk_w-full _bk_bg-transparent _bk_!outline-none _bk_!ring-0 _bk_pl-50 _bk_!border-none _bk_text-lg _bk_font-bold _bk_placeholder:font-normal _bk_placeholder:text-mono-500 _bk_text-mono-100 _bk_group-focus-within:outline! _bk_group-focus-within:outline-white _bk_-outline-offset-2"
       :placeholder
       :class="{

package/dist/runtime/editor/components/Form/Textarea/index.vue

@@ -6,7 +6,6 @@
     <textarea
       :id
       :value
-      data-test="textarea"
       class="bk-form-input"
       :placeholder
       :required

package/dist/runtime/editor/components/Form/Toggle/index.d.vue.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     disabledReason?: string | null;
     colorScheme?: 'light' | 'dark';
     stretch?: boolean;
+    hideInput?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

package/dist/runtime/editor/components/Form/Toggle/index.vue

@@ -7,7 +7,13 @@
 }"
   >
     <slot />
-    <input v-model="value" type="checkbox" class="_bk_sr-only" :disabled />
+    <input
+      v-if="!hideInput"
+      v-model="value"
+      type="checkbox"
+      class="_bk_sr-only"
+      :disabled
+    />
     <div
       class="bk-checkbox-toggle-toggle _bk_group-focus-within/toggle:outline _bk_outline-accent-950/80 _bk_outline-offset-2 _bk_relative _bk_w-[36px] _bk_h-20 _bk_rounded-full _bk_shrink-0 _bk_mr-5 _bk_last:mr-0"
       :class="{
@@ -73,7 +79,8 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   disabledReason: { type: [String, null], required: false, default: null },
   colorScheme: { type: String, required: false, default: "light" },
-  stretch: { type: Boolean, required: false, default: false }
+  stretch: { type: Boolean, required: false, default: false },
+  hideInput: { type: Boolean, required: false }
 });
 const isDark = computed(() => props.colorScheme === "dark");
 const value = defineModel({ type: Boolean });

package/dist/runtime/editor/components/Form/Toggle/index.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     disabledReason?: string | null;
     colorScheme?: 'light' | 'dark';
     stretch?: boolean;
+    hideInput?: boolean;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean;

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

@@ -1,7 +1,6 @@
 <template>
   <div
     class="bk-form-overlay bk-vars"
-    :data-test="'form-overlay-' + id"
     @click.stop
     @mousedown.stop
     @keyup.stop

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

@@ -3,14 +3,12 @@
     v-if="markup"
     class="bk-icon"
     :class="'bk-icon-' + name"
-    :data-test="'icon-' + name"
     v-html="markup"
   />
   <div
     v-else
     class="bk-icon"
     :class="'bk-icon-missing'"
-    :data-test="'icon-' + name"
   >
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
       <path

package/dist/runtime/editor/components/Messages/Item/index.vue

@@ -5,7 +5,10 @@
     @mouseenter="stopTimer"
     @mouseleave="startTimer"
   >
-    <button class="bk-message-content" @click="$emit('close')">
+    <button
+      class="bk-message-content"
+      @click="$emit('close')"
+    >
       <p>{{ message }}</p>
       <p v-if="additionalText" class="bk-message-additional">
         {{ additionalText }}

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

@@ -32,6 +32,9 @@ onBlokkliEvent("message", (message) => {
     messages.value.push(message);
   }
 });
+onBlokkliEvent("message:clear", () => {
+  messages.value = [];
+});
 </script>
 
 <script>

package/dist/runtime/editor/components/Panel/Sheet/index.vue

@@ -18,7 +18,7 @@
           <Icon name="bk_mdi_close" class="_bk_size-15" />
         </button>
       </div>
-      <div class="_bk_overflow-auto bk-scrollbar-light _bk_h-[500px]">
+      <div class="_bk_overflow-auto bk-scrollbar-light _bk_h-[500px] _bk_bg-white">
         <slot />
       </div>
     </div>

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

@@ -6,13 +6,11 @@
         :id="'popup-' + id"
         class="bk bk-popup"
         :class="['bk-is-' + position, 'bk-is-' + id]"
-        :data-test-popup="id"
       >
         <div class="bk-popup-title">
           <h2>{{ title }}</h2>
           <button
             class="_bk_p-20 _bk_hover:bg-mono-50 _bk_text-mono-500"
-            :data-test-popup-close="id"
             @click="onClose"
           >
             <Icon name="bk_mdi_close" class="_bk_size-20" />

package/dist/runtime/editor/components/RichText/Editor/index.d.vue.ts

@@ -25,7 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         isEmpty: boolean;
     }) => any) | undefined;
 }>, {
-    initialValue: string;
     autofocus: boolean;
+    initialValue: string;
     getUsers: () => Promise<MentionItem[]>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/index.vue.d.ts

@@ -25,7 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         isEmpty: boolean;
     }) => any) | undefined;
 }>, {
-    initialValue: string;
     autofocus: boolean;
+    initialValue: string;
     getUsers: () => Promise<MentionItem[]>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="_bk_flex-1 _bk_flex _bk_gap-20" data-test="schedule-date">
+  <div class="_bk_flex-1 _bk_flex _bk_gap-20">
     <div class="_bk_w-[300px] _bk_shrink-0">
       <FormDatepicker
         v-model="selectedDate"
@@ -20,7 +20,6 @@
           id="schedule-time"
           v-model="selectedTime"
           type="time"
-          data-test="schedule-time"
           class="bk-form-input _bk_flex-1 _bk_w-full _bk_tabular-nums"
           :disabled="disabled"
           :class="{
@@ -51,7 +50,6 @@
         class="_bk_mt-20"
         color="red"
         small
-        data-test="schedule-error"
       />
       <slot />
     </div>

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

@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     placeholder: string;
-    visibleItems: number;
     itemHeight: number;
+    visibleItems: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     placeholder: string;
-    visibleItems: number;
     itemHeight: number;
+    visibleItems: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/Button/index.d.vue.ts

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

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/Button/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <button
+    ref="buttonEl"
+    class="_bk_flex _bk_gap-8 _bk_whitespace-nowrap _bk_w-full _bk_px-10 _bk_text-mono-800 _bk_items-center _bk_hover:bg-mono-100 _bk_min-h-50 _bk_group/tooltip _bk_relative _bk_border-b _bk_border-b-mono-200 _bk_last:border-b-0 _bk_group/toggle"
+    :class="{ 'bk-is-inactive': !isActive }"
+    @click.prevent.stop="toggle"
+  >
+    <Icon v-if="icon" :name="icon" class="_bk_size-20" />
+    <div class="_bk_font-medium _bk_text-base">
+      {{ label }}
+    </div>
+    <div class="_bk_ml-auto">
+      <FormToggle :model-value="isActive" />
+    </div>
+    <Tooltip :label="description" placement="center-before">
+      <template v-if="keyCode" #shortcut>
+        <ShortcutIndicator meta :key-code :label group="ui" @pressed="toggle" />
+      </template>
+    </Tooltip>
+  </button>
+</template>
+
+<script setup>
+import { useBlokkli, useTemplateRef, watch } from "#imports";
+import {
+  Icon,
+  ShortcutIndicator,
+  Tooltip,
+  FormToggle
+} from "#blokkli/editor/components";
+import { defineCommands, defineTourItem } from "#blokkli/editor/composables";
+const props = defineProps({
+  id: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: true },
+  icon: { type: null, required: true },
+  keyCode: { type: String, required: false },
+  tourText: { type: String, required: false },
+  weight: { type: Number, required: false }
+});
+const { storage, eventBus, $t } = useBlokkli();
+const buttonEl = useTemplateRef("buttonEl");
+const isActive = storage.use("view_option_" + props.id, false, true);
+function toggle() {
+  isActive.value = !isActive.value;
+}
+watch(isActive, () => {
+  eventBus.emit("view-option:toggle", { id: props.id });
+});
+defineCommands(() => ({
+  id: "plugin:view_option:" + props.id,
+  label: (isActive.value ? $t("viewOptionDisable", 'Disable "@option"') : $t("viewOptionEnable", 'Enable "@option"')).replace("@option", props.label),
+  icon: props.icon,
+  group: "ui",
+  callback: toggle
+}));
+defineTourItem(() => {
+  if (!props.tourText) {
+    return;
+  }
+  return {
+    id: "plugin:view_option:" + props.id,
+    title: props.label,
+    text: props.tourText,
+    element: () => buttonEl.value
+  };
+});
+</script>
+
+<script>
+export default {
+  name: "ToolbarViewOptionsButton"
+};
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/Button/index.vue.d.ts

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

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { ViewOption } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    options: ViewOption[];
+};
+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/Toolbar/ViewOptions/List/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <ViewOptionButton
+      v-for="option in options"
+      :key="option.id"
+      v-bind="option"
+    />
+  </div>
+</template>
+
+<script setup>
+import ViewOptionButton from "./Button/index.vue";
+defineProps({
+  options: { type: Array, required: true }
+});
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/List/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { ViewOption } from '#blokkli/editor/providers/plugin';
+type __VLS_Props = {
+    options: ViewOption[];
+};
+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/Toolbar/ViewOptions/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/Toolbar/ViewOptions/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    id="bk-toolbar-view-options"
+    class="_bk_relative _bk_group _bk_border-l _bk_border-l-mono-600"
+  >
+    <button
+      ref="toggleElement"
+      class="bk-toolbar-button bk-has-dropdown-bottom _bk_group/tooltip"
+      :class="{
+  'bk-is-active': isVisible
+}"
+      @click.prevent="isVisible = !isVisible"
+    >
+      <Icon name="bk_mdi_eye_tracking" />
+      <Tooltip
+        :label="$t('viewOptions', 'View options')"
+        placement="below-right"
+      />
+    </button>
+    <BlokkliTransition name="context-menu">
+      <ToolbarDropdown
+        v-if="isVisible"
+        :toggle-element
+        :title="$t('viewOptions', 'View options')"
+        class="_bk_origin-top-right"
+        @close="isVisible = false"
+      >
+        <ViewOptionsList :options />
+      </ToolbarDropdown>
+    </BlokkliTransition>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli, useTemplateRef } from "#imports";
+import ViewOptionsList from "./List/index.vue";
+import {
+  Icon,
+  ToolbarDropdown,
+  Tooltip,
+  BlokkliTransition
+} from "#blokkli/editor/components";
+const { plugins, $t } = useBlokkli();
+const isVisible = ref(false);
+const toggleElement = useTemplateRef("toggleElement");
+const options = computed(
+  () => [...plugins.get("viewOption")].sort(
+    (a, b) => (a.weight ?? 0) - (b.weight ?? 0)
+  )
+);
+</script>
+
+<script>
+export default {
+  name: "ToolbarViewOptions"
+};
+</script>

package/dist/runtime/editor/components/Toolbar/ViewOptions/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/Toolbar/index.vue

@@ -53,7 +53,6 @@
       <div class="bk bk-toolbar-menu">
         <button
           class="bk-toolbar-menu-button"
-          data-test="app-menu-toggle"
           @click.prevent.stop="openMenu"
         >
           <Icon name="bk_mdi_menu" />
@@ -69,8 +68,8 @@
       <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
       <div id="bk-toolbar-title" class="bk-toolbar-container" />
       <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
-      <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
-      <div id="bk-toolbar-artboard" class="bk-toolbar-container" />
+      <ViewOptions />
+      <div id="bk-toolbar-artboard" class="bk-toolbar-container _bk_group" />
       <div
         id="bk-toolbar-before-sidebar"
         class="bk-sidebar-container-tabs bk-toolbar-container"
@@ -113,6 +112,7 @@ import {
   useTemplateRef
 } from "#imports";
 import AppMenu from "./../AppMenu/index.vue";
+import ViewOptions from "./ViewOptions/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const { ui, selection, storage } = useBlokkli();
 const isApproving = computed(() => ui.isApproving.value);
@@ -285,14 +285,6 @@ export default {
   display: flex;
   height: 100%;
 }
-#bk-toolbar-view-options:is(.bk .bk-toolbar-container) {
-  display: none;
-}
-@media (width >= 64rem) {
-  #bk-toolbar-view-options:is(.bk .bk-toolbar-container) {
-    display: flex;
-  }
-}
 #bk-toolbar-title:is(.bk .bk-toolbar-container) {
   flex: 1;
   font-size: var(--text-xs, 12px);
@@ -369,49 +361,4 @@ export default {
 :is(:is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled) .bk-icon) svg {
   fill: currentcolor;
 }
-.bk .bk-toolbar-button {
-  display: flex;
-  height: 40px;
-  min-width: 50px;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding-inline: 10px;
-  color: rgb(var(--bk-theme-mono-200) / 1);
-}
-@media (width >= 64rem) {
-  .bk .bk-toolbar-button {
-    height: 50px;
-  }
-}
-@media (width >= 64rem) {
-  @media (hover: hover) {
-    :is(.bk .bk-toolbar-button):not(.bk-is-active):hover {
-      background-color: rgb(var(--bk-theme-mono-700) / 1);
-    }
-  }
-}
-.bk-is-active:is(.bk .bk-toolbar-button) {
-  background-color: rgb(var(--bk-theme-mono-800) / 1);
-}
-.bk-is-inactive:is(.bk .bk-toolbar-button) {
-  color: rgb(var(--bk-theme-mono-600) / 1);
-}
-[disabled]:is(.bk .bk-toolbar-button) {
-  pointer-events: none;
-  color: rgb(var(--bk-theme-mono-700) / 1);
-}
-:is(.bk .bk-toolbar-button) svg {
-  width: 18px;
-  height: 18px;
-}
-@media (width >= 64rem) {
-  :is(.bk .bk-toolbar-button) svg {
-    width: 20px;
-    height: 20px;
-  }
-}
-:is(.bk .bk-toolbar-button) .bk-icon svg {
-  fill: currentcolor;
-}
 </style>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title: string;
+    toggleElement: HTMLElement | null;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => 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;
+    };
+};