@commonpub/layer 0.7.2 → 0.7.3

package/components/editors/ArticleEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -201,7 +200,7 @@ const canvasMaxWidth = computed(() => {
 
       <!-- Modules tab -->
       <div v-if="activeLeftTab === 'modules'" class="cpub-ae-left-body">
-        <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+        <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
       </div>
 
       <!-- Structure tab -->
@@ -267,7 +266,7 @@ const canvasMaxWidth = computed(() => {
       <!-- Scrollable canvas -->
       <div class="cpub-ae-canvas">
         <div class="cpub-ae-canvas-inner" :style="{ maxWidth: canvasMaxWidth }">
-          <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -297,7 +296,7 @@ const canvasMaxWidth = computed(() => {
       </div>
       <div class="cpub-ae-right-body">
         <!-- Content / Metadata -->
-        <EditorsEditorSection title="Content" icon="fa-pen-nib" :open="openSections.content" @toggle="toggleSection('content')">
+        <EditorSection title="Content" icon="fa-pen-nib" :open="openSections.content" @toggle="toggleSection('content')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -331,22 +330,22 @@ const canvasMaxWidth = computed(() => {
               </div>
             </template>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- SEO -->
-        <EditorsEditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
+        <EditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Meta Description</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description..." @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Publishing -->
-        <EditorsEditorSection title="Publishing" icon="fa-rocket" :open="openSections.publishing" @toggle="toggleSection('publishing')">
+        <EditorSection title="Publishing" icon="fa-rocket" :open="openSections.publishing" @toggle="toggleSection('publishing')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Visibility</label>
-            <EditorsEditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
+            <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Category</label>
@@ -362,9 +361,9 @@ const canvasMaxWidth = computed(() => {
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
-            <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+            <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/components/editors/BlogEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -149,7 +148,7 @@ const canvasMaxWidth = computed(() => {
 
     <!-- LEFT: Block Library -->
     <aside class="cpub-be-library" :class="{ 'cpub-be-sidebar-open': mobileLeftOpen }" aria-label="Block library">
-      <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+      <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
     </aside>
 
     <!-- CENTER: Canvas with toolbar, cover, title, subtitle, byline, blocks -->
@@ -231,7 +230,7 @@ const canvasMaxWidth = computed(() => {
         </div>
 
         <!-- Block editor canvas -->
-        <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+        <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
       </div>
 
       <!-- Word count bar -->
@@ -247,7 +246,7 @@ const canvasMaxWidth = computed(() => {
     <aside class="cpub-be-right" :class="{ 'cpub-be-sidebar-open': mobileRightOpen }" aria-label="Blog properties">
       <div class="cpub-be-right-body">
         <!-- Meta -->
-        <EditorsEditorSection title="Meta" icon="fa-tag" :open="openSections.meta" @toggle="toggleSection('meta')">
+        <EditorSection title="Meta" icon="fa-tag" :open="openSections.meta" @toggle="toggleSection('meta')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input cpub-ep-input-mono" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -266,21 +265,21 @@ const canvasMaxWidth = computed(() => {
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
-            <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+            <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Excerpt / Description -->
-        <EditorsEditorSection title="Excerpt" icon="fa-align-left" :open="openSections.excerpt" @toggle="toggleSection('excerpt')">
+        <EditorSection title="Excerpt" icon="fa-align-left" :open="openSections.excerpt" @toggle="toggleSection('excerpt')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Custom Excerpt</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="(metadata.description as string) || ''" placeholder="Short description shown in feed previews..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.description as string) || '').length }} / 300</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- SEO Preview -->
-        <EditorsEditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
+        <EditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-be-seo-card">
             <div class="cpub-be-seo-url">
               <span class="cpub-be-seo-favicon">C</span>
@@ -294,13 +293,13 @@ const canvasMaxWidth = computed(() => {
             <textarea class="cpub-ep-textarea" rows="3" :value="(metadata.seoDescription as string) || ''" placeholder="Search engine description..." @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Publishing -->
-        <EditorsEditorSection title="Publishing" icon="fa-globe" :open="openSections.publishing" @toggle="toggleSection('publishing')">
+        <EditorSection title="Publishing" icon="fa-globe" :open="openSections.publishing" @toggle="toggleSection('publishing')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Visibility</label>
-            <EditorsEditorVisibility :model-value="(metadata.visibility as string) || 'public'" @update:model-value="(v: string) => updateMeta('visibility', v)" />
+            <EditorVisibility :model-value="(metadata.visibility as string) || 'public'" @update:model-value="(v: string) => updateMeta('visibility', v)" />
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-be-schedule-row">
@@ -319,10 +318,10 @@ const canvasMaxWidth = computed(() => {
             <label class="cpub-ep-flabel">Series <span class="cpub-ep-optional">(optional)</span></label>
             <input class="cpub-ep-input" type="text" :value="metadata.series" placeholder="e.g. Home Lab Chronicles" @input="updateMeta('series', ($event.target as HTMLInputElement).value)">
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Author -->
-        <EditorsEditorSection title="Author" icon="fa-user" :open="openSections.author" @toggle="toggleSection('author')">
+        <EditorSection title="Author" icon="fa-user" :open="openSections.author" @toggle="toggleSection('author')">
           <div class="cpub-be-author-row">
             <div class="cpub-be-author-av">{{ authorInitials }}</div>
             <div class="cpub-be-author-info">
@@ -331,10 +330,10 @@ const canvasMaxWidth = computed(() => {
             </div>
             <span class="cpub-be-author-badge">You</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Social -->
-        <EditorsEditorSection title="Social" icon="fa-share-nodes" :open="openSections.social" @toggle="toggleSection('social')">
+        <EditorSection title="Social" icon="fa-share-nodes" :open="openSections.social" @toggle="toggleSection('social')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Open Graph Image</label>
             <div class="cpub-be-og-thumb">
@@ -344,7 +343,7 @@ const canvasMaxWidth = computed(() => {
               </div>
             </div>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/components/editors/ExplainerEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -203,7 +202,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
       </div>
 
       <div v-if="activeLeftTab === 'modules'" class="cpub-ee-left-body">
-        <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+        <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
       </div>
 
       <div v-else-if="activeLeftTab === 'structure'" class="cpub-ee-left-body" style="padding: 10px;">
@@ -299,7 +298,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
 
       <div class="cpub-ee-canvas">
         <div class="cpub-ee-canvas-inner" :style="{ maxWidth: canvasMaxWidth }">
-          <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -318,7 +317,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
     <!-- RIGHT: Properties -->
     <aside class="cpub-ee-right" :class="{ 'cpub-ee-sidebar-open': mobileRightOpen }" aria-label="Explainer properties">
       <div class="cpub-ee-right-body">
-        <EditorsEditorSection title="Content" icon="fa-sliders" :open="openSections.section" @toggle="toggleSection('section')">
+        <EditorSection title="Content" icon="fa-sliders" :open="openSections.section" @toggle="toggleSection('section')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -333,27 +332,27 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
-            <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+            <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Difficulty" icon="fa-gauge-high" :open="openSections.difficulty" @toggle="toggleSection('difficulty')">
+        <EditorSection title="Difficulty" icon="fa-gauge-high" :open="openSections.difficulty" @toggle="toggleSection('difficulty')">
           <select class="cpub-ep-select" :value="metadata.difficulty || 'beginner'" @change="updateMeta('difficulty', ($event.target as HTMLSelectElement).value)">
             <option value="beginner">Beginner</option>
             <option value="intermediate">Intermediate</option>
             <option value="advanced">Advanced</option>
           </select>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
-          <EditorsEditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
-        </EditorsEditorSection>
+        <EditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
+          <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
+        </EditorSection>
 
-        <EditorsEditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
+        <EditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
           <div class="cpub-ep-field">
             <input class="cpub-ep-input" type="url" :value="metadata.coverImageUrl" placeholder="https://..." @input="updateMeta('coverImageUrl', ($event.target as HTMLInputElement).value)">
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/components/editors/ProjectEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -151,7 +150,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
 
     <!-- LEFT: Block Library -->
     <aside class="cpub-pe-library" :class="{ 'cpub-pe-sidebar-open': mobileLeftOpen }" aria-label="Block library">
-      <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+      <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
     </aside>
 
     <!-- CENTER: Canvas with toolbar -->
@@ -202,7 +201,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
             placeholder="Project title..."
           />
 
-          <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -217,7 +216,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
     <!-- RIGHT: Settings Panel -->
     <aside class="cpub-pe-settings" :class="{ 'cpub-pe-sidebar-open': mobileRightOpen }" aria-label="Project settings">
       <div class="cpub-pe-settings-body">
-        <EditorsEditorSection title="Project Meta" icon="fa-sliders" :open="openSections.meta" @toggle="toggleSection('meta')">
+        <EditorSection title="Project Meta" icon="fa-sliders" :open="openSections.meta" @toggle="toggleSection('meta')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="project-url-slug" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -246,17 +245,17 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
             <label class="cpub-ep-flabel">Description</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="metadata.description as string" placeholder="Brief project description..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Tags" icon="fa-tag" :open="openSections.tags" @toggle="toggleSection('tags')">
-          <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
-        </EditorsEditorSection>
+        <EditorSection title="Tags" icon="fa-tag" :open="openSections.tags" @toggle="toggleSection('tags')">
+          <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+        </EditorSection>
 
-        <EditorsEditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
-          <EditorsEditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
-        </EditorsEditorSection>
+        <EditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
+          <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
+        </EditorSection>
 
-        <EditorsEditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
+        <EditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
           <div class="cpub-pe-cover" :class="{ 'has-image': !!coverImageUrl }">
             <template v-if="coverImageUrl">
               <img :src="coverImageUrl" alt="Cover image" class="cpub-pe-cover-img" />
@@ -282,17 +281,17 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
               </div>
             </template>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
+        <EditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-pe-field">
             <label class="cpub-pe-flabel">Meta Description</label>
             <textarea class="cpub-pe-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description (recommended 50-160 chars)" @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-pe-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Checklist" icon="fa-circle-check" :open="openSections.checklist" @toggle="toggleSection('checklist')">
+        <EditorSection title="Checklist" icon="fa-circle-check" :open="openSections.checklist" @toggle="toggleSection('checklist')">
           <div class="cpub-pe-checklist">
             <div v-for="item in checklist" :key="item.label" class="cpub-pe-check-item" :class="{ pass: item.pass }">
               <i :class="item.pass ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" :style="{ color: item.pass ? 'var(--green)' : 'var(--text-faint)' }"></i>
@@ -302,7 +301,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           <div class="cpub-pe-checklist-summary">
             {{ checklistDone }}/{{ checklist.length }} complete
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/composables/useMarkdownImport.ts

@@ -3,7 +3,7 @@
  */
 import { markdownToBlockTuples } from '@commonpub/editor';
 import type { BlockTuple } from '@commonpub/editor';
-import type { BlockEditor } from './useBlockEditor';
+import type { BlockEditor } from '@commonpub/editor/vue';
 
 export function useMarkdownImport(blockEditor: BlockEditor) {
   const importing = ref(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,15 +50,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.8.0",
     "@commonpub/docs": "0.6.1",
-    "@commonpub/editor": "0.5.0",
-    "@commonpub/explainer": "0.7.2",
-    "@commonpub/auth": "0.5.0",
+    "@commonpub/explainer": "0.7.3",
+    "@commonpub/editor": "0.6.0",
     "@commonpub/learning": "0.5.0",
     "@commonpub/protocol": "0.9.7",
-    "@commonpub/server": "2.27.2",
     "@commonpub/schema": "0.9.2",
+    "@commonpub/server": "2.27.2",
     "@commonpub/ui": "0.8.4"
   },
   "devDependencies": {

package/pages/docs/[siteSlug]/edit.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BlockTuple } from '@commonpub/editor';
-import type { BlockTypeGroup } from '../../../components/editors/BlockPicker.vue';
+import { BlockCanvas, EditorShell, useBlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 import type { PageTreeItem } from '../../../components/editors/DocsPageTree.vue';
 
 definePageMeta({ layout: false, middleware: 'auth' });
@@ -489,7 +489,7 @@ async function createVersion(): Promise<void> {
     </div>
 
     <!-- 3-panel editor -->
-    <EditorsEditorShell :show-left-sidebar="true" :show-right-sidebar="!!selectedPageId">
+    <EditorShell :show-left-sidebar="true" :show-right-sidebar="!!selectedPageId">
       <!-- LEFT: Page tree -->
       <template #left>
         <div class="cpub-docs-left-header">
@@ -543,7 +543,7 @@ async function createVersion(): Promise<void> {
           </div>
 
           <!-- Block canvas -->
-          <EditorsBlockCanvas
+          <BlockCanvas
             :block-editor="blockEditor"
             :block-types="blockTypes"
           />
@@ -649,7 +649,7 @@ async function createVersion(): Promise<void> {
           </span>
         </span>
       </template>
-    </EditorsEditorShell>
+    </EditorShell>
 
     <!-- Markdown import dialog -->
     <EditorsMarkdownImportDialog

package/pages/u/[username]/[type]/[slug]/edit.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
 import type { BlockTuple } from '@commonpub/editor';
+import { BlockCanvas, useBlockEditor } from '@commonpub/editor/vue';
 import { isExplainerDocument, createEmptyDocument } from '@commonpub/explainer';
 import type { ExplainerDocument } from '@commonpub/explainer';
 import { ExplainerSectionEditor } from '@commonpub/explainer/vue';
@@ -434,7 +435,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
     <!-- Write mode — fallback generic editor -->
     <div v-else-if="mode === 'write'" class="cpub-editor-shell">
       <div class="cpub-editor-canvas">
-        <EditorsBlockCanvas :block-editor="blockEditor" :block-types="[]" />
+        <BlockCanvas :block-editor="blockEditor" :block-types="[]" />
       </div>
     </div>