@blokkli/editor 1.3.4 → 1.4.0-alpha.1

package/dist/runtime/blokkliPlugins/AddAction/index.vue

@@ -18,7 +18,7 @@
 
 <script lang="ts" setup>
 import { computed, useBlokkli, nextTick, ref } from '#imports'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import type { ActionPlacedEvent } from '#blokkli/types'
 import { AddListItem } from '#blokkli/components'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'

package/dist/runtime/blokkliPlugins/DroppableEdit/index.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
 import { FormOverlay } from '#blokkli/components'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import type { DroppableEntityField, DroppableFieldConfig } from '#blokkli/types'
 import { ref, useBlokkli } from '#imports'
 

package/dist/runtime/blokkliPlugins/ItemAction/index.vue

@@ -31,7 +31,7 @@
 <script lang="ts" setup>
 import { computed, ref, useBlokkli } from '#imports'
 
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { Icon, ShortcutIndicator } from '#blokkli/components'
 import type { DraggableExistingBlock } from '#blokkli/types'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'

package/dist/runtime/blokkliPlugins/MenuButton/index.vue

@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import { computed, useBlokkli } from '#imports'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { Icon } from '#blokkli/components'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 

package/dist/runtime/blokkliPlugins/Sidebar/Detached/index.vue

@@ -64,7 +64,7 @@ import {
   useState,
 } from '#imports'
 import { Icon, ViewportBlockingRect, ScrollBoundary } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 const props = withDefaults(

package/dist/runtime/blokkliPlugins/Sidebar/index.vue

@@ -100,7 +100,7 @@
 
 <script setup lang="ts">
 import { computed, watch, ref, useBlokkli } from '#imports'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { Icon, ShortcutIndicator, ScrollBoundary } from '#blokkli/components'
 import SidebarDetached from './Detached/index.vue'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'

package/dist/runtime/blokkliPlugins/ToolbarButton/index.vue

@@ -29,7 +29,7 @@
 
 <script setup lang="ts">
 import { ShortcutIndicator, Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { ref } from '#imports'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 import defineTourItem from '#blokkli/helpers/composables/defineTourItem'

package/dist/runtime/blokkliPlugins/ViewOption/index.vue

@@ -32,7 +32,7 @@
 <script setup lang="ts">
 import { useBlokkli, computed, ref } from '#imports'
 import { ShortcutIndicator, Icon } from '#blokkli/components'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 import defineTourItem from '#blokkli/helpers/composables/defineTourItem'
 

package/dist/runtime/components/Blocks/Fragment/index.vue

@@ -3,13 +3,16 @@
 </template>
 
 <script lang="ts" setup>
-import { getBlokkliFragmentComponent } from '#blokkli/imports'
+import { getBlokkliFragmentComponent } from '#blokkli-build/imports'
 import { provide, defineBlokkli } from '#imports'
 import { INJECT_FRAGMENT_CONTEXT } from '#blokkli/helpers/symbols'
+import type { BlokkliFragmentName } from '#blokkli-build/definitions'
 
-const componentProps = defineProps<{
-  name: string
-}>()
+export type Props = {
+  name: BlokkliFragmentName
+}
+
+const componentProps = defineProps<Props>()
 
 const ctx = defineBlokkli({
   bundle: 'blokkli_fragment',

package/dist/runtime/components/Blocks/FromLibrary/index.vue

@@ -3,13 +3,14 @@
     v-if="item"
     :key="item.uuid"
     v-bind="item"
-    :index="index"
+    :index
     :data-reusable-bundle="item.bundle"
     :data-reusable-uuid="item.uuid"
     :data-bk-library-label="libraryItem?.label"
     :data-bk-library-item-uuid="libraryItem?.uuid"
     data-blokkli-is-reusable="true"
-    :parent-type="parentType"
+    :parent-type
+    :is-editing
   />
 </template>
 
@@ -21,11 +22,13 @@ import {
 } from '#blokkli/helpers/symbols'
 import type { LibraryItemProps } from '#blokkli/types'
 
-const props = defineProps<{
+export type Props = {
   libraryItem?: LibraryItemProps
-}>()
+}
+
+const props = defineProps<Props>()
 
-const { index, options, parentType } = defineBlokkli({
+const { index, options, parentType, isEditing } = defineBlokkli({
   bundle: 'from_library',
 })
 

package/dist/runtime/components/BlokkliField.vue

@@ -56,7 +56,7 @@ import {
   ref,
   type ComputedRef,
 } from '#imports'
-import type { BlokkliFragmentName } from '#blokkli/definitions'
+import type { BlokkliFragmentName } from '#blokkli-build/definitions'
 import { isVisibleByOptions } from '#blokkli/helpers/runtimeHelpers'
 import BlokkliItem from './BlokkliItem.vue'
 
@@ -70,7 +70,7 @@ import type {
 import type {
   ValidFieldListTypes,
   FieldListItemTyped,
-} from '#blokkli/generated-types'
+} from '#blokkli-build/generated-types'
 import {
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,

package/dist/runtime/components/BlokkliItem.vue

@@ -27,7 +27,7 @@ import {
   type ComputedRef,
 } from '#imports'
 import type { InjectedBlokkliItem } from '#blokkli/types'
-import { getBlokkliItemComponent } from '#blokkli/imports'
+import { getBlokkliItemComponent } from '#blokkli-build/imports'
 import {
   INJECT_BLOCK_ITEM,
   INJECT_ENTITY_CONTEXT,
@@ -39,7 +39,7 @@ import {
 import type {
   BlockBundleWithNested,
   ValidFieldListTypes,
-} from '#blokkli/generated-types'
+} from '#blokkli-build/generated-types'
 
 const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType
 

package/dist/runtime/components/Edit/Actions/index.vue

@@ -79,7 +79,7 @@ import { onlyUnique, findIdealRectPosition, falsy } from '#blokkli/helpers'
 import type { Rectangle, PluginMountEvent } from '#blokkli/types'
 import { ItemIcon, Icon } from '#blokkli/components'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
-import { getFragmentDefinition } from '#blokkli/definitions'
+import { getFragmentDefinition } from '#blokkli-build/definitions'
 
 const { selection, $t, types, state, ui, dom } = useBlokkli()
 

package/dist/runtime/components/Edit/AddListItem/index.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import type { AddListOrientation, ContextMenu } from '#blokkli/types'
 import { useBlokkli, computed, ref } from '#imports'
 import { ItemIcon, Icon } from '#blokkli/components'

package/dist/runtime/components/Edit/AppMenu/index.vue

@@ -41,7 +41,7 @@
 <script setup lang="ts">
 import { computed, useBlokkli } from '#imports'
 import { Icon } from '#blokkli/components'
-import { blokkliVersion } from '#blokkli/config'
+import { blokkliVersion } from '#blokkli-build/config'
 
 const { ui, eventBus } = useBlokkli()
 

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

@@ -33,12 +33,10 @@
 import type {
   BlockBundleWithNested,
   ValidFieldListTypes,
-} from '#blokkli/generated-types'
-import { computed, useBlokkli, onMounted, onBeforeUnmount, ref } from '#imports'
-import {
-  getDefinition,
-  getBlokkliItemProxyComponent,
-} from '#blokkli/definitions'
+} from '#blokkli-build/generated-types'
+import { computed, useBlokkli, ref } from '#imports'
+import { getDefinition } from '#blokkli-build/definitions'
+import { getBlokkliItemProxyComponent } from '#blokkli-build/edit-components'
 
 import { ItemIcon } from '#blokkli/components'
 import type { FieldConfig, LibraryItemProps } from '#blokkli/types'
@@ -83,7 +81,7 @@ const proxyBundle = computed(
   () => libraryItemProps.value?.block?.bundle || props.bundle,
 )
 
-const { dom, types, runtimeConfig } = useBlokkli()
+const { types, runtimeConfig } = useBlokkli()
 
 const root = ref<HTMLElement | null>(null)
 
@@ -125,18 +123,4 @@ const fieldLayout = computed<FieldConfig[][]>(() => {
     .forEntityTypeAndBundle(runtimeConfig.itemEntityType, proxyBundle.value)
     .map((config) => [config])
 })
-
-onMounted(() => {
-  dom.registerBlock(
-    props.uuid,
-    root.value,
-    props.bundle,
-    props.fieldListType,
-    props.parentType as BlockBundleWithNested,
-  )
-})
-
-onBeforeUnmount(() => {
-  dom.unregisterBlock(props.uuid)
-})
 </script>

package/dist/runtime/components/Edit/Dialog/index.vue

@@ -51,7 +51,7 @@
 
 <script lang="ts" setup>
 import { useBlokkli, onMounted, computed, ref } from '#imports'
-import type { BlokkliIcon } from '#blokkli/icons'
+import type { BlokkliIcon } from '#blokkli-build/icons'
 import { Icon } from '#blokkli/components'
 import { modulo } from '#blokkli/helpers'
 

package/dist/runtime/components/Edit/DraggableList.vue

@@ -91,14 +91,14 @@ import {
   watch,
 } from '#imports'
 import type { FieldListItem, EntityContext, FieldConfig } from '#blokkli/types'
-import type { BlokkliFragmentName } from '#blokkli/definitions'
+import type { BlokkliFragmentName } from '#blokkli-build/definitions'
 import BlokkliItem from './../BlokkliItem.vue'
 import { isVisibleByOptions } from '#blokkli/helpers/runtimeHelpers'
 import {
   INJECT_FIELD_PROXY_MODE,
   INJECT_IS_EDITING,
 } from '#blokkli/helpers/symbols'
-import type { FieldListItemTyped } from '#blokkli/generated-types'
+import type { FieldListItemTyped } from '#blokkli-build/generated-types'
 
 const { dom, types, runtimeConfig, selection } = useBlokkli()
 

package/dist/runtime/components/Edit/EditIndicator.vue

@@ -25,8 +25,8 @@
 <script lang="ts" setup>
 import textProvider from '#blokkli/helpers/textProvider'
 import { ref, computed } from '#imports'
-import '#blokkli/theme'
-import '#blokkli/styles'
+import '#blokkli-build/theme'
+import '#blokkli-build/styles'
 import useAnimationFrame from '#blokkli/helpers/composables/useAnimationFrame'
 
 const props = defineProps<{

package/dist/runtime/components/Edit/EditProvider.vue

@@ -37,7 +37,7 @@
   <DragInteractions v-if="!isInitializing" />
   <AnimationCanvas v-if="!isInitializing" />
   <SystemRequirements />
-  <slot :mutated-entity="mutatedEntity" />
+  <slot v-if="!isInitializing" :mutated-entity="mutatedEntity" />
 </template>
 
 <script lang="ts" setup generic="T">
@@ -48,7 +48,6 @@ import {
   provide,
   onMounted,
   onBeforeUnmount,
-  nextTick,
   useRoute,
   useRuntimeConfig,
 } from '#imports'
@@ -80,9 +79,9 @@ import tourProvider from './../../helpers/tourProvider'
 import debugProvider from './../../helpers/debugProvider'
 import dropAreasProvider from './../../helpers/dropAreaProvider'
 import { eventBus } from '#blokkli/helpers/eventBus'
-import '#blokkli/theme'
-import '#blokkli/styles'
-import getAdapter from '#blokkli/compiled-edit-adapter'
+import '#blokkli-build/theme'
+import '#blokkli-build/styles'
+import getAdapter from '#blokkli-build/compiled-edit-adapter'
 import {
   INJECT_APP,
   INJECT_EDIT_CONTEXT,
@@ -176,15 +175,13 @@ onMounted(() => {
   if (props.isolate) {
     document.documentElement.classList.add('bk-isolate-provider')
   }
-  nextTick(() => {
-    isInitializing.value = false
-  })
 
   document.documentElement.addEventListener('touchmove', onTouchMove)
   document.documentElement.addEventListener('touchstart', onTouchStart)
   setRootClasses()
   baseLogger.log('EditProvider mounted')
   dom.init()
+  isInitializing.value = false
   broadcast.emit('editorLoaded', { uuid: props.entityUuid })
 })
 

package/dist/runtime/components/Edit/Features/Artboard/index.vue

@@ -56,6 +56,7 @@ import {
 } from '#imports'
 import type { Coord } from '#blokkli/types'
 import { PluginToolbarButton, PluginViewOption } from '#blokkli/plugins'
+import { asValidNumber } from '#blokkli/helpers'
 import Overview from './Overview/index.vue'
 import Scrollbar from './Scrollbar/index.vue'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
@@ -71,6 +72,7 @@ import {
   mouse,
   dom as domPlugin,
 } from 'artboard-deluxe'
+
 const { settings } = defineBlokkliFeature({
   id: 'artboard',
   label: 'Artboard',
@@ -189,8 +191,7 @@ function getArtboard(): Artboard {
       pluginWheel,
       domPlugin({
         element: ui.artboardElement(),
-        setInitTransformFromRect: !savedState.value || !settings.value.persist,
-        precision: 0.1,
+        precision: 1,
         restoreStyles: true,
       }),
     ],
@@ -198,9 +199,9 @@ function getArtboard(): Artboard {
       initTransform:
         savedState.value && settings.value.persist
           ? {
-              x: savedState.value.offset.x,
-              y: savedState.value.offset.y,
-              scale: savedState.value?.scale || 1,
+              x: asValidNumber(savedState.value.offset.x, 0),
+              y: asValidNumber(savedState.value.offset.y, 0),
+              scale: asValidNumber(savedState.value?.scale, 1),
             }
           : undefined,
       ...options.value,
@@ -226,9 +227,9 @@ onBlokkliEvent('animationFrame:before', (time) => {
 
   // We don't need much precision here, so we can round it.
   // This also prevents updating rects in WebGL buffers for small changes.
-  ui.artboardOffset.value.x = Math.ceil(offset.x)
-  ui.artboardOffset.value.y = Math.ceil(offset.y)
-  ui.artboardScale.value = artboard.getScale()
+  ui.artboardOffset.value.x = asValidNumber(Math.ceil(offset.x), 0)
+  ui.artboardOffset.value.y = asValidNumber(Math.ceil(offset.y), 0)
+  ui.artboardScale.value = asValidNumber(artboard.getScale(), 1)
   animation.requestDraw()
 })
 

package/dist/runtime/components/Edit/Features/BlockAddList/index.vue

@@ -65,7 +65,7 @@ import type {
   DraggableExistingBlock,
   FieldConfig,
 } from '#blokkli/types'
-import { getDefaultDefinition } from '#blokkli/definitions'
+import { getDefaultDefinition } from '#blokkli-build/definitions'
 import defineCommands from '#blokkli/helpers/composables/defineCommands'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 import { PluginTourItem } from '#blokkli/plugins'

package/dist/runtime/components/Edit/Features/Debug/index.vue

@@ -125,8 +125,8 @@ import {
 } from '#imports'
 import { PluginSidebar, PluginDebugOverlay } from '#blokkli/plugins'
 import { Icon } from '#blokkli/components'
-import { icons, type BlokkliIcon } from '#blokkli/icons'
-import { featureComponents } from '#blokkli-runtime/features'
+import { icons, type BlokkliIcon } from '#blokkli-build/icons'
+import { featureComponents } from '#blokkli-build/features'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 import DebugViewport from './Viewport/index.vue'
 import DebugRects from './Rects/index.vue'

package/dist/runtime/components/Edit/Features/Diff/DiffView/index.vue

@@ -83,7 +83,7 @@
 import { computed, useBlokkli } from '#imports'
 import type { FieldListItem, MutatedField } from '#blokkli/types'
 import { ItemIcon } from '#blokkli/components'
-import { getDefaultDefinition } from '#blokkli/definitions'
+import { getDefaultDefinition } from '#blokkli-build/definitions'
 import diff from 'html-diff-ts'
 
 function getProps(bundle: string, props: any): Record<string, string> {

package/dist/runtime/components/Edit/Features/DraggingOverlay/index.vue

@@ -48,7 +48,7 @@ import type {
   Rectangle,
   DraggableExistingStructureBlock,
 } from '#blokkli/types'
-import { getDefinition } from '#blokkli/definitions'
+import { getDefinition } from '#blokkli-build/definitions'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 const { adapter } = defineBlokkliFeature({

package/dist/runtime/components/Edit/Features/Edit/index.vue

@@ -16,7 +16,7 @@
 import { computed, useBlokkli, defineBlokkliFeature } from '#imports'
 import type { DraggableExistingBlock } from '#blokkli/types'
 import { PluginItemAction } from '#blokkli/plugins'
-import { getDefinition } from '#blokkli/definitions'
+import { getDefinition } from '#blokkli-build/definitions'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'
 
 defineBlokkliFeature({

package/dist/runtime/components/Edit/Features/EditForm/index.vue

@@ -22,7 +22,7 @@
 <script lang="ts" setup>
 import { ref, computed, useBlokkli, defineBlokkliFeature } from '#imports'
 import { FormOverlay } from '#blokkli/components'
-import { getDefinition } from '#blokkli/definitions'
+import { getDefinition } from '#blokkli-build/definitions'
 import FormFrame from './Frame/index.vue'
 import type { AdapterFormFrameBuilder } from '#blokkli/adapter'
 import onBlokkliEvent from '#blokkli/helpers/composables/onBlokkliEvent'

package/dist/runtime/components/Edit/Features/Fragments/Dialog/Item/index.vue

@@ -9,7 +9,7 @@
       class="bk-library-list-item-inner"
       :class="backgroundClass"
     >
-      <ScaleToFit :width="previewWidth">
+      <ScaleToFit :width="previewWidth" :max-height="500">
         <BlokkliItem
           v-bind="item"
           parent-type="nested"
@@ -22,7 +22,7 @@
 
 <script setup lang="ts">
 import { computed, provide } from '#imports'
-import { getFragmentDefinition } from '#blokkli/definitions'
+import { getFragmentDefinition } from '#blokkli-build/definitions'
 import { ScaleToFit } from '#blokkli/components'
 import {
   INJECT_FIELD_LIST_BLOCKS,

package/dist/runtime/components/Edit/Features/Fragments/Dialog/index.vue

@@ -15,38 +15,44 @@
         }}
       </p>
       <div class="bk">
-        <label class="bk-form-label" for="library_search">
-          {{ $t('fragmentsPlaceDialogSearchLabel', 'Filter fragments') }}
-        </label>
-        <input
-          id="fragments_search"
-          v-model="searchText"
-          type="text"
-          class="bk-form-input"
-          :placeholder="
-            $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
-          "
-          required
-        />
+        <div class="bk-form-group">
+          <div>
+            <label class="bk-form-label" for="library_search">
+              {{ $t('fragmentsPlaceDialogSearchLabel', 'Filter fragments') }}
+            </label>
+            <input
+              id="fragments_search"
+              v-model="searchText"
+              type="text"
+              class="bk-form-input"
+              :placeholder="
+                $t('fragmentsPlaceDialogSearchPlaceholder', 'Search fragments')
+              "
+              required
+            />
+          </div>
+        </div>
+      </div>
+      <div class="bk-library-dialog-content">
+        <ul class="bk-library-dialog-list">
+          <li
+            v-for="(item, index) in fragments"
+            :key="item.name"
+            :class="{
+              'bk-is-selected': selectedItem === item.name,
+            }"
+            @click="selectedItem = item.name"
+          >
+            <FragmentItem
+              v-show="visible === null || visible.includes(item.name)"
+              :name="item.name"
+              :label="item.label"
+              :description="item.description"
+              :index="index"
+            />
+          </li>
+        </ul>
       </div>
-      <ul class="bk-library-dialog-list">
-        <li
-          v-for="(item, index) in fragments"
-          :key="item.name"
-          :class="{
-            'bk-is-selected': selectedItem === item.name,
-          }"
-          @click="selectedItem = item.name"
-        >
-          <FragmentItem
-            v-show="visible === null || visible.includes(item.name)"
-            :name="item.name"
-            :label="item.label"
-            :description="item.description"
-            :index="index"
-          />
-        </li>
-      </ul>
     </div>
     <template #footer>
       <button class="bk-button bk-is-primary" @click="onSubmit">
@@ -58,7 +64,7 @@
 
 <script setup lang="ts">
 import { FormOverlay } from '#blokkli/components'
-import { fragmentDefinitions } from '#blokkli/definitions'
+import { fragmentDefinitions } from '#blokkli-build/definitions'
 import { falsy } from '#blokkli/helpers'
 import type { BlokkliFieldElement } from '#blokkli/types'
 import { ref, useBlokkli, computed, watch } from '#imports'

package/dist/runtime/components/Edit/Features/Library/LibraryDialog/Item/index.vue

@@ -5,13 +5,14 @@
     :data-library-item-uuid="uuid"
     :data-label="label"
     :class="backgroundClass"
+    class="bk-library-list-item"
   >
     <div class="bk bk-library-list-item-header">
       <div class="bk-blokkli-item-label">
         <div class="bk-blokkli-item-label-icon">
           <ItemIcon :bundle="bundle" />
         </div>
-        <span>{{ label }}</span>
+        <span>{{ bundleLabel }}: {{ label }}</span>
       </div>
     </div>
     <div
@@ -19,7 +20,7 @@
       class="bk-library-list-item-inner"
       :class="backgroundClass"
     >
-      <ScaleToFit :width="previewWidth">
+      <ScaleToFit :width="previewWidth" :max-height="400">
         <BlokkliItem
           v-bind="item"
           parent-type="nested"
@@ -31,9 +32,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed, provide } from '#imports'
+import { computed, provide, useBlokkli } from '#imports'
 
-import { getDefaultDefinition } from '#blokkli/definitions'
+import { getDefaultDefinition } from '#blokkli-build/definitions'
 import type { FieldListItem } from '#blokkli/types'
 import { ItemIcon, ScaleToFit } from '#blokkli/components'
 import {
@@ -44,14 +45,20 @@ import {
   INJECT_PROVIDER_BLOCKS,
 } from '#blokkli/helpers/symbols'
 
-const componentProps = defineProps<{
+const props = defineProps<{
   uuid: string
   label?: string
   bundle: string
   item: FieldListItem
 }>()
 
-const definition = computed(() => getDefaultDefinition(componentProps.bundle))
+const { types } = useBlokkli()
+
+const bundleLabel = computed(
+  () => types.getBlockBundleDefinition(props.bundle)?.label || props.bundle,
+)
+
+const definition = computed(() => getDefaultDefinition(props.bundle))
 
 const previewWidth = computed(() => definition.value?.editor?.previewWidth)
 const renderPreview = computed(