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

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

@@ -197,6 +197,26 @@ export type ScrollSelectionIntoViewEvent = {
     center?: boolean;
     immediate?: boolean;
 };
+/**
+ * Pan the artboard to a specific offset. Pass `null` for an axis to leave it
+ * unchanged. `immediate` skips the easing animation.
+ */
+export type SetArtboardOffsetEvent = {
+    x?: number | null;
+    y?: number | null;
+    immediate?: boolean;
+};
+/**
+ * Ask the actions toolbar to make a specific element reachable. If the element
+ * lives inside the toolbar's horizontally-scrolled content and is past either
+ * edge, the toolbar scrolls so the element clears the arrow buttons. Elements
+ * outside the toolbar's vertical extent (group popups, unrelated nodes) are
+ * ignored — they sit below the toolbar and are already visible once the group
+ * itself is in view.
+ */
+export type ActionsScrollIntoViewEvent = {
+    element: HTMLElement;
+};
 export interface EventbusEvents {
     select: string | string[];
     'select:unselect': undefined;
@@ -212,6 +232,7 @@ export interface EventbusEvents {
     updatePreviewState: UpdatePreviewStateEvent;
     animationFrame: AnimationFrameEvent;
     message: Message;
+    'message:clear': undefined;
     keyPressed: KeyPressedEvent;
     editEntity: undefined;
     reloadState: undefined;
@@ -228,6 +249,8 @@ export interface EventbusEvents {
     'item:doubleClick': RenderedFieldListItem;
     scrollIntoView: ScrollIntoViewEvent;
     scrollSelectionIntoView: ScrollSelectionIntoViewEvent;
+    setArtboardOffset: SetArtboardOffsetEvent;
+    'actions:scrollIntoView': ActionsScrollIntoViewEvent;
     highlight: HTMLElement | null;
     'animationFrame:before': AnimationFrameBeforeEvent;
     'animationFrame:after': undefined;

package/dist/runtime/editor/features/add-list/Actions/index.vue

@@ -1,7 +1,6 @@
 <template>
   <Sortli
     id="blokkli-add-list-actions"
-    data-test="add-list-actions"
     :build-item="buildItemAction"
   >
     <ActionButton

package/dist/runtime/editor/features/add-list/Blocks/index.vue

@@ -2,7 +2,6 @@
   <Sortli
     v-if="shouldRender"
     id="blokkli-add-list-blocks"
-    data-test="add-list-blocks"
     :build-item
   >
     <AddListItem

package/dist/runtime/editor/features/add-list/Help/Item.vue

@@ -2,8 +2,6 @@
   <div
     ref="el"
     class="bk-add-list-help-item"
-    :data-test="'add-list-help-' + type + '-' + id"
-    :data-test-visible="isVisible"
     :style="{
   visibility: isVisible ? 'visible' : 'hidden'
 }"
@@ -15,8 +13,8 @@
       </div>
     </div>
     <h2>
-      <ItemIconBox data-test="add-list-help-icon" :bundle :icon :color />
-      <span data-test="add-list-help-title">{{ title }}</span>
+      <ItemIconBox :bundle :icon :color />
+      <span>{{ title }}</span>
     </h2>
 
     <hr />
@@ -24,7 +22,6 @@
     <div
       v-if="text"
       class="bk-add-list-help-description"
-      data-test="add-list-help-description"
       v-html="text"
     />
 
@@ -39,7 +36,6 @@
         v-for="field in section.fields"
         :key="field.name"
         class="bk-add-list-help-fields-item"
-        :data-test="'add-list-help-field-' + field.name"
       >
         <ul>
           <li v-if="section.fields.length > 1" class="bk-is-field">
@@ -49,7 +45,6 @@
             v-for="allowed in field.items"
             :key="field.name + allowed.bundle + allowed.label"
             class="bk-is-bundle"
-            :data-test="'add-list-help-allowed-' + allowed.bundle"
           >
             <ItemIconBox
               :bundle="allowed.bundle"

package/dist/runtime/editor/features/add-list/Help/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="rootEl" data-test="add-list-help" class="bk bk-add-list-help">
+  <div ref="rootEl" class="bk bk-add-list-help">
     <div
       ref="innerEl"
       class="bk-add-list-help-inner _bk_relative _bk_will-change-transform _bk_text-mono-50 _bk_bg-mono-950/90 _bk_backdrop-blur-md _bk_overflow-hidden _bk_rounded"

package/dist/runtime/editor/features/add-list/index.vue

@@ -4,7 +4,6 @@
       v-show="!ui.isApproving.value"
       id="bk-add-list"
       ref="wrapper"
-      data-test="add-list"
       class="bk bk-add-list bk-control"
       @wheel.capture.passive="onWheel"
       @mouseenter="onMouseEnter"
@@ -13,7 +12,6 @@
     >
       <div
         class="bk-add-list-inner"
-        :data-test-expanded="isActive"
         :class="{
   'bk-is-active': isActive
 }"

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

@@ -1,14 +1,5 @@
 <template>
-  <PluginViewOption
-    id="anchor"
-    v-slot="{ isActive }"
-    :label="$t('anchorToggle', 'Toggle anchor links')"
-    :title-on="$t('anchorShow', 'Show anchor links')"
-    :title-off="$t('anchorHide', 'Hide anchor links')"
-    icon="bk_mdi_anchor"
-  >
-    <AnchorOverlay v-if="isActive" />
-  </PluginViewOption>
+  <AnchorOverlay v-if="isVisible" />
 </template>
 
 <script setup>
@@ -17,7 +8,7 @@ import {
   defineBlokkliFeature,
   defineAsyncComponent
 } from "#imports";
-import { PluginViewOption } from "#blokkli/editor/plugins";
+import { defineViewOption } from "#blokkli/editor/composables";
 const AnchorOverlay = defineAsyncComponent(() => import("./Overlay/index.vue"));
 defineBlokkliFeature({
   id: "anchors",
@@ -27,6 +18,15 @@ defineBlokkliFeature({
   viewports: ["desktop"]
 });
 const { $t } = useBlokkli();
+const { isVisible } = defineViewOption({
+  id: "anchor",
+  label: $t("viewOptionAnchors", "Anchor links"),
+  description: $t(
+    "viewOptionAnchorsDescription",
+    "Highlights blocks that have an anchor ID."
+  ),
+  icon: "bk_mdi_anchor"
+});
 </script>
 
 <script>

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

@@ -6,3 +6,4 @@ declare module '#blokkli/editor/adapter' {
         buildAnchorLink?: (id: string, uuid: string) => string;
     }
 }
+export {};

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

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

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -27,29 +27,12 @@
     </PluginContextMenu>
   </PluginToolbarButton>
 
-  <PluginViewOption
-    id="artboardOverview"
-    v-slot="{ isActive }"
-    :label="$t('artboardOverviewToggle', 'Toggle overview')"
-    :title-on="$t('artboardOverviewShow', 'Show overview')"
-    :title-off="$t('artboardOverviewHide', 'Hide overview')"
-    :tour-text="
-  $t(
-    'artboardOverviewTourText',
-    `Displays a top level overview of your content.`
-  )
-"
-    icon="bk_mdi_visibility"
-    key-code="O"
-    weight="90"
+  <Teleport
+    v-if="isOverviewVisible && dom.isReady.value"
+    :to="ui.mainLayoutElement.value"
   >
-    <Teleport
-      v-if="isActive && dom.isReady.value"
-      :to="ui.mainLayoutElement.value"
-    >
-      <Overview :artboard="artboard" />
-    </Teleport>
-  </PluginViewOption>
+    <Overview :artboard="artboard" />
+  </Teleport>
 </template>
 
 <script setup>
@@ -66,13 +49,13 @@ import {
   isInsideRect,
   subtractRectFromViewport
 } from "#blokkli/editor/helpers/geometry";
-import {
-  PluginToolbarButton,
-  PluginViewOption,
-  PluginContextMenu
-} from "#blokkli/editor/plugins";
+import { PluginToolbarButton, PluginContextMenu } from "#blokkli/editor/plugins";
 import Scrollbar from "./Scrollbar/index.vue";
-import { addElementClasses, onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  addElementClasses,
+  defineViewOption,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
 import { asValidNumber } from "#blokkli/editor/helpers/math";
 import {
   createArtboard,
@@ -89,6 +72,21 @@ const props = defineProps({
 });
 addElementClasses(document.documentElement, "bk-is-artboard");
 const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
+const { isVisible: isOverviewVisible } = defineViewOption({
+  id: "artboardOverview",
+  label: $t("viewOptionArtboardOverview", "Overview"),
+  description: $t(
+    "viewOptionArtboardOverviewDescription",
+    "Displays a top-level overview of all content blocks."
+  ),
+  tourText: $t(
+    "artboardOverviewTourText",
+    "Displays a top level overview of your content."
+  ),
+  icon: "bk_mdi_crop_9_16",
+  keyCode: "O",
+  weight: 90
+});
 const artboardElement = ui.artboardElement();
 const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
 const ZOOM_LEVELS = [10, 25, 50, 75, 100, 125, 150, 200, 300];
@@ -374,6 +372,10 @@ onBlokkliEvent("scrollIntoView", (e) => {
     }
   }
 });
+onBlokkliEvent("setArtboardOffset", (e) => {
+  artboard.setOffset(e.x ?? null, e.y ?? null, e.immediate ?? false);
+  animation.requestDraw();
+});
 onBlokkliEvent("scrollSelectionIntoView", (e) => {
   const uuids = selection.uuids.value;
   if (uuids.length === 0) {

package/dist/runtime/editor/features/block-scheduler/Dialog/ScheduleSection.vue

@@ -2,13 +2,10 @@
   <PanelSection :title="label" padded :help>
     <div
       class="bk-schedule-section"
-      :data-test="testId"
-      :data-test-disabled="disabled"
     >
       <FormToggle
         v-model="isEnabled"
         :disabled
-        :data-test="testId + '-toggle'"
         :label="$t('scheduleEnable', 'Enable schedule')"
       />
 

package/dist/runtime/editor/features/block-scheduler/index.vue

@@ -13,7 +13,6 @@
     <template #icon-addon>
       <div
         v-if="selectionHasDates"
-        data-test="block-scheduler-indicator"
         class="_bk_absolute _bk_-top-5 _bk_-right-5 _bk_size-15 _bk_bg-yellow-normal _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center _bk_text-yellow-dark"
       >
         <Icon name="bk_mdi_check" class="_bk_size-10" />

package/dist/runtime/editor/features/block-transfer/SummaryDialog/index.vue

@@ -34,7 +34,6 @@
             <tr
               v-for="row in summary.skippedBundles"
               :key="row.bundle"
-              data-test="transfer-summary-skipped-row"
             >
               <td>
                 <code>{{ row.bundle }}</code>
@@ -67,7 +66,6 @@
             <tr
               v-for="(row, i) in summary.droppedFields"
               :key="`${row.bundle}-${row.fieldName}-${i}`"
-              data-test="transfer-summary-dropped-row"
             >
               <td>
                 <code>{{ row.bundle }}</code>
@@ -108,7 +106,6 @@
             <tr
               v-for="(row, i) in summary.referencesResolvedByLabel"
               :key="`${row.entityType}-${row.targetId}-${i}`"
-              data-test="transfer-summary-references-label-row"
             >
               <td>
                 <code>{{ row.entityType }}</code>
@@ -147,7 +144,6 @@
             <tr
               v-for="(row, i) in summary.referencesUnresolved"
               :key="`${row.uuid ?? row.label ?? ''}-${i}`"
-              data-test="transfer-summary-unresolved-row"
             >
               <td>
                 <code>{{ row.entityType }}</code>

package/dist/runtime/editor/features/breadcrumbs/Crumb/index.vue

@@ -5,11 +5,6 @@
   canShrink ? '_bk_shrink _bk_min-w-0' : '_bk_shrink-0',
   isLast ? '_bk_text-mono-50 _bk_pointer-events-none' : ''
 ]"
-    :data-test="`breadcrumb-${testId ?? crumb?.type}`"
-    :data-test-current="isLast"
-    :data-test-uuid="crumb?.type === 'block' ? crumb.uuid : void 0"
-    :data-test-field="crumb?.type === 'field' ? crumb.fieldName : void 0"
-    :data-test-count="crumb?.type === 'multiple' ? crumb.count : void 0"
   >
     <span v-if="!isFirst" class="_bk_text-mono-400 _bk_shrink-0">»</span>
 

package/dist/runtime/editor/features/changelog/changelog.json

@@ -1,4 +1,20 @@
 [
+  {
+    "version": "2.0.0-alpha.61",
+    "date": "2026-06-03",
+    "body": {
+      "en": "<h3>Improvements</h3>\n<h4>The AI assistant sees your selection from the very first message</h4>\n<p>When you select a block and immediately ask the AI assistant something like\n&quot;Convert this into an accordion&quot;, it now knows right away what you mean.\nPreviously it often had to ask back or look up the selection in a separate\nstep.</p>\n<h4>The AI assistant handles nested blocks correctly</h4>\n<p>When the AI assistant creates a structure made of several blocks, it now\nreliably understands which blocks sit inside which. Previously it sometimes\nmisread its own additions and partially deleted what it had just created.</p>\n<h4>Other improvements</h4>\n<ul>\n<li>The list of changes that the AI assistant proposes for confirmation can now\nbe navigated entirely with the keyboard.</li>\n</ul>\n",
+      "de": "<h3>Verbesserungen</h3>\n<h4>KI-Assistent erkennt markierte Blöcke ab der ersten Nachricht</h4>\n<p>Wenn Sie einen Block markieren und dem KI-Assistenten direkt eine Anweisung wie\n«Wandle das in ein Akkordeon um» geben, weiss er sofort, was gemeint ist. Bisher\nmusste er häufig nachfragen oder die Auswahl in einem separaten Schritt\nnachlesen.</p>\n<h4>KI-Assistent ordnet verschachtelte Blöcke korrekt ein</h4>\n<p>Erstellt der KI-Assistent eine Struktur mit mehreren Blöcken, erkennt er nun\nzuverlässig, welche Blöcke ineinander liegen. Vorher kam es vor, dass er die\ngerade erstellte Struktur falsch interpretierte und teilweise wieder löschte.</p>\n<h4>Weitere Verbesserungen</h4>\n<ul>\n<li>Die Liste der Änderungen, die der KI-Assistent zur Bestätigung vorschlägt,\nlässt sich jetzt vollständig mit der Tastatur durchgehen.</li>\n</ul>\n"
+    }
+  },
+  {
+    "version": "2.0.0-alpha.60",
+    "date": "2026-06-02",
+    "body": {
+      "en": "<h3>New Features</h3>\n<h4>Notifications</h4>\n<p>A new notifications button has been added to the toolbar. A small badge shows\nhow many unread notifications you have. Opening the dropdown reveals a list of\nrelevant events — for example, when you have been mentioned in a comment, when a\ncomment has been resolved or when an edit has been approved.</p>\n<p>Clicking a notification opens the related page directly in edit mode in a new\ntab — and for comment mentions, jumps straight to the relevant comment.</p>\n<p>All notifications can be marked as read with a single click.</p>\n<h4>The AI assistant understands page content better</h4>\n<p>The AI assistant can now read the complete page text — exactly what you see on\nthe page. This makes answers to questions like &quot;What is this page about?&quot;,\n&quot;Summarize this page&quot; or &quot;Write an intro that matches the content&quot; noticeably\nmore accurate.</p>\n<h3>Improvements</h3>\n<h4>View options in a dropdown</h4>\n<p>The view options (e.g. grid, anchor links, structure view) are now grouped into\na dropdown menu in the top toolbar.</p>\n<h4>Help in the app menu</h4>\n<p>The help dialog with the list of keyboard shortcuts has moved out of the right\nsidebar and into the main menu.</p>\n<h4>Other improvements</h4>\n<ul>\n<li>The toolbar with actions and options above a selected block can now be\nscrolled sideways when not all buttons fit.</li>\n<li>The preview thumbnails when the AI assistant picks media are larger.</li>\n</ul>\n<h3>Fixes</h3>\n<ul>\n<li>After applying or rejecting changes made by the AI assistant, page content\noccasionally appeared out of date — the display now updates reliably.</li>\n<li>Starting a new chat while confirming an AI action now cleanly cancels the\npending action and starts the new chat fresh.</li>\n</ul>\n",
+      "de": "<h3>Neue Funktionen</h3>\n<h4>Benachrichtigungen</h4>\n<p>In der Werkzeugleiste gibt es eine neue Schaltfläche für Benachrichtigungen.\nEine kleine Markierung zeigt an, wie viele ungelesene Benachrichtigungen\nvorhanden sind. Im aufklappbaren Bereich sehen Sie eine Liste mit allen\nrelevanten Ereignissen – zum Beispiel, wenn Sie in einem Kommentar erwähnt\nwurden, wenn ein Kommentar erledigt wurde oder wenn eine Bearbeitung freigegeben\nwurde.</p>\n<p>Ein Klick auf eine Benachrichtigung öffnet die zugehörige Seite direkt im\nBearbeitungsmodus in einem neuen Tab – und springt bei Kommentar-Erwähnungen\ndirekt zum richtigen Kommentar.</p>\n<p>Alle Benachrichtigungen lassen sich mit einem Klick als gelesen markieren.</p>\n<h4>KI-Assistent versteht den Seiteninhalt besser</h4>\n<p>Der KI-Assistent kann jetzt den kompletten Seitentext lesen – also genau das,\nwas Sie auch auf der Seite sehen. Dadurch werden Antworten auf Fragen wie «Worum\ngeht es auf dieser Seite?», «Fasse die Seite zusammen» oder «Schreibe eine\nEinleitung, die zum Inhalt passt» deutlich präziser.</p>\n<h3>Verbesserungen</h3>\n<h4>Darstellungsoptionen im Aufklappmenü</h4>\n<p>Die Darstellungsoptionen (z. B. Raster, Ankerlinks, Strukturansicht) sind neu in\neinem aufklappbaren Menü in der oberen Toolbar zusammengefasst.</p>\n<h4>Hilfe im App-Menü</h4>\n<p>Die Hilfe mit der Liste der Tastenkürzel ist nicht mehr in der rechten Sidebar,\nsondern direkt im Hauptmenü zu finden.</p>\n<h4>Weitere Verbesserungen</h4>\n<ul>\n<li>Die Werkzeugleiste mit den Aktionen und Optionen über einem ausgewählten Block\nlässt sich nun seitlich scrollen, wenn nicht alle Schaltflächen Platz haben.</li>\n<li>Die Vorschaubilder bei der Medienauswahl durch den KI-Assistenten sind grösser</li>\n</ul>\n<h3>Fehlerbehebungen</h3>\n<ul>\n<li>Nach dem Übernehmen oder Ablehnen von Änderungen durch den KI-Assistenten\nwurden Inhalte auf der Seite in manchen Fällen veraltet dargestellt – die\nAnzeige wird jetzt zuverlässig aktualisiert.</li>\n<li>Wird während der Bestätigung einer KI-Aktion ein neuer Chat gestartet, ist die\nlaufende Aktion korrekt abgebrochen und der neue Chat startet sauber.</li>\n</ul>\n"
+    }
+  },
   {
     "version": "2.0.0-alpha.59",
     "date": "2026-05-27",

package/dist/runtime/editor/features/command-palette/Palette/Item/index.vue

@@ -2,9 +2,6 @@
   <button
     class="bk-command _bk_flex _bk_pl-[12px] _bk_pr-10 _bk_w-full _bk_text-left _bk_gap-10 _bk_items-center _bk_border _bk_border-transparent"
     :class="isFocused ? '_bk_bg-mono-800 _bk_text-white' : '_bk_text-mono-300'"
-    data-test="command-palette-item"
-    :data-test-command-id="item.id"
-    :data-test-focused="isFocused"
     @mouseenter="$emit('focus', index)"
     @click.prevent="$emit('select', item.id)"
   >

package/dist/runtime/editor/features/command-palette/Palette/index.vue

@@ -2,7 +2,6 @@
   <SearchOverlay
     v-slot="{ focusedIndex, onMouseEnter }"
     v-model:text="text"
-    data-test="command-palette"
     :title="$t('commandPaletteTitle', 'Command Palette')"
     :total-items="visibleCommands.length"
     :placeholder="

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

@@ -7,7 +7,6 @@
   >
     <div
       class="bk-add-comment-inner _bk_w-full _bk_min-w-[400px] _bk_border-t _bk_border-t-yellow-dark"
-      data-test="comment-add-form"
       @keydown.capture.stop
     >
       <CommentInput

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

@@ -4,7 +4,6 @@
       v-if="canEdit"
       icon="bk_mdi_edit"
       :label="$t('edit', 'Edit')"
-      data-test="comment-action-edit"
       @click="$emit('edit')"
     />
     <InlineActionsButton
@@ -12,7 +11,6 @@
       icon="bk_mdi_delete"
       :label="$t('delete', 'Delete')"
       scheme="red"
-      data-test="comment-action-delete"
       @click="onDeleteClick"
     />
     <InlineActionsButton
@@ -20,7 +18,6 @@
       icon="bk_mdi_check_circle"
       scheme="lime"
       :label="$t('commentsMarkAsResolved', 'Mark as resolved')"
-      data-test="comment-action-resolve"
       @click="$emit('resolve')"
     />
     <InlineActionsButton
@@ -28,7 +25,6 @@
       icon="bk_mdi_unpublished"
       scheme="lime"
       :label="$t('commentsMarkAsUnresolved', 'Mark as unresolved')"
-      data-test="comment-action-unresolve"
       @click="$emit('unresolve')"
     />
 

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

@@ -5,6 +5,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     comment: CommentItem;
     isReply: boolean;
     hideBlocksPill?: boolean;
+    /**
+     * Whether this specific comment is the deep-link target. Renders a
+     * persistent highlight ring; cleared by emitting `dismissHighlight`
+     * on the first `pointerleave` after the user has engaged with it.
+     */
+    highlighted?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     edit: (body: string) => void;
     toggleTask: (taskIndex: number) => void;
@@ -12,10 +18,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     resolve: () => void;
     unresolve: () => void;
     selectBlocks: () => void;
+    dismissHighlight: () => void;
 }, string, import("vue").PublicProps, Readonly<{
     comment: CommentItem;
     isReply: boolean;
     hideBlocksPill?: boolean;
+    /**
+     * Whether this specific comment is the deep-link target. Renders a
+     * persistent highlight ring; cleared by emitting `dismissHighlight`
+     * on the first `pointerleave` after the user has engaged with it.
+     */
+    highlighted?: boolean;
 }> & Readonly<{
     onDelete?: (() => any) | undefined;
     onEdit?: ((body: string) => any) | undefined;
@@ -23,4 +36,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onUnresolve?: (() => any) | undefined;
     onToggleTask?: ((taskIndex: number) => any) | undefined;
     onSelectBlocks?: (() => any) | undefined;
+    onDismissHighlight?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -16,12 +16,13 @@
   </div>
   <div
     v-else
+    ref="rootEl"
     class="_bk_group/comment _bk_relative _bk_flex _bk_gap-(--bk-comment-avatar-gap) _bk_px-(--bk-comment-pad-x) _bk_font-sans"
-    data-test="comment"
-    :data-test-uuid="comment.uuid"
-    :class="
-  isReply ? '_bk_py-(--bk-comment-reply-pad-y)' : '_bk_py-(--bk-comment-pad-y)'
-"
+    :class="[
+  isReply ? '_bk_py-(--bk-comment-reply-pad-y)' : '_bk_py-(--bk-comment-pad-y)',
+  { '_bk_outline-2 _bk_outline-yellow-normal _bk_rounded': highlighted }
+]"
+    @pointerleave="highlighted ? $emit('dismissHighlight') : null"
   >
     <Avatar
       :deleted="!comment.user"
@@ -82,7 +83,14 @@
 </template>
 
 <script setup>
-import { computed, ref, useBlokkli } from "#imports";
+import {
+  computed,
+  nextTick,
+  ref,
+  useBlokkli,
+  useTemplateRef,
+  watch
+} from "#imports";
 import { Avatar, Pill } from "#blokkli/editor/components";
 import CommentMeta from "./Meta/index.vue";
 import CommentActions from "./Actions/index.vue";
@@ -92,10 +100,23 @@ const { $t, adapter, user } = useBlokkli();
 const props = defineProps({
   comment: { type: Object, required: true },
   isReply: { type: Boolean, required: true },
-  hideBlocksPill: { type: Boolean, required: false }
+  hideBlocksPill: { type: Boolean, required: false },
+  highlighted: { type: Boolean, required: false }
 });
-const emit = defineEmits(["edit", "toggleTask", "delete", "resolve", "unresolve", "selectBlocks"]);
+const emit = defineEmits(["edit", "toggleTask", "delete", "resolve", "unresolve", "selectBlocks", "dismissHighlight"]);
 const isEditing = ref(false);
+const rootEl = useTemplateRef("rootEl");
+watch(
+  () => props.highlighted,
+  async (isHighlighted) => {
+    if (!isHighlighted) {
+      return;
+    }
+    await nextTick();
+    rootEl.value?.scrollIntoView({ behavior: "smooth", block: "center" });
+  },
+  { immediate: true }
+);
 const blocksLabel = computed(() => {
   const count = props.comment.blockUuids?.length || 0;
   const template = count === 1 ? $t("commentBlocksCountOne", "1 block") : $t("blocksCount", "@count blocks");

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

@@ -5,6 +5,12 @@ declare const __VLS_export: import("vue").DefineComponent<{
     comment: CommentItem;
     isReply: boolean;
     hideBlocksPill?: boolean;
+    /**
+     * Whether this specific comment is the deep-link target. Renders a
+     * persistent highlight ring; cleared by emitting `dismissHighlight`
+     * on the first `pointerleave` after the user has engaged with it.
+     */
+    highlighted?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     edit: (body: string) => void;
     toggleTask: (taskIndex: number) => void;
@@ -12,10 +18,17 @@ declare const __VLS_export: import("vue").DefineComponent<{
     resolve: () => void;
     unresolve: () => void;
     selectBlocks: () => void;
+    dismissHighlight: () => void;
 }, string, import("vue").PublicProps, Readonly<{
     comment: CommentItem;
     isReply: boolean;
     hideBlocksPill?: boolean;
+    /**
+     * Whether this specific comment is the deep-link target. Renders a
+     * persistent highlight ring; cleared by emitting `dismissHighlight`
+     * on the first `pointerleave` after the user has engaged with it.
+     */
+    highlighted?: boolean;
 }> & Readonly<{
     onDelete?: (() => any) | undefined;
     onEdit?: ((body: string) => any) | undefined;
@@ -23,4 +36,5 @@ declare const __VLS_export: import("vue").DefineComponent<{
     onUnresolve?: (() => any) | undefined;
     onToggleTask?: ((taskIndex: number) => any) | undefined;
     onSelectBlocks?: (() => any) | undefined;
+    onDismissHighlight?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onSubmit?: ((value: string) => any) | undefined;
 }>, {
     canSubmit: boolean;
-    initialValue: string;
     autofocus: boolean;
+    initialValue: string;
     cancellable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,6 +1,5 @@
 <template>
   <form
-    data-test="comment-input"
     :class="{
   '_bk_border _bk_border-mono-300 _bk_rounded _bk_bg-white _bk_focus-within:border-mono-400': boxed
 }"
@@ -22,7 +21,6 @@
         v-if="cancellable"
         type="button"
         class="bk-button bk-is-small bk-is-light"
-        data-test="comment-input-cancel"
         @click="$emit('cancel')"
       >
         {{ $t("cancel", "Cancel") }}
@@ -30,7 +28,6 @@
       <button
         type="submit"
         class="bk-button bk-scheme-yellow bk-is-small _bk_ml-auto"
-        data-test="comment-input-submit"
         :disabled="!effectiveCanSubmit"
       >
         {{ submitLabel }}

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

@@ -22,8 +22,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     onSubmit?: ((value: string) => any) | undefined;
 }>, {
     canSubmit: boolean;
-    initialValue: string;
     autofocus: boolean;
+    initialValue: string;
     cancellable: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -4,7 +4,6 @@
       v-if="!isOpen"
       type="button"
       class="bk-button _bk_w-full bk-scheme-yellow"
-      data-test="comments-sidebar-add-button"
       @click="open"
     >
       <Icon name="bk_mdi_add_comment" class="_bk_size-18" />

package/dist/runtime/editor/features/comments/Sidebar/index.d.vue.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;