npm - @blokkli/editor - Versions diffs - 2.0.0-alpha.58 → 2.0.0-alpha.59 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1018) hide show

package/dist/runtime/editor/components/NestedEditorOverlay/index.vue CHANGED Viewed

@@ -3,16 +3,22 @@
     <Transition name="bk-library-edit-header">
       <div
         v-show="isLoaded"
-        class="bk bk-nested-editor-overlay"
-        :class="'bk-is-' + theme"
+        class="bk bk-nested-editor-overlay _bk_bg-scheme-light _bk_text-scheme-dark _bk_fixed _bk_top-0 _bk_left-0 _bk_size-full _bk_pointer-events-auto _bk_z-nested-editor-overlay-bg"
+        :class="'bk-scheme-' + theme"
       >
-        <Icon :name="icon" />
-        <header>
-          <h2>
+        <Icon
+          :name="icon"
+          class="_bk_size-120 _bk_-rotate-12 _bk_absolute _bk_-left-15 _bk_-top-30 _bk_text-scheme-normal _bk_opacity-10"
+        />
+        <header class="_bk_flex _bk_items-center _bk_h-40 _bk_3xl:h-50 _bk_relative _bk_pl-10">
+          <h2 class="_bk_text-lg _bk_3xl:text-xl _bk_leading-none _bk_font-bold">
             <span>{{ title }}</span>
           </h2>
-          <button @click.prevent="closeOverlay">
-            <Icon name="bk_mdi_arrow_left_alt" />
+          <button
+            class="_bk_h-40 _bk_3xl:h-50 _bk_flex _bk_items-center _bk_px-10 _bk_gap-10 _bk_font-semibold _bk_leading-none _bk_ml-auto _bk_hover:bg-scheme-light-hover _bk_text-sm _bk_3xl:text-base"
+            @click.prevent="closeOverlay"
+          >
+            <Icon name="bk_mdi_arrow_left_alt" class="_bk_size-[1.25em]" />
             <span>{{ backLabel }}</span>
           </button>
         </header>
@@ -31,10 +37,12 @@
     >
       <div
         v-show="isLoaded"
-        class="bk bk-library-edit-overlay"
+        class="bk bk-library-edit-overlay _bk_fixed _bk_top-40 _bk_3xl:top-50 _bk_left-0 _bk_w-screen _bk_bottom-0 _bk_flex _bk_flex-col _bk_pointer-events-auto _bk_z-nested-editor-overlay-iframe"
         :class="'bk-is-' + theme"
       >
-        <div class="bk-library-edit-overlay-frame">
+        <div
+          class="_bk_relative _bk_top-0 _bk_left-0 _bk_w-full _bk_h-full _bk_bg-white _bk_overflow-hidden"
+        >
           <slot>
             <div class="_bk_flex _bk_flex-col _bk_h-full">
               <NotEditStateInfo />
@@ -42,7 +50,7 @@
                 v-if="url"
                 ref="iframe"
                 :src="url"
-                style="width: 100%; height: 100%"
+                class="_bk_block _bk_size-full"
                 @load="onLoad"
               />
             </div>
@@ -309,204 +317,30 @@ onBroadcastEvent("closeEditor", onClosed);
 onBroadcastEvent("editorLoaded", onEditorLoaded);
 </script>
