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

package/dist/runtime/editor/components/BlockPreviewItem/index.vue

@@ -88,52 +88,46 @@ provide(INJECT_PROVIDER_BLOCKS, blocks);
 provide(INJECT_FIELD_LIST_TYPE, fieldListType);
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-block-preview-item {
-      display: flex;
-      height: 100%;
-      flex-direction: column;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
 }
-
-  .bk-vars.bk-block-preview-item .bk-block-preview-item-header {
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-      padding: 15px;
+.bk-vars.bk-block-preview-item .bk-block-preview-item-header {
+  padding: 15px;
 }
-
-  .bk-vars.bk-block-preview-item .bk-block-preview-item-header h3 {
-      font-weight: 600;
+:is(.bk-vars.bk-block-preview-item .bk-block-preview-item-header) h3 {
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
 }
-
-  .bk-vars.bk-block-preview-item .bk-block-preview-item-inner {
-      position: relative;
-      display: flex;
-      height: 100%;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 5px;
-      overflow: hidden;
-      padding: 20px;
+.bk-vars.bk-block-preview-item .bk-block-preview-item-inner {
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  overflow: hidden;
+  padding: 20px;
+  background-color: white;
 }
-
-  .bk-vars.bk-block-preview-item .bk-block-preview-item-inner > .bk-scale-to-fit {
-      width: 100%;
+:is(.bk-vars.bk-block-preview-item .bk-block-preview-item-inner)  > .bk-scale-to-fit {
+  width: 100%;
 }
-
-  .bk-vars.bk-block-preview-item .bk-block-preview-item-inner:after {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      left: 0px;
-      height: 20px;
-      width: 100%;
-      background: linear-gradient(180deg, rgba(255, 255, 255, 0), white 40%);
-    }
-
-  .bk-vars.bk-block-preview-item .bk-block-preview-item-block {
-      width: 100%;
-      overflow: hidden;
-      border-radius: 4px;
+:is(.bk-vars.bk-block-preview-item .bk-block-preview-item-inner):after {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  height: 20px;
+  width: 100%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0), white 40%);
+}
+.bk-vars.bk-block-preview-item .bk-block-preview-item-block {
+  width: 100%;
+  overflow: hidden;
+  border-radius: 4px;
 }
 </style>

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

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    maxHeight: number;
     backgroundClass: string;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/BlockPreviewRenderer/index.vue

@@ -32,28 +32,22 @@ function onBackgroundColor(color) {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-block-preview-renderer {
-    margin-bottom: 30px;
-    min-height: 200px;
-    overflow: hidden;
-    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: 20px
+  min-height: 200px;
+  overflow: hidden;
+  padding: 20px;
 }
-  .bk-vars.bk-block-preview-renderer.bk-default-bg {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1))
+.bk-vars.bk-block-preview-renderer.bk-default-bg {
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
 }
-  .bk-vars.bk-block-preview-renderer .bk-block-preview-renderer-items {
-    display: flex;
-    flex-direction: column;
-    gap: 10px
+.bk-vars.bk-block-preview-renderer .bk-block-preview-renderer-items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
-  .bk-vars.bk-block-preview-renderer .bk-block-preview-renderer-item {
-    overflow: hidden;
-    border-radius: 4px
+.bk-vars.bk-block-preview-renderer .bk-block-preview-renderer-item {
+  overflow: hidden;
+  border-radius: 4px;
 }
 </style>

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

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    maxHeight: number;
     backgroundClass: string;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/BlockProxy/index.vue

@@ -87,149 +87,75 @@ const fieldLayout = computed(() => {
 useBlockRegistration(dom, props.uuid);
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-block-proxy {
-
-    flex: 1 1 0%;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
-
-    border-radius: 4px;
-
-    border-width: 1px;
-
-    --bk-tw-border-opacity: 1;
-
-    border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-
-    padding: 15px;
-
-    --bk-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-    --bk-tw-shadow-colored: 0 10px 15px -3px var(--bk-tw-shadow-color), 0 4px 6px -4px 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)
+  flex: 1;
+  color: rgb(var(--bk-theme-mono-900) / 1);
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-400) / 1);
+  background-color: white;
+  padding: 15px;
+  --bk-tw-shadow: 0 10px 15px -3px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
 }
-
 .bk-vars .bk-block-proxy-header {
-
-    display: flex;
-
-    align-items: center;
-
-    gap: 7px;
-
-    font-size: 14px;
-
-    line-height: 20px;
-
-    font-weight: 600;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1))
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  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);
+  color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-.bk-vars .bk-block-proxy-header .bk-blokkli-item-icon {
-
-    width: 25px;
-
-    height: 25px;
-
-    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));
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 3px;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1))
+:is(.bk-vars .bk-block-proxy-header) .bk-blokkli-item-icon {
+  width: 25px;
+  height: 25px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  padding: 3px;
+  color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
 .bk-vars .bk-block-proxy-fields {
-
-    margin-top: 15px;
-
-    display: grid;
-
-    gap: 15px
+  margin-top: 15px;
+  display: grid;
+  gap: 15px;
 }
-
 .bk-vars .bk-block-proxy-fields-row {
-
-    display: grid;
-
-    gap: 15px
+  display: grid;
+  gap: 15px;
 }
-
 .bk-vars .bk-block-proxy-fields-row-field {
-
-    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));
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-bg-opacity, 1));
-
-    padding: 15px
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+  padding: 15px;
 }
