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

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

@@ -2,8 +2,6 @@
   <button
     :id="'bk-menu-list-button-' + id"
     class="_bk_w-full _bk_text-left _bk_whitespace-nowrap _bk_text-mono-950 _bk_group"
-    :data-test="'app-menu-button-' + id"
-    :data-test-type="type"
     :disabled
     :class="[
   {
@@ -26,7 +24,7 @@
 }"
     >
       <div
-        class="_bk_flex _bk_items-center _bk_justify-center _bk_border _bk_bg-scheme-light _bk_text-scheme-normal _bk_border-scheme-normal/50 _bk_group-hover:border-scheme-normal _bk_group-hover:text-scheme-dark _bk_rounded"
+        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

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

@@ -16,7 +16,10 @@
       <div class="bk-artboard-tooltip-header">
         <div class="_bk_mr-auto" v-html="title" />
         <slot name="header" />
-        <button :disabled="closeDisabled" @click="$emit('close')">
+        <button
+          :disabled="closeDisabled"
+          @click="$emit('close')"
+        >
           <Icon :name="closeIcon" />
           <span v-if="buttonLabel">{{ buttonLabel }}</span>
         </button>

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

@@ -2,7 +2,6 @@
   <div
     v-if="deleted"
     class="bk-avatar-deleted _bk_shrink-0 _bk_rounded _bk_flex _bk_items-center _bk_justify-center _bk_size-(--bk-avatar-size) _bk_border _bk_border-mono-300 _bk_bg-mono-100 _bk_text-mono-400 _bk_relative"
-    data-test="avatar-deleted"
     :title="name"
   >
     <Icon name="ghost" />

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

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    backgroundClass: string;
     maxHeight: number;
+    backgroundClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    backgroundClass: string;
     maxHeight: number;
+    backgroundClass: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -5,7 +5,6 @@
     :anchor-el
     :anchor-coordinates
     class="bk-bundle-selector"
-    data-test="bundle-selector"
     @close="$emit('close')"
   >
     <div
@@ -38,19 +37,16 @@
       >
         <ItemGroup
           :items="filteredBlocks"
-          data-test="bundle-selector-blocks"
           @select="onClick"
         />
         <ItemGroup
           :label="$t('actions', 'Actions')"
           :items="filteredActions"
-          data-test="bundle-selector-actions"
           @select="onClick"
         />
         <ItemGroup
           :label="$t('bundleSelectorFragmentsLabel', 'Fragments')"
           :items="filteredFragments"
-          data-test="bundle-selector-fragments"
           @select="onClick"
         />
       </div>

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

@@ -41,9 +41,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     zIndex: "default" | "high";
     icon: BlokkliIcon;
     width: number | string;
-    canSubmit: boolean;
-    submitLabel: string;
     lead: string;
