@revenexx/editor 0.1.0

package/dist/runtime/editor/plugins/BlockIndicator/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <Teleport to="#bk-indicators-left">
+    <div
+      ref="el"
+      class="bk-indicator-item"
+      @click.prevent="$emit('click')"
+      @mouseenter="onMouseEnter"
+      @mouseleave="onMouseLeave"
+    >
+      <slot>
+        <div class="bk-indicator-item-inner">
+          <div v-if="label">{{ label }}</div>
+          <div v-if="icon">
+            <Icon :name="icon" />
+          </div>
+        </div>
+      </slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  useBlokkli,
+  onMounted,
+  useTemplateRef,
+  onBeforeUnmount
+} from "#imports";
+import { Icon } from "#blokkli/editor/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  uuid: { type: String, required: true },
+  label: { type: String, required: false },
+  position: { type: String, required: false },
+  icon: { type: null, required: false }
+});
+defineEmits(["click"]);
+const { indicators } = useBlokkli();
+const el = useTemplateRef("el");
+function onMouseEnter() {
+  indicators.setHovered(props.uuid);
+}
+function onMouseLeave() {
+  indicators.setHovered();
+}
+onMounted(() => {
+  if (el.value) {
+    indicators.addIndicator({
+      id: props.id,
+      uuid: props.uuid,
+      position: props.position ?? "left",
+      element: el.value
+    });
+  }
+});
+onBeforeUnmount(() => {
+  indicators.removeIndicator(props.id, props.uuid);
+});
+</script>
+
+<script>
+export default {
+  name: "PluginBlockIndicator"
+};
+</script>

package/dist/runtime/editor/plugins/BlockIndicator/index.vue.d.ts

@@ -0,0 +1,65 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __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;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {}) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.d.vue.ts

@@ -0,0 +1,13 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    menu: ContextMenu[];
+    x: number;
+    y: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div
+    class="bk bk-context-menu _bk_fixed _bk_z-context-menu _bk_pointer-events-auto"
+    :style="{ left: x + 'px', top: y + 'px' }"
+  >
+    <div
+      ref="rootEl"
+      class="bk-context-menu-inner _bk_absolute _bk_bg-mono-950 _bk_text-mono-100 _bk_shadow-xl-even _bk_border _bk_border-mono-600 _bk_overflow-hidden _bk_min-w-200"
+      :style="innerStyle"
+    >
+      <div v-for="(item, i) in menu" :key="i">
+        <hr v-if="item.type === 'rule'" class="_bk_border-t-mono-600" />
+        <button
+          v-else-if="item.type === 'button'"
+          class="_bk_p-10 _bk_whitespace-nowrap _bk_text-left _bk_flex _bk_items-center _bk_gap-5 _bk_font-sans _bk_font-semibold _bk_hover:bg-mono-800 _bk_w-full _bk_text-base _bk_text-mono-300 _bk_hover:text-mono-50"
+          @click="onClick(i)"
+        >
+          <Icon :name="item.icon" class="_bk_size-20" />
+          <span>{{ item.label }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { Icon } from "#blokkli/editor/components";
+import { useDismiss } from "#blokkli/editor/composables";
+import { ref, computed, useBlokkli } from "#imports";
+const props = defineProps({
+  menu: { type: Array, required: true },
+  x: { type: Number, required: true },
+  y: { type: Number, required: true }
+});
+const emit = defineEmits(["close"]);
+const { ui } = useBlokkli();
+const rootEl = ref(null);
+const innerStyle = computed(() => {
+  const vp = ui.visibleViewportPadded.value;
+  const vpRight = vp.x + vp.width;
+  const vpBottom = vp.y + vp.height;
+  const horizontal = props.x + 300 > vpRight ? { right: 0 } : { left: 0 };
+  const vertical = props.y + 300 > vpBottom ? { bottom: 0 } : { top: 0 };
+  return {
+    ...horizontal,
+    ...vertical
+  };
+});
+useDismiss({ element: rootEl, onDismiss: () => emit("close") });
+const onClick = async (index) => {
+  const item = props.menu[index];
+  if (item && item.type === "button") {
+    await ui.flushPendingChanges();
+    item.callback();
+  }
+  emit("close");
+};
+</script>

package/dist/runtime/editor/plugins/ContextMenu/Menu/index.vue.d.ts

@@ -0,0 +1,13 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+type __VLS_Props = {
+    menu: ContextMenu[];
+    x: number;
+    y: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/plugins/ContextMenu/index.d.vue.ts

@@ -0,0 +1,36 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+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: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, 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/plugins/ContextMenu/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <Component :is="tag" @contextmenu.stop.prevent="onContextMenu">
+    <slot />
+    <Teleport :to="ui.mainLayoutElement.value">
+      <BlokkliTransition name="context-menu">
+        <ContextMenuMenu
+          v-if="isVisible"
+          :menu="menu"
+          :x="x"
+          :y="y"
+          @close="ui.openContextMenu.value = ''"
+        />
+      </BlokkliTransition>
+    </Teleport>
+  </Component>
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import ContextMenuMenu from "./Menu/index.vue";
+import { BlokkliTransition } from "#blokkli/editor/components";
+const props = defineProps({
+  id: { type: String, required: true },
+  menu: { type: Array, required: true },
+  tag: { type: String, required: false, default: "div" }
+});
+const { ui } = useBlokkli();
+const isVisible = computed(() => ui.openContextMenu.value === props.id);
+const x = ref(0);
+const y = ref(0);
+const onContextMenu = (e) => {
+  if (!props.id || typeof props.id !== "string" || !props.menu.length) {
+    return;
+  }
+  if (props.id === ui.openContextMenu.value) {
+    ui.openContextMenu.value = "";
+    return;
+  }
+  x.value = e.clientX;
+  y.value = e.clientY;
+  ui.openContextMenu.value = props.id;
+};
+</script>

package/dist/runtime/editor/plugins/ContextMenu/index.vue.d.ts

@@ -0,0 +1,36 @@
+import type { ContextMenu } from '#blokkli/editor/types/ui';
+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: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    tag: string;
+}, {}, {}, {}, 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/plugins/DebugOverlay/index.d.vue.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    /**
+     * Unique identifier for this debug overlay.
+     */
+    id: string;
+    /**
+     * The title displayed in the debug overlay selector.
+     */
+    title: string;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: 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 __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/plugins/DebugOverlay/index.vue

@@ -0,0 +1,28 @@
+<template>
+  <Teleport v-if="isVisible" to="body">
+    <div class="bk">
+      <slot />
+    </div>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true }
+});
+const { debug } = useBlokkli();
+const isVisible = computed(
+  () => debug.isEnabled.value && debug.overlays.value.find((v) => v.id === props.id)?.active
+);
+onMounted(() => {
+  debug.registerOverlay(props.id, props.title);
+});
+onBeforeUnmount(() => {
+  debug.unregisterOverlay(props.id);
+});
+defineOptions({
+  name: "DebugOverlay"
+});
+</script>

