rimelight-components 2.0.31 → 2.0.33

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "2.0.31",
+  "version": "2.0.33",
   "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.0.31";
+const version = "2.0.33";
 const homepage = "https://rimelight.com/tools/rimelight-components";
 
 const defaultOptions = {
@@ -53,9 +53,10 @@ function addBlockMapTemplates(blockNames) {
   const template = addTemplate({
     filename: "rimelight-blocks-map.mjs",
     getContents: () => {
-      let content = "export const BLOCK_COMPONENT_MAP = {\n";
+      let content = "export const BLOCK_RENDERER_COMPONENT_MAP = {\n";
       blockNames.forEach((name) => {
-        const componentPath = `rimelight-components/components/blocks/${name}.vue`;
+        const fullComponentName = `${name}Renderer`;
+        const componentPath = `rimelight-components/components/blocks/renderer/${fullComponentName}.vue`;
         content += `  '${name}': () => import('${componentPath}'),
 `;
       });
@@ -72,7 +73,43 @@ function addBlockMapTemplates(blockNames) {
 `;
       content += `import { Component } from 'vue'
 `;
-      content += `export declare const BLOCK_COMPONENT_MAP: { [key: string]: ${componentImporterType} | undefined }
+      content += `export declare const BLOCK_RENDERER_COMPONENT_MAP: { [key: string]: ${componentImporterType} | undefined }
+`;
+      blockNames.forEach((name) => {
+        content += `export declare const ${name}: ${componentImporterType}
+`;
+      });
+      return content;
+    },
+    write: true
+  });
+  return template;
+}
+function addEditorBlockMapTemplates(blockNames) {
+  const componentImporterType = '() => Promise<{ default: import("vue").Component }>';
+  const template = addTemplate({
+    filename: "rimelight-editor-blocks-map.mjs",
+    getContents: () => {
+      let content = "export const BLOCK_EDITOR_COMPONENT_MAP = {\n";
+      blockNames.forEach((name) => {
+        const fullComponentName = `${name}Editor`;
+        const componentPath = `rimelight-components/components/blocks/editor/${fullComponentName}.vue`;
+        content += `  '${name}': () => import('${componentPath}'),
+`;
+      });
+      content += "}\n";
+      return content;
+    },
+    write: true
+  });
+  addTemplate({
+    filename: "rimelight-editor-blocks-map.d.ts",
+    getContents: () => {
+      let content = `// Generated by rimelight-components Nuxt Module
+`;
+      content += `import { Component } from 'vue'
+`;
+      content += `export declare const BLOCK_EDITOR_COMPONENT_MAP: { [key: string]: ${componentImporterType} | undefined }
 `;
       blockNames.forEach((name) => {
         content += `export declare const ${name}: ${componentImporterType}
@@ -85,7 +122,7 @@ function addBlockMapTemplates(blockNames) {
   return template;
 }
 
-const module = defineNuxtModule().with({
+const module$1 = defineNuxtModule().with({
   meta: {
     name,
     version,
@@ -169,13 +206,19 @@ const module = defineNuxtModule().with({
     });
     addImportsDir(resolve("./runtime/composables"));
     addImportsDir(resolve("./runtime/utils"));
-    const blockFiles = readdirSync(
-      resolve("./runtime/components/blocks")
+    const blockRendererFiles = readdirSync(
+      resolve("./runtime/components/blocks/renderer")
+    ).filter((name2) => name2.endsWith(".vue"));
+    const blockRendererNames = blockRendererFiles.map((file) => basename(file, ".vue"));
+    const blockRendererTemplate = addBlockMapTemplates(blockRendererNames);
+    nuxt.options.alias["#build/rimelight-blocks-renderer-map"] = blockRendererTemplate.dst;
+    const blockEditorFiles = readdirSync(
+      resolve("./runtime/components/blocks/editor")
     ).filter((name2) => name2.endsWith(".vue"));
-    const blockNames = blockFiles.map((file) => basename(file, ".vue"));
-    const template = addBlockMapTemplates(blockNames);
-    nuxt.options.alias["#build/rimelight-blocks-map"] = template.dst;
+    const blockEditorNames = blockEditorFiles.map((file) => basename(file, ".vue"));
+    const blockEditorTemplate = addEditorBlockMapTemplates(blockEditorNames);
+    nuxt.options.alias["#build/rimelight-blocks-editor-map"] = blockEditorTemplate.dst;
   }
 });
 
-export { module as default };
+export { module$1 as default };

package/dist/runtime/components/app/Footer.d.vue.ts

@@ -1,10 +1,10 @@
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_6) => any;
+    left?: (props: typeof __VLS_7) => any;
 } & {
-    center?: (props: typeof __VLS_8) => any;
+    center?: (props: typeof __VLS_9) => any;
 } & {
-    right?: (props: typeof __VLS_10) => any;
+    right?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app/Footer.vue.d.ts

@@ -1,10 +1,10 @@
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {};
 type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_6) => any;
+    left?: (props: typeof __VLS_7) => any;
 } & {
-    center?: (props: typeof __VLS_8) => any;
+    center?: (props: typeof __VLS_9) => any;
 } & {
-    right?: (props: typeof __VLS_10) => any;
+    right?: (props: typeof __VLS_11) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app/Header.d.vue.ts

@@ -1,16 +1,16 @@
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_6) => any;
+    left?: (props: typeof __VLS_7) => any;
 } & {
-    center?: (props: typeof __VLS_8) => any;
+    center?: (props: typeof __VLS_9) => any;
 } & {
-    right?: (props: typeof __VLS_10) => any;
+    right?: (props: typeof __VLS_11) => any;
 } & {
-    'collapsed-left'?: (props: typeof __VLS_12) => any;
+    'collapsed-left'?: (props: typeof __VLS_13) => any;
 } & {
-    'collapsed-center'?: (props: typeof __VLS_14) => any;
+    'collapsed-center'?: (props: typeof __VLS_15) => any;
 } & {
-    'collapsed-right'?: (props: typeof __VLS_16) => any;
+    'collapsed-right'?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app/Header.vue

@@ -6,7 +6,7 @@ const header = tv({
     container: "h-full flex flex-row items-center p-sm",
     left: "hidden lg:flex flex-1 justify-start",
     center: "hidden lg:flex flex-none",
-    right: "hidden lg:flex flex-1 justify-end",
+    right: "hidden lg:flex flex-1 justify-end items-end",
     collapsedLeft: "lg:hidden flex-1 justify-start",
     collapsedCenter: "lg:hidden flex-none",
     collapsedRight: "lg:hidden flex-1 justify-end"

package/dist/runtime/components/app/Header.vue.d.ts

@@ -1,16 +1,16 @@
-declare var __VLS_6: {}, __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {}, __VLS_16: {};
+declare var __VLS_7: {}, __VLS_9: {}, __VLS_11: {}, __VLS_13: {}, __VLS_15: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
-    left?: (props: typeof __VLS_6) => any;
+    left?: (props: typeof __VLS_7) => any;
 } & {
-    center?: (props: typeof __VLS_8) => any;
+    center?: (props: typeof __VLS_9) => any;
 } & {
-    right?: (props: typeof __VLS_10) => any;
+    right?: (props: typeof __VLS_11) => any;
 } & {
-    'collapsed-left'?: (props: typeof __VLS_12) => any;
+    'collapsed-left'?: (props: typeof __VLS_13) => any;
 } & {
-    'collapsed-center'?: (props: typeof __VLS_14) => any;
+    'collapsed-center'?: (props: typeof __VLS_15) => any;
 } & {
-    'collapsed-right'?: (props: typeof __VLS_16) => any;
+    'collapsed-right'?: (props: typeof __VLS_17) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app/ScrollToTop.d.vue.ts

@@ -2,9 +2,6 @@ interface Props {
     circleStrokeWidth?: number;
     duration?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
-    duration: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/app/ScrollToTop.vue.d.ts

@@ -2,9 +2,6 @@ interface Props {
     circleStrokeWidth?: number;
     duration?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    circleStrokeWidth: number;
-    duration: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/AnimateGrid.d.vue.ts

@@ -12,12 +12,6 @@ interface Props {
     rotateX?: number;
     rotateY?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    textGlowStartColor: string;
-    perspective: number;
-    textGlowEndColor: string;
-    rotateX: number;
-    rotateY: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/AnimateGrid.vue.d.ts

@@ -12,12 +12,6 @@ interface Props {
     rotateX?: number;
     rotateY?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
-    textGlowStartColor: string;
-    perspective: number;
-    textGlowEndColor: string;
-    rotateX: number;
-    rotateY: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/FlickeringGrid.d.vue.ts

@@ -8,12 +8,6 @@ interface FlickeringGridProps {
     class?: string;
     maxOpacity?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
-    color: string;
-    squareSize: number;
-    gridGap: number;
-    flickerChance: number;
-    maxOpacity: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/FlickeringGrid.vue.d.ts

@@ -8,12 +8,6 @@ interface FlickeringGridProps {
     class?: string;
     maxOpacity?: number;
 }
-declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {
-    color: string;
-    squareSize: number;
-    gridGap: number;
-    flickerChance: number;
-    maxOpacity: number;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<FlickeringGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FlickeringGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/InteractiveGrid.d.vue.ts

@@ -6,10 +6,6 @@ interface InteractiveGridPatternProps {
     height?: number;
     squares?: [number, number];
 }
-declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {
-    width: number;
-    height: number;
-    squares: [number, number];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/backgrounds/InteractiveGrid.vue.d.ts

@@ -6,10 +6,6 @@ interface InteractiveGridPatternProps {
     height?: number;
     squares?: [number, number];
 }
-declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {
-    width: number;
-    height: number;
-    squares: [number, number];
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<InteractiveGridPatternProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<InteractiveGridPatternProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -0,0 +1,8 @@
+import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
+type __VLS_Props = {
+    blockProps: SectionBlockProps;
+    blockId: string;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,64 @@
+<script setup>
+import { computed, inject } from "vue";
+import { slugify } from "../../../utils";
+const props = defineProps({
+  blockProps: { type: Object, required: true },
+  blockId: { type: String, required: true }
+});
+const headingId = computed(() => props.blockProps.title ? slugify(props.blockProps.title) : void 0);
+const updateTitle = (event) => {
+  props.blockProps.title = event.target.value;
+};
+const updateDescription = (event) => {
+  props.blockProps.description = event.target.value;
+};
+const { removeBlock } = inject("blockEditorMutators", {
+  removeBlock: (id) => console.warn(`removeBlock not implemented for ${id}`)
+});
+const handleRemove = () => {
+  removeBlock(props.blockId);
+};
+const childrenBlocks = computed(() => props.blockProps.children || []);
+</script>
+
+<template>
+  <div class="block-editor-container relative border-2 border-dashed border-primary-200 p-4 rounded-lg bg-primary-50/50 group">
+
+    <div class="absolute -translate-x-1/2 z-10 opacity-0 group-hover:opacity-100 transition-opacity flex gap-2">
+      <UButton icon="lucide:trash-2" variant="solid"  size="sm" @click="handleRemove" />
+    </div>
+
+    <RCSection
+      :level="props.blockProps.level"
+      :title="props.blockProps.title"
+      :description="props.blockProps.description"
+      :id="headingId"
+      is-editing
+    >
+      <template #title>
+        <input
+          :value="props.blockProps.title"
+          @input="updateTitle"
+          :class="`text-${props.blockProps.level === 1 ? '3xl' : 'xl'} font-bold w-full focus:outline-none bg-transparent pointer-events-auto`"
+          placeholder="Enter section title..."
+        />
+      </template>
+
+      <template #description>
+        <textarea
+          v-if="props.blockProps.description !== void 0"
+          :value="props.blockProps.description"
+          @input="updateDescription"
+          class="text-md text-muted w-full resize-none focus:outline-none bg-transparent pointer-events-auto"
+          placeholder="Optional description..."
+          rows="2"
+        />
+      </template>
+
+      <div class="mt-4">
+        <RCBlockEditorRenderer :blocks="childrenBlocks" />
+      </div>
+
+    </RCSection>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
+type __VLS_Props = {
+    blockProps: SectionBlockProps;
+    blockId: string;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/blocks/{CalloutBlock.d.vue.ts → renderer/CalloutBlockRenderer.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { CalloutBlockProps } from "../../types/blocks.js";
+import type { CalloutBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{CalloutBlock.vue.d.ts → renderer/CalloutBlockRenderer.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { CalloutBlockProps } from "../../types/blocks.js";
+import type { CalloutBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<CalloutBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CalloutBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{CardBlock.vue.d.ts → renderer/CardBlockRenderer.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { CardBlockProps } from "../../types/blocks.js";
+import type { CardBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{CardBlock.d.vue.ts → renderer/CardBlockRenderer.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { CardBlockProps } from "../../types/blocks.js";
+import type { CardBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<CardBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CardBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{ImageBlock.d.vue.ts → renderer/ImageBlockRenderer.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { ImageBlockProps } from "../../types/blocks.js";
+import type { ImageBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{ImageBlock.vue.d.ts → renderer/ImageBlockRenderer.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { ImageBlockProps } from "../../types/blocks.js";
+import type { ImageBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<ImageBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{ParagraphBlock.d.vue.ts → renderer/ParagraphBlockRenderer.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { ParagraphBlockProps } from "../../types/blocks.js";
+import type { ParagraphBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{ParagraphBlock.vue.d.ts → renderer/ParagraphBlockRenderer.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { ParagraphBlockProps } from "../../types/blocks.js";
+import type { ParagraphBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<ParagraphBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ParagraphBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{SectionBlock.d.vue.ts → renderer/SectionBlockRenderer.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { SectionBlockProps } from "../../types/blocks.js";
+import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{SectionBlock.vue.d.ts → renderer/SectionBlockRenderer.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { SectionBlockProps } from "../../types/blocks.js";
+import type { SectionBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<SectionBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SectionBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{UnorderedListBlock.d.vue.ts → renderer/UnorderedListBlockRenderer.d.vue.ts}

@@ -1,4 +1,4 @@
-import type { UnorderedListBlockProps } from "../../types/blocks.js";
+import type { UnorderedListBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<UnorderedListBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/blocks/{UnorderedListBlock.vue.d.ts → renderer/UnorderedListBlockRenderer.vue.d.ts}

@@ -1,4 +1,4 @@
-import type { UnorderedListBlockProps } from "../../types/blocks.js";
+import type { UnorderedListBlockProps } from "~~/src/runtime/types/blocks";
 declare const __VLS_export: import("vue").DefineComponent<UnorderedListBlockProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<UnorderedListBlockProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/cards/TeamCard.d.vue.ts

@@ -5,9 +5,9 @@ type __VLS_Props = {
     role: string;
     description: string;
 };
-declare var __VLS_13: {};
+declare var __VLS_15: {};
 type __VLS_Slots = {} & {
-    links?: (props: typeof __VLS_13) => any;
+    links?: (props: typeof __VLS_15) => 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>;

package/dist/runtime/components/cards/TeamCard.vue.d.ts

@@ -5,9 +5,9 @@ type __VLS_Props = {
     role: string;
     description: string;
 };
-declare var __VLS_13: {};
+declare var __VLS_15: {};
 type __VLS_Slots = {} & {
-    links?: (props: typeof __VLS_13) => any;
+    links?: (props: typeof __VLS_15) => 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>;

package/dist/runtime/components/content/Callout.d.vue.ts

@@ -4,9 +4,9 @@ type __VLS_Props = {
     to?: string;
     target?: string;
 };
-declare var __VLS_19: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_22) => 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>;

package/dist/runtime/components/content/Callout.vue.d.ts

@@ -4,9 +4,9 @@ type __VLS_Props = {
     to?: string;
     target?: string;
 };
-declare var __VLS_19: {};
+declare var __VLS_22: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_19) => any;
+    default?: (props: typeof __VLS_22) => 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>;

package/dist/runtime/components/content/Section.d.vue.ts

@@ -3,10 +3,17 @@ type __VLS_Props = {
     level?: SectionLevel;
     title: string;
     description?: string;
+    isEditing?: boolean;
 };
-declare var __VLS_24: {};
+declare var __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_24) => any;
+    title?: (props: typeof __VLS_21) => any;
+} & {
+    title?: (props: typeof __VLS_23) => any;
+} & {
+    description?: (props: typeof __VLS_25) => any;
+} & {
+    default?: (props: typeof __VLS_33) => 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>;

package/dist/runtime/components/content/Section.vue

@@ -89,11 +89,13 @@ const sectionVariants = tv({
 const {
   level = 1,
   title,
-  description
+  description,
+  isEditing = false
 } = defineProps({
   level: { type: Number, required: false },
   title: { type: String, required: true },
-  description: { type: String, required: false }
+  description: { type: String, required: false },
+  isEditing: { type: Boolean, required: false }
 });
 const {
   sectionSlot,
@@ -120,6 +122,7 @@ const fullSectionUrl = computed(() => {
       class="relative"
     >
       <NuxtLink
+        v-if="!isEditing"
         :href="`#${sectionId}`"
         :class="linkSlot()"
         class="group lg:-ms-2 lg:ps-2"
@@ -132,10 +135,13 @@ const fullSectionUrl = computed(() => {
           class="absolute top-1 -ms-8 hidden rounded-md p-1 opacity-0 transition group-hover:opacity-100 group-focus:opacity-100 lg:flex"
           @click="copyToClipboard(fullSectionUrl)"
         />
-        {{ title }}
+        <slot name="title">{{ title }}</slot>
       </NuxtLink>
+      <slot v-else name="title">{{ title }}</slot>
     </component>
-    <p v-if="description" :class="descriptionSlot()">{{ description }}</p>
+    <p v-if="description" :class="descriptionSlot()">
+      <slot name="description">{{ description }}</slot>
+    </p>
     <USeparator :class="separatorSlot()" />
     <div :class="contentSlot()">
       <slot />

package/dist/runtime/components/content/Section.vue.d.ts

@@ -3,10 +3,17 @@ type __VLS_Props = {
     level?: SectionLevel;
     title: string;
     description?: string;
+    isEditing?: boolean;
 };
-declare var __VLS_24: {};
+declare var __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_24) => any;
+    title?: (props: typeof __VLS_21) => any;
+} & {
+    title?: (props: typeof __VLS_23) => any;
+} & {
+    description?: (props: typeof __VLS_25) => any;
+} & {
+    default?: (props: typeof __VLS_33) => 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>;

package/dist/runtime/components/renderers/BlockRenderer.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {} from "vue";
-import { getBlockComponent } from "../../utils/blockMapper";
+import { getBlockRendererComponent } from "../../utils/blockMapper";
 const { blocks } = defineProps({
   blocks: { type: Array, required: true }
 });
@@ -9,7 +9,7 @@ const getComponent = (block) => {
     console.error("Block object is missing the critical 'type' field.");
     return null;
   }
-  const resolvedComponent = getBlockComponent(block.type);
+  const resolvedComponent = getBlockRendererComponent(block.type);
   if (!resolvedComponent) {
     console.error(`Component resolution failed for block type: ${block.type}`);
     return null;

package/dist/runtime/components/renderers/EditorBlockRenderer.d.vue.ts

@@ -0,0 +1,7 @@
+import type { Block } from "../../types/blocks.js";
+type __VLS_Props = {
+    blocks: Block[];
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/EditorBlockRenderer.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { inject, provide } from "vue";
+import { getBlockEditorComponent } from "../../utils/blockMapper";
+const { blocks } = defineProps({
+  blocks: { type: Array, required: true }
+});
+const { removeBlock, moveBlock } = inject("blockEditorMutators", {
+  removeBlock: (id) => console.warn(`[Renderer] removeBlock not provided. Cannot delete block ${id}.`),
+  moveBlock: (id, newIndex) => console.warn(`[Renderer] moveBlock not provided. Cannot move block ${id}.`)
+});
+provide("blockEditorMutators", { removeBlock, moveBlock });
+const getComponent = (block) => {
+  if (!block || !block.type || block.type.length === 0) {
+    console.error(
+      "[EditorBlockRenderer] Block object is missing the critical 'type' field."
+    );
+    return null;
+  }
+  const resolvedComponent = getBlockEditorComponent(block.type);
+  if (!resolvedComponent) {
+    console.error(
+      `[EditorBlockRenderer] Editor component resolution failed for block type: ${block.type}`
+    );
+    return null;
+  }
+  return resolvedComponent;
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-lg editor-block-renderer">
+    <UEmpty
+        v-if="!blocks || blocks.length === 0"
+        variant="naked"
+        icon="lucide:pencil-line"
+        title="Start adding content blocks."
+        description="There is no content yet. Use the '+' button below to add your first block."
+    />
+    <template v-else v-for="block in blocks" :key="block.id">
+      <template v-if="getComponent(block)">
+        <component
+            :is="getComponent(block)"
+            v-bind="block.props"
+            :key="block.id"
+            :type="block.type"
+            class="block-editor-container"
+        />
+      </template>
+      <template v-else>
+        <UAlert
+            color="warning"
+            variant="subtle"
+            icon="lucide:octagon-alert"
+            title="Editor Rendering Error"
+            :description="`Editor component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. Please ensure the block name is correct and the editor component exists in the \'editor\' subdirectory.`"
+        />
+      </template>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.editor-block-renderer{min-height:200px;padding:1rem}
+</style>

package/dist/runtime/components/renderers/EditorBlockRenderer.vue.d.ts

@@ -0,0 +1,7 @@
+import type { Block } from "../../types/blocks.js";
+type __VLS_Props = {
+    blocks: Block[];
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/TOC.d.vue.ts

@@ -11,9 +11,9 @@ type __VLS_Props = {
     title?: string;
     levels?: HeadingLevel[];
 };
-declare var __VLS_6: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    bottom?: (props: typeof __VLS_6) => any;
+    bottom?: (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>;

package/dist/runtime/components/renderers/TOC.vue.d.ts

@@ -11,9 +11,9 @@ type __VLS_Props = {
     title?: string;
     levels?: HeadingLevel[];
 };
-declare var __VLS_6: {};
+declare var __VLS_7: {};
 type __VLS_Slots = {} & {
-    bottom?: (props: typeof __VLS_6) => any;
+    bottom?: (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>;

package/dist/runtime/composables/useBlockContentEditor.d.ts

@@ -0,0 +1,32 @@
+import { type Ref } from "vue";
+import { type Block } from "../types/blocks.js";
+/**
+ * Defines the contract for the consuming application's save function.
+ * This allows the composable to trigger persistence without knowing the API details.
+ * It's assumed the callback will handle the necessary API calls and error handling.
+ */
+type SaveCallback = (blocks: Block[]) => Promise<void> | void;
+export interface UseBlockContentEditorOptions {
+    /** The initial array of blocks loaded from the database/API. */
+    initialBlocks: Block[];
+    /** The function the editor calls to persist changes. It is debounced internally. */
+    saveCallback: SaveCallback;
+    /** Optional. The debounce delay in milliseconds (default: 1000ms). */
+    debounceDelay?: number;
+}
+/**
+ * Manages the reactive state, updates, and debounced persistence of a block content array.
+ * This composable is decoupled from data fetching and specific API endpoints.
+ *
+ * @param options Configuration object including initial blocks and a save callback.
+ */
+export declare const useBlockContentEditor: ({ initialBlocks, saveCallback, debounceDelay, }: UseBlockContentEditorOptions) => {
+    blocks: Ref<Block[], Block[]>;
+    isSaving: Ref<boolean, boolean>;
+    lastSavedAt: Ref<Date | null, Date | null>;
+    hasUnsavedChanges: Ref<boolean, boolean>;
+    addBlock: (newBlock: Block, index?: number) => void;
+    removeBlock: (blockId: string) => void;
+    moveBlock: (blockId: string, newIndex: number) => void;
+};
+export {};

package/dist/runtime/composables/useBlockContentEditor.js

@@ -0,0 +1,63 @@
+import { ref, watch } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+export const useBlockContentEditor = ({
+  initialBlocks,
+  saveCallback,
+  debounceDelay = 1e3
+}) => {
+  const blocks = ref(JSON.parse(JSON.stringify(initialBlocks)));
+  const isSaving = ref(false);
+  const lastSavedAt = ref(null);
+  const hasUnsavedChanges = ref(false);
+  const persistChanges = async (currentBlocks) => {
+    isSaving.value = true;
+    hasUnsavedChanges.value = false;
+    try {
+      await saveCallback(currentBlocks);
+      lastSavedAt.value = /* @__PURE__ */ new Date();
+      console.log("Blocks persisted successfully via callback.");
+    } catch (error) {
+      console.error("[BlockEditor] Error during persistence callback:", error);
+      hasUnsavedChanges.value = true;
+    } finally {
+      isSaving.value = false;
+    }
+  };
+  const debouncedSave = useDebounceFn(() => {
+    persistChanges(JSON.parse(JSON.stringify(blocks.value)));
+  }, debounceDelay);
+  watch(
+    blocks,
+    () => {
+      hasUnsavedChanges.value = true;
+      debouncedSave();
+    },
+    { deep: true }
+    // Crucial: Watch nested changes (e.g., text inside a ParagraphBlock)
+  );
+  const addBlock = (newBlock, index = blocks.value.length) => {
+    blocks.value.splice(index, 0, newBlock);
+  };
+  const removeBlock = (blockId) => {
+    blocks.value = blocks.value.filter((block) => block.id !== blockId);
+  };
+  const moveBlock = (blockId, newIndex) => {
+    const oldIndex = blocks.value.findIndex((block) => block.id === blockId);
+    if (oldIndex === -1) return;
+    const [blockToMove] = blocks.value.splice(oldIndex, 1);
+    blocks.value.splice(newIndex, 0, blockToMove);
+  };
+  return {
+    // Core Data
+    blocks,
+    // The array the EditorBlockRenderer will use
+    // Status
+    isSaving,
+    lastSavedAt,
+    hasUnsavedChanges,
+    // Editor Actions (Mutators)
+    addBlock,
+    removeBlock,
+    moveBlock
+  };
+};

package/dist/runtime/utils/blockMapper.d.ts

@@ -6,4 +6,12 @@ import { type BlockType } from "../types/blocks.js";
  * @param type The BlockType string from the content JSON (e.g., 'ParagraphBlock').
  * @returns A lazily loaded Vue component reference, or undefined if not found.
  */
-export declare const getBlockComponent: (type: BlockType | string) => Component | undefined;
+export declare const getBlockRendererComponent: (type: BlockType | string) => Component | undefined;
+/**
+ * Maps the block type string from the database to a dynamically imported Vue component
+ * specifically for the editor view.
+ *
+ * @param type The BlockType string from the content JSON (e.g., 'EditorParagraphBlock').
+ * @returns A lazily loaded Vue component reference, or undefined if not found.
+ */
+export declare const getBlockEditorComponent: (type: BlockType | string) => Component | undefined;

package/dist/runtime/utils/blockMapper.js

@@ -1,7 +1,8 @@
 import { defineAsyncComponent } from "vue";
-import { BLOCK_COMPONENT_MAP } from "#build/rimelight-blocks-map";
-export const getBlockComponent = (type) => {
-  const componentImporter = BLOCK_COMPONENT_MAP[type];
+import { BLOCK_RENDERER_COMPONENT_MAP } from "#build/rimelight-blocks-renderer-map";
+import { BLOCK_EDITOR_COMPONENT_MAP } from "#build/rimelight-blocks-editor-map";
+export const getBlockRendererComponent = (type) => {
+  const componentImporter = BLOCK_RENDERER_COMPONENT_MAP[type];
   if (!componentImporter) {
     console.warn(
       `[BlockMapper] Block component not found for type: ${type}. Please check block name.`
@@ -13,3 +14,16 @@ export const getBlockComponent = (type) => {
     return module.default;
   });
 };
+export const getBlockEditorComponent = (type) => {
+  const componentImporter = BLOCK_EDITOR_COMPONENT_MAP[type];
+  if (!componentImporter) {
+    console.warn(
+      `[EditorBlockMapper] Editor block component not found for type: ${type}. Please check block name.`
+    );
+    return void 0;
+  }
+  return defineAsyncComponent(async () => {
+    const module = await componentImporter();
+    return module.default;
+  });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "A component library by Rimelight Entertainment.",
-  "version": "2.0.31",
+  "version": "2.0.33",
   "type": "module",
   "repository": {
     "type": "git",
@@ -87,6 +87,7 @@
     "date-fns": "^4.1.0",
     "defu": "^6.1.4",
     "nuxt": "^4.2.0",
+    "pinia": "^3.0.4",
     "tailwind-variants": "^3.1.1",
     "vue": "^3.5.22"
   },