rimelight-components 2.1.93 → 2.1.95

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.93",
+  "version": "2.1.95",
   "docs": "https://rimelight.com/tools/rimelight-components",
   "configKey": "rimelightComponents",
   "compatibility": {

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { readdirSync } from 'node:fs';
 import { basename } from 'node:path';
 
 const name = "rimelight-components";
-const version = "2.1.93";
+const version = "2.1.95";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {

package/dist/runtime/components/blocks/Block.vue

@@ -72,7 +72,12 @@ const items = ref([
   <div :class="root({ class: rc.root })">
     <div :class="menuContainer({ class: rc.menuContainer })">
       <UDropdownMenu :items="items">
-        <UButton icon="lucide:grip-vertical" variant="ghost" color="neutral" />
+        <UButton
+          icon="lucide:grip-vertical"
+          variant="ghost"
+          color="neutral"
+          class="drag-handle cursor-grab active:cursor-grabbing"
+        />
       </UDropdownMenu>
     </div>
 

package/dist/runtime/components/blocks/BlockEditRenderer.d.vue.ts

@@ -1,16 +1,35 @@
 import type { Block } from "../../types/index.js";
 export interface BlockEditRendererProps {
     blocks: Block[];
+    containerId?: string | null;
     rc?: {
         root?: string;
     };
 }
+type __VLS_Props = BlockEditRendererProps;
 export interface BlockEditRendererEmits {
+    start: [];
+    end: [];
+    change: [any];
 }
 export interface BlockEditRendererSlots {
 }
 type __VLS_Slots = BlockEditRendererSlots;
-declare const __VLS_base: import("vue").DefineComponent<BlockEditRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockEditRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_ModelProps = {
+    'blocks': Block[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    start: () => any;
+    end: () => any;
+    change: (args_0: any) => any;
+    "update:blocks": (value: Block[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onStart?: (() => any) | undefined;
+    onEnd?: (() => any) | undefined;
+    onChange?: ((args_0: any) => any) | undefined;
+    "onUpdate:blocks"?: ((value: Block[]) => 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;

package/dist/runtime/components/blocks/BlockEditRenderer.vue

@@ -1,21 +1,59 @@
 <script setup>
-import {} from "vue";
+import { watch, ref, inject } from "vue";
+import draggable from "vuedraggable";
 import { getBlockEditorComponent } from "../../internal/blockMapper";
 import { tv } from "../../internal/tv";
 import { useRC } from "../../composables";
-const { blocks, rc: rcProp } = defineProps({
+const props = defineProps({
   blocks: { type: Array, required: true },
+  containerId: { type: [String, null], required: false },
   rc: { type: Object, required: false }
 });
-const emit = defineEmits([]);
+const { rc: rcProp, containerId = null } = props;
+const blocks = defineModel("blocks", { type: Array, ...{ required: true } });
+const emit = defineEmits(["start", "end", "change"]);
 const slots = defineSlots();
 const { rc } = useRC("BlockEditRenderer", rcProp);
+const rendererId = Math.random().toString(36).substring(7);
+console.log("[BlockEditRenderer] Instance created with ID:", rendererId, "containerId:", containerId, "initial blocks:", blocks.value.length);
+const editorApi = inject("block-editor-api");
+const isDraggingOver = ref(false);
+const dragCounter = ref(0);
+const onDragEnter = () => {
+  dragCounter.value++;
+  isDraggingOver.value = true;
+};
+const onDragLeave = () => {
+  dragCounter.value--;
+  if (dragCounter.value <= 0) {
+    isDraggingOver.value = false;
+    dragCounter.value = 0;
+  }
+};
+const onDrop = () => {
+  dragCounter.value = 0;
+  isDraggingOver.value = false;
+};
 const blockEditRendererStyles = tv({
   slots: {
-    root: "flex flex-col gap-lg w-full"
+    root: "flex flex-col w-full min-h-32 transition-all border-l-2 border-neutral-200/50 p-4 pl-6 rounded-r-lg"
+  },
+  variants: {
+    isDraggingOver: {
+      true: {
+        root: "border-l-4 border-primary-500 bg-primary-50/30 ring-1 ring-primary-500/10 z-10"
+      }
+    }
   }
 });
 const { root } = blockEditRendererStyles();
+watch(blocks, (newBlocks, oldBlocks) => {
+  console.log(`[BlockEditRenderer ${rendererId}] Blocks changed:`, {
+    oldCount: oldBlocks?.length || 0,
+    newCount: newBlocks?.length || 0,
+    blockIds: newBlocks?.map((b) => ({ id: b.id, type: b.type }))
+  });
+}, { deep: true });
 const getComponent = (block) => {
   if (!block || !block.type || block.type.length === 0) {
     console.error("Block object is missing the critical 'type' field.");
@@ -28,40 +66,116 @@ const getComponent = (block) => {
   }
   return resolvedComponent;
 };
+const handleStart = () => {
+  console.log(`[BlockEditRenderer ${rendererId}] Drag START - current blocks:`, blocks.value.length);
+  emit("start");
+};
+const handleEnd = () => {
+  console.log(`[BlockEditRenderer ${rendererId}] Drag END - current blocks:`, blocks.value.length);
+  emit("end");
+};
+const handleChange = (event) => {
+  console.log(`[BlockEditRenderer ${rendererId}] Drag CHANGE event:`, {
+    event,
+    added: event.added,
+    removed: event.removed,
+    moved: event.moved,
+    currentBlocks: blocks.value.length,
+    containerId,
+    blockIds: blocks.value.map((b) => ({ id: b.id, type: b.type }))
+  });
+  if (event.added) {
+    console.log(`[BlockEditRenderer ${rendererId}] Block ADDED to this container:`, event.added.element.id);
+  }
+  if (event.removed) {
+    console.log(`[BlockEditRenderer ${rendererId}] Block REMOVED from this container:`, event.removed.element.id);
+  }
+  if (event.moved) {
+    console.log(`[BlockEditRenderer ${rendererId}] Block MOVED within same container`);
+  }
+  emit("change", event);
+};
 </script>
 
 <template>
-  <div :class="root({ class: rc.root })">
-    <UEmpty
-      v-if="!blocks || blocks.length === 0"
-      variant="naked"
-      icon="lucide:blocks"
-      title="No blocks found for this page."
-      description="It looks like there isn't any content added to this page yet."
-    />
-    <template v-else>
-      <template v-for="block in blocks" :key="block.id">
-        <template v-if="getComponent(block)">
-          <RCBlock :id="block.id" :type="block.type" class="w-full">
-            <component
-              :is="getComponent(block)"
-              :id="block.id"
-              v-bind="block.props"
-              :type="block.type"
-              class="w-full"
+  <div 
+    :class="[root({ isDraggingOver }), rc.root, 'relative', { 'is-empty': blocks.length === 0 }]"
+    @dragenter="onDragEnter"
+    @dragover.prevent
+    @dragleave="onDragLeave"
+    @drop="onDrop"
+  >
+    <draggable
+      v-model="blocks"
+      item-key="id"
+      handle=".drag-handle"
+      :group="{ name: 'blocks', pull: true, put: true }"
+      :animation="200"
+      :force-fallback="true"
+      fallback-class="drag-fallback"
+      ghost-class="drag-placeholder"
+      @start="handleStart"
+      @end="handleEnd"
+      @change="handleChange"
+      class="flex flex-col w-full flex-1"
+      :class="[blocks && blocks.length > 0 ? 'gap-lg min-h-16 pb-32' : 'gap-0 min-h-32']"
+    >
+      <template #header>
+        <div 
+          v-if="!blocks || blocks.length === 0" 
+          class="w-full p-4 flex items-center justify-center transition-all rounded-lg border-2 border-transparent" 
+          :class="[isDraggingOver ? 'bg-primary-50/50 border-dashed border-primary-500/50' : '']"
+        >
+          <UEmpty
+            icon="i-lucide-layers"
+            title="Empty Section"
+            description="This area has no blocks yet. Drag items here or click to add your first block."
+            variant="naked"
+            class="w-full"
+            :ui="{ root: 'transition-transform px-4', title: isDraggingOver ? 'text-primary-600 font-bold' : '' }"
+            :class="[isDraggingOver ? 'scale-[1.02]' : '']"
+          >
+            <template #actions>
+              <UButton
+                label="Add Block"
+                icon="i-lucide-plus"
+                color="neutral"
+                variant="subtle"
+                @click="editorApi?.openAddBlockModal()"
+              />
+            </template>
+          </UEmpty>
+        </div>
+      </template>
+
+      <template #item="{ element: block }">
+        <div class="w-full">
+          <template v-if="getComponent(block)">
+            <RCBlock :id="block.id" :type="block.type" class="w-full">
+              <component
+                :is="getComponent(block)"
+                :id="block.id"
+                v-bind="block.props"
+                :type="block.type"
+                class="w-full"
+              />
+            </RCBlock>
+          </template>
+          <template v-else>
+            <UAlert
+              color="error"
+              variant="subtle"
+              icon="lucide:octagon-alert"
+              title="Rendering Error"
+              :description="`Block component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. This block will be skipped or the type is invalid/empty.`"
             />
-          </RCBlock>
-        </template>
-        <template v-else>
-          <UAlert
-            color="error"
-            variant="subtle"
-            icon="lucide:octagon-alert"
-            title="Rendering Error"
-            :description="`Block component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. This block will be skipped or the type is invalid/empty.`"
-          />
-        </template>
+          </template>
+        </div>
       </template>
-    </template>
+    </draggable>
   </div>
 </template>
+
+<style scoped>
+:deep(.drag-placeholder){background:#3b82f6;border-radius:2px;height:4px;margin-bottom:8px;margin-top:8px;opacity:1;overflow:hidden}:deep(.drag-fallback){background-color:#fff;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);opacity:.9;transform:scale(1.01);z-index:9999}:deep(.drag-placeholder>*){display:none!important}.is-empty :deep(.drag-placeholder){border:0!important;display:none!important;height:0!important;margin:0!important;padding:0!important;visibility:hidden!important}
+</style>

package/dist/runtime/components/blocks/BlockEditRenderer.vue.d.ts

@@ -1,16 +1,35 @@
 import type { Block } from "../../types/index.js";
 export interface BlockEditRendererProps {
     blocks: Block[];
+    containerId?: string | null;
     rc?: {
         root?: string;
     };
 }
+type __VLS_Props = BlockEditRendererProps;
 export interface BlockEditRendererEmits {
+    start: [];
+    end: [];
+    change: [any];
 }
 export interface BlockEditRendererSlots {
 }
 type __VLS_Slots = BlockEditRendererSlots;
-declare const __VLS_base: import("vue").DefineComponent<BlockEditRendererProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BlockEditRendererProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+type __VLS_ModelProps = {
+    'blocks': Block[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    start: () => any;
+    end: () => any;
+    change: (args_0: any) => any;
+    "update:blocks": (value: Block[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onStart?: (() => any) | undefined;
+    onEnd?: (() => any) | undefined;
+    onChange?: ((args_0: any) => any) | undefined;
+    "onUpdate:blocks"?: ((value: Block[]) => 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;

package/dist/runtime/components/blocks/BlockEditor.d.vue.ts

@@ -1,12 +1,16 @@
 import type { Block } from "../../types/index.js";
 export interface BlockEditorProps {
     historyLimit?: number;
+    containerId?: string | null;
     rc?: {};
 }
 type __VLS_Props = BlockEditorProps;
 export interface BlockEditorEmits {
     save: [];
     mutation: [];
+    start: [];
+    end: [];
+    change: [any];
 }
 type __VLS_ModelProps = {
     modelValue: Block[];
@@ -18,11 +22,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    start: () => any;
+    end: () => any;
     save: () => any;
+    change: (args_0: any) => any;
     mutation: () => any;
     "update:modelValue": (value: Block[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onStart?: (() => any) | undefined;
+    onEnd?: (() => any) | undefined;
     onSave?: (() => any) | undefined;
+    onChange?: ((args_0: any) => any) | undefined;
     onMutation?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/blocks/BlockEditor.vue

@@ -1,14 +1,23 @@
 <script setup>
-import { provide, ref } from "vue";
+import { provide, inject, ref, watch, nextTick } from "vue";
+import { v7 as uuidv7 } from "uuid";
 import { useBlockEditor, useRC } from "../../composables";
 import {} from "../../utils/blocks";
 import { useI18n } from "vue-i18n";
-const { historyLimit, rc: rcProp } = defineProps({
+function regenerateIds(block) {
+  block.id = uuidv7();
+  if (block.props && "children" in block.props && Array.isArray(block.props.children)) {
+    block.props.children.forEach((child) => regenerateIds(child));
+  }
+}
+const { historyLimit, containerId = null, rc: rcProp } = defineProps({
   historyLimit: { type: Number, required: false },
+  containerId: { type: [String, null], required: false },
   rc: { type: Object, required: false }
 });
 const blocks = defineModel({ type: Array, ...{ required: true } });
-const emit = defineEmits(["save", "mutation"]);
+console.log("[BlockEditor] Component mounted with", blocks.value.length, "blocks");
+const emit = defineEmits(["save", "mutation", "start", "end", "change"]);
 const { t } = useI18n();
 const { rc } = useRC("BlockEditor", rcProp);
 const {
@@ -17,6 +26,7 @@ const {
   duplicateBlock,
   updateBlockProps,
   insertBlock,
+  relocateBlock,
   undo,
   redo,
   canUndo,
@@ -37,20 +47,50 @@ provide("block-editor-api", {
   duplicateBlock,
   updateBlockProps,
   insertBlock,
+  relocateBlock,
   canUndo,
   canRedo,
   undo,
   redo,
   openAddBlockModal
 });
+const handleDragStart = () => {
+  console.log("[BlockEditor] Drag started");
+  emit("start");
+};
+const handleDragEnd = async () => {
+  console.log("[BlockEditor] Drag ended");
+  emit("end");
+  emit("mutation");
+};
+const handleBlockChange = (event) => {
+  console.log("[BlockEditor] handleBlockChange:", event);
+  if (event.added) {
+    const block = event.added.element;
+    if (block) {
+      console.log("[BlockEditor] Regenerating IDs for added block:", block.id);
+      regenerateIds(block);
+    }
+  }
+  emit("change", event);
+  if (event.added || event.removed || event.moved) {
+    emit("mutation");
+  }
+};
 defineExpose({ undo, redo, canUndo, canRedo });
 </script>
 
 <template>
   <div class="flex flex-col gap-8 w-full">
-    <RCBlockEditRenderer :blocks="blocks" />
+    <RCBlockEditRenderer
+      v-model:blocks="blocks"
+      :container-id="containerId"
+      @start="handleDragStart"
+      @end="handleDragEnd"
+      @change="handleBlockChange"
+    />
 
-    <div class="flex flex-col items-center justify-center gap-md p-sm">
+    <div v-if="blocks && blocks.length > 0" class="flex flex-col items-center justify-center gap-md p-sm">
       <UButton
         color="neutral"
         :label="t('page_editor.add_block', 'Add Block')"

package/dist/runtime/components/blocks/BlockEditor.vue.d.ts

@@ -1,12 +1,16 @@
 import type { Block } from "../../types/index.js";
 export interface BlockEditorProps {
     historyLimit?: number;
+    containerId?: string | null;
     rc?: {};
 }
 type __VLS_Props = BlockEditorProps;
 export interface BlockEditorEmits {
     save: [];
     mutation: [];
+    start: [];
+    end: [];
+    change: [any];
 }
 type __VLS_ModelProps = {
     modelValue: Block[];
@@ -18,11 +22,17 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     canUndo: import("vue").ComputedRef<boolean>;
     canRedo: import("vue").ComputedRef<boolean>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    start: () => any;
+    end: () => any;
     save: () => any;
+    change: (args_0: any) => any;
     mutation: () => any;
     "update:modelValue": (value: Block[]) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onStart?: (() => any) | undefined;
+    onEnd?: (() => any) | undefined;
     onSave?: (() => any) | undefined;
+    onChange?: ((args_0: any) => any) | undefined;
     onMutation?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: Block[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/blocks/editor/CalloutBlockEditor.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { inject, computed } from "vue";
+import { inject, computed, ref, watch, nextTick, shallowRef } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAppConfig } from "#imports";
 import { tv } from "../../../internal/tv";
 import { useRC } from "../../../composables";
-const { id, variant, children, to, target, rc: rcProp } = defineProps({
+const props = defineProps({
   id: { type: String, required: true },
   rc: { type: Object, required: false },
   variant: { type: String, required: true },
@@ -12,6 +12,7 @@ const { id, variant, children, to, target, rc: rcProp } = defineProps({
   to: { type: String, required: false },
   target: { type: String, required: false }
 });
+const { rc: rcProp } = props;
 const emit = defineEmits([]);
 const slots = defineSlots();
 const { rc } = useRC("CalloutBlockEditor", rcProp);
@@ -33,8 +34,8 @@ const variants = [
 ];
 const appConfig = useAppConfig();
 const { t } = useI18n();
-const getVariantConfig = (variant2) => {
-  return appConfig.rimelightComponents?.callouts?.[variant2] ?? {
+const getVariantConfig = (variant) => {
+  return appConfig.rimelightComponents?.callouts?.[variant] ?? {
     icon: "lucide:alert-circle",
     title: "Callout",
     tooltip: "Callout"
@@ -49,17 +50,30 @@ const items = computed(() => [
       description: t(config.description || config.tooltip),
       onSelect: () => {
         if (editorApi) {
-          editorApi.updateBlockProps(id, { variant: type });
+          editorApi.updateBlockProps(props.id, { variant: type });
         }
       }
     };
   })
 ]);
+const localChildren = computed({
+  get: () => props.children ?? [],
+  set: (newChildren) => {
+    console.log("[CalloutBlockEditor] localChildren setter called:", newChildren.length);
+    if (editorApi && props.id) {
+      const childrenCopy = JSON.parse(JSON.stringify(newChildren));
+      editorApi.updateBlockProps(props.id, { children: childrenCopy });
+    }
+  }
+});
+const handleChildrenMutation = () => {
+  console.log("[CalloutBlockEditor] Mutation event received (handled by setter)");
+};
 </script>
 
 <template>
   <div :class="root({ class: rc.root })">
-    <RCCallout :variant="variant" :to="to" :target="target">
+    <RCCallout :variant="props.variant" :to="props.to" :target="props.target">
       <template #leading="{ icon, iconClass }">
         <UDropdownMenu :items="items" :ui="{ content: 'w-64' }">
           <template #item="{ item }">
@@ -79,7 +93,16 @@ const items = computed(() => [
           />
         </UDropdownMenu>
       </template>
-      <RCBlockViewRenderer :blocks="children" />
+      <template #default>
+        <div class="w-full mt-2">
+          <RCBlockEditor 
+            v-model="localChildren"
+            :container-id="props.id"
+            @mutation="handleChildrenMutation"
+            @end="handleChildrenMutation"
+          />
+        </div>
+      </template>
     </RCCallout>
   </div>
 </template>

package/dist/runtime/components/blocks/editor/SectionBlockEditor.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { inject, ref, computed, watch } from "vue";
+import { inject, ref, computed, watch, nextTick, shallowRef } from "vue";
 import {} from "../../../types";
 import { tv } from "../../../internal/tv";
 import { useRC } from "../../../composables";
-const { level, title, description, children, id, rc: rcProp } = defineProps({
+const props = defineProps({
   id: { type: String, required: true },
   rc: { type: Object, required: false },
   level: { type: Number, required: true },
@@ -11,6 +11,7 @@ const { level, title, description, children, id, rc: rcProp } = defineProps({
   description: { type: String, required: false },
   children: { type: Array, required: true }
 });
+const { rc: rcProp } = props;
 const emit = defineEmits([]);
 const slots = defineSlots();
 const { rc } = useRC("SectionBlockEditor", rcProp);
@@ -22,11 +23,10 @@ const sectionBlockEditorStyles = tv({
   }
 });
 const { root, headerContainer, titleInput } = sectionBlockEditorStyles();
-const hasChildren = computed(() => children && children.length > 0);
 const editorApi = inject("block-editor-api");
-const localLevel = ref(level);
-const localTitle = ref(title);
-const localDescription = ref(description);
+const localLevel = ref(props.level);
+const localTitle = ref(props.title);
+const localDescription = ref(props.description);
 const levelItems = [
   { label: "H1", value: 1 },
   { label: "H2", value: 2 },
@@ -36,25 +36,25 @@ const updateLocalTitle = (e) => {
   localTitle.value = e.target.value;
 };
 const commitTitleOnBlur = () => {
-  if (editorApi && id && localTitle.value !== title) {
-    editorApi.updateBlockProps(id, { title: localTitle.value });
+  if (editorApi && props.id && localTitle.value !== props.title) {
+    editorApi.updateBlockProps(props.id, { title: localTitle.value });
   }
 };
 const updateLocalDescription = (e) => {
   localDescription.value = e.target.value;
 };
 const commitDescriptionOnBlur = () => {
-  if (editorApi && id && localDescription.value !== description) {
-    editorApi.updateBlockProps(id, { description: localDescription.value });
+  if (editorApi && props.id && localDescription.value !== props.description) {
+    editorApi.updateBlockProps(props.id, { description: localDescription.value });
   }
 };
 watch(localLevel, (newLocalLevel) => {
-  if (editorApi && id && newLocalLevel !== level) {
-    editorApi.updateBlockProps(id, { level: newLocalLevel });
+  if (editorApi && props.id && newLocalLevel !== props.level) {
+    editorApi.updateBlockProps(props.id, { level: newLocalLevel });
   }
 });
 watch(
-  () => title,
+  () => props.title,
   (newVal) => {
     if (newVal !== localTitle.value) {
       localTitle.value = newVal;
@@ -62,7 +62,7 @@ watch(
   }
 );
 watch(
-  () => level,
+  () => props.level,
   (newVal) => {
     if (newVal !== localLevel.value) {
       localLevel.value = newVal;
@@ -70,13 +70,25 @@ watch(
   }
 );
 watch(
-  () => description,
+  () => props.description,
   (newVal) => {
     if (newVal !== localDescription.value) {
       localDescription.value = newVal;
     }
   }
 );
+const localChildren = computed({
+  get: () => props.children ?? [],
+  set: (newChildren) => {
+    if (editorApi && props.id) {
+      const childrenCopy = JSON.parse(JSON.stringify(newChildren));
+      editorApi.updateBlockProps(props.id, { children: childrenCopy });
+    }
+  }
+});
+const handleChildrenMutation = () => {
+  console.log("[SectionBlockEditor] Mutation event received (handled by setter)");
+};
 </script>
 
 <template>
@@ -114,7 +126,12 @@ watch(
         />
       </template>
       <template #default>
-        <RCBlockEditRenderer v-if="hasChildren" :blocks="children" />
+        <RCBlockEditor 
+          v-model="localChildren"
+          :container-id="props.id"
+          @mutation="handleChildrenMutation"
+          @end="handleChildrenMutation"
+        />
       </template>
     </RCSection>
   </div>

package/dist/runtime/components/page/PageEditor.vue

@@ -83,7 +83,7 @@ const {
 } = pageEditorStyles();
 const { getTypeLabelKey } = usePageRegistry();
 const { t, locale } = useI18n();
-const { undo, redo, canUndo, canRedo, captureSnapshot, resetHistory } = usePageEditor(page);
+const { undo, redo, canUndo, canRedo, captureSnapshot, resetHistory, pauseHistory, resumeHistory } = usePageEditor(page);
 const { confirm } = useConfirm();
 const handleViewPage = async () => {
   if (canUndo.value) {
@@ -347,7 +347,19 @@ const handleTreeNavigate = (slug) => {
                 </div>
               </template>
             </UPageHeader>
-            <RCBlockEditor ref="editor" v-model="page.blocks" @mutation="captureSnapshot" />
+            <RCBlockEditor 
+              ref="editor"
+              v-model="page.blocks" 
+              @start="pauseHistory"
+              @mutation="() => {
+  resumeHistory();
+  if (!editorRef?.isDragging) {
+    captureSnapshot();
+  } else {
+    console.log('[PageEditor] Skipping snapshot - editor is dragging');
+  }
+}" 
+            />
             <template v-if="useSurround">
               <div
                 v-if="surroundStatus === 'pending'"

package/dist/runtime/composables/pages/useBlockEditor.d.ts

@@ -9,6 +9,7 @@ export declare function useBlockEditor(initialBlocks: Ref<Block[]>, { maxHistory
     moveBlock: (id: string, direction: -1 | 1) => void;
     duplicateBlock: (id: string) => void;
     insertBlock: (newBlockType: Block["type"], targetId?: string | null, position?: "before" | "after") => void;
+    relocateBlock: (blockId: string, targetContainerId: string | null, targetIndex: number) => void;
     undo: () => void;
     redo: () => void;
     canUndo: import("vue").ComputedRef<boolean>;

package/dist/runtime/composables/pages/useBlockEditor.js

@@ -47,13 +47,7 @@ function createDefaultBlock(type) {
         type: "CalloutBlock",
         props: {
           variant: "info",
-          children: [
-            {
-              id: uuidv7(),
-              type: "ParagraphBlock",
-              props: { text: [{ type: "text", id: uuidv7(), props: { content: "Callout content" } }] }
-            }
-          ]
+          children: []
         }
       };
     case "ImageBlock":
@@ -125,23 +119,24 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
   const canUndo = computed(() => history.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);
   const updateBlockProps = (id, newProps) => {
+    console.log("[useBlockEditor] updateBlockProps called for ID:", id, "Keys:", Object.keys(newProps));
+    if (newProps.children) {
+      console.log("[useBlockEditor] Updating children. Count:", newProps.children.length);
+    }
     executeMutation(() => {
       const loc = findBlockLocation(initialBlocks.value, id);
-      if (!loc) return;
+      if (!loc) {
+        console.warn("[useBlockEditor] Block not found for update:", id);
+        return;
+      }
       const oldBlock = loc.parentArray[loc.index];
       if (!oldBlock) return;
-      const newPropsObject = {
-        ...oldBlock.props,
-        ...newProps
-      };
-      const newBlock = {
+      Object.assign(oldBlock.props, newProps);
+      console.log("[useBlockEditor] Block props updated in place:", {
         id: oldBlock.id,
-        // Explicitly carry over the required BaseBlock properties
         type: oldBlock.type,
-        // Explicitly carry over the required BaseBlock properties
-        props: newPropsObject
-      };
-      loc.parentArray.splice(loc.index, 1, newBlock);
+        childrenCount: oldBlock.props.children?.length
+      });
     });
   };
   const removeBlock = (id) => {
@@ -194,6 +189,49 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
     committedBlocks.value = committedSnapshot;
     return committedSnapshot;
   };
+  const relocateBlock = (blockId, targetContainerId, targetIndex) => {
+    console.log("[useBlockEditor] relocateBlock called:", { blockId, targetContainerId, targetIndex });
+    executeMutation(() => {
+      const sourceLoc = findBlockLocation(initialBlocks.value, blockId);
+      if (!sourceLoc) {
+        console.warn("[useBlockEditor] Block not found for relocation:", blockId);
+        return;
+      }
+      const block = sourceLoc.parentArray[sourceLoc.index];
+      if (!block) {
+        console.warn("[useBlockEditor] Block is undefined at location");
+        return;
+      }
+      sourceLoc.parentArray.splice(sourceLoc.index, 1);
+      console.log("[useBlockEditor] Block removed from source, now inserting at target");
+      let targetArray;
+      if (targetContainerId === null) {
+        targetArray = initialBlocks.value;
+      } else {
+        const targetLoc = findBlockLocation(initialBlocks.value, targetContainerId);
+        if (!targetLoc) {
+          console.warn("[useBlockEditor] Target container not found:", targetContainerId);
+          sourceLoc.parentArray.splice(sourceLoc.index, 0, block);
+          return;
+        }
+        const targetBlock = targetLoc.parentArray[targetLoc.index];
+        if (!targetBlock || !("children" in targetBlock.props)) {
+          console.warn("[useBlockEditor] Target block does not have children prop");
+          sourceLoc.parentArray.splice(sourceLoc.index, 0, block);
+          return;
+        }
+        targetArray = targetBlock.props.children;
+      }
+      const safeIndex = Math.max(0, Math.min(targetIndex, targetArray.length));
+      targetArray.splice(safeIndex, 0, block);
+      console.log("[useBlockEditor] Block relocated successfully:", {
+        blockId,
+        targetContainerId,
+        targetIndex: safeIndex,
+        newTargetLength: targetArray.length
+      });
+    });
+  };
   return {
     // Mutations
     updateBlockProps,
@@ -201,6 +239,7 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
     moveBlock,
     duplicateBlock,
     insertBlock,
+    relocateBlock,
     // History
     undo,
     redo,

package/dist/runtime/composables/pages/useBlockEditor.mjs

@@ -47,13 +47,7 @@ function createDefaultBlock(type) {
         type: "CalloutBlock",
         props: {
           variant: "info",
-          children: [
-            {
-              id: uuidv7(),
-              type: "ParagraphBlock",
-              props: { text: [{ type: "text", id: uuidv7(), props: { content: "Callout content" } }] }
-            }
-          ]
+          children: []
         }
       };
     case "ImageBlock":
@@ -125,23 +119,24 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
   const canUndo = computed(() => history.value.length > 0);
   const canRedo = computed(() => future.value.length > 0);
   const updateBlockProps = (id, newProps) => {
+    console.log("[useBlockEditor] updateBlockProps called for ID:", id, "Keys:", Object.keys(newProps));
+    if (newProps.children) {
+      console.log("[useBlockEditor] Updating children. Count:", newProps.children.length);
+    }
     executeMutation(() => {
       const loc = findBlockLocation(initialBlocks.value, id);
-      if (!loc) return;
+      if (!loc) {
+        console.warn("[useBlockEditor] Block not found for update:", id);
+        return;
+      }
       const oldBlock = loc.parentArray[loc.index];
       if (!oldBlock) return;
-      const newPropsObject = {
-        ...oldBlock.props,
-        ...newProps
-      };
-      const newBlock = {
+      Object.assign(oldBlock.props, newProps);
+      console.log("[useBlockEditor] Block props updated in place:", {
         id: oldBlock.id,
-        // Explicitly carry over the required BaseBlock properties
         type: oldBlock.type,
-        // Explicitly carry over the required BaseBlock properties
-        props: newPropsObject
-      };
-      loc.parentArray.splice(loc.index, 1, newBlock);
+        childrenCount: oldBlock.props.children?.length
+      });
     });
   };
   const removeBlock = (id) => {
@@ -194,6 +189,49 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
     committedBlocks.value = committedSnapshot;
     return committedSnapshot;
   };
+  const relocateBlock = (blockId, targetContainerId, targetIndex) => {
+    console.log("[useBlockEditor] relocateBlock called:", { blockId, targetContainerId, targetIndex });
+    executeMutation(() => {
+      const sourceLoc = findBlockLocation(initialBlocks.value, blockId);
+      if (!sourceLoc) {
+        console.warn("[useBlockEditor] Block not found for relocation:", blockId);
+        return;
+      }
+      const block = sourceLoc.parentArray[sourceLoc.index];
+      if (!block) {
+        console.warn("[useBlockEditor] Block is undefined at location");
+        return;
+      }
+      sourceLoc.parentArray.splice(sourceLoc.index, 1);
+      console.log("[useBlockEditor] Block removed from source, now inserting at target");
+      let targetArray;
+      if (targetContainerId === null) {
+        targetArray = initialBlocks.value;
+      } else {
+        const targetLoc = findBlockLocation(initialBlocks.value, targetContainerId);
+        if (!targetLoc) {
+          console.warn("[useBlockEditor] Target container not found:", targetContainerId);
+          sourceLoc.parentArray.splice(sourceLoc.index, 0, block);
+          return;
+        }
+        const targetBlock = targetLoc.parentArray[targetLoc.index];
+        if (!targetBlock || !("children" in targetBlock.props)) {
+          console.warn("[useBlockEditor] Target block does not have children prop");
+          sourceLoc.parentArray.splice(sourceLoc.index, 0, block);
+          return;
+        }
+        targetArray = targetBlock.props.children;
+      }
+      const safeIndex = Math.max(0, Math.min(targetIndex, targetArray.length));
+      targetArray.splice(safeIndex, 0, block);
+      console.log("[useBlockEditor] Block relocated successfully:", {
+        blockId,
+        targetContainerId,
+        targetIndex: safeIndex,
+        newTargetLength: targetArray.length
+      });
+    });
+  };
   return {
     // Mutations
     updateBlockProps,
@@ -201,6 +239,7 @@ export function useBlockEditor(initialBlocks, { maxHistorySize = 100, onMutation
     moveBlock,
     duplicateBlock,
     insertBlock,
+    relocateBlock,
     // History
     undo,
     redo,

package/dist/runtime/composables/pages/usePageEditor.d.ts

@@ -8,4 +8,6 @@ export declare function usePageEditor(page: Ref<Page>, maxHistorySize?: number):
     save: () => any;
     captureSnapshot: () => void;
     resetHistory: () => void;
+    pauseHistory: () => void;
+    resumeHistory: () => void;
 };

package/dist/runtime/composables/pages/usePageEditor.js

@@ -40,9 +40,22 @@ export function usePageEditor(page, maxHistorySize = 100) {
   const save = () => {
     return JSON.parse(JSON.stringify(page.value));
   };
+  let isPaused = false;
+  const pauseHistory = () => {
+    console.log("[usePageEditor] History paused");
+    isPaused = true;
+  };
+  const resumeHistory = () => {
+    console.log("[usePageEditor] History resumed");
+    isPaused = false;
+  };
   watch(
     [() => page.value.properties, () => page.value.title, () => page.value.blocks],
     () => {
+      if (isPaused) {
+        console.log("[usePageEditor] Skipping auto-snapshot - history is paused");
+        return;
+      }
       captureSnapshot();
     },
     { deep: true }
@@ -59,6 +72,8 @@ export function usePageEditor(page, maxHistorySize = 100) {
     canRedo,
     save,
     captureSnapshot,
-    resetHistory
+    resetHistory,
+    pauseHistory,
+    resumeHistory
   };
 }

package/dist/runtime/composables/pages/usePageEditor.mjs

@@ -40,9 +40,22 @@ export function usePageEditor(page, maxHistorySize = 100) {
   const save = () => {
     return JSON.parse(JSON.stringify(page.value));
   };
+  let isPaused = false;
+  const pauseHistory = () => {
+    console.log("[usePageEditor] History paused");
+    isPaused = true;
+  };
+  const resumeHistory = () => {
+    console.log("[usePageEditor] History resumed");
+    isPaused = false;
+  };
   watch(
     [() => page.value.properties, () => page.value.title, () => page.value.blocks],
     () => {
+      if (isPaused) {
+        console.log("[usePageEditor] Skipping auto-snapshot - history is paused");
+        return;
+      }
       captureSnapshot();
     },
     { deep: true }
@@ -59,6 +72,8 @@ export function usePageEditor(page, maxHistorySize = 100) {
     canRedo,
     save,
     captureSnapshot,
-    resetHistory
+    resetHistory,
+    pauseHistory,
+    resumeHistory
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.1.93",
+  "version": "2.1.95",
   "description": "A component library by Rimelight Entertainment.",
   "keywords": [
     "nuxt",
@@ -74,7 +74,8 @@
     "defu": "^6.1.4",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
-    "uuid": "^13.0.0"
+    "uuid": "^13.0.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.4.1",