@blokkli/editor 2.0.0-alpha.54 → 2.0.0-alpha.56

package/dist/runtime/editor/components/Konami/Game/index.vue

@@ -749,3 +749,123 @@ onBlokkliEvent("canvas:draw", (e) => {
   draw(time);
 });
 </script>
+
+<style>
+.bk.bk-konami {
+  --bg: #859018;
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  z-index: 9999999999999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  background-color: rgb(var(--bk-theme-mono-950) / 0.9);
+}
+
+  .bk.bk-konami .bk-konami-game {
+  position: relative;
+  padding: 60px;
+  --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --bk-tw-shadow-colored: 0 25px 50px -12px 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);
+  outline-style: solid;
+  outline-width: 5px;
+  outline-color: rgb(var(--bk-theme-mono-900) / 1);
+  overflow: hidden;
+  border-radius: 2vw;
+    background: var(--bg);
+}
+
+  .bk.bk-konami .bk-konami-game:before {
+      content: '';
+      position: absolute;
+      inset: 0px;
+      z-index: 999;
+      box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.4);
+    }
+
+  .bk.bk-konami .bk-konami-game canvas {
+  display: block;
+}
+
+  .bk.bk-konami .bk-konami-game canvas.bk-is-pixel-grid {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+        image-rendering: pixelated;
+}
+
+  .bk.bk-konami .bk-konami-game canvas.bk-is-display {
+        image-rendering: pixelated;
+      }
+
+  .bk.bk-konami .bk-konami-game-canvas {
+  position: relative;
+    outline: 1px solid rgba(0, 0, 0, 0.3);
+}
+
+  .bk.bk-konami .bk-konami-game-block-icon {
+  pointer-events: none;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+    transition: all 0.1s ease;
+    background: rgba(0, 0, 0, 0.6);
+}
+
+  .bk.bk-konami .bk-konami-game-block-icon svg {
+  width: 60%;
+  height: 60%;
+  fill: currentColor;
+  --bk-tw-text-opacity: 1;
+  color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
+}
+
+  .bk.bk-konami .bk-konami-score {
+  text-align: center;
+  font-size: 24px;
+  line-height: 32px;
+    color: #0f0;
+    font-family: 'Courier New', monospace;
+    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
+}
+
+  .bk.bk-konami .bk-konami-game-over {
+  margin-top: 5px;
+  text-align: center;
+  font-size: 30px;
+  line-height: 36px;
+    color: #f00;
+    font-family: 'Courier New', monospace;
+    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
+}
+
+  .bk.bk-konami .bk-konami-instructions {
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+  opacity: 0.7;
+    color: #0f0;
+    font-family: 'Courier New', monospace;
+}
+
+  .bk.bk-konami .bk-konami-debug-canvas {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 50;
+}
+
+  .bk.bk-konami .bk-konami-debug-canvas canvas {
+      image-rendering: pixelated;
+    }
+</style>

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

@@ -1,14 +1,16 @@
 <template>
-  <BlokkliTransition name="slide-up">
-    <Game v-if="isEnabled" @close="isEnabled = false" />
-  </BlokkliTransition>
+  <Teleport to="body">
+    <BlokkliTransition name="slide-up">
+      <Game v-if="isEnabled" @close="isEnabled = false" />
+    </BlokkliTransition>
+  </Teleport>
 </template>
 
 <script setup>
-import Game from "./Game/index.vue";
-import { ref } from "#imports";
+import { defineAsyncComponent, ref } from "#imports";
 import { BlokkliTransition } from "#blokkli/editor/components";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
+const Game = defineAsyncComponent(() => import("./Game/index.vue"));
 const isEnabled = ref(false);
 const KONAMI_CODE = [
   "ArrowUp",
@@ -40,122 +42,3 @@ onBlokkliEvent("keyPressed", (e) => {
   }
 });
 </script>