-
-.bk-vars .bk-block-proxy-fields-row-field > span {
-
-    margin-bottom: 15px;
-
-    display: inline-block;
-
-    font-size: 12px;
-
-    line-height: 16px;
-
-    text-transform: uppercase;
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
-
-    font-weight: 600
+:is(.bk-vars .bk-block-proxy-fields-row-field)  > span {
+  margin-bottom: 15px;
+  display: inline-block;
+  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-400) / 1);
+  text-transform: uppercase;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
 }
-
 .bk-vars .bk-block-proxy-component {
-
-    margin-top: 15px;
-
-    margin-bottom: 15px;
-
-    overflow: hidden;
-
-    display: -webkit-box;
-
-    -webkit-box-orient: vertical;
-
-    -webkit-line-clamp: 3
+  margin-block: 15px;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 }
-
-.bk-vars .bk-block-proxy-component:last-child {
-
-    margin-bottom: 0px
+:is(.bk-vars .bk-block-proxy-component):last-child {
+  margin-bottom: 0px;
 }
 </style>

package/dist/runtime/editor/components/BlokkliRootErrorBoundary.vue

@@ -25,15 +25,18 @@
               }}
             </p>
             <div class="bk-fatal-error-buttons">
-              <button class="bk-button bk-is-danger" @click="errors = []">
-                {{ $t("fatalErrorButton", "Continue anyway...") }}
+              <button class="bk-button bk-scheme-red" @click="errors = []">
+                {{ $t("fatalErrorButton", "Continue anyway", { more: true }) }}
               </button>
             </div>
           </div>
         </div>
         <div class="bk-fatal-error-overlay-list">
           <h3>{{ title }}</h3>
-          <button class="bk-button" @click="downloadLogs">
+          <button
+            class="bk-button bk-scheme-mono bk-is-light"
+            @click="downloadLogs"
+          >
             {{ $t("downloadLogsButton", "Download Logs") }}
           </button>
         </div>
@@ -98,61 +101,127 @@ function downloadLogs() {
 }
 </script>
 
