@blokkli/editor 2.0.0-alpha.24 → 2.0.0-alpha.26

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

@@ -15,9 +15,11 @@
           class="bk-sidebar-title"
           @mousedown.stop="onMouseDown($event, 'move')"
         >
-          <slot name="icon">
-            <Icon v-if="icon" :name="icon" />
-          </slot>
+          <div class="bk-sidebar-title-icon">
+            <slot name="icon">
+              <Icon v-if="icon" :name="icon" />
+            </slot>
+          </div>
           <span>{{ title }}</span>
           <button
             @click.prevent.stop.capture="isMinimized = !isMinimized"
@@ -70,7 +72,7 @@ import {
 } from "#imports";
 import { Icon, ViewportBlockingRect, ScrollBoundary } from "#blokkli/components";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
-import { addElementClasses } from "#blokkli/helpers/addElementClasses";
+import { addElementClasses } from "#blokkli/helpers/composables/addElementClasses";
 const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },

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

@@ -53,6 +53,7 @@
       </template>
       <template #default="{ width, height, isResizing }">
         <div class="bk-sidebar-content-wrapper">
+          <Loading v-if="isLoading" white />
           <div ref="sidebarContent" class="bk-sidebar-content">
             <slot
               :key="isRenderedDetached ? 'detached' : 'attached'"
@@ -85,6 +86,7 @@
         </div>
       </div>
       <div class="bk-sidebar-content-wrapper">
+        <Loading v-if="isLoading" white />
         <div ref="sidebarContent" class="bk-sidebar-content">
           <slot
             :key="isRenderedDetached ? 'detached' : 'attached'"
@@ -110,7 +112,12 @@ import {
   onBeforeUnmount,
   useTemplateRef
 } from "#imports";
-import { Icon, ShortcutIndicator, ScrollBoundary } from "#blokkli/components";
+import {
+  Icon,
+  ShortcutIndicator,
+  ScrollBoundary,
+  Loading
+} from "#blokkli/components";
 import SidebarDetached from "./Detached/index.vue";
 import defineCommands from "#blokkli/helpers/composables/defineCommands";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
