@blokkli/editor 2.0.0-alpha.62 → 2.0.0-alpha.64

package/dist/runtime/editor/features/settings/Dialog/FeatureSetting/index.vue

@@ -125,7 +125,7 @@ const tickmarks = computed(() => {
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk .bk-input-range {
   display: block;
   width: 100%;

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

@@ -84,5 +84,5 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 </style>

package/dist/runtime/editor/features/structure/List/Item/index.vue

@@ -126,7 +126,7 @@ defineOptions({
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 :is(.bk-vars .bk-dragging-overlay-item) [bk-structure-uuid] {
   background-color: rgb(var(--bk-theme-mono-100) / 1) !important;
 }

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

@@ -99,7 +99,7 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-structure {
   height: 100%;
   overflow: auto;

package/dist/runtime/editor/features/templates/DialogManageTemplates/Item.vue

@@ -78,6 +78,7 @@
   </tr>
   <NestedEditorOverlay
     v-if="isEditing && editUrl"
+    id="edit-template"
     :url="editUrl"
     :uuid
     :element="editButtonEl"

package/dist/runtime/editor/features/templates/DialogManageTemplates/index.vue

@@ -110,7 +110,7 @@ watch(page, () => {
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk .bk-templates-manage {
   min-height: 70vh;
 }

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

@@ -109,7 +109,7 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-theme-editor {
   container-type: inline-size;
 }

package/dist/runtime/editor/features/touch-action-bar/Bar/index.vue

@@ -24,7 +24,7 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-touch-action-bar {
   pointer-events: auto;
   position: fixed;

package/dist/runtime/editor/features/tour/Overlay/index.vue

@@ -227,7 +227,7 @@ useAnimationFrame(() => {
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-tour {
   position: fixed;
   top: 0px;

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

@@ -225,7 +225,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-transform-overlay {
   pointer-events: auto;
   position: absolute;

package/dist/runtime/editor/features/translations/SelectionTable/index.vue

@@ -32,7 +32,7 @@ defineProps({
 defineEmits(["toggle-all"]);
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk .bk-csv-table {
   border-collapse: collapse;
 }

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

@@ -16,7 +16,7 @@
     region="title"
     weight="500"
     icon="bk_mdi_feature_search"
-    class="_bk_relative"
+    class="_bk_relative _bk_border-l _bk_border-l-mono-600"
     @click="isVisible = !isVisible"
   />
 </template>

package/dist/runtime/editor/helpers/color/index.d.ts

@@ -3,4 +3,11 @@ export declare function toShaderColor(rgba: RGB): RGB;
 export declare const rgbaToString: (color: RGB, alpha?: number) => string;
 export declare function getContrastRatio(color1: RGB, color2: RGB): number;
 export declare function findHighestContrastColor(colors: RGB[], backgroundColor?: RGB): RGB;
+export declare const hexToRgb: (hex: string) => RGB | undefined;
+/**
+ * Whether the given hex color is "light" — i.e. dark text on top of it would
+ * be more readable than light text. Use this to decide between black/white
+ * foreground content on a colored background. Unparseable hex → `false`.
+ */
+export declare const isLightHex: (hex: string) => boolean;
 export declare const parseColorString: (color: string) => RGB | undefined;

package/dist/runtime/editor/helpers/color/index.js

@@ -28,6 +28,20 @@ export function findHighestContrastColor(colors, backgroundColor = [255, 255, 25
   }
   return maxContrastColor;
 }
+export const hexToRgb = (hex) => {
+  const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (!match) return;
+  return [
+    Number.parseInt(match[1], 16),
+    Number.parseInt(match[2], 16),
+    Number.parseInt(match[3], 16)
+  ];
+};
+export const isLightHex = (hex) => {
+  const rgb = hexToRgb(hex);
+  if (!rgb) return false;
+  return getContrastRatio(rgb, [0, 0, 0]) > getContrastRatio(rgb, [255, 255, 255]);
+};
 export const parseColorString = (color) => {
   const rgbaRegex = /^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})(?:,\s*(0|1|0?\.\d+))?\)$/;
   const match = color.match(rgbaRegex);

package/dist/runtime/editor/helpers/diff/index.d.ts

@@ -21,3 +21,101 @@ export declare function computeDiff(before: string, after: string): string;
  * <ins> rather than wrapping the block tags themselves.
  */
 export declare function computeInsertion(after: string): string;
+/**
+ * One chunk of a field's diff that can be individually accepted or rejected
+ * by the user. A markup field becomes an ordered list of segments; lists
+ * (<ul>/<ol>) become a `list` segment whose children are the individual
+ * <li> atoms.
+ *
+ * Acceptance semantics (see `reassembleValue`):
+ * - matched: accepted → afterHtml, rejected → beforeHtml
+ * - inserted: accepted → keep, rejected → drop
+ * - deleted: accepted → drop (matches after), rejected → restore (matches before)
+ */
+export type AtomicSegment = {
+    kind: 'atomic';
+    id: string;
+    tag: string;
+    /**
+     * The open tag of the accepted (after) state. For matched segments this can
+     * differ from `beforeOpenTag` when only attributes changed — a segment
+     * counts as changed in that case even when the inner HTML is identical.
+     */
+    openTag: string;
+    /**
+     * The open tag of the original (before) state. Rejecting a matched segment
+     * restores this alongside `beforeHtml`. Equals `openTag` for inserted
+     * segments (which have no before state).
+     */
+    beforeOpenTag: string;
+    closeTag: string;
+    beforeHtml: string;
+    afterHtml: string;
+    changed: boolean;
+    status: 'matched' | 'inserted' | 'deleted';
+};
+export type ListSegment = {
+    kind: 'list';
+    id: string;
+    tag: 'ul' | 'ol';
+    openTag: string;
+    closeTag: string;
+    children: AtomicSegment[];
+};
+export type Segment = AtomicSegment | ListSegment;
+/**
+ * Split a before/after value pair into chunks the user can individually
+ * accept or reject. Returns null when chunk-level approval can't apply:
+ *
+ * - non-markup fields
+ * - either side contains inline-only HTML or stray top-level text
+ *   (`parseBlocks` returns null)
+ * - both sides empty
+ *
+ * Two-level structure: top-level block alignment, then a one-level recurse
+ * into matched <ul>/<ol> blocks whose innerHTML differs. <li> is the leaf.
+ *
+ * Used for both rewrites (word-diff preview) and translations
+ * (insertion-only preview). The difference is at the renderer.
+ */
+export declare function splitIntoSegments(before: string, after: string, fieldType: 'plain' | 'markup'): Segment[] | null;
+/**
+ * True when at least one segment (or list child) actually changes. Use to
+ * skip the approval row for fields where the proposed value already matches
+ * the current value chunk-for-chunk.
+ */
+export declare function segmentsHaveChanges(segments: Segment[]): boolean;
+/**
+ * Render segments as preview HTML with `data-chunk-index` attributes on each
+ * atomic block, so the approval UI can locate each chunk's DOM bounds. The
+ * resulting markup replaces the editable's innerHTML during preview, just
+ * like `computeDiff` / `computeInsertion`.
+ *
+ * `insertionsOnly` matches the existing prop on DiffApproval — translations
+ * render new content as a single <ins> per leaf, rewrites render word-diffs.
+ *
+ * `acceptedById` (optional) makes the preview track per-segment acceptance:
+ * rejected matched segments render their original content with no markers,
+ * rejected insertions render as deletions, rejected deletions render plain.
+ * Defaults to "all accepted" when omitted (initial render).
+ */
+export declare function renderSegmentDiff(segments: Segment[], opts?: {
+    insertionsOnly?: boolean;
+    acceptedById?: Record<string, boolean>;
+}): string;
+/**
+ * Reassemble a field value from segments using per-segment acceptance.
+ * Acceptance defaults to `true` for any unmapped segment id, mirroring the
+ * DiffApproval initial state.
+ *
+ * For `list` segments the wrapper is emitted only when at least one child
+ * survives — accepting a full deletion of every item drops the list itself.
+ */
+export declare function reassembleValue(segments: Segment[], acceptedById: Record<string, boolean>): string;
+/**
+ * Walk a segment list and return every atomic segment in reading order,
+ * including those inside list wrappers. Used by the approval UI for
+ * keyboard nav, selection initialisation, and the rejected-segments
+ * feedback to the agent.
+ */
+export declare function flattenSegments(segments: Segment[]): AtomicSegment[];

package/dist/runtime/editor/helpers/diff/index.js

@@ -234,3 +234,265 @@ export function computeInsertion(after) {
   }
   return `<ins>${after}</ins>`;
 }
+function parseListItems(html) {
+  const container = document.createElement("div");
+  container.innerHTML = html;
+  const items = [];
+  for (const child of container.childNodes) {
+    if (child.nodeType === Node.ELEMENT_NODE) {
+      const el = child;
+      const tag = el.tagName.toLowerCase();
+      if (tag !== "li") return null;
+      let openTag = `<${tag}`;
+      for (const attr of el.attributes) {
+        openTag += ` ${attr.name}="${attr.value}"`;
+      }
+      openTag += ">";
+      items.push({ tag, innerHTML: el.innerHTML, openTag });
+    } else if (child.nodeType === Node.TEXT_NODE && child.textContent?.trim()) {
+      return null;
+    }
+  }
+  return items;
+}
+function alignListItems(before, after) {
+  const m = before.length;
+  const n = after.length;
+  const dp = Array.from(
+    { length: m + 1 },
+    () => Array(n + 1).fill(0)
+  );
+  for (let i2 = 1; i2 <= m; i2++) {
+    for (let j2 = 1; j2 <= n; j2++) {
+      if (before[i2 - 1].innerHTML === after[j2 - 1].innerHTML) {
+        dp[i2][j2] = dp[i2 - 1][j2 - 1] + 1;
+      } else {
+        dp[i2][j2] = Math.max(dp[i2 - 1][j2], dp[i2][j2 - 1]);
+      }
+    }
+  }
+  const ops = [];
+  let i = m;
+  let j = n;
+  while (i > 0 && j > 0) {
+    if (before[i - 1].innerHTML === after[j - 1].innerHTML) {
+      ops.push({
+        type: "unchanged",
+        before: before[i - 1],
+        after: after[j - 1]
+      });
+      i--;
+      j--;
+    } else if (dp[i - 1][j] >= dp[i][j - 1]) {
+      ops.push({ type: "before", block: before[i - 1] });
+      i--;
+    } else {
+      ops.push({ type: "after", block: after[j - 1] });
+      j--;
+    }
+  }
+  while (i > 0) {
+    ops.push({ type: "before", block: before[i - 1] });
+    i--;
+  }
+  while (j > 0) {
+    ops.push({ type: "after", block: after[j - 1] });
+    j--;
+  }
+  ops.reverse();
+  const entries = [];
+  let k = 0;
+  while (k < ops.length) {
+    const op = ops[k];
+    if (op.type === "unchanged") {
+      entries.push({ type: "match", before: op.before, after: op.after });
+      k++;
+      continue;
+    }
+    const befores = [];
+    const afters = [];
+    while (k < ops.length && ops[k].type !== "unchanged") {
+      const r = ops[k];
+      if (r.type === "before") befores.push(r.block);
+      else if (r.type === "after") afters.push(r.block);
+      k++;
+    }
+    const pairCount = Math.min(befores.length, afters.length);
+    for (let p = 0; p < pairCount; p++) {
+      entries.push({ type: "match", before: befores[p], after: afters[p] });
+    }
+    for (let p = pairCount; p < befores.length; p++) {
+      entries.push({ type: "delete", before: befores[p] });
+    }
+    for (let p = pairCount; p < afters.length; p++) {
+      entries.push({ type: "insert", after: afters[p] });
+    }
+  }
+  return entries;
+}
+function atomicFromAlignment(entry, id) {
+  if (entry.type === "match") {
+    return {
+      kind: "atomic",
+      id,
+      tag: entry.after.tag,
+      openTag: entry.after.openTag,
+      beforeOpenTag: entry.before.openTag,
+      closeTag: `</${entry.after.tag}>`,
+      beforeHtml: entry.before.innerHTML,
+      afterHtml: entry.after.innerHTML,
+      changed: entry.before.innerHTML !== entry.after.innerHTML || entry.before.openTag !== entry.after.openTag,
+      status: "matched"
+    };
+  }
+  if (entry.type === "delete") {
+    return {
+      kind: "atomic",
+      id,
+      tag: entry.before.tag,
+      openTag: entry.before.openTag,
+      beforeOpenTag: entry.before.openTag,
+      closeTag: `</${entry.before.tag}>`,
+      beforeHtml: entry.before.innerHTML,
+      afterHtml: "",
+      changed: true,
+      status: "deleted"
+    };
+  }
+  return {
+    kind: "atomic",
+    id,
+    tag: entry.after.tag,
+    openTag: entry.after.openTag,
+    beforeOpenTag: entry.after.openTag,
+    closeTag: `</${entry.after.tag}>`,
+    beforeHtml: "",
+    afterHtml: entry.after.innerHTML,
+    changed: true,
+    status: "inserted"
+  };
+}
+export function splitIntoSegments(before, after, fieldType) {
+  if (fieldType !== "markup") return null;
+  const beforeBlocks = parseBlocks(before);
+  const afterBlocks = parseBlocks(after);
+  if (!beforeBlocks || !afterBlocks) return null;
+  if (beforeBlocks.length === 0 && afterBlocks.length === 0) return null;
+  const alignment = alignBlocks(beforeBlocks, afterBlocks);
+  const segments = [];
+  alignment.forEach((entry, index) => {
+    const id = String(index);
+    if (entry.type === "match" && (entry.after.tag === "ul" || entry.after.tag === "ol") && entry.before.innerHTML !== entry.after.innerHTML && entry.before.openTag === entry.after.openTag) {
+      const beforeItems = parseListItems(entry.before.innerHTML);
+      const afterItems = parseListItems(entry.after.innerHTML);
+      if (beforeItems && afterItems) {
+        const childAlignment = alignListItems(beforeItems, afterItems);
+        const children = childAlignment.map(
+          (childEntry, childIndex) => atomicFromAlignment(childEntry, `${id}/${childIndex}`)
+        );
+        segments.push({
+          kind: "list",
+          id,
+          tag: entry.after.tag,
+          openTag: entry.after.openTag,
+          closeTag: `</${entry.after.tag}>`,
+          children
+        });
+        return;
+      }
+    }
+    segments.push(atomicFromAlignment(entry, id));
+  });
+  return segments;
+}
+export function segmentsHaveChanges(segments) {
+  return segments.some(
+    (seg) => seg.kind === "list" ? seg.children.some((c) => c.changed) : seg.changed
+  );
+}
+function injectAttribute(openTag, name, value) {
+  return openTag.slice(0, -1) + ` ${name}="${value}">`;
+}
+function renderAtomicDiffMarkup(seg, opts) {
+  const open = injectAttribute(seg.openTag, "data-chunk-index", seg.id);
+  const accepted = opts.acceptedById?.[seg.id] !== false;
+  if (seg.status === "inserted") {
+    if (!accepted) {
+      return `${open}<del>${seg.afterHtml}</del>${seg.closeTag}`;
+    }
+    return `${open}<ins>${seg.afterHtml}</ins>${seg.closeTag}`;
+  }
+  if (seg.status === "deleted") {
+    if (!accepted) {
+      return `${open}${seg.beforeHtml}${seg.closeTag}`;
+    }
+    return `${open}<del>${seg.beforeHtml}</del>${seg.closeTag}`;
+  }
+  if (!accepted) {
+    const beforeOpen = injectAttribute(
+      seg.beforeOpenTag,
+      "data-chunk-index",
+      seg.id
+    );
+    return `${beforeOpen}${seg.beforeHtml}${seg.closeTag}`;
+  }
+  if (opts.insertionsOnly) {
+    return `${open}<ins>${seg.afterHtml}</ins>${seg.closeTag}`;
+  }
+  if (seg.beforeHtml === seg.afterHtml) {
+    return `${open}${seg.afterHtml}${seg.closeTag}`;
+  }
+  const innerDiff = diff(seg.beforeHtml, seg.afterHtml);
+  return `${open}${cleanupDiffMods(innerDiff)}${seg.closeTag}`;
+}
+export function renderSegmentDiff(segments, opts = {}) {
+  const parts = [];
+  for (const seg of segments) {
+    if (seg.kind === "list") {
+      const childParts = seg.children.map(
+        (c) => renderAtomicDiffMarkup(c, opts)
+      );
+      parts.push(`${seg.openTag}${childParts.join("")}${seg.closeTag}`);
+    } else {
+      parts.push(renderAtomicDiffMarkup(seg, opts));
+    }
+  }
+  return parts.join("");
+}
+export function reassembleValue(segments, acceptedById) {
+  const isAccepted = (id) => acceptedById[id] !== false;
+  const renderAtomic = (seg) => {
+    const accepted = isAccepted(seg.id);
+    if (seg.status === "matched") {
+      return accepted ? seg.openTag + seg.afterHtml + seg.closeTag : seg.beforeOpenTag + seg.beforeHtml + seg.closeTag;
+    }
+    if (seg.status === "inserted") {
+      return accepted ? seg.openTag + seg.afterHtml + seg.closeTag : "";
+    }
+    return accepted ? "" : seg.openTag + seg.beforeHtml + seg.closeTag;
+  };
+  const parts = [];
+  for (const seg of segments) {
+    if (seg.kind === "list") {
+      const childParts = seg.children.map(renderAtomic).filter((p) => p);
+      if (childParts.length > 0) {
+        parts.push(`${seg.openTag}${childParts.join("")}${seg.closeTag}`);
+      }
+    } else {
+      const out = renderAtomic(seg);
+      if (out) parts.push(out);
+    }
+  }
+  return parts.join("");
+}
+export function flattenSegments(segments) {
+  const out = [];
+  for (const seg of segments) {
+    if (seg.kind === "list") {
+      out.push(...seg.children);
+    } else {
+      out.push(seg);
+    }
+  }
+  return out;
+}

package/dist/runtime/editor/helpers/injections.d.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * A ref to the nearest popup host element (provided by `<PopupHost>`).
+ *
+ * Descendants that render floating menus (e.g. the chart editor's color
+ * picker) inject this and teleport their content into the host. This lets
+ * the menu escape any `overflow: hidden`/`overflow: auto` clipping ancestor
+ * while staying inside the popup host's stacking context. When no host is
+ * provided, descendants fall back to inline rendering.
+ */
+export declare const INJECT_POPUP_HOST: InjectionKey<Ref<HTMLElement | null>>;

package/dist/runtime/editor/helpers/injections.js

@@ -0,0 +1 @@
+export const INJECT_POPUP_HOST = Symbol("blokkli_popup_host");

package/dist/runtime/editor/helpers/options/index.d.ts

@@ -1,5 +1,6 @@
 import type { BlockOptionDefinition } from '#blokkli/types/blockOptions';
 import type { BlockDefinitionOptionsInput } from '#blokkli/types/definitions';
+import type { DefinitionString } from '../../../../global/types/blockOptions.js';
 export type OptionItem = {
     property: string;
     option: BlockOptionDefinition;
@@ -18,3 +19,4 @@ export declare function getMutatedOptionValue(mutatedOptions: Record<string, Rec
  * Convert a typed option value to the string format expected by the adapter.
  */
 export declare function optionValueToStorable(definition: BlockOptionDefinition, value: string | string[] | boolean | undefined | null | number): string;
+export declare function resolveDefinitionString(definitionString: DefinitionString, langcode?: string): string;

package/dist/runtime/editor/helpers/options/index.js

@@ -1,3 +1,4 @@
+import { defaultLanguage } from "#blokkli-build/editor-config";
 export function getAvailableOptions(definitionOptions, globalOptionKeys, globalOptionsMap) {
   const options = definitionOptions || {};
   const global = (globalOptionKeys || []).reduce(
@@ -69,3 +70,23 @@ export function optionValueToStorable(definition, value) {
   }
   return "";
 }
+export function resolveDefinitionString(definitionString, langcode) {
+  if (!definitionString) {
+    return "";
+  }
+  if (typeof definitionString === "string") {
+    return definitionString;
+  }
+  if (langcode) {
+    const translation = definitionString[langcode];
+    if (translation) {
+      return translation;
+    }
+  }
+  const defaultTranslation = definitionString[defaultLanguage];
+  if (defaultTranslation) {
+    return defaultTranslation;
+  }
+  const firstValue = Object.values(definitionString)[0];
+  return firstValue ?? "";
+}

package/dist/runtime/editor/plugins/BlockIndicator/index.d.vue.ts

@@ -26,6 +26,15 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Optional icon to display in the indicator.
      */
     icon?: BlokkliIcon;
+    /**
+     * Keep the indicator visible when the artboard edge is close to the
+     * edge of the visible viewport.
+     *
+     * Instead of moving out of view, the indicator is shifted onto the
+     * artboard so that at least the icon remains visible. Only supported
+     * for left-positioned indicators.
+     */
+    sticky?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<{
@@ -53,9 +62,23 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
      * Optional icon to display in the indicator.
      */
     icon?: BlokkliIcon;
+    /**
+     * Keep the indicator visible when the artboard edge is close to the
+     * edge of the visible viewport.
+     *
+     * Instead of moving out of view, the indicator is shifted onto the
+     * artboard so that at least the icon remains visible. Only supported
+     * for left-positioned indicators.
+     */
+    sticky?: boolean;
 }> & Readonly<{
     onClick?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+}>, {
+    label: string;
+    icon: BlokkliIcon;
+    sticky: boolean;
+    position: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
 type __VLS_WithSlots<T, S> = T & {

package/dist/runtime/editor/plugins/BlockIndicator/index.vue

@@ -2,16 +2,24 @@
   <Teleport to="#bk-indicators-left">
     <div
       ref="el"
-      class="bk-indicator-item"
+      class="bk-indicator-item _bk_absolute _bk_top-0 _bk_pointer-events-auto _bk_cursor-pointer _bk_text-mono-500 _bk_h-30 _bk_flex _bk_items-center _bk_hover:text-mono-950 _bk_group"
+      :class="{
+  '_bk_right-0 _bk_pr-10': position === 'left'
+}"
       @click.prevent="$emit('click')"
       @mouseenter="onMouseEnter"
       @mouseleave="onMouseLeave"
     >
       <slot>
-        <div class="bk-indicator-item-inner">
+        <div
+          class="bk-indicator-item-inner _bk_flex _bk_gap-10 _bk_items-center _bk_text-xs _bk_font-medium"
+        >
           <div v-if="label">{{ label }}</div>
           <div v-if="icon">
-            <Icon :name="icon" />
+            <Icon
+              :name="icon"
+              class="_bk_size-20 _bk_bg-red-normal _bk_text-white _bk_p-2 _bk_rounded-full _bk_group-hover:bg-red-dark"
+            />
           </div>
         </div>
       </slot>
@@ -30,9 +38,10 @@ import { Icon } from "#blokkli/editor/components";
 const props = defineProps({
   id: { type: String, required: true },
   uuid: { type: String, required: true },
-  label: { type: String, required: false },
-  position: { type: String, required: false },
-  icon: { type: null, required: false }
+  label: { type: String, required: false, default: void 0 },
+  position: { type: String, required: false, default: "left" },
+  icon: { type: null, required: false, default: void 0 },
+  sticky: { type: Boolean, required: false, default: false }
 });
 defineEmits(["click"]);
 const { indicators } = useBlokkli();
@@ -49,7 +58,8 @@ onMounted(() => {
       id: props.id,
       uuid: props.uuid,
       position: props.position ?? "left",
-      element: el.value
+      element: el.value,
+      sticky: props.sticky
     });
   }
 });