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

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

@@ -18,7 +18,7 @@
     <div
       v-show="activeSidebarRight"
       id="bk-sidebar-content-right"
-      class="bk-sidebar bk-is-right bk"
+      class="bk-sidebar bk-is-right bk _bk_border-l _bk_border-l-mono-400"
       :class="{ 'bk-is-hidden': !sidebarVisible }"
       :style="rightSidebarStyle"
     />
@@ -44,38 +44,59 @@
   <AppMenu />
 
   <div class="bk bk-toolbar" @touchstart.stop.passive @touchmove.stop.passive>
-    <div class="bk bk-toolbar-menu">
-      <button class="bk-toolbar-menu-button" @click.prevent.stop="openMenu">
-        <Icon name="bk_mdi_menu" />
-      </button>
-    </div>
-    <div class="bk-toolbar-container">
+    <div
+      class="_bk_flex _bk_h-full"
+      :class="{
+  '_bk_opacity-20 _bk_pointer-events-none!': isApproving
+}"
+    >
+      <div class="bk bk-toolbar-menu">
+        <button
+          class="bk-toolbar-menu-button"
+          @click.prevent.stop="openMenu"
+        >
+          <Icon name="bk_mdi_menu" />
+        </button>
+      </div>
+      <div class="bk-toolbar-container">
+        <div
+          id="bk-sidebar-tabs-left"
+          class="bk-sidebar-container-tabs bk-is-left"
+        />
+      </div>
+      <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
+      <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
+      <div id="bk-toolbar-title" class="bk-toolbar-container" />
+      <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
+      <ViewOptions />
+      <div id="bk-toolbar-artboard" class="bk-toolbar-container _bk_group" />
       <div
-        id="bk-sidebar-tabs-left"
-        class="bk-sidebar-container-tabs bk-is-left"
+        id="bk-toolbar-before-sidebar"
+        class="bk-sidebar-container-tabs bk-toolbar-container"
       />
     </div>
-    <div id="bk-toolbar-after-menu" class="bk-toolbar-container" />
-    <div id="bk-toolbar-before-title" class="bk-toolbar-container" />
-    <div id="bk-toolbar-title" class="bk-toolbar-container" />
-    <div id="bk-toolbar-after-title" class="bk-toolbar-container" />
-    <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
-    <div id="bk-toolbar-artboard" class="bk-toolbar-container" />
-    <div
-      id="bk-toolbar-before-sidebar"
-      class="bk-sidebar-container-tabs bk-toolbar-container"
-    />
   </div>
 
   <div class="bk bk-sidebar-tabs">
-    <div id="bk-toolbar-before-sidebar-right" />
+    <div
+      id="bk-toolbar-before-sidebar-right"
+      :class="{
+  '_bk_opacity-20 _bk_pointer-events-none': isApproving
+}"
+    />
     <div
       id="bk-sidebar-tabs-right"
       class="bk-sidebar-container-tabs bk-is-right"
+      :class="{
+  '_bk_opacity-20 _bk_pointer-events-none': isApproving
+}"
     />
     <div
       id="bk-sidebar-tabs-right-bottom"
       class="bk-sidebar-container-tabs bk-is-right"
+      :class="{
+  '_bk_opacity-20 _bk_pointer-events-none': isApproving
+}"
     />
   </div>
 </template>
@@ -91,8 +112,10 @@ import {
   useTemplateRef
 } from "#imports";
 import AppMenu from "./../AppMenu/index.vue";
+import ViewOptions from "./ViewOptions/index.vue";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 const { ui, selection, storage } = useBlokkli();
+const isApproving = computed(() => ui.isApproving.value);
 function openMenu() {
   ui.openDialog({ id: "menu", alignment: "left" });
 }
@@ -189,15 +212,14 @@ export default {
 };
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-toolbar-menu {
-  pointer-events: auto;
   position: relative;
-  z-index: calc(var(--bk-z-index-base) + 390000) /* "menu" */;
+  z-index: calc(var(--bk-z-index-base) + 410000) /* "menu" */;
   height: 100%;
   grid-area: menu;
 }
-  .bk.bk-toolbar-menu .bk-toolbar-menu-button {
+.bk.bk-toolbar-menu .bk-toolbar-menu-button {
   position: relative;
   z-index: 50;
   display: flex;
@@ -205,196 +227,138 @@ export default {
   width: var(--bk-toolbar-left-width);
   align-items: center;
   justify-content: center;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-  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: 150ms;
+  color: rgb(var(--bk-theme-mono-50) / 1);
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  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));
 }