-<style>
-.bk-fatal-error-overlay { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; overflow: auto; --bk-tw-backdrop-blur: blur(64px); -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); z-index: 9999999999999; /* TO THE MOON */ background-color: rgb(var(--bk-theme-red-light) / 0.95); --bk-tw-text-opacity: 1; color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1)); display: flex; flex-direction: column; align-items: center; padding-left: 20px; padding-right: 20px; padding-top: 40px; padding-bottom: 40px
-}
-
-  .bk-fatal-error-overlay .bk-icon { margin-bottom: 5px; height: 200px; width: 200px
-}
-
-  .bk-fatal-error-overlay .bk-icon svg { fill: rgb(var(--bk-theme-red-normal) / 1)
-}
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-list { margin-top: 20px; display: flex; flex-direction: column; align-items: center; --bk-tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1)); padding: 20px
-}
-
-  @media (min-width: 768px) {
-
- .bk-fatal-error-overlay .bk-fatal-error-overlay-list { min-width: 500px
- }
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-fatal-error-overlay {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  --bk-tw-backdrop-blur: blur(var(--blur-3xl, 64px));
+  -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,);
+  z-index: 9999999999999;
+  background-color: rgb(var(--bk-theme-red-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-fatal-error-overlay {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-light) / 1) 95%, transparent);
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-list { border-radius: 6px; --bk-tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --bk-tw-shadow-colored: 0 20px 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)
+.bk-fatal-error-overlay {
+  color: rgb(var(--bk-theme-mono-900) / 1);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-inline: 20px;
+  padding-block: 40px;
+}
+.bk-fatal-error-overlay .bk-icon {
+  margin-bottom: 5px;
+  height: 200px;
+  width: 200px;
+}
+:is(.bk-fatal-error-overlay .bk-icon) svg {
+  fill: rgb(var(--bk-theme-red-normal) / 1);
+}
+.bk-fatal-error-overlay .bk-fatal-error-overlay-list {
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  padding: 20px;
+}
+@media (width >= 48rem) {
+  .bk-fatal-error-overlay .bk-fatal-error-overlay-list {
+    min-width: 500px;
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-list h3 { margin-bottom: 15px; font-weight: 700
+.bk-fatal-error-overlay .bk-fatal-error-overlay-list {
+  border-radius: 4px;
+  --bk-tw-shadow: 0 20px 25px -5px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.1));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
 }
-
-  @media (min-width: 768px) {
-
- .bk-fatal-error-overlay .bk-fatal-error-overlay-list h3 { margin-bottom: 20px; font-size: 18px; line-height: 28px
- }
+:is(.bk-fatal-error-overlay .bk-fatal-error-overlay-list) h3 {
+  margin-bottom: 15px;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-
-  @media (min-width: 1280px) {
-
- .bk-fatal-error-overlay .bk-fatal-error-overlay-list h3 { font-size: 20px; line-height: 28px
- }
+@media (width >= 48rem) {
+  :is(.bk-fatal-error-overlay .bk-fatal-error-overlay-list) h3 {
+    margin-bottom: 20px;
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-info { margin-left: auto; margin-right: auto; margin-top: 10%; display: flex; max-width: 672px; flex-direction: column; align-items: center; justify-content: center; text-align: center
+@media (width >= 48rem) {
+  :is(.bk-fatal-error-overlay .bk-fatal-error-overlay-list) h3 {
+    font-size: var(--text-lg, 18px);
+    line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-info h2 { margin-bottom: 10px; font-size: 48px; line-height: 1; font-weight: 700; --bk-tw-text-opacity: 1; color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1))
+@media (width >= 80rem) {
+  :is(.bk-fatal-error-overlay .bk-fatal-error-overlay-list) h3 {
+    font-size: var(--text-xl, 20px);
+    line-height: var(--bk-tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-info p { font-size: 24px; line-height: 32px; color: rgb(var(--bk-theme-red-dark) / 0.5)
+.bk-fatal-error-overlay .bk-fatal-error-overlay-info {
+  margin-inline: auto;
+  margin-top: 10%;
+  display: flex;
+  max-width: var(--container-2xl, 672px);
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+:is(.bk-fatal-error-overlay .bk-fatal-error-overlay-info) h2 {
+  margin-bottom: 10px;
+  font-size: var(--text-5xl, 48px);
+  line-height: var(--bk-tw-leading, var(--text-5xl--line-height, 1));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  color: rgb(var(--bk-theme-red-normal) / 1);
+}
+:is(.bk-fatal-error-overlay .bk-fatal-error-overlay-info) p {
+  font-size: var(--text-2xl, 24px);
+  line-height: var(--bk-tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
+  color: rgb(var(--bk-theme-red-dark) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk-fatal-error-overlay .bk-fatal-error-overlay-info) p {
+    color: color-mix(in oklab, rgb(var(--bk-theme-red-dark) / 1) 50%, transparent);
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-info em { font-weight: 700; font-style: normal
+:is(.bk-fatal-error-overlay .bk-fatal-error-overlay-info) em {
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  font-style: normal;
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-info button { margin-top: 30px
+:is(.bk-fatal-error-overlay .bk-fatal-error-overlay-info) button {
+  margin-top: 30px;
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-overlay-info button:hover { --bk-tw-bg-opacity: 1 !important; background-color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-bg-opacity, 1)) !important
+@media (hover: hover) {
+  :is(:is(.bk-fatal-error-overlay .bk-fatal-error-overlay-info) button):hover {
+    background-color: rgb(var(--bk-theme-red-dark) / 1) !important;
+  }
 }
-
-  .bk-fatal-error-overlay .bk-fatal-error-buttons { margin-top: 20px; display: flex; align-items: center; justify-content: center; gap: 10px
+.bk-fatal-error-overlay .bk-fatal-error-buttons {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
 }
 </style>

package/dist/runtime/editor/components/BundleSelector/Group.d.vue.ts

@@ -0,0 +1,12 @@
+import type { Item } from './types.js';
+type __VLS_Props = {
+    label?: string;
+    items: Item[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: Item) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: Item) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/BundleSelector/Group.vue

@@ -0,0 +1,28 @@
+<template>
+  <div v-show="items.length" class="_bk_border-t _bk_border-mono-700 _bk_py-10">
+    <div
+      v-if="label"
+      class="_bk_flex _bk_items-center _bk_gap-8 _bk_text-mono-400 _bk_uppercase _bk_font-semibold _bk_text-xs _bk_tracking-wide _bk_!leading-none _bk_px-15"
+    >
+      <span>{{ label }}</span>
+    </div>
+    <div class="_bk_grid _bk_grid-cols-3">
+      <AddListItem
+        v-for="item in items"
+        :key="item.props.id"
+        v-bind="item.props"
+        class="_bk_px-20 _bk_py-10"
+        @click.prevent="$emit('select', item)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { AddListItem } from "#blokkli/editor/components";
+defineProps({
+  label: { type: String, required: false },
+  items: { type: Array, required: true }
+});
+defineEmits(["select"]);
+</script>

package/dist/runtime/editor/components/BundleSelector/Group.vue.d.ts

@@ -0,0 +1,12 @@
+import type { Item } from './types.js';
+type __VLS_Props = {
+    label?: string;
+    items: Item[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (item: Item) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((item: Item) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;