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

package/dist/runtime/editor/components/DiffApproval/index.vue.d.ts

@@ -1,6 +1,22 @@
 import type { ApprovalItem } from './types.js';
 type __VLS_Props = {
     items: ApprovalItem[];
+    /**
+     * Whether to show the per-item rejection reason input.
+     *
+     * Used by the agent tools to feed feedback back to the LLM. Leave it off when
+     * changes are applied directly with no agent loop.
+     */
+    showReason?: boolean;
+    /**
+     * Render the new value entirely as an insertion (<ins>) instead of a diff
+     * against the original.
+     *
+     * For features like translation the new text bears little resemblance to the
+     * original, so a word-level diff is just noise. Enabling this shows the new
+     * value as a single insertion in the preview.
+     */
+    insertionsOnly?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     cancel: () => any;

package/dist/runtime/editor/components/DiffViewer/DiffDisplay/index.vue

@@ -9,7 +9,7 @@
     </div>
     <div class="bk-diff-prop-after">
       <div class="bk-diff-prop-label">
-        {{ $t("diffAfter", "After") }}
+        {{ $t("after", "After") }}
       </div>
       <div class="bk-diff-prop-content bk-diff-markup-style" v-html="after" />
     </div>

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

@@ -5,7 +5,7 @@
         id="diff-viewer-state-display"
         v-model="diffMode"
         :options="diffModeOptions"
-        :label="$t('diffModeLabel', 'Display')"
+        :label="$t('display', 'Display')"
         :scheme
       />
     </div>
@@ -105,7 +105,7 @@ const diffModeOptions = computed(() => [
   },
   {
     value: "after",
-    label: $t("diffModeAfter", "After")
+    label: $t("after", "After")
   }
 ]);
 const emit = defineEmits(["toggle"]);
