@commonpub/layer 0.4.6 → 0.4.8

package/components/editors/EditorShell.vue

@@ -19,47 +19,61 @@ function toggleRight(): void {
 </script>
 
 <template>
-  <div class="cpub-editor-shell-inner">
-    <!-- Mobile sidebar toggles -->
-    <div class="cpub-editor-mobile-toggles">
-      <button v-if="showLeftSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle blocks panel" @click="toggleLeft">
-        <i class="fa-solid fa-layer-group"></i>
-      </button>
-      <button v-if="showRightSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle properties panel" @click="toggleRight">
-        <i class="fa-solid fa-sliders"></i>
-      </button>
+  <div class="cpub-editor-shell-wrapper">
+    <div class="cpub-editor-shell-inner">
+      <!-- Mobile sidebar toggles -->
+      <div class="cpub-editor-mobile-toggles">
+        <button v-if="showLeftSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle blocks panel" @click="toggleLeft">
+          <i class="fa-solid fa-layer-group"></i>
+        </button>
+        <button v-if="showRightSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle properties panel" @click="toggleRight">
+          <i class="fa-solid fa-sliders"></i>
+        </button>
+      </div>
+
+      <!-- Left sidebar -->
+      <aside
+        v-if="showLeftSidebar"
+        class="cpub-editor-left"
+        :class="{ 'cpub-editor-sidebar-open': leftOpen }"
+        aria-label="Editor sidebar"
+      >
+        <slot name="left" />
+      </aside>
+
+      <!-- Overlay for mobile sidebars -->
+      <div v-if="leftOpen || rightOpen" class="cpub-editor-overlay" @click="leftOpen = false; rightOpen = false" />
+
+      <div class="cpub-editor-center">
+        <slot />
+      </div>
+
+      <!-- Right sidebar -->
+      <aside
+        v-if="showRightSidebar"
+        class="cpub-editor-right"
+        :class="{ 'cpub-editor-sidebar-open': rightOpen }"
+        aria-label="Properties"
+      >
+        <slot name="right" />
+      </aside>
     </div>
 
-    <!-- Left sidebar -->
-    <aside
-      v-if="showLeftSidebar"
-      class="cpub-editor-left"
-      :class="{ 'cpub-editor-sidebar-open': leftOpen }"
-      aria-label="Editor sidebar"
-    >
-      <slot name="left" />
-    </aside>
-
-    <!-- Overlay for mobile sidebars -->
-    <div v-if="leftOpen || rightOpen" class="cpub-editor-overlay" @click="leftOpen = false; rightOpen = false" />
-
-    <div class="cpub-editor-center">
-      <slot />
+    <!-- Status bar -->
+    <div v-if="$slots.status" class="cpub-editor-status-bar">
+      <slot name="status" />
     </div>
-
-    <!-- Right sidebar -->
-    <aside
-      v-if="showRightSidebar"
-      class="cpub-editor-right"
-      :class="{ 'cpub-editor-sidebar-open': rightOpen }"
-      aria-label="Properties"
-    >
-      <slot name="right" />
-    </aside>
   </div>
 </template>
 
 <style scoped>
+.cpub-editor-shell-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
 .cpub-editor-shell-inner {
   display: flex;
   flex: 1;
@@ -67,6 +81,20 @@ function toggleRight(): void {
   position: relative;
 }
 
+.cpub-editor-status-bar {
+  height: 28px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-top: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 14px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
 .cpub-editor-left {
   width: 220px;
   flex-shrink: 0;

package/components/views/ExplainerView.vue

@@ -1,13 +1,23 @@
 <script setup lang="ts">
 import type { ContentViewData } from '../../composables/useEngagement';
 import type { BlockTuple } from '@commonpub/editor';
+import { isExplainerDocument } from '@commonpub/explainer';
+import type { ExplainerDocument } from '@commonpub/explainer';
+import { ScrollViewer } from '@commonpub/explainer/vue';
 
 const props = defineProps<{
   content: ContentViewData;
   federatedId?: string;
 }>();
 
+// Detect V2 ExplainerDocument format vs legacy BlockTuple[] format
+const isV2Format = computed(() => isExplainerDocument(props.content?.content));
+const v2Document = computed<ExplainerDocument | null>(() =>
+  isV2Format.value ? (props.content.content as unknown as ExplainerDocument) : null,
+);
+
 const blocks = computed<BlockTuple[]>(() => {
+  if (isV2Format.value) return []; // V2 uses its own viewer
   const raw = props.content?.content;
   if (!Array.isArray(raw)) return [];
   return raw as BlockTuple[];
@@ -154,7 +164,11 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 </script>
 
 <template>
-  <div class="cpub-explainer-view">
+  <!-- V2 Scroll Viewer for ExplainerDocument format -->
+  <ScrollViewer v-if="isV2Format && v2Document" :document="v2Document" />
+
+  <!-- Legacy slide-deck viewer for BlockTuple[] format -->
+  <div v-else class="cpub-explainer-view">
     <!-- PROGRESS BAR -->
     <div class="cpub-progress-line">
       <div class="cpub-progress-line-fill" :style="{ width: progressPct + '%' }"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,14 +51,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/config": "0.8.0",
-    "@commonpub/auth": "0.5.0",
     "@commonpub/docs": "0.5.2",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/server": "2.22.0",
-    "@commonpub/ui": "0.8.4",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/explainer": "0.5.2",
+    "@commonpub/schema": "0.8.13",
     "@commonpub/protocol": "0.9.5",
-    "@commonpub/schema": "0.8.13"
+    "@commonpub/ui": "0.8.4",
+    "@commonpub/server": "2.22.1",
+    "@commonpub/auth": "0.5.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { TocEntry } from '@commonpub/docs';
+import type { BlockTuple } from '@commonpub/editor';
 
 const route = useRoute();
 const siteSlug = computed(() => route.params.siteSlug as string);
@@ -12,19 +13,29 @@ const { data: site } = useLazyFetch(() => `/api/docs/${siteSlug.value}`);
 const { data: nav } = useLazyFetch(() => `/api/docs/${siteSlug.value}/nav`);
 const { data: pages } = useLazyFetch(() => `/api/docs/${siteSlug.value}/pages`);
 
-// Fetch the rendered page (server-side markdown rendering)
+// Fetch the rendered page (server-side markdown rendering or block content)
 interface RenderedPage {
   id: string;
   title: string;
   slug: string;
-  content: string;
+  content: string | BlockTuple[];
   sortOrder: number;
   parentId: string | null;
-  html: string;
+  html: string | null;
   toc: TocEntry[];
   frontmatter: { title?: string; description?: string };
+  format?: 'blocks' | 'markdown';
 }
 
+const isBlockContent = computed(() =>
+  renderedPage.value?.format === 'blocks' || Array.isArray(renderedPage.value?.content),
+);
+
+const blockContent = computed<BlockTuple[]>(() => {
+  if (!renderedPage.value || !isBlockContent.value) return [];
+  return renderedPage.value.content as BlockTuple[];
+});
+
 const { data: renderedPage, pending: pagePending, error: pageError, refresh: refreshPage } = useLazyFetch<RenderedPage>(
   () => `/api/docs/${siteSlug.value}/pages/${pagePath.value}`,
   { key: `doc-page-${siteSlug.value}-${pagePath.value}` },
@@ -89,7 +100,7 @@ const activeHeadingId = ref('');
 // Scroll spy for TOC
 function setupScrollSpy(): void {
   if (!import.meta.client) return;
-  const headings = document.querySelectorAll('.docs-content h2[id], .docs-content h3[id]');
+  const headings = document.querySelectorAll('.docs-content h2[id], .docs-content h3[id], .docs-content .cpub-block-heading[id]');
   if (!headings.length) return;
   const observer = new IntersectionObserver(
     (entries) => {
@@ -197,7 +208,7 @@ useSeoMeta({
       <aside class="docs-sidebar" :class="{ open: sidebarOpen }" aria-label="Documentation navigation">
         <div class="docs-sidebar-header">
           <NuxtLink :to="`/docs/${siteSlug}`" class="docs-sidebar-title">{{ site.name }}</NuxtLink>
-          <NuxtLink v-if="isOwner" :to="`/docs/${siteSlug}/edit`" class="docs-edit-link" aria-label="Edit docs">
+          <NuxtLink v-if="isOwner" :to="`/docs/${siteSlug}/edit?page=${pagePath}`" class="docs-edit-link" aria-label="Edit this page">
             <i class="fa-solid fa-pen"></i>
           </NuxtLink>
         </div>
@@ -301,7 +312,10 @@ useSeoMeta({
         <h1 class="docs-page-title">{{ renderedPage.title }}</h1>
 
         <!-- Rendered Content -->
-        <div class="docs-content cpub-prose" v-html="renderedPage.html" />
+        <div v-if="isBlockContent" class="docs-content cpub-prose">
+          <BlocksBlockContentRenderer :blocks="blockContent" />
+        </div>
+        <div v-else class="docs-content cpub-prose" v-html="renderedPage.html" />
 
         <!-- Prev / Next -->
         <div class="docs-prev-next" v-if="prevNextLinks.prev || prevNextLinks.next">