@blokkli/editor 2.0.0-alpha.23 → 2.0.0-alpha.25

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

@@ -1,17 +1,55 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
+    /**
+     * Unique identifier for this indicator.
+     *
+     * Should be unique per block instance.
+     */
     id: string;
+    /**
+     * The UUID of the block this indicator is attached to.
+     */
     uuid: string;
+    /**
+     * Optional text label to display in the indicator.
+     */
     label?: string;
+    /**
+     * Which side of the block to display the indicator.
+     *
+     * @default 'left'
+     */
     position?: "left" | "right";
+    /**
+     * Optional icon to display in the indicator.
+     */
     icon?: BlokkliIcon;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<{
+    /**
+     * Unique identifier for this indicator.
+     *
+     * Should be unique per block instance.
+     */
     id: string;
+    /**
+     * The UUID of the block this indicator is attached to.
+     */
     uuid: string;
+    /**
+     * Optional text label to display in the indicator.
+     */
     label?: string;
+    /**
+     * Which side of the block to display the indicator.
+     *
+     * @default 'left'
+     */
     position?: "left" | "right";
+    /**
+     * Optional icon to display in the indicator.
+     */
     icon?: BlokkliIcon;
 }> & Readonly<{
     onClick?: (() => any) | undefined;

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

@@ -1,7 +1,7 @@
 <template>
   <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
     <slot />
-    <Teleport to="body">
+    <Teleport :to="ui.mainLayoutElement.value">
       <BlokkliTransition name="context-menu">
         <ContextMenuMenu
           v-if="isVisible"

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

@@ -1,7 +1,22 @@
 import type { ContextMenu } from '#blokkli/types';
 type __VLS_Props = {
+    /**
+     * Unique identifier for this context menu.
+     *
+     * Used to track which menu is currently open.
+     */
     id: string;
+    /**
+     * Array of menu items to display.
+     *
+     * Each item can have nested sub-menus.
+     */
     menu: ContextMenu[];
+    /**
+     * The HTML tag to use for the wrapper element.
+     *
+     * @default 'div'
+     */
     tag?: string;
 };
 declare var __VLS_10: {};

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

@@ -1,5 +1,11 @@
 type __VLS_Props = {
+    /**
+     * Unique identifier for this debug overlay.
+     */
     id: string;
+    /**
+     * The title displayed in the debug overlay selector.
+     */
     title: string;
 };
 declare var __VLS_5: {};

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

@@ -1,9 +1,14 @@
 import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { RenderedFieldListItem } from '#blokkli/types';
 type __VLS_Props = {
+    /**
+     * Unique identifier for this item action.
+     */
     id: string;
     /**
      * The title of the action.
+     *
+     * Displayed in the tooltip and keyboard shortcut hints.
      */
     title: string;
     /**
@@ -11,30 +16,50 @@ type __VLS_Props = {
      */
     disabled?: boolean;
     /**
-     * Whether the button should be displayed in an active state (e.g. when it's a dropdown).
+     * Whether the button should be displayed in an active state.
+     *
+     * Useful when the action opens a dropdown or dialog.
      */
     active?: boolean;
     /**
-     * The key code to use for the shortcut.
+     * The key code to use for the keyboard shortcut.
+     *
+     * @example 'c' for the "c" key
      */
     keyCode?: string;
     /**
-     * Wheter the shortcut needs the meta modifier key.
+     * Whether the shortcut needs the meta modifier key.
+     *
+     * On Mac this is Cmd, on Windows/Linux this is Ctrl.
      */
     meta?: boolean;
     /**
      * Whether the action supports multiple items.
+     *
+     * If false, the action is disabled when more than one item is selected.
      */
     multiple?: boolean;
     /**
      * Whether the action is only available in edit mode.
+     *
+     * If true, the action is hidden in preview mode.
      */
     editOnly?: boolean;
     /**
      * The weight, used for positioning the button.
+     *
+     * Lower weights appear first. Use 'last' to always position at the end.
      */
     weight?: number | string | 'last';
+    /**
+     * Optional icon to display in the button.
+     */
     icon?: BlokkliIcon;
+    /**
+     * Optional text for the interactive tour.
+     *
+     * If provided, this action will be included in the editor tour.
+     */
     tourText?: string;
 };
 declare var __VLS_5: {}, __VLS_19: {

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;
 }>, {
@@ -51,7 +187,6 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<{
         width: number;
         height: number;
     };
-    weight: string | number;
     keyCode: string;
     tourText: string;
     minWidth: number;

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

@@ -45,7 +45,8 @@ const props = defineProps({
   icon: { type: null, required: false },
   shortcutGroup: { type: String, required: false },
   tourText: { type: String, required: false },
-  weight: { type: [Number, String], required: false }
+  weight: { type: [Number, String], required: false },
+  noCommand: { type: Boolean, required: false }
 });
 const { debug } = useBlokkli();
 const logger = debug.createLogger("PluginToolbar");
@@ -59,6 +60,9 @@ function onClick() {
   emit("click");
 }
 defineCommands(() => {
+  if (props.noCommand) {
+    return;
+  }
   return {
     id: "plugin:toolbar_button:" + props.id,
     label: props.title,

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

@@ -1,40 +1,156 @@
 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;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {

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

@@ -9,32 +9,41 @@ const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
   text: { type: String, required: true },
-  selector: { type: String, required: false }
+  selector: { type: String, required: false },
+  element: { type: null, required: false }
 });
-const { element } = useBlokkli();
-const findElement = (el) => {
+const { element: elementProvider } = useBlokkli();
+const findInstanceElement = (el) => {
   if (el instanceof Text) {
-    return findElement(el.nextElementSibling);
+    return findInstanceElement(el.nextElementSibling);
   } else if (el instanceof HTMLElement) {
     return el;
   }
 };
 const instance = getCurrentInstance();
+function getElement() {
+  if (props.element) {
+    return props.element;
+  }
+  if (props.selector) {
+    const match = elementProvider.query(
+      document.documentElement,
+      props.selector,
+      `TourItem Plugin: ${props.id}`
+    );
+    if (match) {
+      return match;
+    }
+  }
+  return findInstanceElement(instance?.vnode.el);
+}
 defineTourItem(() => {
   return {
     id: props.id,
     title: props.title,
     text: props.text,
     element: () => {
-      const provided = props.selector ? element.query(
-        document.documentElement,
-        props.selector,
-        `TourItem Plugin: ${props.id}`
-      ) : void 0;
-      const el = provided || findElement(instance?.vnode.el);
-      if (el instanceof HTMLElement) {
-        return el;
-      }
+      return getElement();
     }
   };
 });