@@ -122,7 +129,7 @@ const props = defineProps({
   tourText: { type: String, required: false, default: void 0 },
   editOnly: { type: Boolean, required: false },
   icon: { type: null, required: true },
-  weight: { type: [String, Number], required: false, default: 0 },
+  weight: { type: [String, Number], required: true },
   renderAlways: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   region: { type: String, required: false, default: "right" },
@@ -132,7 +139,8 @@ const props = defineProps({
   meta: { type: Boolean, required: false },
   shift: { type: Boolean, required: false },
   keyCode: { type: String, required: false, default: void 0 },
-  beta: { type: Boolean, required: false }
+  beta: { type: Boolean, required: false },
+  isLoading: { type: Boolean, required: false }
 });
 const emit = defineEmits(["updated"]);
 const { storage, state, ui, $t } = useBlokkli();

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

@@ -1,49 +1,185 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SidebarRegion } from '#blokkli/types';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this sidebar.
+     */
     id: string;
+    /**
+     * The title displayed in the sidebar header.
+     */
     title: string;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this sidebar will be included in the editor tour.
+     */
     tourText?: string;
+    /**
+     * Whether the sidebar is only available in edit mode.
+     *
+     * If true, the sidebar is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * The icon displayed in the sidebar toggle button.
+     */
     icon: BlokkliIcon;
-    weight?: string | number;
+    /**
+     * The weight, used for positioning the sidebar button.
+     *
+     * Lower weights appear first.
+     */
+    weight: string | number;
+    /**
+     * Whether to always render the sidebar content.
+     *
+     * By default, content is only rendered when the sidebar is open.
+     */
     renderAlways?: boolean;
+    /**
+     * Whether the sidebar is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Which region to display the sidebar in.
+     *
+     * @default 'right'
+     */
     region?: SidebarRegion;
+    /**
+     * Minimum width when detached (in pixels).
+     */
     minWidth?: number;
+    /**
+     * Minimum height when detached (in pixels).
+     */
     minHeight?: number;
+    /**
+     * Default size when detached.
+     */
     size?: {
         width: number;
         height: number;
     };
+    /**
+     * Whether the keyboard shortcut needs the meta modifier key.
+     *
+     * On Mac this is Cmd, on Windows/Linux this is Ctrl.
+     */
     meta?: boolean;
+    /**
+     * Whether the keyboard shortcut needs the shift modifier key.
+     */
     shift?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * @example 'l' for the "l" key
+     */
     keyCode?: string;
+    /**
+     * Whether to display a BETA indicator badge.
+     */
     beta?: boolean;
+    /**
+     * Whether the sidebar content is currently loading.
+     *
+     * Displays a loading spinner when true.
+     */
+    isLoading?: boolean;
 }, {
     showSidebar: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     updated: () => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this sidebar.
+     */
     id: string;
+    /**
+     * The title displayed in the sidebar header.
+     */
     title: string;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this sidebar will be included in the editor tour.
+     */
     tourText?: string;
+    /**
+     * Whether the sidebar is only available in edit mode.
+     *
+     * If true, the sidebar is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * The icon displayed in the sidebar toggle button.
+     */
     icon: BlokkliIcon;
-    weight?: string | number;
+    /**
+     * The weight, used for positioning the sidebar button.
+     *
+     * Lower weights appear first.
+     */
+    weight: string | number;
+    /**
+     * Whether to always render the sidebar content.
+     *
+     * By default, content is only rendered when the sidebar is open.
+     */
     renderAlways?: boolean;
+    /**
+     * Whether the sidebar is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Which region to display the sidebar in.
+     *
+     * @default 'right'
+     */
     region?: SidebarRegion;
+    /**
+     * Minimum width when detached (in pixels).
+     */
     minWidth?: number;
+    /**
+     * Minimum height when detached (in pixels).
+     */
     minHeight?: number;
+    /**
+     * Default size when detached.
+     */
     size?: {
         width: number;
         height: number;
     };
+    /**
+     * Whether the keyboard shortcut needs the meta modifier key.
+     *
+     * On Mac this is Cmd, on Windows/Linux this is Ctrl.
+     */
     meta?: boolean;
+    /**
+     * Whether the keyboard shortcut needs the shift modifier key.
+     */
     shift?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * @example 'l' for the "l" key
+     */
     keyCode?: string;
+    /**
+     * Whether to display a BETA indicator badge.
+     */
     beta?: boolean;
+    /**
+     * Whether the sidebar content is currently loading.
+     *
+     * Displays a loading spinner when true.
+     */
+    isLoading?: boolean;
 }> & Readonly<{
     onUpdated?: (() => any) | undefined;
 }>, {
@@ -52,7 +188,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
         height: number;
     };
     keyCode: string;
-    weight: string | number;
     tourText: string;
     minWidth: number;
     minHeight: number;

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

@@ -1,41 +1,155 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this toolbar button.
+     */
     id: string;
+    /**
+     * The title displayed in the tooltip.
+     */
     title: string;
+    /**
+     * Which toolbar region to render the button in.
+     *
+     * Different regions appear in different locations of the toolbar.
+     */
     region: "after-title" | "before-title" | "before-sidebar" | "after-menu" | "before-sidebar-right" | "view-options";
+    /**
+     * Whether the button is only available in edit mode.
+     *
+     * If true, the button is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * Whether the button is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the button should be displayed in an active state.
+     *
+     * Useful when the button opens a dropdown or toggles a feature.
+     */
     active?: boolean;
+    /**
+     * Whether the keyboard shortcut needs the meta modifier key.
+     *
+     * On Mac this is Cmd, on Windows/Linux this is Ctrl.
+     */
     meta?: boolean;
+    /**
+     * Whether the keyboard shortcut needs the shift modifier key.
+     */
     shift?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * @example 'h' for the "h" key
+     */
     keyCode?: string;
+    /**
+     * Optional icon to display in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * The keyboard shortcut group.
+     *
+     * Used for organizing shortcuts in the shortcuts panel.
+     */
     shortcutGroup?: string;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this button will be included in the editor tour.
+     */
     tourText?: string;
     /**
      * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
      */
     weight?: number | string;
+    /**
+     * Whether to skip registering this button as a command.
+     *
+     * Useful when you want the button UI without command palette integration.
+     */
     noCommand?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this toolbar button.
+     */
     id: string;
