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

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

@@ -84,59 +84,53 @@ function dismiss() {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk ul.bk-system-requirements {
-    margin-bottom: 15px;
-    display: grid;
-    gap: 10px
+  margin-bottom: 15px;
+  display: grid;
+  gap: 10px;
 }
-    .bk ul.bk-system-requirements li {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    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: 10px
+:is(.bk ul.bk-system-requirements) li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 10px;
 }
-    .bk ul.bk-system-requirements li h3 {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    font-size: 18px;
-    line-height: 28px;
-    font-weight: 700
+:is(:is(.bk ul.bk-system-requirements) li) h3 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  font-size: var(--text-lg, 18px);
+  line-height: var(--bk-tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-    .bk ul.bk-system-requirements li.bk-is-success .bk-system-requirements-icon {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-text-opacity, 1))
+.bk-is-success:is(:is(.bk ul.bk-system-requirements) li) .bk-system-requirements-icon {
+  background-color: rgb(var(--bk-theme-lime-normal) / 1);
+  color: rgb(var(--bk-theme-lime-light) / 1);
 }
-    .bk ul.bk-system-requirements li.bk-is-error {
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1))
+.bk-is-error:is(:is(.bk ul.bk-system-requirements) li) {
+  border-color: rgb(var(--bk-theme-red-normal) / 1);
+  background-color: rgb(var(--bk-theme-red-light) / 1);
+  color: rgb(var(--bk-theme-red-dark) / 1);
 }
-    .bk ul.bk-system-requirements li.bk-is-error .bk-system-requirements-icon {
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-red-light) / var(--bk-tw-text-opacity, 1))
+.bk-is-error:is(:is(.bk ul.bk-system-requirements) li) .bk-system-requirements-icon {
+  background-color: rgb(var(--bk-theme-red-normal) / 1);
+  color: rgb(var(--bk-theme-red-light) / 1);
 }
-  .bk .bk-system-requirements-icon {
-    position: relative;
-    width: 18px;
-    height: 18px;
-    flex-shrink: 0;
-    border-radius: 9999px;
-    padding: 2px
+.bk .bk-system-requirements-icon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: calc(infinity * 1px);
+  padding: 2px;
 }
-  .bk .bk-system-requirements-icon svg {
-    fill: currentColor
+:is(.bk .bk-system-requirements-icon) svg {
+  fill: currentcolor;
 }
 </style>

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

@@ -5,6 +5,7 @@ export type TabItem<Id extends string = string> = {
 declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         tabs: TabItem<T>[];
+        mono?: boolean;
     } & {
         modelValue: T;
     }) & {

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

@@ -9,10 +9,11 @@
         role="tab"
         :aria-selected="modelValue === tab.id"
         :class="{
-  '_bk_!bg-white _bk_!text-mono-900': modelValue === tab.id,
+  '_bk_!bg-mono-100 _bk_!text-mono-900': modelValue === tab.id && mono,
+  '_bk_!bg-white _bk_!text-mono-900': modelValue === tab.id && !mono,
   '_bk_hover:!bg-mono-700': modelValue !== tab.id
 }"
-        class="_bk_text-lg _bk_font-bold _bk_px-30 _bk_py-10 _bk_rounded-t-md _bk_text-white"
+        class="_bk_text-lg _bk_font-bold _bk_px-30 _bk_py-10 _bk_text-white _bk_rounded-t"
         @click.prevent="modelValue = tab.id"
       >
         {{ tab.label }}
@@ -26,7 +27,8 @@
 
 <script setup>
 defineProps({
-  tabs: { type: Array, required: true }
+  tabs: { type: Array, required: true },
+  mono: { type: Boolean, required: false }
 });
 const modelValue = defineModel({ type: null, ...{ required: true } });
 </script>

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

@@ -5,6 +5,7 @@ export type TabItem<Id extends string = string> = {
 declare const __VLS_export: <T extends string = string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         tabs: TabItem<T>[];
+        mono?: boolean;
     } & {
         modelValue: T;
     }) & {

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,60 @@
   <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"
+          data-test="app-menu-toggle"
+          @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" />
+      <div id="bk-toolbar-view-options" class="bk-toolbar-container" />
+      <div id="bk-toolbar-artboard" class="bk-toolbar-container" />
       <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>
@@ -93,6 +115,7 @@ import {
 import AppMenu from "./../AppMenu/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,144 +227,148 @@ 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 {
+#bk-toolbar-view-options:is(.bk .bk-toolbar-container) {
   display: none;
 }
-
-@media (min-width: 1024px) {
-  .bk .bk-toolbar-container#bk-toolbar-view-options {
+@media (width >= 64rem) {
+  #bk-toolbar-view-options:is(.bk .bk-toolbar-container) {
     display: flex;
   }
 }
-
-.bk .bk-toolbar-container#bk-toolbar-title {
-  flex: 1 1 0%;
-  font-size: 12px;
-  line-height: 16px;
+#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-title {
-    font-size: 14px;
-    line-height: 20px;
+@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)));
   }
 }
-
-@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;
+:is(:is(#bk-toolbar-title:is(.bk .bk-toolbar-container) .bk-toolbar-title-scheduled) .bk-icon) svg {
+  fill: currentcolor;
 }
-
 .bk .bk-toolbar-button {
   display: flex;
   height: 40px;
@@ -350,51 +376,42 @@ export default {
   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));
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-mono-200) / 1);
 }
-
-@media (min-width: 1024px) {
+@media (width >= 64rem) {
   .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));
+}
+@media (width >= 64rem) {
+  @media (hover: hover) {
+    :is(.bk .bk-toolbar-button):not(.bk-is-active):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 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-is-active:is(.bk .bk-toolbar-button) {
+  background-color: rgb(var(--bk-theme-mono-800) / 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-is-inactive:is(.bk .bk-toolbar-button) {
+  color: rgb(var(--bk-theme-mono-600) / 1);
 }
-
-.bk .bk-toolbar-button[disabled] {
+[disabled]:is(.bk .bk-toolbar-button) {
   pointer-events: none;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-text-opacity, 1));
+  color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-.bk .bk-toolbar-button svg {
+:is(.bk .bk-toolbar-button) svg {
   width: 18px;
   height: 18px;
 }
-
-@media (min-width: 1024px) {
-  .bk .bk-toolbar-button svg {
+@media (width >= 64rem) {
+  :is(.bk .bk-toolbar-button) svg {
     width: 20px;
     height: 20px;
   }
 }
-
-.bk .bk-toolbar-button .bk-icon svg {
-  fill: currentColor;
+:is(.bk .bk-toolbar-button) .bk-icon svg {
+  fill: currentcolor;
 }
 </style>

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

@@ -14,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string | null;
-    placement: Placement | "inline";
     margin: boolean;
+    placement: Placement | "inline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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,7 +19,15 @@
 }"
   >
     <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">
@@ -30,11 +38,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/Tooltip/index.vue.d.ts

@@ -14,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string | null;
-    placement: Placement | "inline";
     margin: boolean;
+    placement: Placement | "inline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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;
+    };
+};