-<style>
-.bk.bk-nested-editor-overlay {
-      pointer-events: auto;
-      position: fixed;
-      top: 0px;
-      left: 0px;
-      width: 100%;
-      height: 100%;
-      z-index: calc(var(--bk-z-index-base) + 420000) /* "nested-editor-overlay-bg" */;
-}
-  .bk.bk-nested-editor-overlay > .bk-icon {
-      position: absolute;
-      left: -15px;
-      top: -30px;
-      width: 120px;
-      height: 120px;
-      --bk-tw-rotate: -12deg;
-      transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-}
-  .bk.bk-nested-editor-overlay > .bk-icon svg {
-      width: 100%;
-      height: 100%;
-      fill: currentColor;
-}
-  .bk.bk-nested-editor-overlay header {
-      position: relative;
-      display: flex;
-      height: 50px;
-      align-items: center;
-      padding-left: 10px;
-}
-  .bk.bk-nested-editor-overlay header h2 {
-      font-size: 20px;
-      line-height: 28px;
-      font-weight: 700;
-      line-height: 1;
-}
-  .bk.bk-nested-editor-overlay.bk-is-red {
-      --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.bk-nested-editor-overlay.bk-is-red > .bk-icon {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
-      opacity: 0.15;
-}
-  .bk.bk-nested-editor-overlay.bk-is-red button {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-red-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk.bk-nested-editor-overlay.bk-is-red button:hover {
-      background-color: rgb(var(--bk-theme-red-normal) / 0.15);
-}
-  .bk.bk-nested-editor-overlay.bk-is-lime {
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk.bk-nested-editor-overlay.bk-is-lime > .bk-icon {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
-      opacity: 0.35;
-}
-  .bk.bk-nested-editor-overlay.bk-is-lime button {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
-}
-  .bk.bk-nested-editor-overlay.bk-is-lime button:hover {
-      background-color: rgb(var(--bk-theme-lime-normal) / 0.15);
-}
-  .bk.bk-nested-editor-overlay.bk-is-accent {
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-accent-100) / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1));
-}
-  .bk.bk-nested-editor-overlay.bk-is-accent > .bk-icon {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-text-opacity, 1));
-}
-  .bk.bk-nested-editor-overlay.bk-is-accent button {
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-accent-600) / var(--bk-tw-text-opacity, 1));
-}
-  .bk.bk-nested-editor-overlay.bk-is-accent button:hover {
-      background-color: rgb(var(--bk-theme-accent-600) / 0.1);
-}
-  .bk.bk-nested-editor-overlay button {
-      display: flex;
-      height: 50px;
-      align-items: center;
-      gap: 10px;
-      padding-left: 10px;
-      padding-right: 10px;
-      font-weight: 600;
-      line-height: 1;
-      margin-left: auto;
-}
-  .bk.bk-nested-editor-overlay button svg {
-      width: 20px;
-      height: 20px;
-      fill: currentColor;
-}
-.bk-use-animations .bk-library-edit-header-enter-active,
-  .bk-use-animations .bk-library-edit-header-leave-active {
-      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: 700ms;
-      transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
-}
-.bk-use-animations .bk-library-edit-header-enter-active > header, .bk-use-animations .bk-library-edit-header-leave-active > header {
-      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: 700ms;
-      transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
-}
-.bk-use-animations .bk-library-edit-header-enter-from,
-  .bk-use-animations .bk-library-edit-header-leave-to {
-      opacity: 0;
-}
-.bk-use-animations .bk-library-edit-header-enter-from > header, .bk-use-animations .bk-library-edit-header-leave-to > header {
-      --bk-tw-translate-y: -100%;
-      transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-}
-.bk.bk-library-edit-overlay {
-      pointer-events: auto;
-      position: fixed;
-      top: 50px;
-      left: 0px;
-      bottom: 0px;
-      display: flex;
-      width: 100vw;
-      flex-direction: column;
-      z-index: calc(var(--bk-z-index-base) + 430000) /* "nested-editor-overlay-iframe" */;
-      padding-left: 10px;
-      padding-right: 10px;
-      padding-bottom: 10px;
-}
-.bk.bk-library-edit-overlay.bk-is-lime .bk-library-edit-overlay-frame {
-      box-shadow: 0px 2px 6px 0px rgb(var(--bk-theme-lime-dark) / 30%);
-    }
-.bk.bk-library-edit-overlay.bk-is-red .bk-library-edit-overlay-frame {
-      box-shadow: 0px 2px 6px 0px rgb(var(--bk-theme-red-dark) / 30%);
-    }
-.bk.bk-library-edit-overlay.bk-is-accent .bk-library-edit-overlay-frame {
-      box-shadow: 0px 2px 6px 0px rgb(var(--bk-theme-accent-600) / 30%);
-    }
-.bk.bk-library-edit-overlay .bk-library-edit-overlay-frame {
-      position: relative;
-      top: 0px;
-      left: 0px;
-      height: 100%;
-      width: 100%;
-      overflow: hidden;
-      border-radius: 6px;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-      --bk-tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-      --bk-tw-shadow-colored: 0 1px 3px 0 var(--bk-tw-shadow-color), 0 1px 2px -1px 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);
-      border-width: 1px;
-      --bk-tw-border-opacity: 1;
-      border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-}
-.bk.bk-library-edit-overlay .bk-library-edit-overlay-frame iframe {
-      display: block;
-      width: 100%;
-      height: 100%;
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk-use-animations .bk-library-edit-header-enter-active,.bk-use-animations .bk-library-edit-header-leave-active {
+  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-tw-duration: 700ms;
+  transition-duration: 700ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+:is(.bk-use-animations .bk-library-edit-header-enter-active,.bk-use-animations .bk-library-edit-header-leave-active)  > header {
+  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-tw-duration: 700ms;
+  transition-duration: 700ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+}
+.bk-use-animations .bk-library-edit-header-enter-from,.bk-use-animations .bk-library-edit-header-leave-to {
+  opacity: 0%;
+}
+:is(.bk-use-animations .bk-library-edit-header-enter-from,.bk-use-animations .bk-library-edit-header-leave-to)  > header {
+  --bk-tw-translate-y: -100%;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
 }
 </style>

package/dist/runtime/editor/components/NestedEditorOverlay/index.vue.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
+import type { ThemeColorName } from '../../../../global/types/theme.js';
 export type NestedEditorOverlayProps = {
     url?: string;
     uuid: string;
     title: string;
-    theme: 'lime' | 'red' | 'accent';
+    theme: ThemeColorName;
     icon: BlokkliIcon;
     blockUuid?: string;
     element?: HTMLElement | null;

package/dist/runtime/editor/components/Overlay/index.vue CHANGED Viewed

@@ -3,6 +3,7 @@
     <div
       v-if="isVisible"
       class="bk bk-overlay"
+      :class="zIndexHigh ? '_bk_z-overlay-high' : '_bk_z-overlay'"
       @click.prevent.stop.capture="onClick"
       @dblclick.prevent="onDoubleClick"
       @wheel.capture.stop.prevent
@@ -53,6 +54,9 @@ function onClick() {
   }, 500);
 }
 const isVisible = computed(() => ui.hasDialogOpen.value);
+const zIndexHigh = computed(() => {
+  return ui.currentDialog.value?.zIndex === "high";
+});
 watch(isVisible, () => {
   if (clickTimeout) {
     window.clearTimeout(clickTimeout);
@@ -70,85 +74,58 @@ function onDoubleClick() {
 }
 </script>
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-overlay {
-    pointer-events: auto;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    bottom: 0px;
-    z-index: calc(var(--bk-z-index-base) + 340000) /* "overlay" */;
-    width: 100vw;
-    background-color: rgb(var(--bk-theme-mono-800) / 0.95);
-    display: flex;
-    align-items: flex-start
+  pointer-events: auto;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  width: 100vw;
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
 }
-  .bk.bk-overlay > .bk-overlay-inner {
-    margin: 20px;
-    border-radius: 6px;
-    background-color: rgb(var(--bk-theme-mono-300) / 0.2);
-    font-size: 16px;
-    line-height: 24px;
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-right: 15px;
-    display: inline-flex;
-    align-items: center;
-    gap: 10px;
-    height: auto;
-    flex-grow: 0;
-    border-width: 1px;
-    --bk-tw-border-opacity: 1;
-    border-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-overlay {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-mono-800) / 1) 95%, transparent);
+  }
 }
-  .bk.bk-overlay > .bk-overlay-inner.bk-is-right {
-    margin-left: auto
+.bk.bk-overlay {
+  display: flex;
+  align-items: flex-start;
 }
-  .bk.bk-overlay > .bk-overlay-inner .bk-icon {
-    width: 25px;
-    height: 25px
+.bk.bk-overlay  > .bk-overlay-inner {
+  margin: 20px;
+  background-color: rgb(var(--bk-theme-mono-300) / 1);
 }
-  .bk.bk-overlay > .bk-overlay-inner .bk-icon svg {
-    fill: currentColor
+@supports (color: color-mix(in lab, red, red)) {
+  .bk.bk-overlay  > .bk-overlay-inner {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-mono-300) / 1) 20%, transparent);
+  }
+}
+.bk.bk-overlay  > .bk-overlay-inner {
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  color: rgb(var(--bk-theme-mono-100) / 1);
+  padding-block: 10px;
+  padding-right: 15px;
+  padding-left: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: auto;
+  flex-grow: 0;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: rgb(var(--bk-theme-mono-500) / 1);
+}
+.bk-is-right:is(.bk.bk-overlay > .bk-overlay-inner) {
+  margin-left: auto;
+}
+:is(.bk.bk-overlay > .bk-overlay-inner) .bk-icon {
+  width: 25px;
+  height: 25px;
+}
+:is(:is(.bk.bk-overlay > .bk-overlay-inner) .bk-icon) svg {
+  fill: currentcolor;
 }
 </style>

package/dist/runtime/editor/components/Pagination/index.vue CHANGED Viewed

@@ -1,5 +1,5 @@
 <template>
-  <div class="bk bk-pagination">
+  <div class="bk bk-pagination _bk_bg-white">
     <button :disabled="page === 0" @click="page--">
       <Icon name="bk_mdi_arrow_left_alt" />
     </button>
@@ -18,43 +18,37 @@ defineProps({
 const page = defineModel({ type: Number, ...{ default: 0 } });
 </script>
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk .bk-pagination {
   display: flex;
   min-height: 60px;
   align-items: center;
   justify-content: space-between;
+  border-top-style: var(--bk-tw-border-style);
   border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  flex: 0 0 auto
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+  flex: 0 0 auto;
 }
-  .bk .bk-pagination > div {
-  font-size: 14px;
-  line-height: 20px
+:is(.bk .bk-pagination)  > div {
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
 }
-  .bk .bk-pagination button {
+:is(.bk .bk-pagination) button {
   padding: 20px;
-  --bk-tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--bk-tw-text-opacity, 1))
+  color: black;
 }
-  .bk .bk-pagination button:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1))
+@media (hover: hover) {
+  :is(:is(.bk .bk-pagination) button):hover {
+    background-color: rgb(var(--bk-theme-mono-100) / 1);
+  }
 }
-  .bk .bk-pagination button:disabled {
+:is(:is(.bk .bk-pagination) button):disabled {
   pointer-events: none;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
+  color: rgb(var(--bk-theme-mono-300) / 1);
 }
-  .bk .bk-pagination button svg {
+:is(:is(.bk .bk-pagination) button) svg {
   height: 20px;
   width: 20px;
-  fill: currentColor
+  fill: currentcolor;
 }
 </style>

package/dist/runtime/editor/components/Panel/Action/index.d.vue.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    title: string;
+    icon: BlokkliIcon;
+    active?: boolean;
+    disabled?: boolean;
+    isLarge?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Panel/Action/index.vue ADDED Viewed

@@ -0,0 +1,25 @@
+<template>
+  <button
+    class="_bk_flex-1 _bk_shrink-0 bk-panel-action _bk_flex _bk_text-mono-800 _bk_items-center _bk_justify-center _bk_py-10 _bk_font-semibold _bk_hover:bg-mono-100 _bk_hover:text-accent-700 _bk_w-full _bk_whitespace-nowrap _bk_border-r _bk_border-r-mono-400 _bk_border-t _bk_border-t-mono-400"
+    :class="{
+  '_bk_pointer-events-none! _bk_bg-mono-100! _bk_text-mono-300!': disabled,
+  '_bk_flex-col _bk_gap-8 _bk_text-sm': isLarge,
+  '_bk_flex-row _bk_px-5 _bk_gap-3 _bk_text-xs': !isLarge
+}"
+    :disabled
+  >
+    <Icon :name="icon" :class="isLarge ? '_bk_size-30' : '_bk_size-15'" />
+    <span>{{ title }}</span>
+  </button>
+</template>
+<script setup>
+import Icon from "#blokkli/editor/components/Icon/index.vue";
+defineProps({
+  title: { type: String, required: true },
+  icon: { type: null, required: true },
+  active: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  isLarge: { type: Boolean, required: false }
+});
+</script>

package/dist/runtime/editor/components/Panel/Action/index.vue.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    title: string;
+    icon: BlokkliIcon;
+    active?: boolean;
+    disabled?: boolean;
+    isLarge?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Panel/AddButton/index.d.vue.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    label: string;
+    icon?: BlokkliIcon;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Panel/AddButton/index.vue ADDED Viewed

@@ -0,0 +1,17 @@
+<template>
+  <button
+    type="button"
+    class="_bk_border-t _bk_border-t-mono-300 _bk_flex _bk_items-center _bk_justify-center _bk_px-15 _bk_py-10 _bk_w-full _bk_gap-8 _bk_hover:bg-mono-100 _bk_hover:text-accent-600 _bk_first:border-t-0"
+  >
+    <Icon :name="icon || 'bk_mdi_add'" class="_bk_size-18" />
+    <span class="_bk_font-semibold _bk_text-sm">{{ label }}</span>
+  </button>
+</template>
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+defineProps({
+  label: { type: String, required: true },
+  icon: { type: null, required: false }
+});
+</script>

package/dist/runtime/editor/components/Panel/AddButton/index.vue.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+type __VLS_Props = {
+    label: string;
+    icon?: BlokkliIcon;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/components/Panel/Details/index.d.vue.ts ADDED Viewed

@@ -0,0 +1,25 @@
+type __VLS_Props = {
+    title: string;
+    description?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => 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/Panel/Details/index.vue ADDED Viewed

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="_bk_bg-white bk-panel-item"
+    :class="{
+  '_bk_hover:bg-mono-100': !isOpen
+}"
+  >
+    <button
+      type="button"
+      class="_bk_p-panel-gap _bk_flex _bk_items-center _bk_justify-between _bk_w-full"
+      @click.prevent="isOpen = !isOpen"
+    >
+      <div>
+        <div class="_bk_font-semibold">{{ title }}</div>
+        <div v-if="description" class="_bk_text-sm _bk_text-mono-600">
+          {{ description }}
+        </div>
+      </div>
+      <Icon
+        name="bk_mdi_arrow_drop_down"
+        class="_bk_shrink-0 _bk_size-20"
+        :class="{
+  '_bk_rotate-180': isOpen
+}"
+      />
+    </button>
+    <TransitionHeight>
+      <div v-if="isOpen">
+        <div class="_bk_px-panel-gap _bk_pb-panel-gap">
+          <slot />
+        </div>
+      </div>
+    </TransitionHeight>
+  </div>
+</template>
+<script setup>
+import TransitionHeight from "#blokkli/editor/components/Transition/Height.vue";
+import Icon from "#blokkli/editor/components/Icon/index.vue";
+defineProps({
+  title: { type: String, required: true },
+  description: { type: String, required: false }
+});
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+</script>