+    submitLabel: string;
+    canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     tabs?: (props: {}) => any;
 } & {

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

@@ -2,7 +2,6 @@
   <div
     ref="rootEl"
     class="bk bk-dialog bk-control"
-    :data-test="'dialog-' + id"
     :class="zIndex === 'high' ? '_bk_z-dialog-high' : '_bk_z-dialog'"
     @wheel.passive.stop
     @keydown.stop="handleKeyDown"
@@ -15,7 +14,7 @@
       <div class="bk bk-overlay-header">
         <Icon v-if="icon" :name="icon" />
         <h3>{{ title }}</h3>
-        <button data-test="dialog-cancel" @click="$emit('cancel')">
+        <button @click="$emit('cancel')">
           <Icon name="bk_mdi_close" />
         </button>
       </div>
@@ -52,7 +51,6 @@
         <slot name="footer">
           <button
             class="bk-button"
-            data-test="dialog-submit"
             :disabled="!canSubmit"
             :class="[
   { 'bk-is-loading': isLoading },

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

@@ -41,9 +41,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     zIndex: "default" | "high";
     icon: BlokkliIcon;
     width: number | string;
-    canSubmit: boolean;
-    submitLabel: string;
     lead: string;
+    submitLabel: string;
+    canSubmit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     tabs?: (props: {}) => any;
 } & {

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.d.vue.ts

@@ -11,9 +11,17 @@ type __VLS_Props = {
      */
     insertionsOnly?: boolean;
 };
+/**
+ * Restore the original Vue-managed nodes immediately, in preparation for the
+ * consumer's mutation. After this runs, Vue's reactive patch can write the
+ * new value into the live tracked nodes — and the post-mutation
+ * `onBeforeUnmount` restore is skipped so it doesn't clobber that value.
+ */
+declare function commitForApply(): void;
 declare function updateRect(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     updateRect: typeof updateRect;
+    commitForApply: typeof commitForApply;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => void;
     activate: () => void;

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.vue

@@ -83,7 +83,18 @@ watch(
   () => props.selected,
   () => applyOverride()
 );
-onBeforeUnmount(() => override.restore());
+let committed = false;
+function commitForApply() {
+  override.restore();
+  committed = true;
+}
+onBeforeUnmount(() => {
+  if (committed) {
+    return;
+  }
+  override.restore();
+});
+defineExpose({ updateRect, commitForApply });
 const rect = ref({ width: "0", height: "0", transform: "" });
 function updateRect() {
   const el = override.element;
@@ -111,5 +122,4 @@ onBlokkliEvent("animationFrame", (ctx) => {
   lastFullUpdate = ctx.time;
   updateRect();
 });
-defineExpose({ updateRect });
 </script>

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.vue.d.ts

@@ -11,9 +11,17 @@ type __VLS_Props = {
      */
     insertionsOnly?: boolean;
 };
+/**
+ * Restore the original Vue-managed nodes immediately, in preparation for the
+ * consumer's mutation. After this runs, Vue's reactive patch can write the
+ * new value into the live tracked nodes — and the post-mutation
+ * `onBeforeUnmount` restore is skipped so it doesn't clobber that value.
+ */
+declare function commitForApply(): void;
 declare function updateRect(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
     updateRect: typeof updateRect;
+    commitForApply: typeof commitForApply;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: () => void;
     activate: () => void;

package/dist/runtime/editor/components/DiffApproval/Highlight/index.d.vue.ts

@@ -5,12 +5,20 @@ type __VLS_Props = {
     insertionsOnly?: boolean;
 };
 declare function updateRects(): void;
+/**
+ * Reset each accepted item's editable to its original Vue-tracked DOM, then
+ * mark them committed so the post-mutation unmount-restore is a no-op. Called
+ * by DiffApproval BEFORE emitting `apply`, so the consumer's mutation patches
+ * onto the freshly-restored nodes instead of the throwaway diff markup.
+ */
+declare function commitSelected(): void;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     updateRects: typeof updateRects;
+    commitSelected: typeof commitSelected;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 } & {

package/dist/runtime/editor/components/DiffApproval/Highlight/index.vue

@@ -24,7 +24,7 @@
 <script setup>
 import { computed, useTemplateRef, useBlokkli } from "#imports";
 import Item from "./Item.vue";
-defineProps({
+const props = defineProps({
   items: { type: Array, required: true },
   selected: { type: Object, required: true },
   insertionsOnly: { type: Boolean, required: false }
@@ -51,5 +51,17 @@ function updateRects() {
     }
   }
 }
-defineExpose({ updateRects });
+function commitSelected() {
+  if (!itemRefs.value) {
+    return;
+  }
+  for (let i = 0; i < itemRefs.value.length; i++) {
+    const ref = itemRefs.value[i];
+    const item = props.items[i];
+    if (ref && item && props.selected[item.id]) {
+      ref.commitForApply();
+    }
+  }
+}
+defineExpose({ updateRects, commitSelected });
 </script>

package/dist/runtime/editor/components/DiffApproval/Highlight/index.vue.d.ts

@@ -5,12 +5,20 @@ type __VLS_Props = {
     insertionsOnly?: boolean;
 };
 declare function updateRects(): void;
+/**
+ * Reset each accepted item's editable to its original Vue-tracked DOM, then
+ * mark them committed so the post-mutation unmount-restore is a no-op. Called
+ * by DiffApproval BEFORE emitting `apply`, so the consumer's mutation patches
+ * onto the freshly-restored nodes instead of the throwaway diff markup.
+ */
+declare function commitSelected(): void;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     updateRects: typeof updateRects;
+    commitSelected: typeof commitSelected;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;
 } & {

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

@@ -24,10 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    onPrev?: (() => any) | undefined;
-    onNext?: (() => any) | undefined;
     "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
     "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.vue

@@ -17,7 +17,6 @@
         }}</span>
         <button
           class="_bk_hover:bg-mono-800 _bk_h-40 _bk_px-8 _bk_flex _bk_items-center _bk_gap-5 _bk_font-semibold"
-          data-test="diff-approval-cancel"
           @click="$emit('cancel')"
         >
           <span>{{ $t("cancel", "Cancel") }}</span>
@@ -119,7 +118,6 @@
 
         <button
           class="bk-button bk-scheme-lime _bk_rounded-l-none! _bk_rounded-tr-none!"
-          data-test="diff-approval-apply"
           @click="$emit('apply')"
         >
           <span>{{ applyLabel }}</span>

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

@@ -24,10 +24,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    onPrev?: (() => any) | undefined;
-    onNext?: (() => any) | undefined;
     "onUpdate:selected"?: ((id: number, value: boolean) => any) | undefined;
     "onUpdate:reasons"?: ((id: number, value: string) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -103,6 +103,7 @@ function onUpdateReasons(id, value) {
   reasons[id] = value;
 }
 function onApply() {
+  highlight.value?.commitSelected();
   emit("apply", {
     selected: { ...selected },
     reasons: { ...reasons }

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;