-
-<style>
-.bk.bk-konami {
-  --bg: #859018;
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  z-index: 9999999999999;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-}
-
-  .bk.bk-konami .bk-konami-game {
-  position: relative;
-  padding: 60px;
-  --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-  --bk-tw-shadow-colored: 0 25px 50px -12px 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);
-  outline-style: solid;
-  outline-width: 5px;
-  outline-color: rgb(var(--bk-theme-mono-900) / 1);
-  overflow: hidden;
-  border-radius: 2vw;
-    background: var(--bg);
-}
-
-  .bk.bk-konami .bk-konami-game:before {
-      content: '';
-      position: absolute;
-      inset: 0px;
-      z-index: 999;
-      box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.4);
-    }
-
-  .bk.bk-konami .bk-konami-game canvas {
-  display: block;
-}
-
-  .bk.bk-konami .bk-konami-game canvas.bk-is-pixel-grid {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 50;
-        image-rendering: pixelated;
-}
-
-  .bk.bk-konami .bk-konami-game canvas.bk-is-display {
-        image-rendering: pixelated;
-      }
-
-  .bk.bk-konami .bk-konami-game-canvas {
-  position: relative;
-    outline: 1px solid rgba(0, 0, 0, 0.3);
-}
-
-  .bk.bk-konami .bk-konami-game-block-icon {
-  pointer-events: none;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-    transition: all 0.1s ease;
-    background: rgba(0, 0, 0, 0.6);
-}
-
-  .bk.bk-konami .bk-konami-game-block-icon svg {
-  width: 60%;
-  height: 60%;
-  fill: currentColor;
-  --bk-tw-text-opacity: 1;
-  color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
-}
-
-  .bk.bk-konami .bk-konami-score {
-  text-align: center;
-  font-size: 24px;
-  line-height: 32px;
-    color: #0f0;
-    font-family: 'Courier New', monospace;
-    text-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
-}
-
-  .bk.bk-konami .bk-konami-game-over {
-  margin-top: 5px;
-  text-align: center;
-  font-size: 30px;
-  line-height: 36px;
-    color: #f00;
-    font-family: 'Courier New', monospace;
-    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
-}
-
-  .bk.bk-konami .bk-konami-instructions {
-  text-align: center;
-  font-size: 14px;
-  line-height: 20px;
-  opacity: 0.7;
-    color: #0f0;
-    font-family: 'Courier New', monospace;
-}
-
-  .bk.bk-konami .bk-konami-debug-canvas {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  z-index: 50;
-}
-
-  .bk.bk-konami .bk-konami-debug-canvas canvas {
-      image-rendering: pixelated;
-    }
-</style>

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

@@ -2,7 +2,7 @@
   <div
     class="bk _bk_absolute _bk_top-0 _bk_left-0 _bk_size-full _bk_z-init-overlay _bk_flex _bk_items-center _bk_justify-center"
     :class="{
-  '_bk_!fixed _bk_!size-screen _bk_bg-mono-100': screen,
+  '_bk_!fixed _bk_!size-screen _bk_!bg-mono-100': screen,
   '_bk_bg-mono-100/90 _bk_text-mono-500': theme === 'light',
   '_bk_bg-white/90 _bk_text-mono-500': theme === 'white',
   '_bk_bg-mono-900/90 _bk_text-mono-200': theme === 'dark'

package/dist/runtime/editor/components/PluginConfigForm/Text/index.vue

@@ -14,6 +14,7 @@
     v-else
     :id="name"
     v-model="value"
+    lazy
     :label
     :required
     :description

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

@@ -15,6 +15,7 @@
         v-else-if="item.type === 'text'"
         v-bind="item"
         v-model="value[item.name]"
+        lazy
       />
       <FormOptions
         v-else-if="item.type === 'options'"

package/dist/runtime/editor/components/PreviewProvider.d.vue.ts

@@ -8,6 +8,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         entityBundle: string;
         language: string;
         providerType: ValidProviderTypes;
+    } & {
+        onReady?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -18,7 +20,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             mutatedEntity: T;
         }): any;
     };