-  .bk.bk-toolbar-menu .bk-toolbar-menu-button:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+:is(.bk.bk-toolbar-menu .bk-toolbar-menu-button):focus {
+  --bk-tw-outline-style: none;
+  outline-style: none;
 }
-  @media (min-width: 1024px) {
+@media (width >= 64rem) {
   .bk.bk-toolbar-menu .bk-toolbar-menu-button {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-bg-opacity, 1));
+    background-color: rgb(var(--bk-theme-accent-700) / 1);
   }
-  .bk.bk-toolbar-menu .bk-toolbar-menu-button:hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1));
+}
+@media (width >= 64rem) {
+  @media (hover: hover) {
+    :is(.bk.bk-toolbar-menu .bk-toolbar-menu-button):hover {
+      background-color: rgb(var(--bk-theme-accent-800) / 1);
+    }
   }
 }
-  .bk.bk-toolbar-menu .bk-toolbar-menu-button.bk-is-active {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-text-opacity, 1));
+.bk-is-active:is(.bk.bk-toolbar-menu .bk-toolbar-menu-button) {
+  background-color: white;
+  color: rgb(var(--bk-theme-accent-700) / 1);
 }
-  .bk.bk-toolbar-menu .bk-toolbar-menu-button svg {
+:is(.bk.bk-toolbar-menu .bk-toolbar-menu-button) svg {
   pointer-events: none;
   height: 24px;
   width: 24px;
-  fill: currentColor;
+  fill: currentcolor;
 }
-
 .bk.bk-toolbar {
   position: relative;
-  z-index: calc(var(--bk-z-index-base) + 160000) /* "toolbar" */;
+  z-index: calc(var(--bk-z-index-base) + 150000) /* "toolbar" */;
+  -webkit-user-select: none;
   user-select: none;
   pointer-events: auto;
-  display: flex;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-bg-opacity, 1));
-  font-size: 16px;
-  line-height: 24px;
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   contain: style size;
   grid-area: toolbar;
 }
-
-@media (min-width: 1024px) {
-
-.bk .bk-toolbar-container:not(:first-child) {
+@media (width >= 64rem) {
+  :is(.bk .bk-toolbar-container):not(:first-child) {
+    border-left-style: var(--bk-tw-border-style);
     border-left-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-left-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+    border-left-color: rgb(var(--bk-theme-mono-600) / 1);
   }
-      }
-
-.bk .bk-toolbar-container:empty {
+}
+:is(.bk .bk-toolbar-container):empty {
   display: none;
 }
-
 .bk .bk-toolbar-container {
   position: relative;
   display: flex;
   height: 100%;
 }
-
-.bk .bk-toolbar-container#bk-toolbar-view-options {
-  display: none;
+#bk-toolbar-title:is(.bk .bk-toolbar-container) {
+  flex: 1;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
 }
-
-@media (min-width: 1024px) {
-  .bk .bk-toolbar-container#bk-toolbar-view-options {
-    display: flex;
+@media (width >= 64rem) {
+  #bk-toolbar-title:is(.bk .bk-toolbar-container) {
+    font-size: var(--text-sm, 14px);
+    line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   }
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title {
-  flex: 1 1 0%;
-  font-size: 12px;
-  line-height: 16px;
-}
-
-@media (min-width: 1024px) {
-  .bk .bk-toolbar-container#bk-toolbar-title {
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .bk .bk-toolbar-container#bk-toolbar-title {
-    font-size: 16px;
-    line-height: 24px;
+@media (width >= 80rem) {
+  #bk-toolbar-title:is(.bk .bk-toolbar-container) {
+    font-size: var(--text-base, 16px);
+    line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
   }
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled {
+#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled {
   position: relative;
+  border-right-style: var(--bk-tw-border-style);
   border-right-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-right-color: rgb(var(--bk-theme-yellow-dark) / var(--bk-tw-border-opacity, 1));
-  font-size: 14px;
-  line-height: 20px;
+  border-right-color: rgb(var(--bk-theme-yellow-dark) / 1);
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-leading: 1 !important;
   line-height: 1 !important;
-  background-color: rgb(var(--bk-theme-yellow-dark) / 0.5);
-  color: rgb(var(--bk-theme-yellow-light) / 0.9);
+  background-color: rgb(var(--bk-theme-yellow-dark) / 1);
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled:hover {
-  background-color: rgb(var(--bk-theme-yellow-dark) / 0.8);
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1));
+@supports (color: color-mix(in lab, red, red)) {
+  #bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-dark) / 1) 50%, transparent);
+  }
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled {
-  font-weight: 600;
+#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled {
+  color: rgb(var(--bk-theme-yellow-light) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  #bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled {
+    color: color-mix(in oklab, rgb(var(--bk-theme-yellow-light) / 1) 90%, transparent);
+  }
+}
+@media (hover: hover) {
+  :is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled):hover {
+    background-color: rgb(var(--bk-theme-yellow-dark) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-yellow-dark) / 1) 80%, transparent);
+    }
+  }
+}
+@media (hover: hover) {
+  :is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled):hover {
+    color: rgb(var(--bk-theme-yellow-light) / 1);
+  }
+}
+#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled {
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
   display: flex;
   align-items: center;
   gap: 10px;