+    /**
+     * The title displayed in the tooltip.
+     */
     title: string;
+    /**
+     * Which toolbar region to render the button in.
+     *
+     * Different regions appear in different locations of the toolbar.
+     */
     region: "after-title" | "before-title" | "before-sidebar" | "after-menu" | "before-sidebar-right" | "view-options";
+    /**
+     * Whether the button is only available in edit mode.
+     *
+     * If true, the button is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * Whether the button is disabled.
+     */
     disabled?: boolean;
+    /**
+     * Whether the button should be displayed in an active state.
+     *
+     * Useful when the button opens a dropdown or toggles a feature.
+     */
     active?: boolean;
+    /**
+     * Whether the keyboard shortcut needs the meta modifier key.
+     *
+     * On Mac this is Cmd, on Windows/Linux this is Ctrl.
+     */
     meta?: boolean;
+    /**
+     * Whether the keyboard shortcut needs the shift modifier key.
+     */
     shift?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * @example 'h' for the "h" key
+     */
     keyCode?: string;
+    /**
+     * Optional icon to display in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * The keyboard shortcut group.
+     *
+     * Used for organizing shortcuts in the shortcuts panel.
+     */
     shortcutGroup?: string;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this button will be included in the editor tour.
+     */
     tourText?: string;
     /**
      * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
      */
     weight?: number | string;
