@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.53

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.vue

@@ -9,27 +9,41 @@
       }}
     </div>
     <div class="bk bk-diff-approval-toolbar bk-control">
-      <button class="bk-diff-approval-toolbar-nav" @click="$emit('prev')">
+      <button
+        class="bk-diff-approval-toolbar-nav _bk_group/tooltip"
+        @click="$emit('prev')"
+      >
         <Icon name="bk_mdi_chevron_left" />
-        <div class="bk-tooltip">
-          <span>{{ $t("aiAgentApprovalPrevChange", "Previous change") }}</span>
-          <ShortcutIndicator
-            key-code="ArrowLeft"
-            :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
-            @pressed="$emit('prev')"
-          />
-        </div>
+        <Tooltip
+          :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
+          placement="above-left"
+        >
+          <template #shortcut>
+            <ShortcutIndicator
+              key-code="ArrowLeft"
+              :label="$t('aiAgentApprovalPrevChange', 'Previous change')"
+              @pressed="$emit('prev')"
+            />
+          </template>
+        </Tooltip>
       </button>
-      <button class="bk-diff-approval-toolbar-nav" @click="$emit('next')">
+      <button
+        class="bk-diff-approval-toolbar-nav _bk_group/tooltip"
+        @click="$emit('next')"
+      >
         <Icon name="bk_mdi_chevron_right" />
-        <div class="bk-tooltip">
-          <span>{{ $t("aiAgentApprovalNextChange", "Next change") }}</span>
-          <ShortcutIndicator
-            key-code="ArrowRight"
-            :label="$t('aiAgentApprovalNextChange', 'Next change')"
-            @pressed="$emit('next')"
-          />
-        </div>
+        <Tooltip
+          placement="above-left"
+          :label="$t('aiAgentApprovalNextChange', 'Next change')"
+        >
+          <template #shortcut>
+            <ShortcutIndicator
+              key-code="ArrowRight"
+              :label="$t('aiAgentApprovalNextChange', 'Next change')"
+              @pressed="$emit('next')"
+            />
+          </template>
+        </Tooltip>
       </button>
 
       <div class="bk-diff-approval-toolbar-info">
@@ -42,20 +56,24 @@
         </span>
       </div>
 
-      <div class="bk-diff-approval-toolbar-toggle">
+      <div class="bk-diff-approval-toolbar-toggle _bk_group/tooltip">
         <FormToggle
           :model-value="selected[currentItem.id]"
           :label="$t('aiAgentApprovalAccept', 'Accept')"
           @update:model-value="toggleCurrent"
         />
-        <div class="bk-tooltip">
-          <span>{{ $t("aiAgentApprovalToggle", "Toggle approval") }}</span>
-          <ShortcutIndicator
-            key-code="Enter"
-            :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
-            @pressed="toggleCurrent"
-          />
-        </div>
+        <Tooltip
+          :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
+          placement="above-left"
+        >
+          <template #shortcut>
+            <ShortcutIndicator
+              key-code="Enter"
+              :label="$t('aiAgentApprovalToggle', 'Toggle approval')"
+              @pressed="toggleCurrent"
+            />
+          </template>
+        </Tooltip>
       </div>
 
       <div