-    emit: {};
+    emit: (e: "ready") => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -35,6 +35,7 @@ const props = defineProps({
   providerType: { type: null, required: true }
 });
 defineSlots();
+const emit = defineEmits(["ready"]);
 const context = computed(() => {
   return {
     entityType: props.entityType,
@@ -98,7 +99,10 @@ provide(INJECT_IS_PREVIEW, isPreview);
 provide(INJECT_EDIT_CONTEXT, {
   mutatedOptions,
   eventBus,
-  definitions
+  definitions,
+  selectedUuids: computed(() => {
+    return [];
+  })
 });
 function onMessage(e) {
   if (e.data && typeof e.data === "object" && e.data.name && typeof e.data.name === "string" && e.data.name.startsWith("blokkli__")) {
@@ -174,6 +178,7 @@ onMounted(() => {
   } else {
     checkChangedDate();
   }
+  emit("ready");
 });
 onBeforeUnmount(() => {
   clearTimeout(timeout);

package/dist/runtime/editor/components/PreviewProvider.vue.d.ts

@@ -8,6 +8,8 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         entityBundle: string;
         language: string;
         providerType: ValidProviderTypes;
+    } & {
+        onReady?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -18,7 +20,7 @@ declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             mutatedEntity: T;
         }): any;
     };
-    emit: {};
+    emit: (e: "ready") => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -5,23 +5,15 @@ export { default as Banner } from './Banner/index.vue.js';
 export { default as BannerInner } from './Banner/Inner.vue.js';
 export { default as BetaIndicator } from './BetaIndicator/index.vue.js';
 export { default as BlockPreviewItem } from './BlockPreviewItem/index.vue.js';
-export { default as BlockPreviewRenderer } from './BlockPreviewRenderer/index.vue.js';
 export { default as BlokkliTransition } from './Transition/index.vue.js';
-export { default as BundleSelector } from './BundleSelector/index.vue.js';
 export { default as ConfigForm } from './PluginConfigForm/index.vue.js';
 export { default as ConfigFormInline } from './PluginConfigFormInline/index.vue.js';
-export { default as DialogModal } from './Dialog/index.vue.js';
-export { default as DiffApproval } from './DiffApproval/index.vue.js';
-export { default as DiffDisplay } from './DiffViewer/DiffDisplay/index.vue.js';
-export { default as DiffValue } from './DiffViewer/DiffValue.vue.js';
-export { default as DiffViewerState } from './DiffViewer/State.vue.js';
 export { default as Dropdown } from './Dropdown/index.vue.js';
 export { default as DropdownItem } from './DropdownItem/index.vue.js';
 export { default as ErrorBoundary } from './BlokkliErrorBoundary.vue.js';
 export { default as FileDropHandler } from './FileDropHandler/index.vue.js';
 export { default as FlexTextarea } from './FlexTextarea/index.vue.js';
 export { default as FormCheckboxes } from './Form/Checkboxes/index.vue.js';
-export { default as FormDatepicker } from './Form/Datepicker/index.vue.js';
 export { default as FormGroup } from './Form/Group/index.vue.js';
 export { default as FormItem } from './Form/Item/index.vue.js';
 export { default as FormOverlay } from './FormOverlay/index.vue.js';
@@ -31,19 +23,18 @@ export { default as FormSelect } from './Form/Select/index.vue.js';
 export { default as FormText } from './Form/Text/index.vue.js';
 export { default as FormTextarea } from './Form/Textarea/index.vue.js';
 export { default as FormToggle } from './Form/Toggle/index.vue.js';
+export { default as GrowOnly } from './GrowOnly/index.vue.js';
 export { default as Highlight } from './Highlight/index.vue.js';
 export { default as Icon } from './Icon/index.vue.js';
 export { default as InfoBox } from './InfoBox/index.vue.js';
 export { default as ItemIcon } from './ItemIcon/index.vue.js';
 export { default as ItemIconBox } from './ItemIconBox/index.vue.js';
 export { default as Loading } from './Loading/index.vue.js';
-export { default as NestedEditorOverlay } from './NestedEditorOverlay/index.vue.js';
 export { default as Pagination } from './Pagination/index.vue.js';
 export { default as Popup } from './Popup/index.vue.js';
 export { default as RelativeTime } from './RelativeTime/index.vue.js';
 export { default as Resizable } from './Resizable/index.vue.js';
 export { default as ScaleToFit } from './ScaleToFit/index.vue.js';
-export { default as ScheduleDate } from './ScheduleDate/index.vue.js';
 export { default as ScrollBoundary } from './ScrollBoundary/index.vue.js';
 export { default as SearchOverlay } from './SearchOverlay/index.vue.js';
 export { default as ShortcutIndicator } from './ShortcutIndicator/index.vue.js';
@@ -57,3 +48,13 @@ export { default as Tooltip } from './Tooltip/index.vue.js';
 export { default as TooltipContext } from './Tooltip/Context.vue.js';
 export { default as TooltipStatus } from './Tooltip/Status.vue.js';
 export { default as NotEditStateInfo } from './NotEditStateInfo/index.vue.js';
+export declare const NestedEditorOverlay: any;
+export declare const BundleSelector: any;
+export declare const DialogModal: any;
+export declare const DiffApproval: any;
+export declare const BlockPreviewRenderer: any;
+export declare const ScheduleDate: any;
+export declare const DiffViewerState: any;
+export declare const DiffValue: any;
+export declare const DiffDisplay: any;
+export declare const FormDatepicker: any;

package/dist/runtime/editor/components/index.js

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from "vue";
 export { default as AddListItem } from "./AddListItem/index.vue";
 export { default as ArtboardTooltip } from "./ArtboardTooltip/index.vue";
 export { default as AutoHeight } from "./AutoHeight/index.vue";
@@ -5,23 +6,15 @@ export { default as Banner } from "./Banner/index.vue";
 export { default as BannerInner } from "./Banner/Inner.vue";
 export { default as BetaIndicator } from "./BetaIndicator/index.vue";
 export { default as BlockPreviewItem } from "./BlockPreviewItem/index.vue";
-export { default as BlockPreviewRenderer } from "./BlockPreviewRenderer/index.vue";
 export { default as BlokkliTransition } from "./Transition/index.vue";
-export { default as BundleSelector } from "./BundleSelector/index.vue";
 export { default as ConfigForm } from "./PluginConfigForm/index.vue";
 export { default as ConfigFormInline } from "./PluginConfigFormInline/index.vue";
-export { default as DialogModal } from "./Dialog/index.vue";
-export { default as DiffApproval } from "./DiffApproval/index.vue";
-export { default as DiffDisplay } from "./DiffViewer/DiffDisplay/index.vue";
-export { default as DiffValue } from "./DiffViewer/DiffValue.vue";
-export { default as DiffViewerState } from "./DiffViewer/State.vue";
 export { default as Dropdown } from "./Dropdown/index.vue";
 export { default as DropdownItem } from "./DropdownItem/index.vue";
 export { default as ErrorBoundary } from "./BlokkliErrorBoundary.vue";
 export { default as FileDropHandler } from "./FileDropHandler/index.vue";
 export { default as FlexTextarea } from "./FlexTextarea/index.vue";
 export { default as FormCheckboxes } from "./Form/Checkboxes/index.vue";
-export { default as FormDatepicker } from "./Form/Datepicker/index.vue";
 export { default as FormGroup } from "./Form/Group/index.vue";
 export { default as FormItem } from "./Form/Item/index.vue";
 export { default as FormOverlay } from "./FormOverlay/index.vue";
@@ -31,19 +24,18 @@ export { default as FormSelect } from "./Form/Select/index.vue";
 export { default as FormText } from "./Form/Text/index.vue";
 export { default as FormTextarea } from "./Form/Textarea/index.vue";
 export { default as FormToggle } from "./Form/Toggle/index.vue";
+export { default as GrowOnly } from "./GrowOnly/index.vue";
 export { default as Highlight } from "./Highlight/index.vue";
 export { default as Icon } from "./Icon/index.vue";
 export { default as InfoBox } from "./InfoBox/index.vue";
 export { default as ItemIcon } from "./ItemIcon/index.vue";
 export { default as ItemIconBox } from "./ItemIconBox/index.vue";
 export { default as Loading } from "./Loading/index.vue";
-export { default as NestedEditorOverlay } from "./NestedEditorOverlay/index.vue";
 export { default as Pagination } from "./Pagination/index.vue";
 export { default as Popup } from "./Popup/index.vue";
 export { default as RelativeTime } from "./RelativeTime/index.vue";
 export { default as Resizable } from "./Resizable/index.vue";
 export { default as ScaleToFit } from "./ScaleToFit/index.vue";
-export { default as ScheduleDate } from "./ScheduleDate/index.vue";
 export { default as ScrollBoundary } from "./ScrollBoundary/index.vue";
 export { default as SearchOverlay } from "./SearchOverlay/index.vue";
 export { default as ShortcutIndicator } from "./ShortcutIndicator/index.vue";
@@ -57,3 +49,33 @@ export { default as Tooltip } from "./Tooltip/index.vue";
 export { default as TooltipContext } from "./Tooltip/Context.vue";
 export { default as TooltipStatus } from "./Tooltip/Status.vue";
 export { default as NotEditStateInfo } from "./NotEditStateInfo/index.vue";
+export const NestedEditorOverlay = defineAsyncComponent(
+  () => import("./NestedEditorOverlay/index.vue")
+);
+export const BundleSelector = defineAsyncComponent(
+  () => import("./BundleSelector/index.vue")
+);
+export const DialogModal = defineAsyncComponent(
+  () => import("./Dialog/index.vue")
+);
+export const DiffApproval = defineAsyncComponent(
+  () => import("./DiffApproval/index.vue")
+);
+export const BlockPreviewRenderer = defineAsyncComponent(
+  () => import("./BlockPreviewRenderer/index.vue")
+);
+export const ScheduleDate = defineAsyncComponent(
+  () => import("./ScheduleDate/index.vue")
+);
+export const DiffViewerState = defineAsyncComponent(
+  () => import("./DiffViewer/State.vue")
+);
+export const DiffValue = defineAsyncComponent(
+  () => import("./DiffViewer/DiffValue.vue")
+);
+export const DiffDisplay = defineAsyncComponent(
+  () => import("./DiffViewer/DiffDisplay/index.vue")
+);
+export const FormDatepicker = defineAsyncComponent(
+  () => import("./Form/Datepicker/index.vue")
+);

package/dist/runtime/editor/composables/defineRenderer.d.ts

@@ -6,6 +6,6 @@ import type { Renderer } from '../providers/animation.js';
  * @param config - Renderer configuration (zIndex, enabled, render, collector)
  * @returns Object containing the collector instance with inferred type
  */
-export declare function defineRenderer<T>(id: string, config: Omit<Renderer<T>, 'id'>): {
+export declare function defineRenderer<T>(id: string, config: Omit<Renderer<T>, 'id'>): Promise<{
     collector: T;
-};
+}>;

package/dist/runtime/editor/composables/defineRenderer.js

@@ -1,9 +1,14 @@
 import { onBeforeUnmount, useBlokkli } from "#imports";
-export function defineRenderer(id, config) {
+export async function defineRenderer(id, config) {
   const { animation } = useBlokkli();
-  const { collector, unregister } = animation.registerRenderer(id, config);
+  let unmounted = false;
   onBeforeUnmount(() => {
-    unregister();
+    unmounted = true;
+    animation.unregisterRenderer(id);
   });
+  const { collector } = await animation.registerRenderer(id, config);
+  if (unmounted) {
+    animation.unregisterRenderer(id);
+  }
   return { collector };
 }