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

package/dist/runtime/editor/events/index.d.ts

@@ -203,6 +203,8 @@ export interface EventbusEvents {
     'select:toggle': string;
     'select:shiftToggle': string;
     'select:end': string[] | undefined;
+    'select:next': string[] | undefined;
+    'select:prev': string[] | undefined;
     'overlay:close': undefined;
     'item:dropped': undefined;
     'block:append': BlockAppendEvent;
@@ -260,6 +262,14 @@ export interface EventbusEvents {
         uuid: string;
     };
     'block:rerender': string[];
+    'analyze:ignore': {
+        resultId: string;
+        identifier: string;
+    };
+    'analyze:unignore': {
+        resultId: string;
+        identifier: string;
+    };
 }
 type EventbusEventsType = {
     [K in keyof EventbusEvents]: EventbusEvents[K];

package/dist/runtime/editor/features/add-list/Help/index.vue

@@ -125,3 +125,196 @@ useAnimationFrame(() => {
   }
 });
 </script>
+
+<style>
+.bk.bk-add-list-help {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      z-index: calc(var(--bk-z-index-base) + 200000) /* "add-list-info" */;
+      will-change: transform;
+      width: 750px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-item {
+      padding: 15px;
+      --bk-tw-contain-paint: paint;
+      contain: var(--bk-tw-contain-size) var(--bk-tw-contain-layout) var(--bk-tw-contain-paint) var(--bk-tw-contain-style);
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-item:has(.bk-add-list-help-fields) .bk-add-list-help-image {
+      margin-bottom: 20px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-label {
+      margin-bottom: 10px;
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      --bk-tw-text-opacity: 1;
+      color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-inner {
+      position: relative;
+      will-change: transform;
+      background-color: rgb(var(--bk-theme-mono-950) / 0.9);
+      --bk-tw-text-opacity: 1;
+      color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
+      --bk-tw-backdrop-blur: blur(12px);
+      -webkit-backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
+      backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
+      overflow: hidden;
+      border-radius: 8px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-content {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      right: 0px;
+      display: grid;
+      align-items: flex-start;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-content .bk-add-list-help-item {
+      grid-area: 1 / 1;
+    }
+
+  .bk.bk-add-list-help hr {
+      margin-top: 20px;
+      margin-bottom: 20px;
+      border-top-width: 1px;
+      --bk-tw-border-opacity: 1;
+      border-top-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+}
+
+  .bk.bk-add-list-help h2 {
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 700;
+      line-height: 1;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      gap: 15px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-description {
+      user-select: text;
+      font-size: 16px;
+      line-height: 24px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-description p + p {
+      margin-top: 15px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-image {
+      overflow: hidden;
+      border-radius: 6px;
+      --bk-tw-bg-opacity: 1;
+      background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+      float: right;
+      margin-left: 20px;
+      height: 200px;
+      width: 300px;
+      outline-style: solid;
+      outline-width: 1px;
+      outline-color: rgb(var(--bk-theme-mono-700) / 1);
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-image:has(.bk-blokkli-item-icon) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      --bk-tw-bg-opacity: 1;
+      background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-image .bk-blokkli-item-icon {
+      width: 100px;
+      height: 100px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-image .bk-blokkli-item-icon svg {
+      fill: rgb(var(--bk-theme-mono-500) / 1);
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-image img {
+      width: 100%;
+      height: 100%;
+      border-width: 0;
+      object-fit: contain;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-fields-item {
+      display: flex;
+      flex-wrap: wrap;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-fields-item ul {
+      display: flex;
+      flex-wrap: wrap;
+      column-gap: 15px;
+      row-gap: 10px;
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-fields-item li.bk-is-bundle {
+      display: inline-flex;
+      gap: 5px;
+      font-weight: 500;
+      --bk-tw-text-opacity: 1;
+      color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-fields-item li.bk-is-field {
+      display: inline-block;
+      text-transform: uppercase;
+      min-width: 0px;
+      font-size: 12px;
+      line-height: 16px;
+      letter-spacing: 0.025em;
+      border-radius: 6px;
+      padding-left: 8px;
+      padding-right: 8px;
+      padding-top: 4px;
+      padding-bottom: 2px;
+      border-width: 1px;
+      font-weight: 500;
+      background-color: rgb(var(--bk-theme-mono-800) / 0.6);
+      --bk-tw-text-opacity: 1;
+      color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+      --bk-tw-border-opacity: 1;
+      border-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+}
+
+  .bk.bk-add-list-help .bk-add-list-help-fields-item + .bk-add-list-help-fields-item {
+      margin-top: 20px;
+}
+
+.bk-add-list-help-enter-active .bk-add-list-help-inner, .bk-add-list-help-leave-active .bk-add-list-help-inner {
+      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-duration: 200ms;
+      transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+
+.bk-add-list-help-enter-from,
+.bk-add-list-help-leave-to {
+}
+
+.bk-add-list-help-enter-from .bk-add-list-help-inner {
+      --bk-tw-translate-x: -30px;
+      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));
+      opacity: 0;
+}
+
+.bk-add-list-help-leave-to .bk-add-list-help-inner {
+      --bk-tw-translate-x: -100px;
+      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));
+      opacity: 0;
+}
+</style>

package/dist/runtime/editor/features/add-list/index.vue

@@ -303,3 +303,444 @@ export default {
   name: "AddList"
 };
 </script>
+
+<style>
+.bk.bk-add-list {
+
+  pointer-events: auto;
+
+  z-index: calc(var(--bk-z-index-base) + 190000) /* "add-list" */;
+
+  --bk-tw-bg-opacity: 1;
+
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+
+  position: relative;
+
+  height: 100%;
+
+  width: var(--bk-toolbar-left-width);
+
+  grid-area: left;
+}
+
+  .bk.bk-add-list .bk-add-item {
+
+  cursor: grab;
+}
+
+  .bk.bk-add-list .bk-add-item-description {
+
+  display: block;
+
+  position: absolute;
+
+  left: 100%;
+}
+
+  .bk.bk-add-list #blokkli-add-list-blocks {
+
+  display: grid;
+
+  padding-bottom: 25px;
+}
+
+  .bk.bk-add-list #blokkli-add-list-actions {
+
+  display: grid;
+
+  position: sticky;
+
+  bottom: 0px;
+
+  z-index: 50;
+
+  border-top-width: 1px;
+
+  --bk-tw-border-opacity: 1;
+
+  border-top-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
+
+  --bk-tw-bg-opacity: 1;
+
+  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+
+  margin-top: auto;
+}
+
+  .bk.bk-add-list #blokkli-add-list-actions .bk-add-item-label {
+
+  --bk-tw-text-opacity: 1;
+
+  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-add-list #blokkli-add-list-actions .bk-add-item-label .bk-icon {
+
+  --bk-tw-bg-opacity: 1;
+
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+}
+
+  .bk.bk-add-list #blokkli-add-list-actions .bk-item-icon {
+      --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-900) / 1);
+    }
+
+  .bk.bk-add-list #blokkli-add-list-actions:after {
+      content: '';
+      pointer-events: none;
+      position: sticky;
+      bottom: 0px;
+      z-index: 50;
+      display: block;
+      height: 40px;
+      width: 100%;
+      position: absolute;
+      bottom: 100%;
+      left: 0px;
+      margin-bottom: 1px;
+      background: linear-gradient(
+        rgb(var(--bk-theme-mono-900) / 0) 30%,
+        rgb(var(--bk-theme-mono-900) / 1)
+      );
+    }
+
+.bk .bk-add-item-label, .bk-vars .bk-add-item-label {
+
+  display: flex;
+
+  flex: 1 1 0%;
+
+  align-items: center;
+
+  gap: 8px;
+
+  padding-right: 25px;
+}
+
+.bk .bk-add-item-description, .bk-vars .bk-add-item-description {
+
+  display: none;
+}
+
+.bk .bk-add-list-inner {
+
+  position: absolute;
+
+  top: 0px;
+
+  left: 0px;
+
+  height: 100%;
+
+  width: auto;
+
+  overflow: auto;
+
+  transition-property: all;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-duration: 200ms;
+
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+
+  --bk-tw-bg-opacity: 1;
+
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+
+  display: flex;
+
+  flex-direction: column;
+
+  border-top-width: 1px;
+
+  --bk-tw-border-opacity: 1;
+
+  border-top-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-border-opacity, 1));
+  clip-path: rect(0px var(--bk-toolbar-left-width) 100% 0px);
+}
+
+.bk .bk-add-list-inner .bk-add-item-label {
+
+  opacity: 0;
+}
+
+.bk .bk-add-list-inner .bk-add-item:not(:last-child) {
+    margin-bottom: calc(var(--bk-add-item-icon-padding) * -1);
+  }
+
+.bk .bk-add-list-inner.bk-is-active {
+    clip-path: rect(0px 100% 100% 0px);
+  }
+
+.bk .bk-add-list-inner::-webkit-scrollbar {
+    display: none;
+  }
+
+.bk .bk-add-list-inner .bk-add-item-icon, .bk-vars.bk-dragging-overlay .bk-add-item-icon {
+
+  width: var(--bk-toolbar-left-width);
+
+  height: var(--bk-toolbar-left-width);
+    padding: var(--bk-add-item-icon-padding);
+}
+
+.bk .bk-add-list-inner.bk-is-active .bk-add-item-label, .bk-vars.bk-dragging-overlay .bk-add-item-label {
+
+  opacity: 1 !important;
+}
+
+.bk .bk-add-item:hover .bk-add-item, .bk-vars.bk-dragging-overlay .bk-add-item {
+
+  opacity: 1 !important;
+}
+
+.bk .bk-add-item:hover .bk-add-item-label, .bk-vars.bk-dragging-overlay .bk-add-item-label {
+
+  --bk-tw-text-opacity: 1 !important;
+
+  color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1)) !important;
+}
+
+.bk .bk-add-item {
+
+  position: relative;
+
+  overflow: hidden;
+
+  --bk-tw-bg-opacity: 1;
+
+  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
+
+  display: flex;
+
+  width: 100%;
+
+  min-width: fit-content;
+
+  align-items: center;
+
+  white-space: nowrap;
+}
+
+.bk .bk-add-item.bk-is-action {
+
+  --bk-tw-bg-opacity: 1;
+
+  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
+}
+
+.bk .bk-add-item.bk-is-disabled {
+
+  opacity: 0.3;
+}
+
+.bk .bk-add-item.bk-is-disabled:hover {
+
+  opacity: 1;
+}
+
+.bk .bk-add-item-label {
+
+  padding-left: 3px;
+
+  font-weight: 600;
+
+  --bk-tw-text-opacity: 1;
+
+  color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+
+  transition-property: opacity;
+
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+
+  transition-duration: 200ms;
+    font-size: var(--bk-add-item-font-size, 18px);
+}
+
+.bk .bk-add-item-icon {
+
+  position: relative;
+
+  z-index: 50;
+
+  flex-shrink: 0;
+}
+
+.bk-item-icon-hover-parent:hover .bk-item-icon, .bk-add-item:hover .bk-item-icon, .bk-add-item:focus-visible .bk-item-icon, .bk-vars .bk-dragging-overlay .bk-item-icon {
+
+  outline-style: solid;
+
+  outline-color: rgb(255 255 255 / 0.4);
+    outline-width: var(--bk-item-icon-outline);
+    outline-offset: calc(var(--bk-item-icon-outline) * -1);
+}
+
+.bk-item-icon-hover-parent:hover .bk-item-icon svg, .bk-add-item:hover .bk-item-icon svg, .bk-add-item:focus-visible .bk-item-icon svg, .bk-vars .bk-dragging-overlay .bk-item-icon svg {
+
+  opacity: 1 !important;
+}
+
+.bk-vars.bk-dragging-overlay .bk-add-item {
+
+  overflow: hidden;
+
+  border-radius: 8px;
+}
+
+.bk .bk-item-icon {
+  --bk-item-icon-outline: 2px;
+  --bk-item-icon-size: calc(
+    var(--bk-toolbar-left-width) - 2 * (var(--bk-add-item-icon-padding, 0px))
+  );
+  --bk-item-icon-radius-base: var(--bk-item-icon-radius-base-toolbar, 8px);
+  --bk-item-icon-radius-multiplier: 1;
+  --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-950) / 1);
+  display: flex;
+  aspect-ratio: 1 / 1;
+  align-items: center;
+  justify-content: center;
+  border-width: 1px;
+  --bk-tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--bk-tw-bg-opacity, 1));
+  background-image: linear-gradient(to bottom, var(--bk-tw-gradient-stops));
+  width: var(--bk-item-icon-size);
+  height: var(--bk-item-icon-size);
+  box-shadow: 0 2px 3px 1px var(--bk-item-icon-shadow-color);
+  border-radius: calc(
+    var(--bk-item-icon-radius-base) * var(--bk-item-icon-radius-multiplier)
+  );
+}
+
+@supports (corner-shape: squircle) {
+
+.bk .bk-item-icon {
+    corner-shape: squircle;
+    --bk-item-icon-radius-multiplier: 2.25
+}
+  }
+
+.bk .bk-item-icon.bk-is-small {
+    --bk-item-icon-outline: 1px;
+    --bk-item-icon-size: 35px;
+    --bk-item-icon-radius-base: 6px;
+    box-shadow: 0 1px 1px 1px var(--bk-item-icon-shadow-color);
+  }
+
+.bk .bk-item-icon.bk-is-small svg {
+      filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+    }
+
+.bk .bk-item-icon.bk-is-tiny {
+    --bk-item-icon-outline: 1px;
+    --bk-item-icon-size: 25px;
+    --bk-item-icon-radius-base: 5px;
+    box-shadow: 0 1px 1px 1px var(--bk-item-icon-shadow-color);
+  }
+
+.bk .bk-item-icon.bk-is-tiny svg {
+      filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+    }
+
+.bk .bk-item-icon > .bk-blokkli-item-icon,
+  .bk .bk-item-icon > .bk-icon {
+
+  width: 66.6666666%;
+
+  height: 66.6666666%;
+}
+
+.bk .bk-item-icon {
+
+  --bk-item-icon-shadow-color: rgb(var(--bk-theme-mono-950) / 1);
+}
+
+.bk .bk-item-icon svg {
+
+  width: 100%;
+
+  height: 100%;
+
+  fill: currentColor;
+
+  opacity: 0.8;
+    filter: drop-shadow(0px -1px 0px var(--bk-item-icon-shadow-color));
+}
+
+.bk .bk-item-icon.bk-is-default {
+
+  border-color: rgb(var(--bk-theme-mono-100) / 0.4);
+
+  --bk-tw-text-opacity: 1;
+
+  color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
+
+  --bk-tw-gradient-from: rgb(var(--bk-theme-mono-800) / 1) var(--bk-tw-gradient-from-position);
+
+  --bk-tw-gradient-to: rgb(var(--bk-theme-mono-800) / 0) var(--bk-tw-gradient-to-position);
+
+  --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+
+  --bk-tw-gradient-to: rgb(var(--bk-theme-mono-600) / 1) var(--bk-tw-gradient-to-position);
+}
+
+.bk .bk-item-icon.bk-is-yellow {
+    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+    border-color: rgb(var(--bk-theme-yellow-normal) / 0.5);
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1));
+    --bk-tw-gradient-from: rgb(var(--bk-theme-yellow-normal) / 0.25) var(--bk-tw-gradient-from-position);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-yellow-normal) / 0) var(--bk-tw-gradient-to-position);
+    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-yellow-normal) / 0.4) var(--bk-tw-gradient-to-position);
+  }
+
+.bk .bk-item-icon.bk-is-rose {
+    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-red-light) / var(--bk-tw-text-opacity, 1));
+    --bk-tw-gradient-from: rgb(var(--bk-theme-red-normal) / 0.5) var(--bk-tw-gradient-from-position);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-red-normal) / 0) var(--bk-tw-gradient-to-position);
+    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-red-normal) / 0.7) var(--bk-tw-gradient-to-position);
+  }
+
+.bk .bk-item-icon.bk-is-lime {
+    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-text-opacity, 1));
+    --bk-tw-gradient-from: rgb(var(--bk-theme-lime-normal) / 0.5) var(--bk-tw-gradient-from-position);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-lime-normal) / 0) var(--bk-tw-gradient-to-position);
+    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-lime-normal) / 0.7) var(--bk-tw-gradient-to-position);
+  }
+
+.bk .bk-item-icon.bk-is-accent {
+    --bk-item-icon-shadow-color: rgb(var(--bk-theme-accent-900) / 1);
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-accent-400) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-accent-50) / var(--bk-tw-text-opacity, 1));
+    --bk-tw-gradient-from: rgb(var(--bk-theme-accent-800) / 1) var(--bk-tw-gradient-from-position);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-accent-800) / 0) var(--bk-tw-gradient-to-position);
+    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-accent-600) / 1) var(--bk-tw-gradient-to-position);
+  }
+
+.bk .bk-item-icon.bk-is-orange {
+    --bk-item-icon-shadow-color: rgba(0, 0, 0, 0.2);
+    --bk-tw-border-opacity: 1;
+    border-color: rgb(var(--bk-theme-orange-normal) / var(--bk-tw-border-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-orange-light) / var(--bk-tw-text-opacity, 1));
+    --bk-tw-gradient-from: rgb(var(--bk-theme-orange-normal) / 0.5) var(--bk-tw-gradient-from-position);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-orange-normal) / 0) var(--bk-tw-gradient-to-position);
+    --bk-tw-gradient-stops: var(--bk-tw-gradient-from), var(--bk-tw-gradient-to);
+    --bk-tw-gradient-to: rgb(var(--bk-theme-orange-normal) / 0.7) var(--bk-tw-gradient-to-position);
+  }
+</style>

