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

package/dist/runtime/editor/features/debug/Main.vue

@@ -79,170 +79,172 @@ defineItemDropdownAction(() => {
 });
 </script>
 
-<style>
-.bk .bk-debug .bk-debug-section {
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1))
-}
-  .bk .bk-debug .bk-debug-section-header {
-    display: flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    gap: 5px;
-    padding: 20px;
-    font-size: 14px;
-    line-height: 20px;
-    font-weight: 600;
-    text-transform: uppercase
-}
-  .bk .bk-debug .bk-debug-section-header:hover {
-    opacity: 0.8
-}
-  .bk .bk-debug .bk-debug-section-content {
-    padding-left: 20px;
-    padding-right: 20px;
-    padding-bottom: 20px
-}
-  .bk .bk-debug .bk-debug-section-indicator {
-    display: inline-block;
-    width: 15px;
-    font-size: 12px;
-    line-height: 16px
-}
-  .bk .bk-debug .bk-debug-list > div {
-    display: flex;
-    justify-content: space-between
-}
-  .bk .bk-debug .bk-debug-list > div:not(:last-child) {
-    margin-bottom: 5px
-}
-  .bk .bk-debug .bk-debug-features h3 {
-    font-weight: 700
-}
-  .bk .bk-debug .bk-debug-features p {
-    font-size: 14px;
-    line-height: 20px
-}
-  .bk .bk-debug .bk-debug-features > div {
-    display: flex;
-    gap: 5px;
-    border-bottom-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-    padding-top: 10px;
-    padding-bottom: 10px
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk .bk-debug) .bk-debug-section {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(.bk .bk-debug) .bk-debug-section-header {
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  gap: 5px;
+  -webkit-user-select: none;
+  user-select: none;
+  padding: 20px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  text-transform: uppercase;
+}
+:is(:is(.bk .bk-debug) .bk-debug-section-header):hover {
+  opacity: 80%;
+}
+:is(.bk .bk-debug) .bk-debug-section-content {
+  padding-inline: 20px;
+  padding-bottom: 20px;
+}
+:is(.bk .bk-debug) .bk-debug-section-indicator {
+  display: inline-block;
+  width: 15px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+}
+:is(:is(.bk .bk-debug) .bk-debug-list)  > div {
+  display: flex;
+  justify-content: space-between;
+}
+:is(:is(:is(.bk .bk-debug) .bk-debug-list) > div):not(:last-child) {
+  margin-bottom: 5px;
+}
+:is(:is(.bk .bk-debug) .bk-debug-features) h3 {
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(:is(.bk .bk-debug) .bk-debug-features) p {
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+:is(:is(.bk .bk-debug) .bk-debug-features)  > div {
+  display: flex;
+  gap: 5px;
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-block: 10px;
 }
-
 .bk .bk-debug-visible-viewport {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    border-width: 3px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-    background-color: rgb(var(--bk-theme-red-normal) / 0.1)
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk .bk-debug-visible-viewport {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 10%, transparent);
+  }
 }
-
-.bk .bk-debug-visible-viewport > div {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    padding: 2px;
-    font-size: 12px;
-    line-height: 16px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+:is(.bk .bk-debug-visible-viewport)  > div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding: 2px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: white;
 }
-
 .bk .bk-debug-intersection-rects {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    background-color: rgb(var(--bk-theme-yellow-normal) / 0.25);
-    outline-style: solid;
-    outline-offset: -1px;
-    outline-color: rgb(var(--bk-theme-yellow-normal) / 1)
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  background-color: rgb(var(--bk-theme-yellow-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk .bk-debug-intersection-rects {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-normal) / 1) 25%, transparent);
+  }
 }
-
-.bk .bk-debug-visible-viewport-padded {
-    pointer-events: none;
-    position: fixed;
-    z-index: 9999999;
-    border-width: 3px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1))
+.bk .bk-debug-intersection-rects {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-offset: calc(1px * -1);
+  outline-color: rgb(var(--bk-theme-yellow-normal) / 1);
 }
-
-.bk .bk-debug-visible-viewport-padded > div {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    padding: 2px;
-    font-size: 12px;
-    line-height: 16px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1))
+.bk .bk-debug-visible-viewport-padded {
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(.bk .bk-debug-visible-viewport-padded)  > div {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  padding: 2px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: white;
 }
-
 .bk .bk-debug-viewport-blocking-rect {
-    pointer-events: none;
-    position: fixed;
-    z-index: 9999999;
-    border-width: 3px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1))
+  pointer-events: none;
+  position: fixed;
+  z-index: 9999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 3px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
 }
-
 .bk .bk-debug-viewport-lines {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1))
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
 }
-
 .bk ._bk_debug-rect {
-    pointer-events: none;
-    position: fixed;
-    z-index: 999999999999;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
-    background-color: rgb(var(--bk-theme-accent-700) / 0.1)
+  pointer-events: none;
+  position: fixed;
+  z-index: 999999999999;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-accent-700) / 1);
+  background-color: rgb(var(--bk-theme-accent-700) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk ._bk_debug-rect {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-accent-700) / 1) 10%, transparent);
+  }
 }
