vue2-excel-grid 1.7.2 → 2.0.0

package/src/components/ExcelGrid.vue

@@ -61,11 +61,12 @@
         <button
           v-if="localSyncKey && toolbarHas('localSync')"
           type="button"
-          class="eg-toolbar-btn"
+          class="eg-toolbar-btn eg-toolbar-btn-badged"
           :disabled="toolbarDisabled('localSync')"
-          :title="t.localSync"
+          :title="localSyncAvailable ? t.localSyncAvailable : t.localSync"
           @click="openLocalSyncModal"
-        ><span class="eg-toolbar-icon eg-icon-local-sync"></span></button>
+        ><span class="eg-toolbar-icon eg-icon-local-sync"></span
+        ><span v-if="localSyncAvailable" class="eg-toolbar-badge" aria-hidden="true"></span></button>
       </div>
 
       <slot name="toolbar-extra" :locked="internalLocked" :fullscreen="isFullscreen"></slot>
@@ -819,13 +820,16 @@
       :visible="localSyncModal.visible"
       :grid-options="_selfComponentDef"
       :columns="_localSyncPreviewColumns"
-      :snapshot="localSyncModal.snapshot"
+      :versions="localSyncModal.versions"
+      :selected-id="localSyncModal.selectedId"
+      :selected-version="localSyncModal.selectedVersion"
       :locale="locale"
       :theme="internalTheme"
       @close="closeLocalSyncModal"
+      @select="_selectLocalSyncModalVersion"
       @save="_onLocalSyncModalSave"
-      @restore="restoreLocalSnapshot"
-      @clear="clearLocalSnapshot"
+      @restore="restoreLocalVersion"
+      @clear="_onLocalSyncModalDelete"
     />
 
     <!-- Lock/unlock state feedback — brief centered icon flash -->
@@ -943,7 +947,8 @@ import EgLocalSyncModal from './EgLocalSyncModal.vue'
 import { parseDateValue, formatDate } from '../utils/dateUtils.js'
 import { formatNumber as _formatNumber } from '../utils/numberFormat.js'
 import { Mask, MaskInput } from '../utils/mask.js'
