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

package/dist/runtime/editor/features/comments/Sidebar/index.vue

@@ -9,7 +9,6 @@
       <FormToggle
         v-model="showResolved"
         :label="$t('commentsShowResolved', 'Show resolved')"
-        data-test="comments-show-resolved"
       />
     </div>
 
@@ -22,6 +21,7 @@
         :key="root.uuid"
         :root="root"
         :replies="repliesByRoot.get(root.uuid) || []"
+        :highlight-uuid="highlightUuid"
         boxed
         @reply="$emit('reply', $event)"
         @edit="$emit('edit', $event)"
@@ -29,18 +29,22 @@
         @resolve="$emit('resolve', root.uuid)"
         @unresolve="$emit('unresolve', root.uuid)"
         @toggle-task="$emit('toggleTask', $event)"
+        @dismiss-highlight="$emit('dismissHighlight')"
       />
     </div>
     <div
       v-else
-      class="_bk_flex-1 _bk_flex _bk_items-center _bk_justify-center _bk_p-30 _bk_text-center _bk_text-sm _bk_text-mono-500"
+      class="_bk_flex-1 _bk_flex _bk_flex-col _bk_items-center _bk_justify-center _bk_p-30 _bk_text-center _bk_text-base _bk_text-mono-500"
     >
-      {{
-        roots.length ? $t(
+      <Icon name="bk_mdi_mark_chat_read" class="_bk_size-70 _bk_mb-20" />
+      <div class="_bk_text-balance">
+        {{
+          roots.length ? $t(
   "commentsAllResolved",
   'All comments are resolved. Toggle "Show resolved" to view them.'
 ) : $t("commentsEmpty", "No comments yet.")
-      }}
+        }}
+      </div>
     </div>
 
     <SidebarAddForm @submit="$emit('add', $event)" @start="onStartNewComment" />
@@ -49,15 +53,16 @@
 
 <script setup>
 import { computed, useBlokkli, useTemplateRef } from "#imports";
-import { FormToggle } from "#blokkli/editor/components";
+import { FormToggle, Icon } from "#blokkli/editor/components";
 import CommentThread from "../Thread/index.vue";
 import SidebarAddForm from "./AddForm/index.vue";
 const { $t } = useBlokkli();
 const props = defineProps({
   comments: { type: Array, required: true },
-  recentlyResolved: { type: Array, required: true }
+  recentlyResolved: { type: Array, required: true },
+  highlightUuid: { type: [String, null], required: false }
 });
-defineEmits(["reply", "edit", "toggleTask", "add", "delete", "resolve", "unresolve"]);
+defineEmits(["reply", "edit", "toggleTask", "add", "delete", "resolve", "unresolve", "dismissHighlight"]);
 const rootEl = useTemplateRef("rootEl");
 const showResolved = defineModel("showResolved", { type: Boolean, ...{
   default: false

package/dist/runtime/editor/features/comments/Sidebar/index.vue.d.ts

@@ -4,6 +4,13 @@ export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     comments: CommentItem[];
     recentlyResolved: string[];
+    /**
+     * UUID of the deep-link target comment (root or reply). Passed through
+     * to each `<Comment>` via the thread; the matching comment self-scrolls
+     * and shows a persistent highlight ring. Cleared by the parent on the
+     * `dismissHighlight` event.
+     */
+    highlightUuid?: string | null;
 } & {
     showResolved?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -23,10 +30,18 @@ declare const __VLS_export: import("vue").DefineComponent<{
     delete: (value: string) => void;
     resolve: (value: string) => void;
     unresolve: (value: string) => void;
+    dismissHighlight: () => void;
     "update:showResolved": (value: boolean) => void;
 }, string, import("vue").PublicProps, Readonly<{
     comments: CommentItem[];
     recentlyResolved: string[];
+    /**
+     * UUID of the deep-link target comment (root or reply). Passed through
+     * to each `<Comment>` via the thread; the matching comment self-scrolls
+     * and shows a persistent highlight ring. Cleared by the parent on the
+     * `dismissHighlight` event.
+     */
+    highlightUuid?: string | null;
 } & {
     showResolved?: boolean;
 }> & Readonly<{
@@ -42,6 +57,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         uuid: string;
         taskIndex: number;
     }) => any) | undefined;
+    onDismissHighlight?: (() => any) | undefined;
     onReply?: ((value: {
         parentUuid: string;
         body: string;

package/dist/runtime/editor/features/comments/Thread/ReplyForm/index.vue

@@ -4,7 +4,6 @@
       <button
         type="button"
         class="_bk_flex _bk_items-center _bk_text-xs _bk_font-medium _bk_gap-5 _bk_py-8 _bk_px-8 _bk_w-full _bk_hover:bg-mono-100 _bk_text-mono-500 _bk_border _bk_border-mono-200 _bk_rounded _bk_hover:border-mono-400 _bk_cursor-text!"
-        data-test="comment-reply-button"
         @click="open"
       >
         <Icon name="bk_mdi_reply" class="_bk_size-15" />

package/dist/runtime/editor/features/comments/Thread/index.d.vue.ts

@@ -5,6 +5,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     root: CommentItem;
     replies: CommentItem[];
     boxed?: boolean;
+    /**
+     * UUID of the deep-link target inside this thread (root or reply).
+     * The matching `<Comment>` renders with a persistent highlight ring
+     * and emits `dismissHighlight` on the first `pointerleave` after
+     * engagement, which the thread forwards up.
+     */
+    highlightUuid?: string | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     reply: (value: {
         parentUuid: string;
@@ -21,10 +28,18 @@ declare const __VLS_export: import("vue").DefineComponent<{
     delete: (uuid: string) => void;
     resolve: () => void;
     unresolve: () => void;
+    dismissHighlight: () => void;
 }, string, import("vue").PublicProps, Readonly<{
     root: CommentItem;
     replies: CommentItem[];
     boxed?: boolean;
+    /**
+     * UUID of the deep-link target inside this thread (root or reply).
+     * The matching `<Comment>` renders with a persistent highlight ring
+     * and emits `dismissHighlight` on the first `pointerleave` after
+     * engagement, which the thread forwards up.
+     */
+    highlightUuid?: string | null;
 }> & Readonly<{
     onDelete?: ((uuid: string) => any) | undefined;
     onEdit?: ((value: {
@@ -37,6 +52,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         uuid: string;
         taskIndex: number;
     }) => any) | undefined;
+    onDismissHighlight?: (() => any) | undefined;
     onReply?: ((value: {
         parentUuid: string;
         body: string;

package/dist/runtime/editor/features/comments/Thread/index.vue

@@ -1,9 +1,6 @@
 <template>
   <article
     class="bk-comment-thread _bk_relative _bk_font-sans"
-    data-test="comment-thread"
-    :data-test-uuid="root.uuid"
-    :data-test-resolved="root.resolved"
     :class="{
   '_bk_rounded _bk_border _bk_hover:border-mono-400': boxed,
   '_bk_bg-white': !boxed,
@@ -13,12 +10,13 @@
   >
     <div
       :class="{
-  '_bk_opacity-60 _bk_hover:opacity-100': root.resolved
+  '_bk_opacity-60 _bk_hover:opacity-100': root.resolved && !hasHighlightedComment
 }"
     >
       <Comment
         :comment="root"
         :is-reply="false"
+        :highlighted="root.uuid === highlightUuid"
         class="_bk_pb-10!"
         @select-blocks="onSelectBlocks"
         @edit="$emit('edit', { uuid: root.uuid, body: $event })"
@@ -28,6 +26,7 @@
         @toggle-task="
   $emit('toggleTask', { uuid: root.uuid, taskIndex: $event })
 "
+        @dismiss-highlight="$emit('dismissHighlight')"
       />
       <div
         v-if="replies.length"
@@ -41,12 +40,14 @@
           v-for="reply in replies"
           :key="reply.uuid"
           :comment="reply"
+          :highlighted="reply.uuid === highlightUuid"
           is-reply
           @edit="$emit('edit', { uuid: reply.uuid, body: $event })"
           @delete="$emit('delete', reply.uuid)"
           @toggle-task="
   $emit('toggleTask', { uuid: reply.uuid, taskIndex: $event })
 "
+          @dismiss-highlight="$emit('dismissHighlight')"
         />
         <div
           v-if="canReply"
@@ -70,10 +71,29 @@ const { adapter, eventBus } = useBlokkli();
 const props = defineProps({
   root: { type: Object, required: true },
   replies: { type: Array, required: true },
-  boxed: { type: Boolean, required: false }
+  boxed: { type: Boolean, required: false },
+  highlightUuid: { type: [String, null], required: false }
 });
-defineEmits(["reply", "edit", "toggleTask", "delete", "resolve", "unresolve"]);
+defineEmits(["reply", "edit", "toggleTask", "delete", "resolve", "unresolve", "dismissHighlight"]);
 const canReply = computed(() => !!adapter.replyToComment);
+const hasHighlightedComment = computed(() => {
+  if (!props.highlightUuid) {
+    return false;
+  }
+  if (props.root.uuid === props.highlightUuid) {
+    return true;
+  }
+  for (let i = 0; i < props.replies.length; i++) {
+    const reply = props.replies[i];
+    if (!reply) {
+      continue;
+    }
+    if (reply.uuid === props.highlightUuid) {
+      return true;
+    }
+  }
+  return false;
+});
 function onSelectBlocks() {
   if (props.root.blockUuids?.length) {
     const uuid = props.root.blockUuids[0];

package/dist/runtime/editor/features/comments/Thread/index.vue.d.ts

@@ -5,6 +5,13 @@ declare const __VLS_export: import("vue").DefineComponent<{
     root: CommentItem;
     replies: CommentItem[];
     boxed?: boolean;
+    /**
+     * UUID of the deep-link target inside this thread (root or reply).
+     * The matching `<Comment>` renders with a persistent highlight ring
+     * and emits `dismissHighlight` on the first `pointerleave` after
+     * engagement, which the thread forwards up.
+     */
+    highlightUuid?: string | null;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     reply: (value: {
         parentUuid: string;
@@ -21,10 +28,18 @@ declare const __VLS_export: import("vue").DefineComponent<{
     delete: (uuid: string) => void;
     resolve: () => void;
     unresolve: () => void;
+    dismissHighlight: () => void;
 }, string, import("vue").PublicProps, Readonly<{
     root: CommentItem;
     replies: CommentItem[];
     boxed?: boolean;
+    /**
+     * UUID of the deep-link target inside this thread (root or reply).
+     * The matching `<Comment>` renders with a persistent highlight ring
+     * and emits `dismissHighlight` on the first `pointerleave` after
+     * engagement, which the thread forwards up.
+     */
+    highlightUuid?: string | null;
 }> & Readonly<{
     onDelete?: ((uuid: string) => any) | undefined;
     onEdit?: ((value: {
@@ -37,6 +52,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         uuid: string;
         taskIndex: number;
     }) => any) | undefined;
+    onDismissHighlight?: (() => any) | undefined;
     onReply?: ((value: {
         parentUuid: string;
         body: string;

package/dist/runtime/editor/features/comments/index.vue

@@ -12,6 +12,7 @@
       v-model:show-resolved="showResolved"
       :comments
       :recently-resolved
+      :highlight-uuid="deepLinkUuid"
       @add="onAddComment($event, [])"
       @reply="onReply($event.parentUuid, $event.body)"
       @edit="onEditComment($event.uuid, $event.body)"
@@ -19,12 +20,12 @@
       @resolve="onResolveComment($event)"
       @unresolve="onUnresolveComment($event)"
       @toggle-task="onToggleTask($event.uuid, $event.taskIndex)"
+      @dismiss-highlight="deepLinkUuid = null"
     />
 
     <template v-if="unresolvedCount" #badge>
       <div
         class="bk-sidebar-badge bk-is-yellow"
-        data-test="comments-unresolved-badge"
       >
         {{ unresolvedCount }}
       </div>
@@ -80,7 +81,9 @@ import {
   defineBlokkliFeature,
   computed,
   useTemplateRef,
-  defineAsyncComponent
+  defineAsyncComponent,
+  onMounted,
+  useRoute
 } from "#imports";
 import { PluginSidebar, PluginItemAction } from "#blokkli/editor/plugins";
 import { BlokkliTransition } from "#blokkli/editor/components";
@@ -98,7 +101,8 @@ const { adapter } = defineBlokkliFeature({
   description: "Provides comment functionality for blocks.",
   screenshot: "feature-comments.jpg"
 });
-const { $t, selection, ui, storage } = useBlokkli();
+const { $t, selection, ui, storage, eventBus } = useBlokkli();
+const route = useRoute();
 const showResolved = storage.useWithContextPrefix("commentsShowResolved", false);
 const recentlyResolved = ref([]);
 const commentForm = useTemplateRef("commentForm");
@@ -113,6 +117,27 @@ comments.value = await adapter.loadComments();
 const unresolvedCount = computed(
   () => comments.value.filter((c) => !c.parentUuid && !c.resolved).length
 );
+const deepLinkUuid = ref(null);
+onMounted(() => {
+  const requested = route.query.blokkliComment;
+  if (typeof requested !== "string" || !requested) {
+    return;
+  }
+  const target = comments.value.find((c) => c.uuid === requested);
+  if (!target) {
+    return;
+  }
+  const rootUuid = target.parentUuid ?? target.uuid;
+  const root = comments.value.find((c) => c.uuid === rootUuid);
+  if (!root) {
+    return;
+  }
+  if (root.resolved) {
+    showResolved.value = true;
+  }
+  eventBus.emit("sidebar:open", "comments");
+  deepLinkUuid.value = target.uuid;
+});
 const onAddComment = async (body, providedUuids) => {
   if (!adapter.addComment) {
     return;

package/dist/runtime/editor/features/delete/types.d.ts

@@ -6,3 +6,4 @@ declare module '#blokkli/editor/adapter' {
         deleteBlocks?: (uuids: string[]) => Promise<MutationResponseLike<T>>;
     }
 }
+export {};

package/dist/runtime/editor/features/delete/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/dev-mode/index.vue

@@ -1,14 +1,4 @@
 <template>
-  <PluginViewOption
-    id="dev_mode"
-    v-model="isEnabled"
-    :label="$t('toggleInteractionLayers', 'Toggle interaction layers')"
-    :title-on="$t('interactionLayersOn', 'Hide interaction layers')"
-    :title-off="$t('interactionLayerOff', 'Show interaction layers')"
-    icon="bk_mdi_logo_dev"
-    key-code="I"
-    weight="-99999"
-  />
   <Teleport :to="ui.mainLayoutElement.value">
     <div v-if="fieldMappingValidations.length" class="bk bk-dev-mode">
       <div class="bk-dev-mode-inner">
@@ -43,10 +33,12 @@
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref, computed } from "#imports";
-import { PluginViewOption } from "#blokkli/editor/plugins";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
 import { Banner, BannerInner } from "#blokkli/editor/components";
-import { addElementClasses } from "#blokkli/editor/composables";
+import {
+  addElementClasses,
+  defineViewOption
+} from "#blokkli/editor/composables";
 import { falsy } from "#blokkli/helpers";
 import { itemEntityType } from "#blokkli-build/config";
 defineBlokkliFeature({
@@ -58,7 +50,17 @@ defineBlokkliFeature({
   devOnly: true
 });
 const { $t, types, definitions, ui } = useBlokkli();
-const isEnabled = ref(false);
+const { isVisible } = defineViewOption({
+  id: "dev_mode",
+  label: $t("viewOptionInteractionLayers", "Interaction layers"),
+  description: $t(
+    "viewOptionInteractionLayersDescription",
+    "Hides the editor overlays to preview the page as it will render."
+  ),
+  icon: "bk_mdi_logo_dev",
+  keyCode: "I",
+  weight: -99999
+});
 const fieldMappingValidations = computed(() => {
   return definitions.blockDefinitions.value.flatMap((definition) => {
     if (definition.renderFor) {
@@ -100,7 +102,7 @@ const fieldMappingValidations = computed(() => {
 addElementClasses(
   document.documentElement,
   "bk-hide-interaction-layers",
-  isEnabled
+  isVisible
 );
 </script>
 

package/dist/runtime/editor/features/dragging-overlay/DragItems/index.vue

@@ -399,6 +399,7 @@ onBeforeUnmount(() => {
   position: fixed;
   top: 0px;
   left: 0px;
+  border-radius: 4px;
   padding: 8px;
   white-space: nowrap;
   display: flex;

package/dist/runtime/editor/features/duplicate/types.d.ts

@@ -6,3 +6,4 @@ declare module '#blokkli/editor/adapter' {
         duplicateBlocks?: (uuids: string[]) => Promise<MutationResponseLike<T>>;
     }
 }
+export {};

package/dist/runtime/editor/features/duplicate/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/editable-field/Overlay/Frame/index.vue

@@ -10,8 +10,6 @@
       :style
       :src="url"
       class="_bk_block _bk_w-full"
-      data-test="editable-frame"
-      :data-test-src="url"
       @load="onIframeLoad"
     />
   </div>

package/dist/runtime/editor/features/editable-field/Overlay/Plaintext/index.vue

@@ -3,7 +3,6 @@
     id="bk-editable-field-textarea"
     v-model="modelValue"
     class="bk bk-editable-field-textarea"
-    data-test="editable-plaintext"
     enterkeyhint="done"
     submit-on-enter
     rows="2"

package/dist/runtime/editor/features/editable-field/Overlay/ReadabilityIndicator/index.vue

@@ -3,9 +3,6 @@
     v-if="readabilityScore != null && readabilityBand"
     class="bk-editable-field-readability _bk_group/tooltip"
     :class="{ 'bk-is-stale': stale }"
-    data-test="editable-readability"
-    :data-test-band="readabilityBand"
-    :data-test-too-short="false"
   >
     <span
       class="bk-editable-field-readability-dot"
@@ -79,8 +76,6 @@
   <div
     v-else-if="tooShort"
     class="bk-editable-field-readability"
-    data-test="editable-readability"
-    :data-test-too-short="true"
   >
     <span class="bk-editable-field-readability-dot" />
     <span>{{ $t("readabilityTooShort", "Too short") }}</span>

package/dist/runtime/editor/features/editable-field/Overlay/index.vue

@@ -30,8 +30,6 @@
     <form
       ref="form"
       class="bk-editable-field-input"
-      data-test="editable-overlay"
-      :data-test-type="config.type"
       @submit.prevent="save"
     >
       <div ref="input">
@@ -69,7 +67,6 @@
         <button
           :disabled="!hasChanged"
           class="bk-artboard-tooltip-info-button bk-scheme-red"
-          data-test="editable-discard"
           @click.prevent="discard"
         >
           {{ $t("editableFieldDiscard", "Discard") }}
@@ -108,8 +105,6 @@
         <div
           v-if="!isMarkup"
           class="bk-editable-field-info-count _bk_relative _bk_group/tooltip"
-          data-test="editable-char-count"
-          :data-test-count="count"
         >
           <span>{{ count }}</span>
           <span v-if="maxlength >= 1">&nbsp;/&nbsp;{{ maxlength }}</span>

package/dist/runtime/editor/features/editable-mask/index.vue

@@ -1,25 +1,13 @@
 <template>
-  <PluginViewOption
-    id="mask"
-    v-model="isActive"
-    :label="$t('maskToggle', 'Toggle non-editable areas')"
-    :title-on="$t('maskHide', 'Hide non-editable areas')"
-    :title-off="$t('maskShow', 'Show non-editable areas')"
-    :tour-text="
-  $t(
-    'maskTourText',
-    'Toggle between showing or hiding non-editable parts of the page.'
-  )
-"
-    icon="bk_mdi_texture"
-    key-code="M"
-  />
+  <div />
 </template>
 
 <script setup>
-import { useBlokkli, defineBlokkliFeature, ref } from "#imports";
-import { PluginViewOption } from "#blokkli/editor/plugins";
-import { addElementClasses } from "#blokkli/editor/composables";
+import { useBlokkli, defineBlokkliFeature } from "#imports";
+import {
+  addElementClasses,
+  defineViewOption
+} from "#blokkli/editor/composables";
 defineBlokkliFeature({
   id: "editable-mask",
   icon: "bk_mdi_texture",
@@ -28,8 +16,21 @@ defineBlokkliFeature({
   viewports: ["desktop"]
 });
 const { $t } = useBlokkli();
-const isActive = ref(false);
-addElementClasses(document.documentElement, "bk-hide-non-editable", isActive);
+const { isVisible } = defineViewOption({
+  id: "mask",
+  label: $t("viewOptionNonEditableAreas", "Only editable areas"),
+  description: $t(
+    "viewOptionNonEditableAreasDescription",
+    "Hides parts of the page that cannot be edited."
+  ),
+  tourText: $t(
+    "maskTourText",
+    "Toggle between showing or hiding non-editable parts of the page."
+  ),
+  icon: "bk_mdi_texture",
+  keyCode: "M"
+});
+addElementClasses(document.documentElement, "bk-hide-non-editable", isVisible);
 </script>
 
 <script>

package/dist/runtime/editor/features/entity-title/index.vue

@@ -3,8 +3,6 @@
     <button
       v-if="scheduledDate"
       class="bk-toolbar-title-scheduled _bk_group/tooltip"
-      data-test="toolbar-scheduled-date"
-      :data-test-scheduled-date="scheduledDate"
       @click.prevent="onShowPublishDialog"
     >
       <Icon name="bk_mdi_calendar_clock" />
@@ -20,8 +18,6 @@
     <button
       ref="buttonEl"
       class="bk-toolbar-button _bk_group/tooltip _bk_w-full _bk_justify-start _bk_relative"
-      data-test="entity-title"
-      :data-test-entity-status="statusIndicatorStatus"
       :disabled="!state.canEdit.value"
       @click="onEditEntity"
     >

package/dist/runtime/editor/features/fragments/Dialog/index.vue

@@ -25,7 +25,6 @@
               v-model="searchText"
               type="text"
               class="bk-form-input"
-              data-test="fragments-search"
               :placeholder="
   $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
 "
@@ -45,8 +44,6 @@
   'bk-is-selected': selectedItem === item.name
 }"
             :data-bk-fragment-name="item.name"
-            data-test="fragment-option"
-            :data-test-fragment-name="item.name"
             @click="selectedItem = item.name"
           >
             <FragmentItem
@@ -62,7 +59,6 @@
     <template #footer>
       <button
         class="bk-button bk-scheme-accent"
-        data-test="fragments-submit"
         @click="onSubmit"
       >
         {{ $t("fragmentsPlaceDialogSubmitButton", "Add selected fragment") }}

package/dist/runtime/editor/features/grid/index.vue

@@ -1,23 +1,10 @@
 <template>
-  <PluginViewOption
-    id="grid"
-    v-slot="{ isActive }"
-    :label="$t('gridToggle', 'Toggle grid')"
-    :title-on="$t('gridShow', 'Show grid')"
-    :title-off="$t('gridHide', 'Hide grid')"
-    :tour-text="
-  $t('gridTourText', 'Display a layout grid overlay on top of the page.')
-"
-    key-code="G"
-    icon="bk_mdi_grid_view"
-  >
-    <div v-if="isActive" class="bk-grid-overlay" v-html="gridMarkup" />
-  </PluginViewOption>
+  <div v-if="isVisible" class="bk-grid-overlay" v-html="gridMarkup" />
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature } from "#imports";
-import { PluginViewOption } from "#blokkli/editor/plugins";
+import { defineViewOption } from "#blokkli/editor/composables";
 const { adapter } = defineBlokkliFeature({
   id: "grid",
   label: "Grid",
@@ -28,6 +15,20 @@ const { adapter } = defineBlokkliFeature({
 });
 const gridMarkup = await Promise.resolve(adapter.getGridMarkup());
 const { $t } = useBlokkli();
+const { isVisible } = defineViewOption({
+  id: "grid",
+  label: $t("viewOptionGrid", "Grid"),
+  description: $t(
+    "viewOptionGridDescription",
+    "Shows a layout grid overlay on top of the page."
+  ),
+  tourText: $t(
+    "gridTourText",
+    "Display a layout grid overlay on top of the page."
+  ),
+  keyCode: "G",
+  icon: "bk_mdi_grid_view"
+});
 </script>
 
 <script>

package/dist/runtime/editor/features/grid/types.d.ts

@@ -6,3 +6,4 @@ declare module '#blokkli/editor/adapter' {
         getGridMarkup?: () => Promise<string> | string;
     }
 }
+export {};

package/dist/runtime/editor/features/grid/types.js

@@ -0,0 +1 @@
+export {};

package/dist/runtime/editor/features/help/Dialog/index.d.vue.ts

@@ -0,0 +1,7 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    cancel: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onCancel?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;