@@ -84,7 +102,12 @@
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon, FormToggle, ShortcutIndicator } from "#blokkli/editor/components";
+import {
+  Icon,
+  FormToggle,
+  ShortcutIndicator,
+  Tooltip
+} from "#blokkli/editor/components";
 const props = defineProps({
   currentItem: { type: Object, required: true },
   currentIndex: { type: Number, required: true },
@@ -111,3 +134,176 @@ function onReasonInput(event) {
   emit("update:reasons", props.currentItem.id, value);
 }
 </script>
+
+<style>
+.bk.bk-diff-approval-toolbar-hint {
+  grid-area: mode;
+  align-self: flex-start;
+  justify-self: stretch;
+  display: flex;
+  height: 40px;
+  align-items: center;
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  border-top-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-top-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+}
+.bk.bk-diff-approval-toolbar {
+  grid-area: viewport;
+  align-self: end;
+  pointer-events: auto;
+  display: flex;
+  height: 50px;
+  align-items: center;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+  position: relative;
+  user-select: none;
+  margin-left: 15px;
+  margin-right: 15px;
+  margin-bottom: 15px;
+  border-radius: 6px;
+  --bk-tw-shadow: 0 0px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --bk-tw-shadow-colored: 0 0px 25px -5px var(--bk-tw-shadow-color), 0 8px 10px -6px var(--bk-tw-shadow-color);
+  box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+  outline-style: solid;
+  outline-width: 1px;
+  outline-color: rgb(var(--bk-theme-mono-400) / 1);
+
+  color-scheme: dark;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-toggle,
+  .bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav {
+  position: relative;
+  height: 100%;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-toggle {
+  margin-right: auto;
+}
+.bk.bk-diff-approval-toolbar > .bk-button {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav:hover {
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-nav svg {
+  width: 30px;
+  height: 30px;
+  fill: currentColor;
+}
+.bk.bk-diff-approval-toolbar .bk-checkbox-toggle {
+  margin-left: 15px;
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-checkbox-toggle:hover {
+  --bk-tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  height: 100%;
+  border-left-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-left-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-counter {
+  white-space: nowrap;
+  --bk-tw-numeric-spacing: tabular-nums;
+  font-variant-numeric: var(--bk-tw-ordinal) var(--bk-tw-slashed-zero) var(--bk-tw-numeric-figure) var(--bk-tw-numeric-spacing) var(--bk-tw-numeric-fraction);
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-label {
+  white-space: nowrap;
+  font-weight: 500;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason {
+  min-width: 0px;
+  flex: 1 1 0%;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason input {
+  height: 30px;
+  width: 100%;
+  border-radius: 4px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 14px;
+  line-height: 20px;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+  border-width: 1px;
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason input::placeholder {
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-reason input:focus {
+  --bk-tw-border-opacity: 1;
+  border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-apply {
+  margin-left: auto;
+  margin-right: 10px;
+  height: 30px;
+  flex-shrink: 0;
+  border-radius: 4px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-weight: 500;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-mono-950) / var(--bk-tw-text-opacity, 1));
+}
+.bk.bk-diff-approval-toolbar .bk-diff-approval-toolbar-apply:hover {
+  --bk-tw-brightness: brightness(1.1);
+  filter: var(--bk-tw-blur) var(--bk-tw-brightness) var(--bk-tw-contrast) var(--bk-tw-grayscale) var(--bk-tw-hue-rotate) var(--bk-tw-invert) var(--bk-tw-saturate) var(--bk-tw-sepia) var(--bk-tw-drop-shadow);
+}
+</style>

package/dist/runtime/editor/components/DiffViewer/DiffValue.d.vue.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     before: string;
     after: string;
+    afterOnly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/DiffViewer/DiffValue.vue

@@ -7,9 +7,13 @@ import { computed } from "#imports";
 import { computeDiff } from "#blokkli/editor/helpers/diff";
 const props = defineProps({
   before: { type: String, required: true },
-  after: { type: String, required: true }
+  after: { type: String, required: true },
+  afterOnly: { type: Boolean, required: false }
 });
 const diffHtml = computed(() => {
+  if (props.afterOnly) {
+    return "<ins>" + props.after + "</ins>";
+  }
   return computeDiff(props.before, props.after);
 });
 </script>

package/dist/runtime/editor/components/DiffViewer/DiffValue.vue.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     before: string;
     after: string;
+    afterOnly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/DiffViewer/State.vue

@@ -247,3 +247,322 @@ function scrollToBlock(uuid) {
   eventBus.emit("select", uuid);
 }
 </script>
+
+<style>
+/* Diff display in the artboard (page content), outside the .bk editor scope. */
+[data-bk-diff-active] del {
+    color: rgb(var(--bk-theme-red-normal) / 0.5);
+    text-decoration-line: line-through;
+    text-decoration-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+[data-bk-diff-active] ins {
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: rgb(var(--bk-theme-lime-normal) / 0.3);
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
+    text-decoration-line: none;
+}
+.bk.bk-diff-sidebar-pane {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    overscroll-behavior: contain;
+}
+.bk.bk-diff-view {
+    user-select: text;
+    container-type: inline-size;
+}
+.bk.bk-diff-view .bk-blokkli-item-label {
+    flex: 1 1 0%;
+    font-weight: 600;
+}
+.bk.bk-diff-view .bk-blokkli-item-label span {
+    line-height: 1;
+}
+.bk.bk-diff-view .bk-blokkli-item-label[disabled] {
+    pointer-events: none;
+}
+.bk .bk-diff-mode-selector {
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding: 20px;
+}
+.bk .bk-diff-table {
+    width: 100%;
+}
+.bk .bk-diff-item {
+    width: 100%;
+    border-top-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-item:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
+}
+.bk .bk-diff-item.bk-is-muted .bk-diff-item-diffs,
+      .bk .bk-diff-item.bk-is-muted .bk-diff-status {
+    opacity: 0.5;
+}
+.bk .bk-diff-item.bk-is-muted .bk-blokkli-item-label span {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-item-diffs {
+  }
+.bk .bk-diff-item-header {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: 20px;
+}
+.bk .bk-diff-item-header.bk-is-selected .bk-blokkli-item-label-icon {
+    border-color: rgb(var(--bk-theme-orange-dark) / 0.3);
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-orange-normal) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-orange-dark) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-prop-row {
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 20px;
+}
+.bk .bk-diff-prop-row h3 {
+    margin-bottom: 5px;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 600;
+}
+.bk .bk-diff-monospace {
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 20px;
+}
+.bk .bk-diff-markup-style p,
+    .bk .bk-diff-markup-style ul,
+    .bk .bk-diff-markup-style ol,
+    .bk .bk-diff-markup-style h1,
+    .bk .bk-diff-markup-style h2,
+    .bk .bk-diff-markup-style h3,
+    .bk .bk-diff-markup-style h4,
+    .bk .bk-diff-markup-style h5,
+    .bk .bk-diff-markup-style h6 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+.bk .bk-diff-markup-style p:first-child,
+    .bk .bk-diff-markup-style ul:first-child,
+    .bk .bk-diff-markup-style ol:first-child,
+    .bk .bk-diff-markup-style h1:first-child,
+    .bk .bk-diff-markup-style h2:first-child,
+    .bk .bk-diff-markup-style h3:first-child,
+    .bk .bk-diff-markup-style h4:first-child,
+    .bk .bk-diff-markup-style h5:first-child,
+    .bk .bk-diff-markup-style h6:first-child {
+    margin-top: 0px;
+}
+.bk .bk-diff-markup-style p:last-child,
+    .bk .bk-diff-markup-style ul:last-child,
+    .bk .bk-diff-markup-style ol:last-child,
+    .bk .bk-diff-markup-style h1:last-child,
+    .bk .bk-diff-markup-style h2:last-child,
+    .bk .bk-diff-markup-style h3:last-child,
+    .bk .bk-diff-markup-style h4:last-child,
+    .bk .bk-diff-markup-style h5:last-child,
+    .bk .bk-diff-markup-style h6:last-child {
+    margin-bottom: 0px;
+}
+.bk .bk-diff-markup-style h1,
+    .bk .bk-diff-markup-style h2,
+    .bk .bk-diff-markup-style h3,
+    .bk .bk-diff-markup-style h4,
+    .bk .bk-diff-markup-style h5,
+    .bk .bk-diff-markup-style h6 {
+    line-height: 1.25;
+}
+.bk .bk-diff-markup-style p,
+    .bk .bk-diff-markup-style ul,
+    .bk .bk-diff-markup-style ol {
+    line-height: 1.5;
+}
+.bk .bk-diff-markup-style h2 {
+    font-size: 1.7em;
+    font-weight: 700;
+}
+.bk .bk-diff-markup-style h3 {
+    font-size: 1.5em;
+    font-weight: 700;
+}
+.bk .bk-diff-markup-style h4 {
+    font-size: 1.3em;
+    font-weight: 700;
+}
+.bk .bk-diff-markup-style ul {
+    margin-left: 18px;
+    list-style-type: disc;
+}
+.bk .bk-diff-markup-style ol {
+    margin-left: 30px;
+    list-style-type: decimal;
+}
+.bk .bk-diff-markup-style a {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-text-opacity, 1));
+    text-decoration-line: underline;
+}
+.bk .bk-diff-markup-style blockquote {
+    border-left-width: 6px;
+    --bk-tw-border-opacity: 1;
+    border-left-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding-left: 20px;
+}
+.bk .bk-diff-markup-style pre {
+    width: 100%;
+    max-width: 100%;
+    white-space: break-spaces;
+    overflow-wrap: break-word;
+      word-break: break-all;
+}
+.bk .bk-diff-value {
+    display: inline;
+    word-break: break-word;
+}
+.bk .bk-diff-value .bk-is-clipped del {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+}
+.bk .bk-diff-value del {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+    text-decoration-line: line-through;
+}
+.bk .bk-diff-value del:has(img) {
+    display: block;
+    max-width: 300px;
+    overflow: hidden;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+    border-width: 2px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
+}
+.bk .bk-diff-value del:has(img) img {
+          opacity: 0.7;
+        }
+.bk .bk-diff-value ins {
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: rgb(var(--bk-theme-lime-normal) / 0.3);
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
+    text-decoration-line: none;
+}
+.bk .bk-diff-value ins:has(img) {
+    border-width: 2px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
+    display: block;
+    max-width: 300px;
+    overflow: hidden;
+}
+.bk .bk-diff-value del:has(img) + ins:has(img) {
+    margin-top: 15px;
+}
+.bk .bk-diff-prop-side-by-side {
+    display: grid;
+    gap: 10px;
+}
+@container (min-width: 700px) {
+.bk .bk-diff-prop-side-by-side {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    }
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-before,
+    .bk .bk-diff-prop-side-by-side .bk-diff-prop-after {
+    border-radius: 4px;
+    border-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding: 10px;
+}
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-before {
+    background-color: rgb(var(--bk-theme-red-light) / 0.2);
+}
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-before .bk-diff-prop-label {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-after {
+    background-color: rgb(var(--bk-theme-lime-light) / 0.2);
+}
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-after .bk-diff-prop-label {
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-label {
+    margin-bottom: 5px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-prop-side-by-side .bk-diff-prop-content {
+      word-break: break-word;
+    }
+.bk .bk-diff-prop-after-only .bk-diff-prop-content {
+    border-radius: 4px;
+    border-width: 1px;
+    border-color: rgb(var(--bk-theme-lime-normal) / 0.3);
+    background-color: rgb(var(--bk-theme-lime-light) / 0.2);
+    padding: 10px;
+      word-break: break-word;
+}
+.bk .bk-diff-status-label {
+    display: inline-block;
+    --bk-tw-translate-y: -3px;
+    transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+    border-radius: 9999px;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-status-label.bk-is-added {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+.bk .bk-diff-status-label.bk-is-removed {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
+}
+</style>