@commonpub/layer 0.7.2 → 0.7.4

package/components/CommentSection.vue

@@ -266,7 +266,7 @@ async function deleteComment(id: string): Promise<void> {
   color: var(--text-faint);
   background: var(--surface2);
   padding: 1px 6px;
-  border: 1px solid var(--border2);
+  border: var(--border-width-default) solid var(--border2);
 }
 
 .cpub-comment-form {
@@ -290,7 +290,7 @@ async function deleteComment(id: string): Promise<void> {
   gap: 8px;
   padding: 6px 10px;
   background: var(--surface2);
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
 }
 
 .cpub-cancel-reply {
@@ -313,7 +313,7 @@ async function deleteComment(id: string): Promise<void> {
   margin-bottom: 12px;
   padding: 8px 12px;
   background: var(--accent-bg);
-  border: 1px solid var(--accent-border);
+  border: var(--border-width-default) solid var(--accent-border);
   border-radius: 8px;
 }
 .cpub-comment-fed-notice i { color: var(--accent); font-size: 11px; }
@@ -461,6 +461,6 @@ async function deleteComment(id: string): Promise<void> {
   margin-bottom: 12px;
   padding: 8px 12px;
   background: var(--green-bg, rgba(34, 197, 94, 0.08));
-  border: 1px solid var(--green-border, rgba(34, 197, 94, 0.2));
+  border: var(--border-width-default) solid var(--green-border, rgba(34, 197, 94, 0.2));
 }
 </style>

package/components/ContentAttachments.vue

@@ -57,7 +57,7 @@ const safeAttachments = computed(() =>
 .cpub-attachments {
   margin: 28px 0;
   padding-top: 16px;
-  border-top: 1px solid var(--border);
+  border-top: var(--border-width-default) solid var(--border);
 }
 .cpub-attachments-label {
   font-size: 10px;
@@ -77,7 +77,7 @@ const safeAttachments = computed(() =>
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   background: var(--surface);
   text-decoration: none;
   color: var(--text-dim);
@@ -92,7 +92,7 @@ const safeAttachments = computed(() =>
   width: 40px;
   height: 40px;
   object-fit: cover;
-  border: 1px solid var(--border2);
+  border: var(--border-width-default) solid var(--border2);
 }
 .cpub-attachment-icon {
   width: 32px;
@@ -101,7 +101,7 @@ const safeAttachments = computed(() =>
   align-items: center;
   justify-content: center;
   background: var(--surface2);
-  border: 1px solid var(--border2);
+  border: var(--border-width-default) solid var(--border2);
   color: var(--text-faint);
   font-size: 14px;
 }

package/components/DiscussionItem.vue

@@ -177,7 +177,7 @@ const lastReplyFormatted = computed((): string | null => {
   width: 16px;
   height: 16px;
   object-fit: cover;
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   flex-shrink: 0;
 }
 

package/components/FeedItem.vue

@@ -271,7 +271,7 @@ const formattedDate = computed((): string => {
 
 .cpub-feed-stat-btn {
   background: none;
-  border: 1px solid transparent;
+  border: var(--border-width-default) solid transparent;
   cursor: pointer;
   padding: 2px 8px;
   border-radius: 4px;

package/components/MessageThread.vue

@@ -116,7 +116,7 @@ function handleSend(): void {
   width: 20px;
   height: 20px;
   object-fit: cover;
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   flex-shrink: 0;
 }
 

package/components/NotificationItem.vue

@@ -103,7 +103,7 @@ const iconMap: Record<string, string> = {
   align-items: center;
   justify-content: center;
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   border-radius: 50%;
   font-size: 8px;
   color: var(--text-dim);

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/components/hub/HubHero.vue

@@ -66,7 +66,7 @@ const isCompanyHub = computed(() => hubType.value === 'company');
   background: linear-gradient(135deg, var(--accent) 0%, #006b6b 50%, var(--accent-border) 100%);
   position: relative;
   overflow: hidden;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-width-default) solid var(--border);
 }
 
 .cpub-hub-banner-pattern {
@@ -87,7 +87,7 @@ const isCompanyHub = computed(() => hubType.value === 'company');
 
 .cpub-hub-meta-bar {
   background: var(--surface);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-width-default) solid var(--border);
   padding: 20px 0;
 }
 

package/components/hub/HubLayout.vue

@@ -45,7 +45,7 @@ const activeTab = defineModel<string>('activeTab', { required: true });
 <style scoped>
 .cpub-hub-tabs {
   background: var(--surface);
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-width-default) solid var(--border);
   position: sticky;
   top: 48px;
   z-index: 90;

package/components/hub/HubProducts.vue

@@ -36,7 +36,7 @@ defineProps<{
 
 .cpub-product-card {
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   border-radius: 12px;
   padding: 16px;
   display: flex;
@@ -55,7 +55,7 @@ defineProps<{
   width: 48px;
   height: 48px;
   background: var(--surface2);
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   border-radius: 10px;
   display: flex;
   align-items: center;

package/components/hub/HubSidebarCard.vue

@@ -14,7 +14,7 @@ defineProps<{
 <style scoped>
 .cpub-sb-card {
   background: var(--surface);
-  border: 1px solid var(--border);
+  border: var(--border-width-default) solid var(--border);
   padding: 18px;
   box-shadow: var(--shadow-sm);
   margin-bottom: 16px;
@@ -30,6 +30,6 @@ defineProps<{
   color: var(--text-dim);
   margin-bottom: 14px;
   padding-bottom: 8px;
-  border-bottom: 1px solid var(--border);
+  border-bottom: var(--border-width-default) solid var(--border);
 }
 </style>