+    /**
+     * Whether to skip registering this button as a command.
+     *
+     * Useful when you want the button UI without command palette integration.
+     */
     noCommand?: boolean;
 }> & Readonly<{
     onClick?: ((...args: any[]) => any) | undefined;

package/dist/runtime/blokkliPlugins/TourItem/index.vue.d.ts

@@ -1,8 +1,29 @@
 type __VLS_Props = {
+    /**
+     * Unique identifier for this tour item.
+     */
     id: string;
+    /**
+     * The title of the tour step.
+     */
     title: string;
+    /**
+     * The description text explaining this feature.
+     *
+     * Supports markdown.
+     */
     text: string;
+    /**
+     * Optional CSS selector to find the target element.
+     *
+     * If provided, the tour will highlight this element.
+     */
     selector?: string;
+    /**
+     * Optional direct reference to the target element.
+     *
+     * Takes precedence over selector.
+     */
     element?: HTMLElement | null;
 };
 declare var __VLS_1: {};

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

@@ -1,27 +1,125 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this view option.
+     *
+     * Used for storage key and event tracking.
+     */
     id: string;
+    /**
+     * The label used in commands and tour.
+     */
     label: string;
+    /**
+     * The tooltip text when the option is OFF.
+     *
+     * Should describe what happens when turned on.
+     * @example 'Show grid'
+     */
     titleOn: string;
+    /**
+     * The tooltip text when the option is ON.
+     *
+     * Should describe what happens when turned off.
+     * @example 'Hide grid'
+     */
     titleOff: string;
+    /**
+     * Whether the view option is only available in edit mode.
+     *
+     * If true, the option is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * Automatically includes Meta modifier.
+     * @example 'g' for Cmd+G / Ctrl+G
+     */
     keyCode?: string;
+    /**
+     * The icon displayed in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this option will be included in the editor tour.
+     */
     tourText?: string;
+    /**
+     * Two-way binding for the active state.
+     *
+     * Can be used with v-model to track the option state.
+     */
     modelValue?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
+     */
     weight?: number | string;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (data: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this view option.
+     *
+     * Used for storage key and event tracking.
+     */
     id: string;
+    /**
+     * The label used in commands and tour.
+     */
     label: string;
+    /**
+     * The tooltip text when the option is OFF.
+     *
+     * Should describe what happens when turned on.
+     * @example 'Show grid'
+     */
     titleOn: string;
+    /**
+     * The tooltip text when the option is ON.
+     *
+     * Should describe what happens when turned off.
+     * @example 'Hide grid'
+     */
     titleOff: string;
+    /**
+     * Whether the view option is only available in edit mode.
+     *
+     * If true, the option is hidden in preview mode.
+     */
     editOnly?: boolean;
+    /**
+     * The key code to use for the keyboard shortcut.
+     *
+     * Automatically includes Meta modifier.
+     * @example 'g' for Cmd+G / Ctrl+G
+     */
     keyCode?: string;
+    /**
+     * The icon displayed in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this option will be included in the editor tour.
+     */
     tourText?: string;
+    /**
+     * Two-way binding for the active state.
+     *
+     * Can be used with v-model to track the option state.
+     */
     modelValue?: boolean;
+    /**
+     * The weight, used for positioning the button.
+     *
+     * Lower weights appear first.
+     */
     weight?: number | string;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((data: boolean) => any) | undefined;

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="bk bk-block-not-implemented">
+    <Icon name="alert" />
+    <div v-html="text" />
+  </div>
+</template>
+
+<script setup>
+import { useBlockRegistration } from "#blokkli/helpers/composables/useBlockRegistration";
+import { computed, useBlokkli } from "#imports";
+import { Icon } from "#blokkli/components";
+const props = defineProps({
+  uuid: { type: String, required: true },
+  bundle: { type: String, required: true }
+});
+const { dom, $t } = useBlokkli();
+const text = computed(() => {
+  return $t(
+    "blockNotImplemented",
+    "Missing component for block bundle <strong>@bundle</strong>."
+  ).replace("@bundle", props.bundle);
+});
+useBlockRegistration(dom, props.uuid);
+</script>

package/dist/runtime/components/Blocks/NotImplemented/index.vue.d.ts

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    uuid: string;
+    bundle: string;
+};
+declare const _default: 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>;
+export default _default;

package/dist/runtime/components/BlokkliEditable.vue.d.ts

@@ -1,6 +1,17 @@
 type __VLS_Props = {
+    /**
+     * The (machine) name of the field that is editable.
+     */
     name: string;
+    /**
+     * The text value.
+     */
     value?: string;
+    /**
+     * The tag to use for rendering the wrapper.
+     *
+     * @default "div"
+     */
     tag?: string;
 };
 type __VLS_Slots = {

package/dist/runtime/components/BlokkliItem.vue

@@ -14,7 +14,12 @@
     v-bind="props"
     :data-bk-in-proxy="fieldUsesProxy || (isEditing ? 'false' : void 0)"
   />
-  <div v-else-if="isEditing">Block not implemented</div>
+  <Component
+    :is="blockNotImplemented"
+    v-else-if="blockNotImplemented"
+    :uuid
+    :bundle
+  />
 </template>
 
 <script setup>
@@ -27,6 +32,7 @@ import {
 } from "#imports";
 import { getComponent } from "#blokkli/helpers/imports";
 import {
+  INJECT_ALL_COMPONENTS_CHUNK,
   INJECT_BLOCK_ITEM,
   INJECT_ENTITY_CONTEXT,
   INJECT_FIELD_LIST_TYPE,
@@ -38,14 +44,19 @@ const itemEntityType = useRuntimeConfig().public.blokkli.itemEntityType;
 const componentProps = defineProps({
   uuid: { type: String, required: true },
   bundle: { type: String, required: true },
+  isVisible: { type: Boolean, required: false },
   options: { type: null, required: false, default: () => ({}) },
+  editContext: { type: Object, required: false, default: void 0 },
   props: { type: null, required: false, default: () => ({}) },
   index: { type: Number, required: false, default: 0 },
-  editContext: { type: Object, required: false, default: void 0 },
   parentType: { type: String, required: false, default: "" },
   isEditing: { type: Boolean, required: false, default: false }
 });
 const isProxyMode = inject(INJECT_FIELD_PROXY_MODE, false);
+const allComponentsChunk = inject(
+  INJECT_ALL_COMPONENTS_CHUNK,
+  null
+);
 const fieldUsesProxy = inject(INJECT_FIELD_USES_PROXY, false);
 const isGlobalProxyMode = inject(
   INJECT_GLOBAL_PROXY_MODE,
@@ -59,8 +70,10 @@ const component = isProxyMode || isGlobalProxyMode?.value ? defineAsyncComponent
   "block",
   componentProps.bundle,
   fieldListType?.value || "default",
-  componentProps.parentType
+  componentProps.parentType,
+  allComponentsChunk
 );
+const blockNotImplemented = componentProps.isEditing ? defineAsyncComponent(() => import("./Blocks/NotImplemented/index.vue")) : null;
 const index = computed(() => componentProps.index);
 const item = computed(() => ({
   index,