package/dist/runtime/editor/plugins/DebugOverlay/index.vue.d.ts

@@ -0,0 +1,23 @@
+type __VLS_Props = {
+    /**
+     * Unique identifier for this debug overlay.
+     */
+    id: string;
+    /**
+     * The title displayed in the debug overlay selector.
+     */
+    title: string;
+};
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: 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 __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/plugins/ItemAction/index.d.vue.ts

@@ -0,0 +1,111 @@
+import type { BlokkliIcon } from '#blokkli-build/icons';
+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;
+    description?: string;
+    /**
+     * Whether the action is disabled.
+     *
+     * When a string is provided, the button is disabled and the string is
+     * displayed as the tooltip text explaining why.
+     */
+    disabled?: boolean | string;
+    /**
+     * 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 keyboard shortcut.
+     *
+     * @example 'c' for the "c" key
+     */
+    keyCode?: string;
+    /**
+     * 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';
+    /**
+     * Whether the action should be hidden.
+     *
+     * Unlike disabled, this completely hides the button via v-show.
+     */
+    hidden?: boolean;
+    /**
+     * When true, the disabled reason tooltip is rendered in lime (success)
+     * instead of the default yellow (warning).
+     *
+     * Use this when the disabled state is a positive outcome rather than an error.
+     */
+    disabledReasonSuccess?: boolean;
+    /**
+     * 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_7: {}, __VLS_14: {}, __VLS_36: {
+    items: any;
+    uuids: any;
+};
+type __VLS_Slots = {} & {
+    icon?: (props: typeof __VLS_7) => any;
+} & {
+    'icon-addon'?: (props: typeof __VLS_14) => any;
+} & {
+    default?: (props: typeof __VLS_36) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (items: RenderedFieldListItem[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((items: RenderedFieldListItem[]) => any) | undefined;
+}>, {
+    keyCode: string;
+    disabled: boolean | string;
+    icon: BlokkliIcon;
+    active: boolean;
+    tourText: string;
+    weight: number | string | "last";
+}, {}, {}, {}, 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/plugins/ItemAction/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <Teleport to="#bk-blokkli-item-actions">
+    <button
+      v-if="shouldRender"
+      v-show="!hidden"
+      ref="el"
+      :disabled="isDisabled"
+      class="_bk_group/tooltip _bk_flex _bk_items-center _bk_shrink-0 _bk_justify-center _bk_relative _bk_lg:static _bk_z-50 _bk_size-50 _bk_lg:hover:bg-mono-700 _bk_text-mono-300 _bk_lg:hover:text-mono-50 _bk_group/button"
+      :class="[
+  {
+    'bk-is-active': active,
+    'bk-is-last': weight === 'last',
+    '_bk_cursor-not-allowed _bk_text-mono-500!': disabled
+  },
+  $attrs.class
+]"
+      :style="weight !== 'last' ? { order: weight || 0 } : void 0"
+      @click.prevent.stop="onClick"
+    >
+      <div class="_bk_relative">
+        <slot name="icon">
+          <Icon
+            v-if="icon"
+            :name="icon"
+            class="_bk_size-20 _bk_lg:size-24 _bk_fill-current _bk_pointer-events-none"
+          />
+          <slot name="icon-addon" />
+        </slot>
+      </div>
+      <Tooltip
+        :label="title"
+        :description
+        placement="above-left"
+        class="_bk_min-w-full"
+      >
+        <template v-if="keyCode" #shortcut>
+          <ShortcutIndicator
+            :meta="meta"
+            :label="title"
+            :key-code="keyCode"
+            group="blocks"
+            @pressed="onClick"
+          />
+        </template>
+        <template #status>
+          <TooltipStatus
+            v-if="disabledReason"
+            :description="disabledReason"
+            :status="disabledReasonSuccess ? 'success' : 'warning'"
+          />
+        </template>
+      </Tooltip>
+    </button>
+  </Teleport>
+  <slot :items="selection.items.value" :uuids="uuids" />
+</template>
+
+<script setup>
+import { computed, ref, useBlokkli } from "#imports";
+import {
+  Icon,
+  ShortcutIndicator,
+  Tooltip,
+  TooltipStatus
+} from "#blokkli/editor/components";
+import { defineCommands, defineTourItem } from "#blokkli/editor/composables";
+const { selection, state, ui } = useBlokkli();
+const el = ref(null);
+const uuids = computed(() => selection.uuids.value);
+const props = defineProps({
+  id: { type: String, required: true },
+  title: { type: String, required: true },
+  description: { type: String, required: false },
+  disabled: { type: [Boolean, String], required: false, default: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  keyCode: { type: String, required: false, default: void 0 },
+  meta: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  editOnly: { type: Boolean, required: false },
+  weight: { type: [Number, String], required: false, default: void 0 },
+  hidden: { type: Boolean, required: false },
+  disabledReasonSuccess: { type: Boolean, required: false },
+  icon: { type: null, required: false, default: void 0 },
+  tourText: { type: String, required: false, default: void 0 }
+});
+const isDisabled = computed(
+  () => !!props.disabled || !props.multiple && selection.items.value.length > 1
+);
+const disabledReason = computed(
+  () => typeof props.disabled === "string" ? props.disabled : null
+);
+const shouldRender = computed(() => {
+  if (props.editOnly) {
+    return state.editMode.value === "editing";
+  }
+  return true;
+});
+const emit = defineEmits(["click"]);
+const onClick = async () => {
+  if (isDisabled.value || !uuids.value.length || ui.isApproving.value) {
+    return;
+  }
+  const items = selection.items.value;
+  await ui.flushPendingChanges();
+  emit("click", items);
+};
+defineCommands(() => ({
+  id: "plugin:item_action:" + props.id,
+  group: "selection",
+  label: props.title,
+  icon: props.icon,
+  disabled: isDisabled.value || !selection.items.value.length,
+  callback: onClick
+}));
+defineTourItem(() => {
+  if (!props.tourText) {
+    return;
+  }
+  return {
+    id: "plugin:item_action:" + props.id,
+    title: props.title,
+    text: props.tourText,
+    element: () => el.value
+  };
+});
+defineOptions({
+  name: "PluginItemAction",
+  inheritAttrs: false
+});
+</script>