-  padding-left: 10px;
-  padding-right: 10px;
-        flex: 0 0 auto;
+  padding-inline: 10px;
+  flex: 0 0 auto;
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled .bk-toolbar-title-scheduled-text {
+:is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled) .bk-toolbar-title-scheduled-text {
   white-space: nowrap;
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled .bk-icon {
+:is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled) .bk-icon {
   width: 20px;
   height: 20px;
   flex-shrink: 0;
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title .bk-toolbar-title-scheduled .bk-icon svg {
-  fill: currentColor;
-}
-
-.bk .bk-toolbar-button {
-  display: flex;
-  height: 40px;
-  min-width: 50px;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding-left: 10px;
-  padding-right: 10px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-text-opacity, 1));
-}
-
-@media (min-width: 1024px) {
-  .bk .bk-toolbar-button {
-    height: 50px;
-  }
-  .bk .bk-toolbar-button:not(.bk-is-active):hover {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
-  }
-}
-
-.bk .bk-toolbar-button.bk-is-active {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-800) / var(--bk-tw-bg-opacity, 1));
-}
-
-.bk .bk-toolbar-button.bk-is-inactive {
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-text-opacity, 1));
-}
-
-.bk .bk-toolbar-button[disabled] {
-  pointer-events: none;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
-}
-
-.bk .bk-toolbar-button svg {
-  width: 18px;
-  height: 18px;
-}
-
-@media (min-width: 1024px) {
-  .bk .bk-toolbar-button svg {
-    width: 20px;
-    height: 20px;
-  }
-}
-
-.bk .bk-toolbar-button .bk-icon svg {
-  fill: currentColor;
+:is(:is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled) .bk-icon) svg {
+  fill: currentcolor;
 }
 </style>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title: string;
+    toggleElement: HTMLElement | null;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,36 @@
+<template>
+  <div
+    ref="rootEl"
+    class="_bk_absolute _bk_top-full _bk_right-0 _bk_bg-white _bk_shadow-2xl _bk_border _bk_border-mono-300 _bk_border-t-0"
+  >
+    <div
+      class="_bk_bg-mono-200 _bk_text-xs _bk_font-semibold _bk_uppercase _bk_tracking-wider _bk_border-b _bk_border-b-mono-300 _bk_flex _bk_h-40 _bk_items-center _bk_justify-between"
+    >
+      <div class="_bk_px-10">{{ title }}</div>
+      <button
+        class="_bk_size-40 _bk_flex _bk_items-center _bk_justify-center _bk_hover:bg-mono-300"
+        @click.prevent="$emit('close')"
+      >
+        <Icon name="bk_mdi_close" class="_bk_size-15" />
+      </button>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { useDismiss } from "#blokkli/editor/composables";
+import { Icon } from "#blokkli/editor/components";
+import { useTemplateRef } from "vue";
+const props = defineProps({
+  title: { type: String, required: true },
+  toggleElement: { type: null, required: true }
+});
+const emit = defineEmits(["close"]);
+const rootEl = useTemplateRef("rootEl");
+useDismiss({
+  element: rootEl,
+  ignore: () => props.toggleElement,
+  onDismiss: () => emit("close")
+});
+</script>

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

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    title: string;
+    toggleElement: HTMLElement | null;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Tooltip/Context.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="_bk_mt-8 _bk_text-xs _bk_w-full">
     <strong>{{ label }}</strong>
