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

package/dist/runtime/editor/features/history/List/index.vue

@@ -1,9 +1,12 @@
 <template>
-  <div class="bk bk-history bk-control">
+  <div class="bk bk-history bk-control" data-test="history-list">
     <ul v-if="mapped.length">
       <li
         v-for="item in mapped"
         :key="item.index"
+        data-test="history-item"
+        :data-test-history-index="item.index"
+        :data-test-history-active="item.index === currentMutationIndex"
         :class="{
   'bk-is-not-active': item.index > currentMutationIndex,
   'bk-is-active': item.index === currentMutationIndex,
@@ -14,6 +17,7 @@
         <button
           :disabled="!canEdit"
           class="bk-history-item-button"
+          data-test="history-item-button"
           @click="setHistoryIndex(item.index)"
         >
           <div>
@@ -51,12 +55,18 @@
       </li>
       <li
         class="bk-is-last"
+        data-test="history-current-revision"
+        :data-test-history-active="currentMutationIndex === -1"
         :class="[
   currentMutationIndex === -1 ? 'bk-is-active' : 'bk-is-applied',
   { 'bk-has-shadow': !scrolledToEnd }
 ]"
       >
-        <button class="bk-history-item-button" @click="setHistoryIndex(-1)">
+        <button
+          class="bk-history-item-button"
+          data-test="history-item-button"
+          @click="setHistoryIndex(-1)"
+        >
           <div>
             <strong>{{
               $t("historyCurrentRevision", "Current revision")
@@ -73,7 +83,7 @@
         </button>
       </li>
     </ul>
-    <div v-else class="bk-history-empty-message">
+    <div v-else class="bk-history-empty-message" data-test="history-empty">
       {{ $t("historyEmpty", "There are now changes yet.") }}
     </div>
   </div>
@@ -127,211 +137,210 @@ async function setMutationItemStatus(index, status) {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-history .bk-history-load-more {
-          height: 70px;
-          padding-top: 10px;
-}
-      .bk.bk-history .bk-history-load-more button:before {
-          display: none;
-}
-      .bk.bk-history .bk-history-load-more button:after {
-          content: '';
-          position: absolute;
-          top: 0px;
-          left: 2px;
-          z-index: 50;
-          height: 40px;
-          width: 0px;
-          border-left-width: 8px;
-          --bk-tw-border-opacity: 1;
-          border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-          border-style: dotted;
-        }
-      .bk.bk-history .bk-history-load-more > button {
-          width: 100%;
-}
-      .bk.bk-history .bk-history-load-more:hover button:after {
-          --bk-tw-border-opacity: 1;
-          border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
-}
-    .bk.bk-history .bk-history-empty-message {
-          padding: 20px;
-}
-    .bk.bk-history ul {
-          position: relative;
-          padding-top: 15px;
-}
-    .bk.bk-history ul li {
-          position: relative;
-          padding-left: 20px;
-}
-    .bk.bk-history ul li:after {
-          content: '';
-          position: absolute;
-          left: 25.5px;
-          top: 0px;
-          height: 100%;
-          width: 0px;
-          border-left-width: 1px;
-          border-style: dashed;
-          --bk-tw-border-opacity: 1;
-          border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-          --bk-tw-translate-y: 20px;
-          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));
-          pointer-events: none;
-          z-index: 1;
-        }
-    .bk.bk-history ul li.bk-is-last {
-          position: sticky;
-          bottom: 0px;
-          z-index: 50;
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-          padding-top: 15px;
-          padding-bottom: 15px;
-}
-    .bk.bk-history ul li.bk-is-last.bk-has-shadow {
-            box-shadow: 0 -2px 12px rgb(var(--bk-theme-mono-300) / 1);
-          }
-    .bk.bk-history ul li.bk-is-last:after {
-          top: 0px;
-          height: 50%;
-          --bk-tw-translate-y: 0px;
-          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));
-}
-    .bk.bk-history ul li.bk-is-active ~ li:after,
-        .bk.bk-history ul li.bk-is-active:after {
-          border-style: solid;
-          --bk-tw-border-opacity: 1;
-          border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-}
-    .bk.bk-history ul li.bk-is-not-active .bk-history-item-button {
-          --bk-tw-text-opacity: 1;
-          color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history ul li.bk-is-not-active .bk-history-item-button em {
-          --bk-tw-text-opacity: 1;
-          color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history ul li.bk-is-not-active .bk-history-item-button:before {
-          --bk-tw-scale-x: .5;
-          --bk-tw-scale-y: .5;
-          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));
-          --bk-tw-text-opacity: 1;
-          color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history ul li.bk-is-disabled .bk-history-item-button {
-          pointer-events: none;
-          color: rgb(var(--bk-theme-red-normal) / 0.5);
-          text-decoration-line: line-through;
-}
-    .bk.bk-history ul li.bk-is-disabled .bk-history-item-button em {
-          color: rgb(var(--bk-theme-red-normal) / 0.5);
-}
-    .bk.bk-history ul li.bk-is-disabled .bk-history-item-button:before {
-          --bk-tw-scale-x: .5;
-          --bk-tw-scale-y: .5;
-          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));
-          --bk-tw-text-opacity: 1;
-          color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history ul li.bk-is-active .bk-history-item-button:before {
-          --bk-tw-scale-x: 1;
-          --bk-tw-scale-y: 1;
-          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));
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1));
-}
-    .bk.bk-history ul li.bk-is-applied .bk-history-item-button:before {
-          --bk-tw-border-opacity: 1;
-          border-color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-border-opacity, 1));
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-bg-opacity, 1));
-}
-    .bk.bk-history ul li:not(.bk-is-active) .bk-history-item-button:hover {
-          --bk-tw-text-opacity: 1;
-          color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history ul li:not(.bk-is-active) .bk-history-item-button:hover:before {
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(var(--bk-theme-accent-400) / var(--bk-tw-bg-opacity, 1));
-}
-    .bk.bk-history ul li:hover .bk-history-item-actions {
-          display: block;
-}
-    .bk.bk-history ul .bk-history-item-button {
-          position: relative;
-          display: block;
-          width: 100%;
-          cursor: pointer;
-          padding-top: 10px;
-          padding-bottom: 10px;
-          padding-left: 22px;
-          text-align: left;
-          font-size: 14px;
-          line-height: 20px;
-          --bk-tw-text-opacity: 1;
-          color: rgb(0 0 0 / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history ul .bk-history-item-button > div {
-          pointer-events: none;
-}
-    .bk.bk-history ul .bk-history-item-button[disabled] {
-          pointer-events: none;
-}
-    .bk.bk-history ul .bk-history-item-button:before {
-          content: '';
-          position: absolute;
-          top: -8px;
-          left: -1px;
-          z-index: 10;
-          height: 15px;
-          width: 15px;
-          border-radius: 9999px;
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
-          --bk-tw-translate-y: 20px;
-          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));
-          transition-property: all;
-          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-duration: 150ms;
-          box-shadow: 0 0 0 3px white;
-        }
-    .bk.bk-history ul .bk-history-item-button strong {
-          font-size: 14px;
-          line-height: 20px;
-          font-weight: 600;
-}
-    .bk.bk-history ul .bk-history-item-button em {
-          font-size: 12px;
-          line-height: 16px;
-          font-style: normal;
-          --bk-tw-text-opacity: 1;
-          color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
-}
-    .bk.bk-history .bk-history-item-actions {
-          position: absolute;
-          right: 15px;
-          top: 50%;
-          display: none;
-          --bk-tw-translate-y: -50%;
-          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));
-}
-    .bk.bk-history .bk-history-item-actions button {
-          border-radius: 9999px;
-          padding: 3px;
-}
-    .bk.bk-history .bk-history-item-actions button svg {
-          width: 20px;
-          height: 20px;
-          fill: rgb(var(--bk-theme-mono-500) / 1);
-}
-    .bk.bk-history .bk-history-item-actions button:hover {
-          --bk-tw-bg-opacity: 1;
-          background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-}
-    .bk.bk-history .bk-history-item-actions button:hover svg {
-          fill: white;
+  height: 70px;
+  padding-top: 10px;
+}
+:is(:is(.bk.bk-history .bk-history-load-more) button):before {
+  display: none;
+}
+:is(:is(.bk.bk-history .bk-history-load-more) button):after {
+  content: '';
+  position: absolute;
+  top: 0px;
+  left: 2px;
+  z-index: 50;
+  height: 40px;
+  width: 0px;
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 8px;
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+  border-style: dotted;
+}
+:is(.bk.bk-history .bk-history-load-more)  > button {
+  width: 100%;
+}
+:is(.bk.bk-history .bk-history-load-more):hover button:after {
+  border-color: rgb(var(--bk-theme-accent-700) / 1);
+}
+.bk.bk-history .bk-history-empty-message {
+  padding: 20px;
+}
+.bk.bk-history ul {
+  position: relative;
+  padding-top: 15px;
+}
+:is(.bk.bk-history ul) li {
+  position: relative;
+  padding-left: 20px;
+}
+:is(:is(.bk.bk-history ul) li):after {
+  content: '';
+  position: absolute;
+  top: 0px;
+  left: 25.5px;
+  height: 100%;
+  width: 0px;
+  border-left-style: var(--bk-tw-border-style);
+  border-left-width: 1px;
+  --bk-tw-border-style: dashed;
+  border-style: dashed;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  --bk-tw-translate-y: 20px;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  pointer-events: none;
+  z-index: 1;
+}
+.bk-is-last:is(:is(.bk.bk-history ul) li) {
+  position: sticky;
+  bottom: 0px;
+  z-index: 50;
+  background-color: white;
+  padding-block: 15px;
+}
+.bk-is-last.bk-has-shadow:is(:is(.bk.bk-history ul) li) {
+  box-shadow: 0 -2px 12px rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk-is-last:is(:is(.bk.bk-history ul) li):after {
+  top: 0px;
+  height: calc(1 / 2 * 100%);
+  --bk-tw-translate-y: 0px;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+.bk-is-active:is(:is(.bk.bk-history ul) li) ~ li:after,.bk-is-active:is(:is(.bk.bk-history ul) li):after {
+  --bk-tw-border-style: solid;
+  border-style: solid;
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+}
+.bk-is-not-active:is(:is(.bk.bk-history ul) li) .bk-history-item-button {
+  color: rgb(var(--bk-theme-mono-400) / 1);
+}
+:is(.bk-is-not-active:is(:is(.bk.bk-history ul) li) .bk-history-item-button) em {
+  color: rgb(var(--bk-theme-mono-400) / 1);
+}
+:is(.bk-is-not-active:is(:is(.bk.bk-history ul) li) .bk-history-item-button):before {
+  --bk-tw-scale-x: 50%;
+  --bk-tw-scale-y: 50%;
+  --bk-tw-scale-z: 50%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk-is-disabled:is(:is(.bk.bk-history ul) li) .bk-history-item-button {
+  pointer-events: none;
+  color: rgb(var(--bk-theme-red-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-disabled:is(:is(.bk.bk-history ul) li) .bk-history-item-button {
+    color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 50%, transparent);
+  }
+}
+.bk-is-disabled:is(:is(.bk.bk-history ul) li) .bk-history-item-button {
+  text-decoration-line: line-through;
+}
+:is(.bk-is-disabled:is(:is(.bk.bk-history ul) li) .bk-history-item-button) em {
+  color: rgb(var(--bk-theme-red-normal) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk-is-disabled:is(:is(.bk.bk-history ul) li) .bk-history-item-button) em {
+    color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 50%, transparent);
+  }
+}
+:is(.bk-is-disabled:is(:is(.bk.bk-history ul) li) .bk-history-item-button):before {
+  --bk-tw-scale-x: 50%;
+  --bk-tw-scale-y: 50%;
+  --bk-tw-scale-z: 50%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(.bk-is-active:is(:is(.bk.bk-history ul) li) .bk-history-item-button):before {
+  --bk-tw-scale-x: 100%;
+  --bk-tw-scale-y: 100%;
+  --bk-tw-scale-z: 100%;
+  scale: var(--bk-tw-scale-x) var(--bk-tw-scale-y);
+  background-color: rgb(var(--bk-theme-accent-800) / 1);
+}
+:is(.bk-is-applied:is(:is(.bk.bk-history ul) li) .bk-history-item-button):before {
+  border-color: rgb(var(--bk-theme-accent-200) / 1);
+  background-color: rgb(var(--bk-theme-accent-200) / 1);
+}
+:is(:is(:is(.bk.bk-history ul) li):not(.bk-is-active) .bk-history-item-button):hover {
+  color: rgb(var(--bk-theme-accent-800) / 1);
+}
+:is(:is(:is(.bk.bk-history ul) li):not(.bk-is-active) .bk-history-item-button):hover:before {
+  background-color: rgb(var(--bk-theme-accent-400) / 1);
+}
+:is(:is(.bk.bk-history ul) li):hover .bk-history-item-actions {
+  display: block;
+}
+:is(.bk.bk-history ul) .bk-history-item-button {
+  position: relative;
+  display: block;
+  width: 100%;
+  cursor: pointer;
+  padding-block: 10px;
+  padding-left: 22px;
+  text-align: left;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: black;
+}
+:is(:is(.bk.bk-history ul) .bk-history-item-button)  > div {
+  pointer-events: none;
+}
+[disabled]:is(:is(.bk.bk-history ul) .bk-history-item-button) {
+  pointer-events: none;
+}
+:is(:is(.bk.bk-history ul) .bk-history-item-button):before {
+  content: '';
+  position: absolute;
+  top: calc(8px * -1);
+  left: -1px;
+  z-index: 10;
+  height: 15px;
+  width: 15px;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-mono-200) / 1);
+  --bk-tw-translate-y: 20px;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  transition-property: all;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  box-shadow: 0 0 0 3px white;
+}
+:is(:is(.bk.bk-history ul) .bk-history-item-button) strong {
+  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);
+}
+:is(:is(.bk.bk-history ul) .bk-history-item-button) em {
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  color: rgb(var(--bk-theme-mono-500) / 1);
+  font-style: normal;
+}
+.bk.bk-history .bk-history-item-actions {
+  position: absolute;
+  top: calc(1 / 2 * 100%);
+  right: 15px;
+  display: none;
+  --bk-tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+:is(.bk.bk-history .bk-history-item-actions) button {
+  border-radius: calc(infinity * 1px);
+  padding: 3px;
+}
+:is(:is(.bk.bk-history .bk-history-item-actions) button) svg {
+  width: 20px;
+  height: 20px;
+  fill: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk.bk-history .bk-history-item-actions) button):hover {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(:is(.bk.bk-history .bk-history-item-actions) button):hover svg {
+  fill: white;
 }
 </style>

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

@@ -17,7 +17,7 @@
 
   <PluginToolbarButton
     id="undo"
-    :title="$t('historyUndo', 'Undo')"
+    :title="$t('undo', 'Undo')"
     meta
     key-code="Z"
     region="before-title"
@@ -29,7 +29,7 @@
 
   <PluginToolbarButton
     id="redo"
-    :title="$t('historyRedo', 'Redo')"
+    :title="$t('redo', 'Redo')"
     meta
     shift
     key-code="Z"

package/dist/runtime/editor/features/hover/Renderer/index.vue

@@ -169,7 +169,7 @@ function updateHoverState(mouseX, mouseY, offset, scale, artboardSize) {
     const excludedKeys = /* @__PURE__ */ new Set();
     for (const el of directive.getDroppableElements()) {
       const config = types.getDroppableFieldConfig(el.fieldName, el);
-      if (config.type !== "reference") {
+      if (config.type !== "reference" || config.cardinality === 1) {
         excludedKeys.add(el.key);
       }
     }
@@ -454,8 +454,10 @@ const { collector } = await defineRenderer("hover-overlay", {
         ctx2d.stroke();
       } else {
         let strokeColor = colors.u_color_mono;
-        if (type === 5 || type === 6) {
+        if (type === 6) {
           strokeColor = colors.u_color_yellow;
+        } else if (type === 5) {
+          strokeColor = colors.u_color_mono;
         } else if (type === 4) {
           strokeColor = colors.u_color_lime;
         } else if (type === 3) {

package/dist/runtime/editor/features/hover/Renderer/vertex.glsl

@@ -142,8 +142,10 @@ void main() {
   v_rect_size_artboard = vec2(hoverPos.z, hoverPos.w);
 
   // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library), 5 = yellow (restricted), 6 = yellow (outdated)
-  if (hoverType > 4.5) {
+  if (hoverType > 5.5) {
     v_color = u_color_yellow;
+  } else if (hoverType > 4.5) {
+    v_color = u_color_mono;
   } else if (hoverType > 3.5) {
     v_color = u_color_lime;
   } else if (hoverType > 2.5) {

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

@@ -1,5 +1,5 @@
 <template>
-  <ErrorBoundary v-model="isLocked" :label="$t('feature_hover_label', 'Hover')">
+  <ErrorBoundary v-model="isLocked" label="Hover">
     <Renderer v-if="isVisible" :key="animation.renderKey.value" />
   </ErrorBoundary>
 </template>
@@ -14,7 +14,7 @@ defineBlokkliFeature({
   label: "Hover",
   description: "Renders a border around blocks that are currently being hovered."
 });
-const { selection, ui, dom, animation, $t } = useBlokkli();
+const { selection, ui, dom, animation } = useBlokkli();
 const isLocked = ref(false);
 const isVisible = computed(
   () => !isLocked.value && dom.isReady.value && !selection.isMultiSelecting.value && !selection.activeFieldLabel.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.hasNestedEditorOpen.value && !ui.isAnimating.value && !ui.isApproving.value

package/dist/runtime/editor/features/import-existing/Dialog/Item.vue

@@ -1,40 +1,30 @@
 <template>
-  <label
-    class="_bk_flex _bk_items-start _bk_gap-5 _bk_cursor-pointer _bk_hover:bg-mono-50 _bk_p-10 _bk_border _bk_border-mono-200 _bk_rounded-md _bk_hover:border-mono-400 _bk_min-w-0"
-    :class="{
-  '_bk_!border-accent-600 _bk_outline _bk_outline-4 _bk_outline-accent-200 _bk_!bg-accent-50': isSelected
-}"
+  <FormRadioBox
+    v-model="selectedUuid"
+    :value="uuid"
+    name="entity"
+    :title="label"
   >
-    <span class="bk-radio">
-      <input v-model="selectedUuid" type="radio" :value="uuid" name="entity" />
-      <span />
-    </span>
-    <div class="_bk_flex-1 _bk_min-w-0">
-      <div class="_bk_truncate _bk_font-semibold _bk_text-base">
+    <template #title>
+      <span class="_bk_truncate">
         {{ label }}
         <span class="_bk_font-normal _bk_text-mono-500">{{ id }}</span>
-      </div>
-      <ul class="bk-pill-list _bk_mt-3">
-        <li>
-          <span class="bk-pill bk-is-mono">{{ bundleLabel }}</span>
-        </li>
-        <li v-if="lastChanged">
-          <span class="bk-pill bk-is-yellow-light">
-            <RelativeTime :timestamp="lastChanged" />
-          </span>
-        </li>
-        <li v-if="isOwner">
-          <span class="bk-pill">{{ $t("owner", "Owner") }}</span>
-        </li>
-      </ul>
+      </span>
+    </template>
+    <div class="bk-pill-list _bk_mt-3">
+      <Pill :text="bundleLabel" scheme="mono" />
+      <Pill v-if="lastChanged" scheme="yellow">
+        <RelativeTime :timestamp="lastChanged" />
+      </Pill>
+      <Pill v-if="isOwner" :text="$t('owner', 'Owner')" scheme="accent" />
     </div>
-  </label>
+  </FormRadioBox>
 </template>
 
 <script setup>
-import { computed, useBlokkli } from "#imports";
-import { RelativeTime } from "#blokkli/editor/components";
-const props = defineProps({
+import { useBlokkli } from "#imports";
+import { FormRadioBox, RelativeTime, Pill } from "#blokkli/editor/components";
+defineProps({
   id: { type: String, required: true },
   uuid: { type: String, required: true },
   entityType: { type: String, required: true },
@@ -48,8 +38,5 @@ const props = defineProps({
   isOwner: { type: Boolean, required: true }
 });
 const selectedUuid = defineModel("selectedUuid", { type: String, ...{ required: true } });
-const isSelected = computed(() => {
-  return selectedUuid.value === props.uuid;
-});
 const { $t } = useBlokkli();
 </script>