@@ -248,305 +248,302 @@ function scrollToBlock(uuid) {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .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 {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+.bk.bk-diff-view {
+  -webkit-user-select: text;
+  user-select: text;
+  container-type: inline-size;
+}
+.bk.bk-diff-view .bk-blokkli-item-label {
+  flex: 1;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+}
+:is(.bk.bk-diff-view .bk-blokkli-item-label) span {
+  --bk-tw-leading: 1;
+  line-height: 1;
+}
+[disabled]:is(.bk.bk-diff-view .bk-blokkli-item-label) {
+  pointer-events: none;
+}
+.bk .bk-diff-mode-selector {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 20px;
+}
+.bk .bk-diff-table {
+  width: 100%;
+}
+.bk .bk-diff-item {
+  width: 100%;
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+  color: rgb(var(--bk-theme-mono-900) / 1);
+}
+@media (hover: hover) {
+  :is(.bk .bk-diff-item):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
   }
-  .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;
+.bk-is-muted:is(.bk .bk-diff-item) .bk-diff-item-diffs,.bk-is-muted:is(.bk .bk-diff-item) .bk-diff-status {
+  opacity: 50%;
+}
+.bk-is-muted:is(.bk .bk-diff-item) .bk-blokkli-item-label span {
+  color: rgb(var(--bk-theme-mono-400) / 1);
+}
+.bk .bk-diff-item-header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  padding: 20px;
+}
+.bk-is-selected:is(.bk .bk-diff-item-header) .bk-blokkli-item-label-icon {
+  border-color: rgb(var(--bk-theme-orange-dark) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-selected:is(.bk .bk-diff-item-header) .bk-blokkli-item-label-icon {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-orange-dark) / 1) 30%, transparent);
+  }
+}
+.bk-is-selected:is(.bk .bk-diff-item-header) .bk-blokkli-item-label-icon {
+  background-color: rgb(var(--bk-theme-orange-normal) / 1);
+  color: rgb(var(--bk-theme-orange-dark) / 1);
+}
+.bk .bk-diff-prop-row {
+  padding-inline: 20px;
+  margin-bottom: 20px;
+}
+:is(.bk .bk-diff-prop-row) h3 {
+  margin-bottom: 5px;
+  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);
+}
+.bk .bk-diff-monospace {
+  font-family: monospace;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol,:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6 {
+  margin-block: 20px;
+}
+:is(:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol,:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6):first-child {
+  margin-top: 0px;
+}
+:is(:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol,:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6):last-child {
+  margin-bottom: 0px;
+}
+:is(.bk .bk-diff-markup-style) h1,:is(.bk .bk-diff-markup-style) h2,:is(.bk .bk-diff-markup-style) h3,:is(.bk .bk-diff-markup-style) h4,:is(.bk .bk-diff-markup-style) h5,:is(.bk .bk-diff-markup-style) h6 {
+  --bk-tw-leading: var(--leading-tight, 1.25);
+  line-height: var(--leading-tight, 1.25);
+}
+:is(.bk .bk-diff-markup-style) p,:is(.bk .bk-diff-markup-style) ul,:is(.bk .bk-diff-markup-style) ol {
+  --bk-tw-leading: var(--leading-normal, 1.5);
+  line-height: var(--leading-normal, 1.5);
+}
+:is(.bk .bk-diff-markup-style) h2 {
+  font-size: 1.7em;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-diff-markup-style) h3 {
+  font-size: 1.5em;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-diff-markup-style) h4 {
+  font-size: 1.3em;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+}
+:is(.bk .bk-diff-markup-style) ul {
+  margin-left: 18px;
+  list-style-type: disc;
+}
+:is(.bk .bk-diff-markup-style) ol {
+  margin-left: 30px;
+  list-style-type: decimal;
+}
+:is(.bk .bk-diff-markup-style) a {
+  color: rgb(var(--bk-theme-accent-700) / 1);
+  text-decoration-line: underline;
+}
+:is(.bk .bk-diff-markup-style) blockquote {
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 6px;
+  border-left-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding-left: 20px;
+}
+:is(.bk .bk-diff-markup-style) pre {
+  width: 100%;
+  max-width: 100%;
+  overflow-wrap: break-word;
+  white-space: break-spaces;
+  word-break: break-all;
+}
+.bk .bk-diff-value {
+  display: inline;
+  word-break: break-word;
+}
+:is(:is(.bk .bk-diff-value) .bk-is-clipped) del {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+:is(.bk .bk-diff-value) del {
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  text-decoration-line: line-through;
+}
+:is(:is(.bk .bk-diff-value) del):has(img) {
+  display: block;
+  max-width: 300px;
+  overflow: hidden;
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  border-style: var(--bk-tw-border-style);
+  border-width: 2px;
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(:is(.bk .bk-diff-value) del):has(img) img {
+  opacity: 0.7;
+}
+:is(.bk .bk-diff-value) ins {
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-value) ins {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 30%, transparent);
+  }
+}
+:is(.bk .bk-diff-value) ins {
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+  color: rgb(var(--bk-theme-lime-dark) / 1);
+  text-decoration-line: none;
+}
+:is(:is(.bk .bk-diff-value) ins):has(img) {
+  border-style: var(--bk-tw-border-style);
+  border-width: 2px;
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+  display: block;
+  max-width: 300px;
+  overflow: hidden;
+}
+:is(.bk .bk-diff-value) del:has(img) + ins:has(img) {
+  margin-top: 15px;
 }
-  @container (min-width: 700px) {
+.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));
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before,:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after {
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 10px;
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before {
+  background-color: rgb(var(--bk-theme-red-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 20%, transparent);
+  }
+}
+:is(:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-before) .bk-diff-prop-label {
+  color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after {
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-lime-light) / 1) 20%, transparent);
+  }
+}
+:is(:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-after) .bk-diff-prop-label {
+  color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-label {
+  margin-bottom: 5px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  --bk-tw-tracking: var(--tracking-wider, 0.05em);
+  letter-spacing: var(--tracking-wider, 0.05em);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  text-transform: uppercase;
+}
+:is(.bk .bk-diff-prop-side-by-side) .bk-diff-prop-content {
+  word-break: break-word;
+}
+:is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-lime-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+    border-color: color-mix(in oklab, rgb(var(--bk-theme-lime-normal) / 1) 30%, transparent);
+  }
+}
+:is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+  background-color: rgb(var(--bk-theme-lime-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-lime-light) / 1) 20%, transparent);
+  }
+}
+:is(.bk .bk-diff-prop-after-only) .bk-diff-prop-content {
+  padding: 10px;
+  word-break: break-word;
+}
+.bk .bk-diff-status-label {
+  display: inline-block;
+  --bk-tw-translate-y: -3px;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  border-radius: calc(infinity * 1px);
+  padding-inline: 7px;
+  padding-block: 2px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  --bk-tw-tracking: var(--tracking-wider, 0.05em);
+  letter-spacing: var(--tracking-wider, 0.05em);
+  text-transform: uppercase;
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+.bk-is-added:is(.bk .bk-diff-status-label) {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+  color: white;
+}
+.bk-is-removed:is(.bk .bk-diff-status-label) {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: white;
 }
 </style>

package/dist/runtime/editor/{features/analyze/Summary/Chart.d.vue.ts → components/DonutChart/index.d.vue.ts}

@@ -1,18 +1,18 @@
-interface DataItem {
+type DataItem = {
     label: string;
     value: number;
     color: string;
-}
+};
 type __VLS_Props = {
     data: DataItem[];
     radius?: number;
     thickness?: number;
-    percentage?: number;
+    centerText?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     radius: number;
     thickness: number;
-    percentage: number;
+    centerText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;