-    <span v-if="description">: {{ description }}</span>
+    <span v-if="description"
+      >: {{ description }}</span
+    >
   </div>
 </template>
 

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

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="_bk_text-white _bk_text-sm _bk_rounded _bk_select-none _bk_pointer-events-none _bk_leading-none _bk_whitespace-nowrap _bk_min-h-40 _bk_font-sans _bk_flex _bk_flex-col _bk_justify-center"
+    class="_bk_text-white _bk_text-sm _bk_select-none _bk_pointer-events-none _bk_leading-none _bk_whitespace-nowrap _bk_min-h-40 _bk_font-sans _bk_flex _bk_flex-col _bk_justify-center _bk_rounded"
     :class="{
-  '_bk_!text-xs _bk_!min-h-25 _bk_!px-5 _bk_!py-3': small,
-  '_bk_absolute _bk_invisible _bk_group-hover/tooltip:visible _bk_bg-mono-800/90 _bk_p-10': placement !== 'inline',
+  '_bk_!min-h-25 _bk_!px-5 _bk_!py-3': small,
+  '_bk_absolute _bk_invisible _bk_group-hover/tooltip:visible _bk_bg-mono-800/95 _bk_p-10': placement !== 'inline',
   '_bk_top-full _bk_mt-5': placement.startsWith('below-'),
   '_bk_bottom-full _bk_mb-5': placement.startsWith('above-'),
   '_bk_top-0': placement.startsWith('top-'),
@@ -19,10 +19,21 @@
 }"
   >
     <div class="_bk_flex _bk_gap-5 _bk_justify-between _bk_items-center">
-      <div class="_bk_font-bold" v-html="label" />
+      <div
+        class="_bk_font-bold"
+        :class="{
+  '_bk_min-w-[250px] _bk_whitespace-normal': largeText && !small,
+  '_bk_text-xs': small,
+  '_bk_text-sm': !small
+}"
+        v-html="label"
+      />
       <slot name="shortcut" />
     </div>
-    <div v-if="description" class="_bk_font-normal _bk_mt-5 _bk_text-xs">
+    <div
+      v-if="description"
+      class="_bk_font-normal _bk_mt-5 _bk_text-xs"
+    >
       <div v-if="description" v-html="description" />
     </div>
     <slot name="status" />
@@ -30,11 +41,13 @@
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "#imports";
+const props = defineProps({
   label: { type: String, required: true },
   placement: { type: String, required: false, default: "below-left" },
   description: { type: [String, null], required: false, default: "" },
   margin: { type: Boolean, required: false, default: false },
   small: { type: Boolean, required: false }
 });
+const largeText = computed(() => props.label.length > 20);
 </script>

package/dist/runtime/editor/components/Transition/Collapse/index.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Transition/Collapse/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <Transition name="bk-collapse-transition">
+    <slot />
+  </Transition>
+</template>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-collapse-transition-enter-active,
+.bk-collapse-transition-leave-active {
+  interpolate-size: allow-keywords;
+  transition: height 250ms cubic-bezier(0.56, 0.04, 0.25, 1),
+    opacity 200ms ease;
+  overflow: hidden;
+}
+.bk-collapse-transition-enter-from,
+.bk-collapse-transition-leave-to {
+  height: 0;
+  opacity: 0;
+}
+</style>

package/dist/runtime/editor/components/Transition/Collapse/index.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Transition/List/index.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /**
+     * Tag rendered by the underlying `<TransitionGroup>`. Defaults to `div`.
+     */
+    tag?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/components/Transition/List/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <TransitionGroup :tag name="bk-list-transition" class="bk-list-transition">
+    <slot />
+  </TransitionGroup>
+</template>
+
+<script setup>
+defineProps({
+  tag: { type: String, required: false, default: "div" }
+});
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-list-transition {
+  interpolate-size: allow-keywords;
+}
+.bk-list-transition-enter-active,
+.bk-list-transition-leave-active {
+  transition: height 250ms cubic-bezier(0.56, 0.04, 0.25, 1),
+    opacity 200ms ease;
+  overflow: hidden;
+}
+.bk-list-transition-enter-from,
+.bk-list-transition-leave-to {
+  height: 0;
+  opacity: 0;
+}
+.bk-list-transition-move {
+  transition: transform 250ms cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+</style>

package/dist/runtime/editor/components/Transition/List/index.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    /**
+     * Tag rendered by the underlying `<TransitionGroup>`. Defaults to `div`.
+     */
+    tag?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};