-
 .bk .bk-debug-icons {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 15px;
-    text-align: center;
-    font-size: 12px;
-    line-height: 16px
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 15px;
+  text-align: center;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
 }
-
-.bk .bk-debug-icons .bk-icon {
-    padding: 10px
+:is(.bk .bk-debug-icons) .bk-icon {
+  padding: 10px;
 }
-
-.bk .bk-debug-icons svg {
-    aspect-ratio: 1 / 1;
-    height: auto;
-    width: 100%
+:is(.bk .bk-debug-icons) svg {
+  aspect-ratio: 1 / 1;
+  height: auto;
+  width: 100%;
 }
-
 .bk .bk-debug-rects {
-    pointer-events: none;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    z-index: 99999999999;
-    height: 100%;
-    width: 100%
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 99999999999;
+  height: 100%;
+  width: 100%;
 }
 </style>

package/dist/runtime/editor/features/debug/Section/Logging.vue

@@ -14,7 +14,7 @@
     </div>
     <div>
       <button
-        class="bk-button bk-is-small"
+        class="bk-button bk-scheme-mono bk-is-light bk-is-small"
         @click.prevent="() => console.log(dom.getDebugData())"
       >
         Log DOM state
@@ -22,7 +22,10 @@
     </div>
 
     <div>
-      <button class="bk-button bk-is-small" @click.prevent="getAllMessages">
+      <button
+        class="bk-button bk-scheme-mono bk-is-light bk-is-small"
+        @click.prevent="getAllMessages"
+      >
         Log all messages
       </button>
     </div>

package/dist/runtime/editor/features/debug/Section/Rendering.vue

@@ -31,7 +31,7 @@
   </div>
   <div>
     <button
-      class="bk-button bk-is-small"
+      class="bk-button bk-scheme-mono bk-is-small"
       @click.prevent="() => dom.updateVisibleRects()"
     >
       Refresh Rects
@@ -39,7 +39,7 @@
   </div>
   <div v-if="animation.hasWebGLContext.value">
     <button
-      class="bk-button bk-is-small"
+      class="bk-button bk-scheme-mono bk-is-light bk-is-small"
       :disabled="!animation.isRenderingWebGL.value"
       @click.prevent="loseContext"
     >
@@ -48,7 +48,7 @@
   </div>
   <div v-if="animation.hasWebGLContext.value">
     <button
-      class="bk-button bk-is-small"
+      class="bk-button bk-scheme-mono bk-is-light bk-is-small"
       :disabled="animation.isRenderingWebGL.value"
       @click.prevent="restoreContext"
     >

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

@@ -2,7 +2,7 @@
   <PluginItemAction
     id="delete"
     edit-only
-    :title="$t('deleteButton', 'Delete')"
+    :title="$t('delete', 'Delete')"
     :disabled="deleteDisabledReason"
     multiple
     key-code="Delete"

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

@@ -110,70 +110,66 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 html.bk-hide-interaction-layers #bk-canvas-overlay {
   visibility: hidden !important;
 }
-  html.bk-hide-interaction-layers .bk-main-canvas {
+html.bk-hide-interaction-layers .bk-main-canvas {
   pointer-events: auto !important;
 }
-
 .bk.bk-dev-mode {
   grid-area: viewport;
   pointer-events: none;
   padding-top: 15px;
 }
-
 .bk.bk-dev-mode .bk-dev-mode-inner {
   pointer-events: auto;
+  -webkit-user-select: text;
   user-select: text;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner .bk-dev-mode-banner {
+:is(.bk.bk-dev-mode .bk-dev-mode-inner) .bk-dev-mode-banner {
   width: 100%;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner code {
+:is(.bk.bk-dev-mode .bk-dev-mode-inner) code {
   border-radius: 4px;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-bg-opacity, 1));
-  padding-left: 3px;
-  padding-right: 3px;
+  background-color: rgb(var(--bk-theme-red-dark) / 1);
+  padding-inline: 3px;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner table {
+:is(.bk.bk-dev-mode .bk-dev-mode-inner) table {
   width: 100%;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner h3 {
+:is(.bk.bk-dev-mode .bk-dev-mode-inner) h3 {
   margin-bottom: 25px;
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 700;
+  font-size: var(--text-xl, 20px);
+  line-height: var(--bk-tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner thead th {
+:is(:is(.bk.bk-dev-mode .bk-dev-mode-inner) thead) th {
   padding-bottom: 5px;
   text-align: left;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
   text-transform: uppercase;
-  letter-spacing: 0.025em;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner tbody td {
-  padding-top: 5px;
-  padding-bottom: 5px;
+:is(:is(.bk.bk-dev-mode .bk-dev-mode-inner) tbody) td {
+  padding-block: 5px;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner td,
-    .bk.bk-dev-mode .bk-dev-mode-inner th {
+:is(.bk.bk-dev-mode .bk-dev-mode-inner) td,:is(.bk.bk-dev-mode .bk-dev-mode-inner) th {
   text-align: left;
 }
-
-.bk.bk-dev-mode .bk-dev-mode-inner tr {
+:is(.bk.bk-dev-mode .bk-dev-mode-inner) tr {
+  border-bottom-style: var(--bk-tw-border-style);
   border-bottom-width: 1px;
-  border-bottom-color: rgb(var(--bk-theme-red-light) / 0.5);
+  border-bottom-color: rgb(var(--bk-theme-red-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk.bk-dev-mode .bk-dev-mode-inner) tr {
+    border-bottom-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 50%, transparent);
+  }
 }
 </style>

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

@@ -1,7 +1,7 @@
 <template>
   <PluginSidebar
     id="diff"
-    :title="$t('diffSidebarTitle', 'Changes')"
+    :title="$t('changes', 'Changes')"
     :tour-text="
   $t('diffSidebarTourText', 'Displays all the changes made during editing.')
 "

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

@@ -359,7 +359,7 @@ onMounted(() => {
     const borderRadius = isTop ? theme.getDraggableStyle(item.element).radiusMin : 4;
     return {
       isTop,
-      from: ui.lowPerformanceMode.value || !mouseInsideBound && !isExisting.value ? to : from,
+      from: ui.lowPerformanceMode.value || !mouseInsideBound && !isExisting.value || item.item.itemType === "existing" && item.item.isCopy ? to : from,
       to,
       width: item.element.offsetWidth,
       height: item.element.offsetHeight,
@@ -393,3 +393,125 @@ onBeforeUnmount(() => {
   });
 });
 </script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk.bk-dragging-overlay-label {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  padding: 8px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-family: PB Inter, sans-serif;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  z-index: calc(var(--bk-z-index-base) + 250000) /* "dragging-overlay" */;
+  background-color: rgb(var(--bk-active-background-color));
+  color: rgb(var(--bk-active-color));
+  filter: drop-shadow(0 0 25px rgb(0 0 0/.1)) drop-shadow(0 8px 10px rgb(0 0 0/.1));
+  outline: 1px solid rgb(var(--bk-active-background-color)/.5);
+  will-change: transform,contents,opacity;
+}
+.bk.bk-dragging-overlay-label>p {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.bk.bk-dragging-overlay-label span.bk-is-block,.bk.bk-dragging-overlay-label span.bk-is-host {
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  max-width: 70px;
+  min-width: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bk.bk-dragging-overlay-label span.bk-is-block:nth-last-child(2),.bk.bk-dragging-overlay-label span.bk-is-host:nth-last-child(2) {
+  max-width: none;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+.bk.bk-dragging-overlay-label span.bk-is-field {
+  min-width: 0px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
+  text-transform: uppercase;
+  padding-inline: 8px;
+  padding-top: 4px;
+  padding-bottom: 2px;
+  background-color: rgb(var(--bk-active-color)/.15);
+  border: 1px solid rgb(var(--bk-active-color)/.25);
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+.bk.bk-dragging-overlay-label span.bk-is-field:last-child {
+  background-color: rgb(var(--bk-active-color));
+  border-color: rgb(var(--bk-active-color));
+  color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label .bk-icon {
+  width: 15px;
+  height: 15px;
+}
+.bk.bk-dragging-overlay-label svg {
+  fill: currentcolor;
+}
+.bk.bk-dragging-overlay-label {
+  --bk-caret-size: 12px;
+  --bk-caret-outline-size: calc(var(--bk-caret-size) + 1px);
+}
+.bk.bk-dragging-overlay-label:after,.bk.bk-dragging-overlay-label:before {
+  content: "";
+  position: absolute;
+  border: var(--bk-caret-size) solid transparent;
+}
+.bk.bk-dragging-overlay-label:before {
+  border-width: var(--bk-caret-outline-size);
+}
+.bk.bk-dragging-overlay-label.bk-is-bottom:after,.bk.bk-dragging-overlay-label.bk-is-bottom:before,.bk.bk-dragging-overlay-label.bk-is-top:after,.bk.bk-dragging-overlay-label.bk-is-top:before {
+  left: calc(1 / 2 * 100%);
+  --bk-tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk.bk-dragging-overlay-label.bk-is-top:before {
+  top: 100%;
+  border-top-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-top:after {
+  top: 100%;
+  border-top-color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label.bk-is-bottom:before {
+  bottom: 100%;
+  border-bottom-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-bottom:after {
+  bottom: 100%;
+  border-bottom-color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label.bk-is-left:after,.bk.bk-dragging-overlay-label.bk-is-left:before,.bk.bk-dragging-overlay-label.bk-is-right:after,.bk.bk-dragging-overlay-label.bk-is-right:before {
+  top: calc(1 / 2 * 100%);
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk.bk-dragging-overlay-label.bk-is-left:before {
+  left: 100%;
+  border-left-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-left:after {
+  left: 100%;
+  border-left-color: rgb(var(--bk-active-background-color));
+}
+.bk.bk-dragging-overlay-label.bk-is-right:before {
+  right: 100%;
+  border-right-color: rgb(var(--bk-active-background-color)/.5);
+}
+.bk.bk-dragging-overlay-label.bk-is-right:after {
+  right: 100%;
+  border-right-color: rgb(var(--bk-active-background-color));
+}
+</style>