-import { saveSnapshot, loadSnapshot, deleteSnapshot } from '../utils/idbStore.js'
+import { listVersions, getVersion, deleteVersion, saveOrTouchVersion } from '../utils/idbStore.js'
+import { hashRowsAsync } from '../utils/dataHash.js'
 
 const SIZE_CONFIG = {
   small:  { row: 22, header: 24, footer: 24, filter: 26 },
@@ -1408,34 +1413,48 @@ const ExcelGridComponent = {
     sort: { type: Object, default: null },
 
     /**
-     * Unique key that opts the grid into local autosave: whenever `data`
-     * changes, a debounced (~800ms) copy is written to the browser's
-     * IndexedDB, keyed by this string — so a page reload/crash/tab close
-     * doesn't lose in-progress work. Also adds a toolbar button ('localSync'
-     * — see the `toolbar` prop's `list`/`disabled`) that opens a modal
-     * showing the last saved copy as a read-only table, with three actions:
-     * **Save** (pushes the current `v-model` into the saved copy right now,
-     * bypassing the debounce), **Restore** (the other direction — pulls the
-     * saved copy back into `v-model`), and **Delete** (clears the saved
-     * copy).
+     * Unique key that opts the grid into local version history: when the page
+     * is being left (tab hidden/closed, or this component unmounted — NOT on
+     * every edit), the current `v-model` is content-hashed (via a Web Worker
+     * when available, so the main thread stays responsive right as the page
+     * may be unloading) and saved to the browser's IndexedDB as a **version**,
+     * keyed by this string. If the hash matches an already-saved version for
+     * this key, that version's timestamp is refreshed instead of creating a
+     * duplicate — only genuinely different content produces a new version.
+     * Also adds a toolbar button ('localSync' — see the `toolbar` prop's
+     * `list`/`disabled`) that opens a modal listing saved versions, each with
+     * a read-only preview and **Restore** / **Delete** actions, plus a
+     * **Save** button for an explicit checkpoint.
      *
      * Two different grid instances must use different keys — the same key
-     * means "the same saved copy" (last writer wins). Omit this prop
-     * entirely to opt out completely: no IndexedDB access happens at all,
-     * and the toolbar button never renders.
+     * means "the same version history" (concurrent tabs interleave). Omit
+     * this prop entirely to opt out completely: no IndexedDB access happens
+     * at all, and the toolbar button never renders.
      *
-     * See also the ref-callable methods `saveLocalSnapshot()`,
-     * `restoreLocalSnapshot()`, `clearLocalSnapshot()`, `getLocalSnapshot()`,
-     * `getLocalSnapshotInfo()`, `openLocalSyncModal()`/`closeLocalSyncModal()`,
-     * and the
-     * `local-sync-save`/`local-sync-restore`/`local-sync-clear`/`local-sync-error`
+     * See also `localSyncMaxVersions`, the ref-callable methods
+     * `listLocalVersions()`, `getLocalVersion(id)`, `restoreLocalVersion(id)`,
+     * `deleteLocalVersion(id)`, `saveLocalVersionNow()`,
+     * `openLocalSyncModal()`/`closeLocalSyncModal()`, and the
+     * `local-sync-save`/`local-sync-restore`/`local-sync-clear`/`local-sync-error`/`local-sync-available`
      * events — [details](/local-sync).
      * @type {String}
      * @default null
      * @example
      * <excel-grid :columns="columns" v-model="data" local-sync-key="invoice-42" toolbar />
      */
-    localSyncKey: { type: String, default: null }
+    localSyncKey: { type: String, default: null },
+
+    /**
+     * Maximum number of local versions kept per `localSyncKey`. Once a new
+     * version pushes the count past this, the oldest version(s) (by
+     * `createdAt`) are deleted automatically (FIFO). Has no effect without
+     * `localSyncKey`.
+     * @type {Number}
+     * @default 10
+     * @example
+     * <excel-grid :columns="columns" v-model="data" local-sync-key="invoice-42" :local-sync-max-versions="20" />
+     */
+    localSyncMaxVersions: { type: Number, default: 10 }
   },
 
   data() {
@@ -1505,9 +1524,15 @@ const ExcelGridComponent = {
       importState: { active: false, percent: 0, message: '' },
       exportState: { active: false },
 
-      // localSyncKey feature — modal state + pending debounce timer (the
-      // timer itself lives outside `data()`'s reactive tracking, see created()).
-      localSyncModal: { visible: false, snapshot: null },
+      // localSyncKey feature — modal state: the version list (metadata only)
+      // plus which one is selected/previewed. `selectedVersion` holds that
+      // version's full { id, data, createdAt, updatedAt } for the nested-grid
+      // preview (see EgLocalSyncModal.vue).
+      localSyncModal: { visible: false, versions: [], selectedId: null, selectedVersion: null },
+      // True when one or more versions already existed at mount and the user
+      // hasn't opened the modal yet — drives the toolbar button's "unseen
+      // local versions" dot. See _loadLocalVersionsOnMount() for the full lifecycle.
+      localSyncAvailable: false,
 
       resizing: {
         active: false,
@@ -2265,13 +2290,6 @@ const ExcelGridComponent = {
       this.$nextTick(() => this.updateVirtualScroll())
     },
 
-    // Guarded by _lockFlashArmed (set once mounted()) so an initial `locked:
-    // true` prop doesn't flash the icon before the grid has even appeared.
-    internalLocked(v) {
-      if (!this._lockFlashArmed) return
-      this._flashLock(v)
-    },
-
     autoWidth(v) {
       if (v) this._applyAutoWidth()
     },
@@ -2342,9 +2360,21 @@ const ExcelGridComponent = {
       immediate: true,
       handler(v) { this.internalCollapsedGroups = v ? [...v] : [] }
     },
+    // `immediate: true` guarantees this fires once, synchronously, right at
+    // setup regardless of `v` — that's the one reliable signal that THIS
+    // particular call is the initial sync, not a real host-driven change
+    // (e.g. via `:locked.sync`). Every call after the first is a genuine
+    // change, so only those flash. (Watching internalLocked itself for this
+    // instead — the previous approach — can't tell "initial value happened
+    // to be true" from "the user's first-ever real toggle": both look like
+    // "the first time internalLocked actually changed value".)
     locked: {
       immediate: true,
-      handler(v) { this.internalLocked = !!v }
+      handler(v) {
+        this.internalLocked = !!v
+        if (this._lockPropSynced) this._flashLock(this.internalLocked)
+        this._lockPropSynced = true
+      }
     },
     data: {
       immediate: true,
@@ -2414,14 +2444,12 @@ const ExcelGridComponent = {
     this._dragScrollRAF = null
     this._dragCleanupTimer = null
 
-    // localSyncKey autosave — deliberately a plain (non-immediate) $watch,
-    // NOT an entry in the `watch:` option above: the existing `data` watcher
-    // there runs with `immediate: true` (fires once on mount with the
-    // initial value), which would autosave a host's still-loading/empty
-    // initial `data` and silently overwrite a previously-saved IndexedDB
-    // snapshot before the user ever gets a chance to see/restore it via the
-    // modal. A plain $watch only fires on later, real changes.
-    this.$watch('data', () => this._scheduleLocalAutosave())
+    // localSyncKey — the last `data` reference a version was actually saved
+    // for. Initialized to the current (mount-time) value so an untouched grid
+    // that's merely tab-switched away from doesn't spam a "nothing happened"
+    // version on every hide — only a REAL edit (which replaces this array
+    // reference, see _emitDataChange) makes the next hide event flush.
+    this._lastFlushedDataRef = this.data
   },
 
   mounted() {
@@ -2453,7 +2481,17 @@ const ExcelGridComponent = {
       // in both modes) fresh when the host's layout changes.
       if (this.$el.parentElement) this._scrollBodyResizeObserver.observe(this.$el.parentElement)
     }
-    this._lockFlashArmed = true
+    this._loadLocalVersionsOnMount()
+    // localSyncKey — save on page-hide, not per-edit (see _flushLocalVersionOnHide).
+    // 'visibilitychange'->hidden is the primary trigger: it fires for tab
+    // switches, minimizing, AND reliably before actual tab close/navigation on
+    // both desktop and mobile, while the page is still very likely alive —
+    // giving the async worker-hash + IndexedDB write a real chance to finish.
+    // 'pagehide' is a backstop for the cases visibilitychange misses; it's
+    // idempotent with visibilitychange (same content -> same hash -> no-op
+    // beyond a timestamp touch) so firing both is harmless.
+    document.addEventListener('visibilitychange', this._onVisibilityChangeForLocalSync)
+    window.addEventListener('pagehide', this._onPageHideForLocalSync)
   },
 
   updated() {
@@ -2488,7 +2526,6 @@ const ExcelGridComponent = {
     clearTimeout(this._onInputTimer)
     clearTimeout(this._dragCleanupTimer)
     clearTimeout(this._widthSyncChainResetTimer)
-    clearTimeout(this._localSyncTimer)
     if (this._dragScrollRAF) cancelAnimationFrame(this._dragScrollRAF)
     document.removeEventListener('mousemove', this.onGlobalMouseMove)
     document.removeEventListener('mouseup', this.onGlobalMouseUp)
@@ -2496,6 +2533,11 @@ const ExcelGridComponent = {
     document.removeEventListener('mousedown', this._onDocMouseDownForDropdown, true)
     window.removeEventListener('resize', this.syncHeaderViewportWidth)
     window.removeEventListener('scroll', this._onWindowScrollForDropdown, true)
+    document.removeEventListener('visibilitychange', this._onVisibilityChangeForLocalSync)
+    window.removeEventListener('pagehide', this._onPageHideForLocalSync)
+    // Best-effort — the component may be torn down (SPA route change) without
+    // the page itself unloading, which visibilitychange/pagehide won't catch.
+    this._flushLocalVersionOnHide()
     if (this.isFullscreen) {
       document.body.style.overflow = this._prevBodyOverflow || ''
       document.removeEventListener('keydown', this._onFullscreenKeyDown)
@@ -6216,113 +6258,190 @@ const ExcelGridComponent = {
     },
 
     // =========================================================
-    // LOCAL SYNC — autosave `data` to IndexedDB, keyed by localSyncKey
+    // LOCAL SYNC — save `data` as a local IndexedDB *version*, keyed by
+    // localSyncKey, only when the page is being left (not per-edit).
     // =========================================================
 
-    // Internal: debounced (800ms) autosave, scheduled by the plain $watch
-    // set up in created() every time `data` actually changes. No-op when
-    // localSyncKey isn't set — zero IndexedDB access at all in that case.
-    _scheduleLocalAutosave() {
+    // Internal, called once from mounted(): populates the toolbar "unseen
+    // local versions" dot and emits local-sync-available if any versions
+    // already exist for this key (e.g. saved in an earlier visit).
+    async _loadLocalVersionsOnMount() {
       if (!this.localSyncKey) return
-      clearTimeout(this._localSyncTimer)
-      this._localSyncTimer = setTimeout(() => {
-        this.saveLocalSnapshot()
-      }, 800)
-    },
-
-    // Public, ref-callable: saves the current `data` to IndexedDB right now,
-    // bypassing the debounce (e.g. a host wants to force a checkpoint before
-    // navigating away). No-op (resolves to null) when localSyncKey isn't set.
-    async saveLocalSnapshot() {
-      if (!this.localSyncKey) return null
-      clearTimeout(this._localSyncTimer)
       try {
-        const { updatedAt } = await saveSnapshot(this.localSyncKey, this.data)
-        this.$emit('local-sync-save', { key: this.localSyncKey, rows: this.data.length, updatedAt })
-        return updatedAt
+        const versions = await listVersions(this.localSyncKey)
+        if (!versions.length) return
+        this.localSyncAvailable = true
+        this.$emit('local-sync-available', {
+          key: this.localSyncKey,
+          versions: versions.length,
+          mostRecentUpdatedAt: versions[0].updatedAt
+        })
       } catch (error) {
-        this.$emit('local-sync-error', { action: 'save', error })
-        return null
-      }
-    },
-
-    // Modal's "Save" button (push v-model -> IndexedDB — the other direction
-    // from "Restore", which pulls IndexedDB -> v-model). Unlike
-    // restoreLocalSnapshot(), this deliberately does NOT close the modal —
-    // the freshly-saved snapshot is reflected in place (updated timestamp/
-    // row count/preview) so the user sees the save actually happened.
-    async _onLocalSyncModalSave() {
-      const updatedAt = await this.saveLocalSnapshot()
-      if (updatedAt != null) {
-        this.localSyncModal.snapshot = { data: this.data, updatedAt }
+        this.$emit('local-sync-error', { action: 'load', error })
       }
     },
 
-    // Public, ref-callable: loads the IndexedDB snapshot and writes it back
-    // into v-model (input/update:data) — the modal's "Restore" button calls
-    // this too. No-op if localSyncKey isn't set or nothing is saved yet.
-    async restoreLocalSnapshot() {
+    _onVisibilityChangeForLocalSync() {
+      if (document.visibilityState === 'hidden') this._flushLocalVersionOnHide()
+    },
+
+    _onPageHideForLocalSync() {
+      this._flushLocalVersionOnHide()
+    },
+
+    // The core save-on-leave path — replaces a per-edit autosave (see the
+    // localSyncKey prop's JSDoc for why: an autosave tied to "data changed"
+    // can't distinguish a user's edit from a host loading rows from an API,
+    // and would silently overwrite a user's saved work the moment a host
+    // does the latter). Triggered from mounted()'s visibilitychange/pagehide
+    // listeners and beforeDestroy() — see those for the three trigger points.
+    //
+    // Content-hashes the current `data` (via a Web Worker when available —
+    // src/utils/dataHash.js — falling back to the same algorithm
+    // synchronously otherwise, so this always resolves) and either touches
+    // an existing local version with the same hash (just refreshes its
+    // timestamp — "ustiga yoziladi, alohida versiya qilinmaydi") or creates
+    // a brand-new one, evicting the oldest past localSyncMaxVersions (FIFO —
+    // see idbStore.js's saveOrTouchVersion()). Never throws — IndexedDB
+    // failures become local-sync-error.
+    //
+    // `force` skips the "nothing changed since the last flush" short-circuit
+    // below. The passive triggers (visibilitychange/pagehide/beforeDestroy)
+    // fire often on an idle tab and must NOT wake the worker/IndexedDB for
+    // no reason, so they leave it in place. saveLocalVersionNow() — an
+    // explicit, infrequent, host/modal-initiated "checkpoint now" action —
+    // passes force so it never silently does nothing: even unchanged data
+    // still gets its existing version's timestamp refreshed via the same
+    // hash-dedup path, rather than the caller seeing no effect at all.
+    async _flushLocalVersionOnHide(force = false) {
       if (!this.localSyncKey) return
+      if (!force && this.data === this._lastFlushedDataRef) return // nothing changed since the last flush
+      const data = this.data
       try {
-        const snapshot = await loadSnapshot(this.localSyncKey)
-        if (!snapshot) return
-        this.$emit('input', snapshot.data)
-        this.$emit('update:data', snapshot.data)
-        this.$emit('local-sync-restore', { key: this.localSyncKey, rows: snapshot.data.length })
-        this.closeLocalSyncModal()
+        const hash = await hashRowsAsync(data)
+        if (this.data !== data) return // data changed again mid-hash — a later flush will catch it
+        const { version, overwritten } = await saveOrTouchVersion(
+          this.localSyncKey, data, hash, this.localSyncMaxVersions
+        )
+        this._lastFlushedDataRef = data
+        this.$emit('local-sync-save', {
+          key: this.localSyncKey,
+          id: version.id,
+          rows: data.length,
+          updatedAt: version.updatedAt,
+          overwritten
+        })
       } catch (error) {
-        this.$emit('local-sync-error', { action: 'restore', error })
+        this.$emit('local-sync-error', { action: 'save', error })
       }
     },
 
-    // Public, ref-callable: deletes the IndexedDB snapshot — the modal's
-    // "Delete" button calls this too (after its own inline confirm step).
-    async clearLocalSnapshot() {
-      if (!this.localSyncKey) return
+    // Public, ref-callable: runs the save-on-leave flow immediately, for a
+    // host that wants its own explicit "save checkpoint" button instead of
+    // waiting for a page-hide. Always goes through IndexedDB (force — see
+    // _flushLocalVersionOnHide()), but still through the same hash-dedup
+    // logic, so repeated calls with unchanged data don't spam duplicate
+    // versions — they just refresh the existing matching version.
+    async saveLocalVersionNow() {
+      await this._flushLocalVersionOnHide(true)
+    },
+
+    // Public, ref-callable: lightweight metadata for every saved version of
+    // this localSyncKey, newest first — no row data (use getLocalVersion(id)
+    // for that). Powers the built-in modal's list; also usable to build a
+    // custom UI.
+    async listLocalVersions() {
+      if (!this.localSyncKey) return []
       try {
-        await deleteSnapshot(this.localSyncKey)
-        if (this.localSyncModal.snapshot) this.localSyncModal.snapshot = null
-        this.$emit('local-sync-clear', { key: this.localSyncKey })
+        const versions = await listVersions(this.localSyncKey)
+        return versions.map(v => ({ id: v.id, createdAt: v.createdAt, updatedAt: v.updatedAt, rowCount: v.data.length }))
       } catch (error) {
-        this.$emit('local-sync-error', { action: 'clear', error })
+        this.$emit('local-sync-error', { action: 'load', error })
+        return []
       }
     },
 
-    // Public, ref-callable: returns the saved copy's full { data, updatedAt }
-    // (or null) WITHOUT applying it to v-model and without opening the
-    // built-in modal — the pure "Read" a host needs to build its own custom
-    // UI (preview/inspect the saved rows, decide what to do, etc.), as
-    // opposed to restoreLocalSnapshot() which reads AND immediately commits
-    // the result into v-model as one step.
-    async getLocalSnapshot() {
-      if (!this.localSyncKey) return null
+    // Public, ref-callable: the full { id, data, createdAt, updatedAt } for
+    // one saved version, WITHOUT applying it to v-model — the pure "Read"
+    // for a custom UI (as opposed to restoreLocalVersion(), which reads AND
+    // commits in one step).
+    async getLocalVersion(id) {
       try {
-        return await loadSnapshot(this.localSyncKey)
+        return await getVersion(id)
       } catch (error) {
         this.$emit('local-sync-error', { action: 'load', error })
         return null
       }
     },
 
-    // Public, ref-callable: lightweight { updatedAt, rowCount } | null variant
-    // of getLocalSnapshot() — for a host that only wants to know whether/when
-    // something is saved (e.g. an "unsaved local changes" prompt on mount)
-    // without pulling the full row data across.
-    async getLocalSnapshotInfo() {
-      const snapshot = await this.getLocalSnapshot()
-      return snapshot ? { updatedAt: snapshot.updatedAt, rowCount: snapshot.data.length } : null
+    // Public, ref-callable: writes one saved version back into v-model
+    // (input/update:data) — the modal's "Restore" button calls this too.
+    async restoreLocalVersion(id) {
+      try {
+        const version = await this.getLocalVersion(id)
+        if (!version) return
+        this.$emit('input', version.data)
+        this.$emit('update:data', version.data)
+        this._lastFlushedDataRef = version.data // what's now on screen is already what's stored
+        this.localSyncAvailable = false
+        this.$emit('local-sync-restore', { key: this.localSyncKey, id, rows: version.data.length })
+        this.closeLocalSyncModal()
+      } catch (error) {
+        this.$emit('local-sync-error', { action: 'restore', error })
+      }
+    },
+
+    // Public, ref-callable: deletes one saved version — the modal's "Delete"
+    // button calls this too (after its own inline confirm step).
+    async deleteLocalVersion(id) {
+      try {
+        await deleteVersion(id)
+        if (this.localSyncModal.selectedId === id) {
+          this.localSyncModal.selectedId = null
+          this.localSyncModal.selectedVersion = null
+        }
+        this.localSyncModal.versions = this.localSyncModal.versions.filter(v => v.id !== id)
+        this.$emit('local-sync-clear', { key: this.localSyncKey, id })
+      } catch (error) {
+        this.$emit('local-sync-error', { action: 'clear', error })
+      }
     },
 
     // Public, ref-callable: opens the local-sync modal (also reachable via
-    // the toolbar button), loading the latest snapshot fresh each time.
+    // the toolbar button), loading the version list fresh each time.
     async openLocalSyncModal() {
       if (!this.localSyncKey) return
       this.localSyncModal.visible = true
-      try {
-        this.localSyncModal.snapshot = await loadSnapshot(this.localSyncKey)
-      } catch (error) {
-        this.localSyncModal.snapshot = null
-        this.$emit('local-sync-error', { action: 'load', error })
+      this.localSyncAvailable = false // the version(s) have now been seen
+      const versions = await this.listLocalVersions()
+      this.localSyncModal.versions = versions
+      await this._selectLocalSyncModalVersion(versions.length ? versions[0].id : null)
+    },
+
+    // Internal: modal's list-selection handler — loads the selected
+    // version's full data for the nested-grid preview (EgLocalSyncModal.vue).
+    async _selectLocalSyncModalVersion(id) {
+      this.localSyncModal.selectedId = id
+      this.localSyncModal.selectedVersion = id ? await this.getLocalVersion(id) : null
+    },
+
+    // Modal's "Save" button — same as saveLocalVersionNow(), then refreshes
+    // the modal's own list/selection in place so the user sees it happened.
+    async _onLocalSyncModalSave() {
+      await this.saveLocalVersionNow()
+      const versions = await this.listLocalVersions()
+      this.localSyncModal.versions = versions
+      await this._selectLocalSyncModalVersion(versions.length ? versions[0].id : null)
+    },
+
+    // Modal's "Delete" button (after its own inline confirm) — deletes the
+    // given version, then selects the next-most-recent one if the deleted
+    // one was selected.
+    async _onLocalSyncModalDelete(id) {
+      await this.deleteLocalVersion(id)
+      if (this.localSyncModal.selectedId == null) {
+        const remaining = this.localSyncModal.versions
+        await this._selectLocalSyncModalVersion(remaining.length ? remaining[0].id : null)
       }
     },
 
@@ -6335,6 +6454,7 @@ const ExcelGridComponent = {
       this.internalLocked = !this.internalLocked
       this.$emit('update:locked', this.internalLocked)
       this.$emit('lock-change', { locked: this.internalLocked })
+      this._flashLock(this.internalLocked)
     },
 
     // Pops a big lock/unlock icon in the center of the grid and fades it
@@ -6789,6 +6909,22 @@ export default ExcelGridComponent
   color: var(--eg-color-text-secondary, var(--eg-color-text-secondary-default));
 }
 
+/* Anchors the "unseen local draft" dot (localSyncKey feature) — only the
+   local-sync button carries it, but kept as its own class so any future
+   badged tool gets the same positioning. */
+.eg-toolbar-btn-badged {
+  position: relative;
+}
+.eg-toolbar-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--eg-color-accent, var(--eg-color-accent-default));
+  pointer-events: none;
+}
 .eg-toolbar-btn:hover:not(:disabled) {
   background: var(--eg-color-option-hover-bg, var(--eg-color-option-hover-bg-default));
   border-color: var(--eg-color-border, var(--eg-color-border-default));