package/dist/runtime/editor/features/analyze/Ignored/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { AnalyzeResultMapped } from '../analyzers/types.js';
+type __VLS_Props = {
+    results: AnalyzeResultMapped[];
+};
+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;
+export default _default;

package/dist/runtime/editor/features/analyze/Ignored/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <details class="bk-analyze-results">
+    <summary>
+      <div>
+        <span>{{ $t("analyzeIgnoredResults", "Ignored") }}</span>
+        <div>
+          <span class="bk-pill">{{ totalCount }}</span>
+        </div>
+      </div>
+      <Icon name="bk_mdi_arrow_drop_down" />
+    </summary>
+    <ul>
+      <li>
+        <ResultsItem
+          v-for="result in results"
+          v-bind="result"
+          :key="result.id"
+        />
+      </li>
+    </ul>
+  </details>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import ResultsItem from "../Results/ResultsItem.vue";
+import { Icon } from "#blokkli/editor/components";
+const props = defineProps({
+  results: { type: Array, required: true }
+});
+const { $t } = useBlokkli();
+const totalCount = computed(
+  () => props.results.reduce((sum, r) => sum + r.nodes.length, 0)
+);
+</script>

package/dist/runtime/editor/features/analyze/Ignored/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { AnalyzeResultMapped } from '../analyzers/types.js';
+type __VLS_Props = {
+    results: AnalyzeResultMapped[];
+};
+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;
+export default _default;