@commonpub/layer 0.5.6 → 0.6.0

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

@@ -0,0 +1,783 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+import type { BlockTuple } from '@commonpub/editor';
+import { isExplainerDocument, createEmptyDocument } from '@commonpub/explainer';
+import type { ExplainerDocument } from '@commonpub/explainer';
+import { ExplainerSectionEditor } from '@commonpub/explainer/vue';
+definePageMeta({ layout: false, middleware: 'auth' });
+
+const route = useRoute();
+const username = computed(() => route.params.username as string);
+const contentType = computed(() => route.params.type as string);
+const slug = computed(() => route.params.slug as string);
+const isNew = ref(slug.value === 'new');
+const showStarterForm = ref(isNew.value);
+const starterSaving = ref(false);
+
+const { contentEditPath } = useContentUrl();
+const { user } = useAuth();
+
+// For new content: redirect to the authenticated user's namespace if URL username doesn't match
+// For existing content: only the owner can edit, so mismatch = not found
+if (user.value?.username && user.value.username !== username.value) {
+  if (isNew.value) {
+    await navigateTo(`/u/${user.value.username}/${contentType.value}/new/edit${route.query.hub ? `?hub=${route.query.hub}` : ''}`, { replace: true });
+  } else {
+    throw createError({ statusCode: 404, statusMessage: 'Content not found' });
+  }
+}
+
+useSeoMeta({
+  title: () => isNew.value ? `New ${contentType.value} — ${useSiteName()}` : `Edit — ${useSiteName()}`,
+});
+
+const title = ref('');
+const hubFromQuery = (route.query.hub as string) || '';
+const metadata = ref<Record<string, unknown>>({
+  description: '',
+  slug: '',
+  tags: [],
+  visibility: 'public',
+  coverImageUrl: '',
+  ...(hubFromQuery ? { hubSlug: hubFromQuery } : {}),
+});
+const isDirty = ref(false);
+const { extract: extractError } = useApiError();
+const mode = ref<'write' | 'preview' | 'code'>('write');
+const contentId = ref<string | null>(null);
+
+// --- Block editor (articles, blogs, projects) ---
+const blockEditor = useBlockEditor();
+
+// --- Explainer document (explainers only) ---
+const isExplainer = computed(() => contentType.value === 'explainer');
+const explainerDocInit = ref<ExplainerDocument | null>(null);
+const explainerDocLatest = ref<ExplainerDocument | null>(null);
+
+function getContentForSave(): unknown {
+  if (isExplainer.value) {
+    return explainerDocLatest.value ?? explainerDocInit.value;
+  }
+  return blockEditor.toBlockTuples();
+}
+
+// --- Content save composable ---
+const {
+  saving,
+  error,
+  autoSaveStatus,
+  silentSave,
+  handlePublish: doPublish,
+  buildSaveBody,
+  cancelAutoSave,
+  initAutoSave,
+  cleanup,
+} = useContentSave({
+  contentType,
+  title,
+  metadata,
+  isNew,
+  contentId,
+  isDirty,
+  getBlockTuples: getContentForSave as () => BlockTuple[],
+  extractError,
+  onAfterSave: syncBOM,
+  username,
+});
+
+// --- Publish validation ---
+const { errors: publishErrors, showErrors: showPublishErrors, validate, dismiss: dismissPublishErrors } = usePublishValidation({
+  title,
+  metadata,
+  getBlockTuples: getContentForSave as () => BlockTuple[],
+});
+
+// --- Specialized editor component map ---
+const editorMap: Record<string, Component> = {
+  article: resolveComponent('EditorsArticleEditor') as Component,
+  blog: resolveComponent('EditorsBlogEditor') as Component,
+  explainer: resolveComponent('EditorsExplainerEditor') as Component,
+  project: resolveComponent('EditorsProjectEditor') as Component,
+};
+const editorComponent = computed<Component | null>(() => editorMap[contentType.value] ?? null);
+const hasSpecializedEditor = computed(() => editorComponent.value !== null);
+
+// --- Load existing content ---
+const requestHeaders = import.meta.server ? useRequestHeaders(['cookie']) : {};
+if (!isNew.value) {
+  const { data } = await useFetch(
+    () => `/api/content/${slug.value}?author=${encodeURIComponent(username.value)}`,
+    { headers: requestHeaders },
+  );
+  if (data.value) {
+    const d = data.value as Record<string, unknown>;
+    contentId.value = d.id as string;
+    title.value = d.title as string;
+    if (isExplainer.value && isExplainerDocument(d.content)) {
+      const doc = d.content as unknown as ExplainerDocument;
+      if (!doc.hero.title && title.value) {
+        doc.hero.title = title.value;
+      } else if (doc.hero.title) {
+        title.value = doc.hero.title;
+      }
+      explainerDocInit.value = doc;
+      explainerDocLatest.value = JSON.parse(JSON.stringify(doc));
+    } else if (Array.isArray(d.content)) {
+      blockEditor.fromBlockTuples(d.content as [string, Record<string, unknown>][]);
+    }
+    metadata.value = {
+      description: (d.description as string) || '',
+      slug: (d.slug as string) || '',
+      tags: d.tags ? (d.tags as { name: string }[]).map((t) => t.name) : [],
+      visibility: (d.visibility as string) || 'public',
+      coverImageUrl: (d.coverImageUrl as string) || '',
+      seoDescription: (d.seoDescription as string) || '',
+      difficulty: (d.difficulty as string) || '',
+      buildTime: (d.buildTime as string) || '',
+      estimatedCost: (d.estimatedCost as string) || '',
+      estimatedMinutes: (d.estimatedMinutes as number) || undefined,
+      licenseType: (d.licenseType as string) || '',
+      series: (d.series as string) || '',
+      category: (d.category as string) || '',
+      subtitle: (d.subtitle as string) || '',
+    };
+  }
+}
+
+// --- Auto-generate slug from title ---
+const slugManuallyEdited = ref(false);
+function slugify(text: string): string {
+  return text.toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '').slice(0, 128);
+}
+watch(title, (newTitle) => {
+  if (!slugManuallyEdited.value && isNew.value) {
+    metadata.value = { ...metadata.value, slug: slugify(newTitle) };
+  }
+});
+
+// --- Dirty tracking + autosave ---
+watch(() => blockEditor.blocks.value, () => { isDirty.value = true; }, { deep: true });
+watch(explainerDocLatest, () => { isDirty.value = true; }, { deep: true });
+initAutoSave([() => blockEditor.blocks.value, () => explainerDocLatest.value, title, metadata]);
+
+// --- Explainer document events ---
+function handleExplainerUpdate(doc: ExplainerDocument): void {
+  explainerDocLatest.value = doc;
+  if (doc.hero.title) title.value = doc.hero.title;
+  if (doc.meta.description) metadata.value = { ...metadata.value, description: doc.meta.description };
+  if (doc.meta.difficulty) metadata.value = { ...metadata.value, difficulty: doc.meta.difficulty };
+  if (doc.meta.estimatedMinutes) metadata.value = { ...metadata.value, estimatedMinutes: doc.meta.estimatedMinutes };
+  if (doc.meta.tags?.length) metadata.value = { ...metadata.value, tags: doc.meta.tags };
+  if (doc.hero.coverImageUrl) metadata.value = { ...metadata.value, coverImageUrl: doc.hero.coverImageUrl };
+  isDirty.value = true;
+}
+
+function handleExplainerSave(doc: ExplainerDocument): void {
+  handleExplainerUpdate(doc);
+  silentSave();
+}
+
+// --- Init new explainer ---
+if (isNew.value && isExplainer.value) {
+  const emptyDoc = createEmptyDocument();
+  explainerDocInit.value = emptyDoc;
+  explainerDocLatest.value = JSON.parse(JSON.stringify(emptyDoc));
+}
+
+// Sync starter form title to explainer doc hero
+watch(title, (newTitle) => {
+  if (isExplainer.value && explainerDocInit.value && !explainerDocLatest.value?.hero.title) {
+    explainerDocInit.value.hero.title = newTitle;
+  }
+});
+
+function handleMetadataUpdate(newMetadata: Record<string, unknown>): void {
+  if (newMetadata.title !== undefined && typeof newMetadata.title === 'string') {
+    title.value = newMetadata.title;
+    delete newMetadata.title;
+  }
+  metadata.value = newMetadata;
+  isDirty.value = true;
+}
+
+// --- BOM sync ---
+async function syncBOM(id: string): Promise<void> {
+  const blocks = blockEditor.toBlockTuples();
+  const productItems: Array<{ productId: string; quantity: number; notes?: string }> = [];
+  for (const [type, content] of blocks) {
+    if (type === 'partsList' && Array.isArray(content.parts)) {
+      for (const part of content.parts as Array<{ productId?: string; qty?: number; notes?: string }>) {
+        if (part.productId) {
+          productItems.push({ productId: part.productId, quantity: part.qty ?? 1, notes: part.notes });
+        }
+      }
+    }
+  }
+  if (productItems.length > 0 || contentType.value === 'project') {
+    await $fetch(`/api/content/${id}/products-sync`, { method: 'POST', body: { items: productItems } }).catch(() => {});
+  }
+}
+
+// --- Starter form submit ---
+async function handleStarterSubmit(): Promise<void> {
+  if (!title.value.trim()) { error.value = 'Title is required'; return; }
+  starterSaving.value = true;
+  error.value = '';
+  try {
+    const body = buildSaveBody();
+    const result = await $fetch<{ id: string; slug: string }>('/api/content', { method: 'POST', body });
+    contentId.value = result.id;
+    isNew.value = false;
+    isDirty.value = false;
+    showStarterForm.value = false;
+    history.replaceState({}, '', contentEditPath(username.value, contentType.value, result.slug));
+  } catch (err: unknown) {
+    error.value = extractError(err);
+  } finally {
+    starterSaving.value = false;
+  }
+}
+
+// --- Publish with validation ---
+async function handlePublish(): Promise<void> {
+  await doPublish(validate);
+}
+
+// --- Preview mode ---
+function enterPreview(): void {
+  mode.value = 'preview';
+  if (isDirty.value && title.value && !saving.value && !isNew.value && contentId.value) {
+    cancelAutoSave();
+    silentSave();
+  }
+}
+
+// --- Keyboard shortcuts ---
+function onKeydown(event: KeyboardEvent): void {
+  if ((event.metaKey || event.ctrlKey) && event.key === 's') {
+    event.preventDefault();
+    cancelAutoSave();
+    silentSave();
+  }
+  if (event.key === 'Escape' && mode.value === 'preview' && contentType.value === 'explainer') {
+    mode.value = 'write';
+  }
+}
+
+onMounted(() => { document.addEventListener('keydown', onKeydown); });
+onUnmounted(() => { document.removeEventListener('keydown', onKeydown); cleanup(); });
+
+// --- Warn before unload ---
+function onBeforeUnload(event: BeforeUnloadEvent): void {
+  if (isDirty.value) event.preventDefault();
+}
+if (import.meta.client) {
+  onMounted(() => { window.addEventListener('beforeunload', onBeforeUnload); });
+  onUnmounted(() => { window.removeEventListener('beforeunload', onBeforeUnload); });
+}
+
+// --- Markdown import ---
+const showImportDialog = ref(false);
+const { importing, importMarkdown } = useMarkdownImport(blockEditor);
+
+async function handleMarkdownImport(md: string, importMode: 'append' | 'replace'): Promise<void> {
+  await importMarkdown(md, importMode);
+  isDirty.value = true;
+}
+
+// --- URL import ---
+const showUrlImport = ref(false);
+const urlImporting = ref(false);
+
+interface ImportedContent {
+  title: string;
+  description: string;
+  coverImageUrl: string | null;
+  content: BlockTuple[];
+  tags: string[];
+  partial: boolean;
+  meta: Record<string, unknown>;
+}
+
+async function handleUrlImport(result: ImportedContent): Promise<void> {
+  urlImporting.value = true;
+  try {
+    if (!title.value && result.title) {
+      title.value = result.title.slice(0, 255);
+    }
+    if (result.description && !metadata.value.description) {
+      metadata.value = { ...metadata.value, description: result.description.slice(0, 2000) };
+    }
+    if (result.coverImageUrl && !metadata.value.coverImageUrl) {
+      try {
+        new URL(result.coverImageUrl);
+        metadata.value = { ...metadata.value, coverImageUrl: result.coverImageUrl };
+      } catch { /* skip invalid URL */ }
+    }
+    if (result.tags.length && (!Array.isArray(metadata.value.tags) || !metadata.value.tags.length)) {
+      const safeTags = result.tags
+        .filter(t => typeof t === 'string' && t.length > 0)
+        .map(t => t.slice(0, 64))
+        .slice(0, 20);
+      metadata.value = { ...metadata.value, tags: safeTags };
+    }
+    const VALID_DIFFICULTIES = ['beginner', 'intermediate', 'advanced'];
+    if (result.meta.difficulty && !metadata.value.difficulty) {
+      const diff = String(result.meta.difficulty).toLowerCase();
+      if (VALID_DIFFICULTIES.includes(diff)) {
+        metadata.value = { ...metadata.value, difficulty: diff };
+      }
+    }
+    blockEditor.clearBlocks();
+    let insertAt = 0;
+    for (const [type, content] of result.content) {
+      blockEditor.addBlock(type, content as Record<string, unknown>, insertAt);
+      insertAt++;
+    }
+    isDirty.value = true;
+  } finally {
+    urlImporting.value = false;
+  }
+}
+</script>
+
+<template>
+  <!-- Starter form for new content -->
+  <ContentStarterForm
+    v-if="showStarterForm"
+    :content-type="contentType"
+    :title="title"
+    :metadata="metadata"
+    :saving="starterSaving"
+    :error="error"
+    @update:title="title = $event"
+    @update:metadata="metadata = $event"
+    @submit="handleStarterSubmit"
+  />
+
+  <!-- Main editor -->
+  <div v-else class="cpub-editor-layout">
+    <PublishErrorsModal :errors="publishErrors" :show="showPublishErrors" @dismiss="dismissPublishErrors" />
+    <EditorsMarkdownImportDialog :show="showImportDialog" @close="showImportDialog = false" @import="handleMarkdownImport" />
+    <ImportUrlModal :show="showUrlImport" @close="showUrlImport = false" @imported="handleUrlImport" />
+    <!-- Top bar -->
+    <header class="cpub-editor-topbar">
+      <NuxtLink to="/" class="cpub-editor-logo" aria-label="Home">
+        <span class="cpub-logo-accent">[</span>cpub<span class="cpub-logo-accent">]</span>
+      </NuxtLink>
+      <button class="cpub-editor-back" aria-label="Go back" @click="$router.back()">
+        <i class="fa-solid fa-arrow-left"></i>
+      </button>
+      <div class="cpub-topbar-divider" aria-hidden="true" />
+      <div class="cpub-topbar-title-wrap">
+        <input
+          v-model="title"
+          type="text"
+          class="cpub-topbar-title-input"
+          :placeholder="`Untitled ${contentType}...`"
+          aria-label="Content title"
+        />
+        <span v-if="isDirty" class="cpub-unsaved-dot" title="Unsaved changes" />
+        <span v-if="autoSaveStatus === 'saving'" class="cpub-autosave-status">
+          <i class="fa-solid fa-circle-notch fa-spin"></i> Saving...
+        </span>
+        <span v-else-if="autoSaveStatus === 'saved'" class="cpub-autosave-status cpub-autosave-status--saved">
+          <i class="fa-solid fa-check"></i> Saved
+        </span>
+        <span v-else-if="autoSaveStatus === 'error'" class="cpub-autosave-status cpub-autosave-status--error">
+          <i class="fa-solid fa-exclamation-triangle"></i> Save failed
+        </span>
+      </div>
+      <div class="cpub-mode-tabs">
+        <button :class="['cpub-mode-tab', { active: mode === 'write' }]" @click="mode = 'write'">Write</button>
+        <button :class="['cpub-mode-tab', { active: mode === 'preview' }]" @click="enterPreview">Preview</button>
+        <button v-if="!isExplainer" :class="['cpub-mode-tab', { active: mode === 'code' }]" @click="mode = 'code'">Code</button>
+      </div>
+      <div class="cpub-topbar-spacer" />
+      <div class="cpub-topbar-actions">
+        <button class="cpub-topbar-btn cpub-topbar-btn-import" :disabled="urlImporting" @click="showUrlImport = true" title="Import from URL">
+          <i class="fa-solid fa-link"></i> <span class="cpub-import-label">Import URL</span>
+        </button>
+        <button class="cpub-topbar-btn cpub-topbar-btn-import" :disabled="importing" @click="showImportDialog = true" title="Import Markdown">
+          <i class="fa-brands fa-markdown"></i> <span class="cpub-import-label">Markdown</span>
+        </button>
+        <button class="cpub-topbar-btn" :disabled="saving || !title" @click="silentSave">
+          {{ saving ? 'Saving...' : 'Save Draft' }}
+        </button>
+        <button class="cpub-topbar-btn cpub-topbar-btn-primary" :disabled="saving || !title" @click="handlePublish">
+          Publish
+        </button>
+      </div>
+    </header>
+
+    <div v-if="error" class="cpub-editor-error" role="alert">{{ error }}</div>
+
+    <!-- Explainer: section-oriented editor -->
+    <template v-if="mode === 'write' && isExplainer && explainerDocInit">
+      <ExplainerSectionEditor
+        :document="explainerDocInit"
+        @update:document="handleExplainerUpdate"
+        @save="handleExplainerSave"
+      />
+    </template>
+
+    <!-- Write mode with specialized editor -->
+    <template v-else-if="mode === 'write' && hasSpecializedEditor && !isExplainer">
+      <component
+        :is="editorComponent"
+        :block-editor="blockEditor"
+        :metadata="{ ...metadata, title: title }"
+        @update:metadata="handleMetadataUpdate"
+      />
+    </template>
+
+    <!-- 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="[]" />
+      </div>
+    </div>
+
+    <!-- Preview mode -->
+    <div v-else-if="mode === 'preview'" class="cpub-editor-shell" :class="{ 'cpub-hidden': contentType === 'explainer' }">
+      <div class="cpub-preview-canvas">
+        <h1 class="cpub-preview-title">{{ title || 'Untitled' }}</h1>
+        <p v-if="metadata.description" class="cpub-preview-desc">{{ metadata.description }}</p>
+        <div class="cpub-preview-blocks">
+          <BlocksBlockContentRenderer :blocks="blockEditor.toBlockTuples()" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Code mode -->
+    <div v-else class="cpub-editor-shell">
+      <div class="cpub-code-canvas">
+        <pre class="cpub-code-view">{{ JSON.stringify(blockEditor.toBlockTuples(), null, 2) }}</pre>
+      </div>
+    </div>
+
+    <!-- Explainer preview: full-screen overlay -->
+    <Teleport to="body">
+      <div v-if="mode === 'preview' && contentType === 'explainer'" class="cpub-explainer-preview-overlay">
+        <button class="cpub-preview-close-btn" @click="mode = 'write'" aria-label="Close preview">
+          <i class="fa-solid fa-xmark"></i>
+          <span>Back to Editor</span>
+        </button>
+        <ViewsExplainerView
+          :content="{
+            id: contentId || 'preview',
+            type: 'explainer',
+            title: title || 'Untitled',
+            slug: (metadata.slug as string) || 'preview',
+            subtitle: null,
+            description: (metadata.description as string) || null,
+            content: isExplainer ? (explainerDocLatest ?? explainerDocInit) : blockEditor.toBlockTuples(),
+            coverImageUrl: (metadata.coverImageUrl as string) || null,
+            category: null,
+            difficulty: (metadata.difficulty as string) || null,
+            buildTime: null,
+            estimatedCost: null,
+            status: 'draft',
+            visibility: (metadata.visibility as string) || 'public',
+            isFeatured: false,
+            seoDescription: null,
+            previewToken: null,
+            parts: null,
+            sections: null,
+            viewCount: 0,
+            likeCount: 0,
+            commentCount: 0,
+            forkCount: 0,
+            publishedAt: null,
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString(),
+            licenseType: null,
+            series: null,
+            estimatedMinutes: null,
+            tags: [],
+            author: { id: '', username: username, displayName: null, avatarUrl: null },
+          }"
+        />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style scoped>
+.cpub-editor-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+}
+
+.cpub-editor-topbar {
+  height: 48px;
+  background: var(--surface);
+  border-bottom: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  gap: 0;
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.cpub-editor-logo {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-dim);
+  letter-spacing: 0.06em;
+  text-decoration: none;
+  flex-shrink: 0;
+}
+.cpub-logo-accent { color: var(--accent); }
+
+.cpub-editor-back {
+  width: 30px; height: 30px;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 12px;
+  margin-left: 6px;
+  flex-shrink: 0;
+}
+.cpub-editor-back:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }
+
+.cpub-topbar-divider {
+  width: 2px; height: 22px;
+  background: var(--border);
+  margin: 0 12px;
+  flex-shrink: 0;
+}
+
+.cpub-topbar-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-topbar-title-input {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  padding: 4px 8px;
+  cursor: text;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 380px;
+  outline: none;
+  font-family: var(--font-sans, system-ui);
+}
+.cpub-topbar-title-input:hover { border-color: var(--border2); background: var(--surface2); }
+.cpub-topbar-title-input:focus { border-color: var(--accent); background: var(--surface2); }
+
+.cpub-unsaved-dot {
+  width: 8px; height: 8px;
+  border-radius: 50%;
+  background: var(--yellow);
+  flex-shrink: 0;
+}
+
+.cpub-autosave-status {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+}
+
+.cpub-autosave-status--saved { color: var(--green); }
+.cpub-autosave-status--error { color: var(--red); }
+
+.cpub-mode-tabs {
+  display: flex;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 2px;
+  flex-shrink: 0;
+  margin: 0 10px;
+}
+.cpub-mode-tab {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 5px 14px;
+  border: none;
+  background: none;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.cpub-mode-tab.active {
+  background: var(--surface);
+  color: var(--text);
+  box-shadow: var(--shadow-sm);
+}
+.cpub-mode-tab:hover:not(.active) { color: var(--text); }
+
+.cpub-topbar-spacer { flex: 1; }
+
+.cpub-topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.cpub-topbar-btn {
+  font-family: var(--font-sans, system-ui);
+  font-size: 12px;
+  padding: 6px 14px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+}
+.cpub-topbar-btn:hover { background: var(--surface2); }
+.cpub-topbar-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+.cpub-topbar-btn-primary {
+  background: var(--accent);
+  color: var(--color-text-inverse);
+  font-weight: 600;
+  box-shadow: var(--shadow-md);
+}
+.cpub-topbar-btn-primary:hover { box-shadow: var(--shadow-sm); }
+.cpub-topbar-btn-import { border-color: var(--teal); color: var(--teal); }
+.cpub-topbar-btn-import:hover { background: var(--teal-bg, var(--surface2)); }
+
+.cpub-editor-error {
+  padding: 10px 16px;
+  background: var(--red-bg);
+  color: var(--red);
+  border-bottom: var(--border-width-default) solid var(--red);
+  font-size: 12px;
+  font-family: var(--font-mono);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 99;
+}
+
+.cpub-editor-shell {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.cpub-editor-canvas {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+  background: var(--bg);
+}
+
+.cpub-preview-canvas {
+  flex: 1;
+  overflow-y: auto;
+  padding: 48px;
+  max-width: 740px;
+  margin: 0 auto;
+}
+.cpub-preview-title { font-size: 28px; font-weight: 700; margin-bottom: 12px; line-height: 1.25; }
+.cpub-preview-desc { font-size: 15px; color: var(--text-dim); margin-bottom: 32px; }
+.cpub-preview-blocks { display: flex; flex-direction: column; gap: 16px; }
+
+.cpub-code-canvas {
+  flex: 1;
+  overflow: auto;
+  background: var(--text);
+  padding: 16px;
+}
+.cpub-code-view {
+  color: var(--border2);
+  font-family: var(--font-mono);
+  font-size: 12px;
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+.cpub-hidden { display: none; }
+
+@media (max-width: 768px) {
+  .cpub-editor-topbar { padding: 0 10px; gap: 0; }
+  .cpub-editor-logo { display: none; }
+  .cpub-topbar-divider { display: none; }
+  .cpub-editor-back { margin-left: 0; }
+  .cpub-topbar-title-input { max-width: none; font-size: 12px; padding: 3px 6px; }
+  .cpub-autosave-status { display: none; }
+  .cpub-mode-tabs { margin: 0 6px; padding: 1px; }
+  .cpub-mode-tab { padding: 4px 10px; font-size: 10px; }
+  .cpub-topbar-spacer { display: none; }
+  .cpub-topbar-actions { gap: 4px; }
+  .cpub-topbar-btn { font-size: 11px; padding: 8px 10px; min-height: 36px; }
+  .cpub-import-label { display: none; }
+  .cpub-editor-canvas { padding: 12px; }
+  .cpub-preview-canvas { padding: 16px; }
+  .cpub-preview-title { font-size: 22px; }
+  .cpub-code-canvas { padding: 10px; }
+  .cpub-code-view { font-size: 11px; }
+}
+
+@media (max-width: 480px) {
+  .cpub-mode-tabs { margin: 0 4px; }
+  .cpub-mode-tab { padding: 4px 8px; font-size: 9px; }
+  .cpub-topbar-btn { padding: 6px 8px; font-size: 10px; min-height: 34px; }
+  .cpub-editor-back { width: 34px; height: 34px; }
+  .cpub-preview-title { font-size: 18px; }
+}
+</style>
+
+<style>
+/* Unscoped so Teleport overlay works */
+.cpub-explainer-preview-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: var(--bg);
+  overflow-y: auto;
+}
+
+.cpub-preview-close-btn {
+  position: fixed;
+  top: 10px;
+  right: 16px;
+  z-index: 10001;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+  transition: box-shadow 0.1s, transform 0.1s;
+}
+
+.cpub-preview-close-btn:hover {
+  box-shadow: var(--shadow-sm);
+  transform: translate(1px, 1px);
+  background: var(--surface2);
+}
+
+.cpub-preview-close-btn i { font-size: 12px; }
+</style>