@commonpub/layer 0.1.0

package/components/VideoCard.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+defineProps<{
+  video: {
+    id: string;
+    title: string;
+    thumbnailUrl?: string | null;
+    duration?: number | null;
+    viewCount: number;
+    authorId: string;
+    author?: {
+      username: string;
+      displayName: string | null;
+      avatarUrl: string | null;
+    };
+  };
+}>();
+
+function formatDuration(seconds: number | null | undefined): string {
+  if (!seconds) return '';
+  const m = Math.floor(seconds / 60);
+  const s = seconds % 60;
+  return `${m}:${String(s).padStart(2, '0')}`;
+}
+</script>
+
+<template>
+  <div class="cpub-video-card cpub-card">
+    <div class="cpub-video-thumb">
+      <img v-if="video.thumbnailUrl" :src="video.thumbnailUrl" :alt="video.title" loading="lazy" />
+      <div v-else class="cpub-video-thumb-placeholder">
+        <i class="fa-solid fa-play"></i>
+      </div>
+      <span v-if="video.duration" class="cpub-video-duration">{{ formatDuration(video.duration) }}</span>
+    </div>
+    <div class="cpub-card-body">
+      <h3 class="cpub-video-title">{{ video.title }}</h3>
+      <div v-if="video.author" class="cpub-video-author-row">
+        <div class="cpub-video-av">
+          <img v-if="video.author.avatarUrl" :src="video.author.avatarUrl" :alt="video.author.displayName || video.author.username" class="cpub-video-av-img" />
+          <span v-else>{{ (video.author.displayName || video.author.username || '?').charAt(0).toUpperCase() }}</span>
+        </div>
+        <span class="cpub-video-author-name">{{ video.author.displayName || video.author.username }}</span>
+      </div>
+      <div class="cpub-video-meta">
+        <span><i class="fa-solid fa-eye"></i> {{ video.viewCount }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-video-thumb {
+  position: relative;
+  height: 140px;
+  background: var(--surface2);
+  border-bottom: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+.cpub-video-thumb img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-video-thumb-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 24px;
+  color: var(--text-faint);
+  opacity: 0.3;
+}
+
+.cpub-video-duration {
+  position: absolute;
+  bottom: 6px;
+  right: 6px;
+  background: var(--color-surface-overlay);
+  color: var(--color-text-inverse);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  padding: 2px 6px;
+}
+
+.cpub-video-title {
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  line-height: 1.35;
+}
+
+.cpub-video-author-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
+.cpub-video-av { width: 18px; height: 18px; border-radius: 50%; background: var(--surface2); border: var(--border-width-default) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 7px; font-family: var(--font-mono); color: var(--text-faint); flex-shrink: 0; overflow: hidden; }
+.cpub-video-av-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+.cpub-video-author-name { font-size: 11px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+.cpub-video-meta {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  display: flex;
+  gap: 8px;
+}
+</style>

package/components/blocks/BlockBuildStepView.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+const props = defineProps<{
+  content: Record<string, unknown>;
+  stepNumber?: number;
+}>();
+
+const title = computed(() => (props.content.title as string) || `Step ${props.stepNumber ?? 1}`);
+const instructions = computed(() => (props.content.instructions as string) || '');
+const time = computed(() => (props.content.time as string) || '');
+const image = computed(() => (props.content.image as string) || '');
+const num = computed(() => props.stepNumber ?? (props.content.stepNumber as number) ?? 1);
+</script>
+
+<template>
+  <div class="cpub-block-step">
+    <div class="cpub-step-header">
+      <span class="cpub-step-num">{{ num }}</span>
+      <h3 class="cpub-step-title">{{ title }}</h3>
+      <span v-if="time" class="cpub-step-time"><i class="fa-regular fa-clock"></i> {{ time }}</span>
+    </div>
+    <div class="cpub-step-body">
+      <p v-if="instructions">{{ instructions }}</p>
+      <img v-if="image" :src="image" :alt="`Step ${num}`" class="cpub-step-img" loading="lazy" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-step {
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  margin: 20px 0;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-step-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--border);
+  color: var(--surface);
+}
+
+.cpub-step-num {
+  width: 28px;
+  height: 28px;
+  background: var(--accent);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+
+.cpub-step-title {
+  font-size: 14px;
+  font-weight: 600;
+  flex: 1;
+  margin: 0;
+}
+
+.cpub-step-time {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.cpub-step-body {
+  padding: 16px;
+  font-size: 13px;
+  line-height: 1.7;
+  color: var(--text-dim);
+}
+
+.cpub-step-body p { margin: 0 0 12px; }
+.cpub-step-body p:last-child { margin-bottom: 0; }
+
+.cpub-step-img {
+  width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border: var(--border-width-default) solid var(--border);
+  margin-top: 12px;
+}
+</style>

package/components/blocks/BlockCalloutView.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { sanitizeBlockHtml } from '../../composables/useSanitize';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const html = computed(() => sanitizeBlockHtml((props.content.html as string) || ''));
+const variant = computed(() => (props.content.variant as string) || 'info');
+
+const variantConfig: Record<string, { icon: string; label: string }> = {
+  info: { icon: 'fa-circle-info', label: 'Info' },
+  tip: { icon: 'fa-lightbulb', label: 'Tip' },
+  warning: { icon: 'fa-triangle-exclamation', label: 'Warning' },
+  danger: { icon: 'fa-circle-exclamation', label: 'Danger' },
+};
+
+const config = computed(() => variantConfig[variant.value] ?? variantConfig.info!);
+</script>
+
+<template>
+  <div class="cpub-block-callout" :class="`cpub-callout--${variant}`">
+    <div class="cpub-callout-icon">
+      <i :class="['fa-solid', config.icon]"></i>
+    </div>
+    <div class="cpub-callout-body">
+      <div class="cpub-callout-label">{{ config.label }}</div>
+      <div class="cpub-callout-text" v-html="html" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-callout {
+  display: flex;
+  gap: 12px;
+  padding: 16px 18px;
+  margin: 20px 0;
+  border: var(--border-width-default) solid var(--border);
+  border-left-width: 5px;
+  box-shadow: var(--shadow-md);
+}
+
+.cpub-callout--info { border-left-color: var(--accent); background: var(--accent-bg); }
+.cpub-callout--tip { border-left-color: var(--green); background: var(--green-bg); }
+.cpub-callout--warning { border-left-color: var(--yellow); background: var(--yellow-bg); }
+.cpub-callout--danger { border-left-color: var(--red); background: var(--red-bg); }
+
+.cpub-callout-icon {
+  font-size: 14px;
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
+.cpub-callout--info .cpub-callout-icon { color: var(--accent); }
+.cpub-callout--tip .cpub-callout-icon { color: var(--green); }
+.cpub-callout--warning .cpub-callout-icon { color: var(--yellow); }
+.cpub-callout--danger .cpub-callout-icon { color: var(--red); }
+
+.cpub-callout-body { flex: 1; min-width: 0; }
+
+.cpub-callout-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 4px;
+}
+
+.cpub-callout--info .cpub-callout-label { color: var(--accent); }
+.cpub-callout--tip .cpub-callout-label { color: var(--green); }
+.cpub-callout--warning .cpub-callout-label { color: var(--yellow); }
+.cpub-callout--danger .cpub-callout-label { color: var(--red); }
+
+.cpub-callout-text {
+  font-size: 14px;
+  line-height: 1.65;
+  color: var(--text-dim);
+}
+
+.cpub-callout-text :deep(strong) { color: var(--text); }
+.cpub-callout-text :deep(p) { margin: 0; }
+</style>

package/components/blocks/BlockCheckpointView.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ reached: [] }>();
+
+const label = computed(() => (props.content.label as string) || 'Checkpoint reached');
+const completed = ref(false);
+
+function markComplete(): void {
+  if (completed.value) return;
+  completed.value = true;
+  emit('reached');
+}
+
+onMounted(() => {
+  // Auto-trigger when scrolled into view
+  markComplete();
+});
+</script>
+
+<template>
+  <div class="cpub-block-checkpoint" :class="{ visible: completed }">
+    <i class="fa-solid fa-circle-check"></i>
+    <span class="cpub-checkpoint-text">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-checkpoint {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--green-bg);
+  border: var(--border-width-default) solid var(--green);
+  margin: 24px 0;
+  font-size: 13px;
+  color: var(--green);
+  opacity: 0;
+  transform: translateY(8px);
+  transition: opacity 0.4s ease, transform 0.4s ease;
+}
+
+.cpub-block-checkpoint.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.cpub-block-checkpoint i { font-size: 14px; }
+.cpub-checkpoint-text { font-weight: 600; }
+</style>

package/components/blocks/BlockCodeView.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import hljs from 'highlight.js/lib/core';
+
+import javascript from 'highlight.js/lib/languages/javascript';
+import typescript from 'highlight.js/lib/languages/typescript';
+import python from 'highlight.js/lib/languages/python';
+import bash from 'highlight.js/lib/languages/bash';
+import css from 'highlight.js/lib/languages/css';
+import scss from 'highlight.js/lib/languages/scss';
+import json from 'highlight.js/lib/languages/json';
+import yaml from 'highlight.js/lib/languages/yaml';
+import xml from 'highlight.js/lib/languages/xml';
+import sql from 'highlight.js/lib/languages/sql';
+import rust from 'highlight.js/lib/languages/rust';
+import go from 'highlight.js/lib/languages/go';
+import java from 'highlight.js/lib/languages/java';
+import cpp from 'highlight.js/lib/languages/cpp';
+import csharp from 'highlight.js/lib/languages/csharp';
+import ruby from 'highlight.js/lib/languages/ruby';
+import php from 'highlight.js/lib/languages/php';
+import swift from 'highlight.js/lib/languages/swift';
+import kotlin from 'highlight.js/lib/languages/kotlin';
+import markdown from 'highlight.js/lib/languages/markdown';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
+import graphql from 'highlight.js/lib/languages/graphql';
+import ini from 'highlight.js/lib/languages/ini';
+
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('js', javascript);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('ts', typescript);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('shell', bash);
+hljs.registerLanguage('sh', bash);
+hljs.registerLanguage('css', css);
+hljs.registerLanguage('scss', scss);
+hljs.registerLanguage('json', json);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('yml', yaml);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('html', xml);
+hljs.registerLanguage('vue', xml);
+hljs.registerLanguage('svelte', xml);
+hljs.registerLanguage('sql', sql);
+hljs.registerLanguage('rust', rust);
+hljs.registerLanguage('go', go);
+hljs.registerLanguage('java', java);
+hljs.registerLanguage('cpp', cpp);
+hljs.registerLanguage('c', cpp);
+hljs.registerLanguage('csharp', csharp);
+hljs.registerLanguage('ruby', ruby);
+hljs.registerLanguage('php', php);
+hljs.registerLanguage('swift', swift);
+hljs.registerLanguage('kotlin', kotlin);
+hljs.registerLanguage('markdown', markdown);
+hljs.registerLanguage('md', markdown);
+hljs.registerLanguage('dockerfile', dockerfile);
+hljs.registerLanguage('docker', dockerfile);
+hljs.registerLanguage('graphql', graphql);
+hljs.registerLanguage('toml', ini);
+hljs.registerLanguage('ini', ini);
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+
+const language = computed(() => (props.content.language as string) || '');
+const filename = computed(() => (props.content.filename as string) || '');
+const code = computed(() => (props.content.code as string) || '');
+
+const highlightedHtml = computed(() => {
+  if (!code.value) return '';
+  try {
+    const lang = language.value.toLowerCase();
+    if (lang && hljs.getLanguage(lang)) {
+      return hljs.highlight(code.value, { language: lang }).value;
+    }
+    return hljs.highlightAuto(code.value).value;
+  } catch {
+    return '';
+  }
+});
+
+const copied = ref(false);
+
+async function copyCode(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(code.value);
+    copied.value = true;
+    setTimeout(() => { copied.value = false; }, 1500);
+  } catch { /* clipboard API not available */ }
+}
+</script>
+
+<template>
+  <div class="cpub-block-code">
+    <div class="cpub-code-header">
+      <span v-if="language" class="cpub-code-lang">{{ language }}</span>
+      <span v-if="filename" class="cpub-code-filename">{{ filename }}</span>
+      <button class="cpub-code-copy" @click="copyCode">
+        <i :class="copied ? 'fa-solid fa-check' : 'fa-regular fa-copy'"></i>
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+    <pre class="cpub-code-body hljs"><code v-if="highlightedHtml" v-html="highlightedHtml" /><code v-else>{{ code }}</code></pre>
+  </div>
+</template>
+
+<style>
+/* highlight.js github-dark theme — MUST be unscoped so hljs classes apply to v-html content */
+pre.hljs {
+  background: #0d1117;
+  color: #e6edf3;
+}
+pre.hljs .hljs-comment,
+pre.hljs .hljs-quote { color: #8b949e; font-style: italic; }
+pre.hljs .hljs-keyword,
+pre.hljs .hljs-selector-tag,
+pre.hljs .hljs-type { color: #ff7b72; }
+pre.hljs .hljs-literal,
+pre.hljs .hljs-number,
+pre.hljs .hljs-tag .hljs-attr { color: #79c0ff; }
+pre.hljs .hljs-string,
+pre.hljs .hljs-addition { color: #a5d6ff; }
+pre.hljs .hljs-deletion { color: #ffa198; }
+pre.hljs .hljs-regexp,
+pre.hljs .hljs-link { color: #a5d6ff; }
+pre.hljs .hljs-meta { color: #d2a8ff; }
+pre.hljs .hljs-title,
+pre.hljs .hljs-section,
+pre.hljs .hljs-built_in { color: #d2a8ff; }
+pre.hljs .hljs-name,
+pre.hljs .hljs-selector-id,
+pre.hljs .hljs-selector-class { color: #7ee787; }
+pre.hljs .hljs-variable,
+pre.hljs .hljs-template-variable { color: #ffa657; }
+pre.hljs .hljs-attribute { color: #79c0ff; }
+pre.hljs .hljs-symbol,
+pre.hljs .hljs-bullet { color: #ffa657; }
+pre.hljs .hljs-subst { color: #e6edf3; }
+pre.hljs .hljs-title.function_ { color: #d2a8ff; }
+pre.hljs .hljs-title.class_ { color: #ffa657; }
+</style>
+
+<style scoped>
+.cpub-block-code {
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+  margin: 20px 0;
+}
+
+.cpub-code-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  background: #161b22;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-code-lang {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: #7ee787;
+}
+
+.cpub-code-filename {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #8b949e;
+  flex: 1;
+}
+
+.cpub-code-copy {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #8b949e;
+  background: transparent;
+  border: var(--border-width-default) solid #30363d;
+  padding: 3px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.cpub-code-copy:hover {
+  color: #e6edf3;
+  border-color: #8b949e;
+}
+
+.cpub-code-body {
+  margin: 0;
+  padding: 16px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  overflow-x: auto;
+}
+
+.cpub-code-body code {
+  font-family: inherit;
+  background: none !important;
+  border: none !important;
+  padding: 0 !important;
+  color: inherit;
+}
+</style>

package/components/blocks/BlockContentRenderer.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+/**
+ * BlockContentRenderer — renders BlockTuple[] as pure Vue components.
+ * Replaces CpubEditor in read-only mode so interactive blocks (quiz, slider)
+ * render fully instead of as TipTap placeholders.
+ */
+import type { Component } from 'vue';
+import { sanitizeBlockHtml } from '../../composables/useSanitize';
+import BlockTextView from './BlockTextView.vue';
+import BlockHeadingView from './BlockHeadingView.vue';
+import BlockCodeView from './BlockCodeView.vue';
+import BlockImageView from './BlockImageView.vue';
+import BlockQuoteView from './BlockQuoteView.vue';
+import BlockCalloutView from './BlockCalloutView.vue';
+import BlockDividerView from './BlockDividerView.vue';
+import BlockVideoView from './BlockVideoView.vue';
+import BlockEmbedView from './BlockEmbedView.vue';
+import BlockPartsListView from './BlockPartsListView.vue';
+import BlockBuildStepView from './BlockBuildStepView.vue';
+import BlockToolListView from './BlockToolListView.vue';
+import BlockDownloadsView from './BlockDownloadsView.vue';
+import BlockQuizView from './BlockQuizView.vue';
+import BlockSliderView from './BlockSliderView.vue';
+import BlockCheckpointView from './BlockCheckpointView.vue';
+import BlockMathView from './BlockMathView.vue';
+import BlockGalleryView from './BlockGalleryView.vue';
+import BlockSectionHeaderView from './BlockSectionHeaderView.vue';
+import BlockMarkdownView from './BlockMarkdownView.vue';
+import type { BlockTuple } from '@commonpub/editor';
+
+const props = defineProps<{
+  blocks: BlockTuple[];
+  startIndex?: number;
+  endIndex?: number;
+}>();
+
+const emit = defineEmits<{
+  quizAnswered: [blockIndex: number, correct: boolean];
+  checkpointReached: [blockIndex: number];
+}>();
+
+const componentMap: Record<string, unknown> = {
+  text: BlockTextView,
+  paragraph: BlockTextView,
+  heading: BlockHeadingView,
+  code: BlockCodeView,
+  code_block: BlockCodeView,
+  codeBlock: BlockCodeView,
+  image: BlockImageView,
+  quote: BlockQuoteView,
+  blockquote: BlockQuoteView,
+  callout: BlockCalloutView,
+  divider: BlockDividerView,
+  horizontalRule: BlockDividerView,
+  video: BlockVideoView,
+  embed: BlockEmbedView,
+  partsList: BlockPartsListView,
+  buildStep: BlockBuildStepView,
+  toolList: BlockToolListView,
+  downloads: BlockDownloadsView,
+  quiz: BlockQuizView,
+  interactiveSlider: BlockSliderView,
+  slider: BlockSliderView,
+  checkpoint: BlockCheckpointView,
+  mathNotation: BlockMathView,
+  math: BlockMathView,
+  gallery: BlockGalleryView,
+  sectionHeader: BlockSectionHeaderView,
+  markdown: BlockMarkdownView,
+};
+
+const visibleBlocks = computed(() => {
+  const start = props.startIndex ?? 0;
+  const end = props.endIndex ?? props.blocks.length;
+  return props.blocks.slice(start, end).map((block, i) => ({
+    type: block[0],
+    data: block[1],
+    index: start + i,
+  }));
+});
+
+// Track sequential build step numbers
+const stepCounters = computed(() => {
+  const counters: Record<number, number> = {};
+  let stepNum = 0;
+  const start = props.startIndex ?? 0;
+  const end = props.endIndex ?? props.blocks.length;
+  for (let i = start; i < end; i++) {
+    if (props.blocks[i]![0] === 'buildStep') {
+      stepNum++;
+      counters[i] = stepNum;
+    }
+  }
+  return counters;
+});
+
+function resolveComponent(type: string): unknown {
+  return componentMap[type] ?? null;
+}
+
+function onQuizAnswered(blockIndex: number, correct: boolean): void {
+  emit('quizAnswered', blockIndex, correct);
+}
+
+function onCheckpointReached(blockIndex: number): void {
+  emit('checkpointReached', blockIndex);
+}
+</script>
+
+<template>
+  <div class="cpub-block-renderer">
+    <template v-for="block in visibleBlocks" :key="block.index">
+      <component
+        :is="(resolveComponent(block.type) as Component)"
+        v-if="resolveComponent(block.type)"
+        :content="block.data"
+        :step-number="block.type === 'buildStep' ? stepCounters[block.index] : undefined"
+        @answered="(correct: boolean) => onQuizAnswered(block.index, correct)"
+        @reached="() => onCheckpointReached(block.index)"
+      />
+      <!-- Fallback for unknown block types: render as text if html present -->
+      <div v-else-if="'html' in block.data && (block.data as Record<string, unknown>).html" class="cpub-block-fallback" v-html="sanitizeBlockHtml((block.data as Record<string, unknown>).html as string)" />
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.cpub-block-fallback {
+  font-size: 15px;
+  line-height: 1.75;
+  color: var(--text-dim);
+}
+
+.cpub-block-fallback :deep(p) {
+  margin-bottom: 14px;
+}
+</style>

package/components/blocks/BlockDividerView.vue

@@ -0,0 +1,11 @@
+<template>
+  <hr class="cpub-block-divider" />
+</template>
+
+<style scoped>
+.cpub-block-divider {
+  border: none;
+  border-top: var(--border-width-default) solid var(--border);
+  margin: 36px 0;
+}
+</style>