@edgedev/create-edge-app 1.2.32 → 1.2.34

package/edge/components/cms/page.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { AlertTriangle, ArrowDown, ArrowUp, Maximize2, Monitor, Smartphone, Sparkles, Tablet, UploadCloud } from 'lucide-vue-next'
+import { AlertTriangle, ArrowDown, ArrowUp, Download, Maximize2, Monitor, Smartphone, Sparkles, Tablet, UploadCloud } from 'lucide-vue-next'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 const props = defineProps({
@@ -20,6 +20,7 @@ const props = defineProps({
 const emit = defineEmits(['head'])
 
 const edgeFirebase = inject('edgeFirebase')
+const router = useRouter()
 const { buildPageStructuredData } = useStructuredDataTemplates()
 
 const state = reactive({
@@ -41,6 +42,13 @@ const state = reactive({
   workingDoc: {},
   seoAiLoading: false,
   seoAiError: '',
+  importingJson: false,
+  importDocIdDialogOpen: false,
+  importDocIdValue: '',
+  importConflictDialogOpen: false,
+  importConflictDocId: '',
+  importErrorDialogOpen: false,
+  importErrorMessage: '',
   previewViewport: 'full',
   newRowLayout: '6',
   newPostRowLayout: '6',
@@ -68,6 +76,10 @@ const state = reactive({
   },
 })
 
+const pageImportInputRef = ref(null)
+const pageImportDocIdResolver = ref(null)
+const pageImportConflictResolver = ref(null)
+
 const schemas = {
   pages: toTypedSchema(z.object({
     name: z.string({
@@ -97,6 +109,14 @@ const previewViewportStyle = computed(() => {
   }
 })
 
+const previewViewportContainStyle = computed(() => {
+  const shouldContain = !state.editMode
+  return {
+    ...(previewViewportStyle.value || {}),
+    ...(shouldContain ? { transform: 'translateZ(0)' } : {}),
+  }
+})
+
 const setPreviewViewport = (viewportId) => {
   state.previewViewport = viewportId
 }
@@ -108,6 +128,13 @@ const previewViewportMode = computed(() => {
 })
 
 const isMobilePreview = computed(() => previewViewportMode.value === 'mobile')
+const pagePreviewRenderKey = computed(() => {
+  const siteKey = String(props.site || '')
+  const pageKey = String(props.page || '')
+  const themeKey = String(effectiveThemeId.value || selectedThemeId.value || 'no-theme')
+  const modeKey = state.editMode ? 'edit' : 'preview'
+  return `${siteKey}:${pageKey}:${themeKey}:${modeKey}`
+})
 
 const GRID_CLASSES = {
   1: 'grid grid-cols-1 gap-4',
@@ -493,6 +520,41 @@ onMounted(() => {
   }
 })
 
+const previewSnapshotsBootstrapping = ref(false)
+
+const ensurePreviewSnapshots = async () => {
+  const orgId = String(edgeGlobal.edgeState.currentOrganization || '').trim()
+  if (!orgId)
+    return
+
+  if (previewSnapshotsBootstrapping.value)
+    return
+  previewSnapshotsBootstrapping.value = true
+
+  const themesPath = `organizations/${orgId}/themes`
+  const sitesPath = `organizations/${orgId}/sites`
+
+  // Non-blocking bootstrap: never hold page render on snapshot latency.
+  try {
+    if (!edgeFirebase.data?.[themesPath]) {
+      await edgeFirebase.startSnapshot(themesPath)
+    }
+    if (!edgeFirebase.data?.[sitesPath]) {
+      await edgeFirebase.startSnapshot(sitesPath)
+    }
+  }
+  catch (error) {
+    console.error('Failed to start page preview snapshots', error)
+  }
+  finally {
+    previewSnapshotsBootstrapping.value = false
+  }
+}
+
+onBeforeMount(() => {
+  ensurePreviewSnapshots()
+})
+
 const editorDocUpdates = (workingDoc) => {
   ensureStructureDefaults(workingDoc, false)
   if (workingDoc?.post || (Array.isArray(workingDoc?.postContent) && workingDoc.postContent.length > 0) || Array.isArray(workingDoc?.postStructure))
@@ -528,19 +590,204 @@ const selectedThemeId = computed(() => {
   return edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites`]?.[props.site]?.theme || ''
 })
 
-const theme = computed(() => {
-  const themeId = selectedThemeId.value
-  if (!themeId)
-    return null
-  const themeContents = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`]?.[themeId]?.theme || null
+const themePreviewCache = useState('edge-cms-page-theme-preview-cache', () => ({}))
+const themeCacheKey = computed(() => {
+  const orgId = String(edgeGlobal.edgeState.currentOrganization || 'no-org').trim() || 'no-org'
+  const siteKey = props.isTemplateSite ? 'templates' : String(props.site || 'no-site').trim() || 'no-site'
+  return `${orgId}:${siteKey}`
+})
+
+const hydrateThemeCache = () => {
+  const cache = themePreviewCache.value?.[themeCacheKey.value] || {}
+  return {
+    themeId: typeof cache?.themeId === 'string' ? cache.themeId : '',
+    theme: cache?.theme && typeof cache.theme === 'object' ? cache.theme : null,
+    head: cache?.head && typeof cache.head === 'object' ? cache.head : {},
+  }
+}
+
+const writeThemeCache = (patch = {}) => {
+  const current = themePreviewCache.value?.[themeCacheKey.value] || {}
+  themePreviewCache.value = {
+    ...(themePreviewCache.value || {}),
+    [themeCacheKey.value]: {
+      ...current,
+      ...patch,
+    },
+  }
+}
+
+const initialThemeCache = hydrateThemeCache()
+const lastStableThemeId = ref(initialThemeCache.themeId)
+const lastResolvedTheme = ref(initialThemeCache.theme)
+const lastResolvedHead = ref(initialThemeCache.head)
+
+const parseThemeDoc = (themeDoc) => {
+  const themeContents = themeDoc?.theme || null
   if (!themeContents)
     return null
+  const extraCSS = typeof themeDoc?.extraCSS === 'string' ? themeDoc.extraCSS : ''
   try {
-    return typeof themeContents === 'string' ? JSON.parse(themeContents) : themeContents
+    const parsed = typeof themeContents === 'string' ? JSON.parse(themeContents) : themeContents
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed))
+      return null
+    return { ...parsed, extraCSS }
   }
-  catch (e) {
+  catch {
+    return null
+  }
+}
+
+const parseHeadDoc = (themeDoc) => {
+  try {
+    const parsed = JSON.parse(themeDoc?.headJSON || '{}')
+    if (parsed && typeof parsed === 'object' && !Array.isArray(parsed))
+      return parsed
+  }
+  catch {}
+  return {}
+}
+
+const applyResolvedTheme = (themeDoc, themeId = '') => {
+  const normalizedThemeId = String(themeId || themeDoc?.docId || '').trim()
+  if (normalizedThemeId)
+    lastStableThemeId.value = normalizedThemeId
+
+  const parsedTheme = parseThemeDoc(themeDoc)
+  if (parsedTheme && typeof parsedTheme === 'object') {
+    lastResolvedTheme.value = parsedTheme
+    writeThemeCache({ theme: parsedTheme })
+  }
+
+  const parsedHead = parseHeadDoc(themeDoc)
+  if (parsedHead && typeof parsedHead === 'object') {
+    lastResolvedHead.value = parsedHead
+    writeThemeCache({ head: parsedHead })
+  }
+
+  if (normalizedThemeId)
+    writeThemeCache({ themeId: normalizedThemeId })
+}
+
+const themeFallbackLoading = ref(false)
+const loadSiteThemeFallback = async () => {
+  if (themeFallbackLoading.value)
+    return
+
+  const orgPath = String(edgeGlobal.edgeState.organizationDocPath || '').trim()
+  if (!orgPath)
+    return
+
+  const selectedId = String(selectedThemeId.value || '').trim()
+  if (props.isTemplateSite) {
+    if (!selectedId)
+      return
+    const fromSnapshot = edgeFirebase.data?.[`${orgPath}/themes`]?.[selectedId] || null
+    if (fromSnapshot)
+      applyResolvedTheme(fromSnapshot, selectedId)
+    return
+  }
+
+  const siteId = String(props.site || '').trim()
+  if (!siteId || siteId === 'new')
+    return
+
+  themeFallbackLoading.value = true
+  try {
+    let themeId = selectedId
+    if (!themeId) {
+      const siteDoc = await edgeFirebase.getDocData(`${orgPath}/sites`, siteId)
+      themeId = String(siteDoc?.theme || '').trim()
+    }
+    if (!themeId)
+      return
+
+    writeThemeCache({ themeId })
+    lastStableThemeId.value = themeId
+
+    const fromSnapshot = edgeFirebase.data?.[`${orgPath}/themes`]?.[themeId] || null
+    if (fromSnapshot) {
+      applyResolvedTheme(fromSnapshot, themeId)
+      if (lastResolvedTheme.value)
+        return
+    }
+
+    const themeDoc = await edgeFirebase.getDocData(`${orgPath}/themes`, themeId)
+    if (themeDoc)
+      applyResolvedTheme(themeDoc, themeId)
+  }
+  catch (error) {
+    console.error('Failed to load fallback theme for page preview', error)
+  }
+  finally {
+    themeFallbackLoading.value = false
+  }
+}
+
+watch(
+  () => edgeGlobal.edgeState.currentOrganization,
+  () => {
+    ensurePreviewSnapshots()
+    loadSiteThemeFallback()
+  },
+  { immediate: true },
+)
+
+watch(
+  () => [props.site, props.page, props.isTemplateSite],
+  () => {
+    loadSiteThemeFallback()
+  },
+  { immediate: true },
+)
+
+watch(
+  themeCacheKey,
+  () => {
+    const hydrated = hydrateThemeCache()
+    if (hydrated.themeId)
+      lastStableThemeId.value = hydrated.themeId
+    if (hydrated.theme && typeof hydrated.theme === 'object')
+      lastResolvedTheme.value = hydrated.theme
+    if (hydrated.head && typeof hydrated.head === 'object')
+      lastResolvedHead.value = hydrated.head
+  },
+  { immediate: true },
+)
+
+watch(selectedThemeId, (themeId) => {
+  const normalized = String(themeId || '').trim()
+  if (normalized) {
+    lastStableThemeId.value = normalized
+    writeThemeCache({ themeId: normalized })
+  }
+  loadSiteThemeFallback()
+}, { immediate: true })
+
+const effectiveThemeId = computed(() => {
+  const normalized = String(selectedThemeId.value || '').trim()
+  if (normalized)
+    return normalized
+  return lastStableThemeId.value
+})
+
+const parsedTheme = computed(() => {
+  const themeId = effectiveThemeId.value
+  if (!themeId)
     return null
+  const themeDoc = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`]?.[themeId] || null
+  return parseThemeDoc(themeDoc)
+})
+
+watch(parsedTheme, (nextTheme) => {
+  if (nextTheme && typeof nextTheme === 'object') {
+    lastResolvedTheme.value = nextTheme
+    writeThemeCache({ theme: nextTheme })
   }
+}, { immediate: true, deep: true })
+
+const theme = computed(() => {
+  return parsedTheme.value || lastResolvedTheme.value || null
 })
 
 const themeColorMap = computed(() => {
@@ -847,14 +1094,20 @@ const addRowAt = (workingDoc, layoutValue = '6', insertIndex = 0, isPost = false
 }
 
 const headObject = computed(() => {
-  const themeId = selectedThemeId.value
+  const themeId = effectiveThemeId.value
   if (!themeId)
-    return {}
+    return lastResolvedHead.value || {}
   try {
-    return JSON.parse(edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`]?.[themeId]?.headJSON || '{}')
+    const parsedHead = parseHeadDoc(edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`]?.[themeId] || null)
+    if (parsedHead && typeof parsedHead === 'object') {
+      lastResolvedHead.value = parsedHead
+      writeThemeCache({ head: parsedHead })
+      return parsedHead
+    }
+    return lastResolvedHead.value || {}
   }
   catch (e) {
-    return {}
+    return lastResolvedHead.value || {}
   }
 })
 
@@ -918,6 +1171,397 @@ const currentPage = computed(() => {
   return edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/sites/${props.site}/pages`]?.[props.page] || null
 })
 
+const pagesCollectionPath = computed(() => `${edgeGlobal.edgeState.organizationDocPath}/sites/${props.site}/pages`)
+const pagesCollection = computed(() => edgeFirebase.data?.[pagesCollectionPath.value] || {})
+const pageEditorBasePath = computed(() => (props.isTemplateSite ? '/app/dashboard/templates' : `/app/dashboard/sites/${props.site}`))
+const INVALID_PAGE_IMPORT_MESSAGE = 'Invalid file. Please import a valid page file.'
+
+const downloadJsonFile = (payload, filename) => {
+  if (typeof window === 'undefined')
+    return
+  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: 'application/json' })
+  const objectUrl = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = objectUrl
+  anchor.download = filename
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  URL.revokeObjectURL(objectUrl)
+}
+
+const readTextFile = file => new Promise((resolve, reject) => {
+  if (typeof FileReader === 'undefined') {
+    reject(new Error('File import is only available in the browser.'))
+    return
+  }
+  const reader = new FileReader()
+  reader.onload = () => resolve(String(reader.result || ''))
+  reader.onerror = () => reject(new Error('Could not read the selected file.'))
+  reader.readAsText(file)
+})
+
+const normalizeImportedDoc = (payload, fallbackDocId = '') => {
+  if (!payload || typeof payload !== 'object' || Array.isArray(payload))
+    throw new Error(INVALID_PAGE_IMPORT_MESSAGE)
+
+  if (payload.document && typeof payload.document === 'object' && !Array.isArray(payload.document)) {
+    const normalized = { ...payload.document }
+    if (!normalized.docId && payload.docId)
+      normalized.docId = payload.docId
+    if (!normalized.docId && fallbackDocId)
+      normalized.docId = fallbackDocId
+    return normalized
+  }
+
+  const normalized = { ...payload }
+  if (!normalized.docId && fallbackDocId)
+    normalized.docId = fallbackDocId
+  return normalized
+}
+
+const isPlainObject = value => !!value && typeof value === 'object' && !Array.isArray(value)
+
+const cloneSchemaValue = (value) => {
+  if (isPlainObject(value) || Array.isArray(value))
+    return edgeGlobal.dupObject(value)
+  return value
+}
+
+const getDocDefaultsFromSchema = (schema = {}) => {
+  const defaults = {}
+  for (const [key, schemaEntry] of Object.entries(schema || {})) {
+    const hasValueProp = isPlainObject(schemaEntry) && Object.prototype.hasOwnProperty.call(schemaEntry, 'value')
+    const baseValue = hasValueProp ? schemaEntry.value : schemaEntry
+    defaults[key] = cloneSchemaValue(baseValue)
+  }
+  return defaults
+}
+
+const getPageDocDefaults = () => getDocDefaultsFromSchema(state.newDocs?.pages || {})
+
+const isBlankString = value => String(value || '').trim() === ''
+
+const applyImportedPageSeoDefaults = (doc) => {
+  if (!isPlainObject(doc))
+    return doc
+
+  if (isBlankString(doc.structuredData))
+    doc.structuredData = buildPageStructuredData()
+
+  if (doc.post && isBlankString(doc.postStructuredData))
+    doc.postStructuredData = doc.structuredData || buildPageStructuredData()
+
+  return doc
+}
+
+const validateImportedPageDoc = (doc) => {
+  if (!isPlainObject(doc))
+    throw new Error(INVALID_PAGE_IMPORT_MESSAGE)
+
+  const requiredKeys = Object.keys(state.newDocs?.pages || {})
+  const missing = requiredKeys.filter(key => !Object.prototype.hasOwnProperty.call(doc, key))
+  if (missing.length)
+    throw new Error(INVALID_PAGE_IMPORT_MESSAGE)
+
+  return doc
+}
+
+const normalizeMenusForImport = (menus) => {
+  const normalized = isPlainObject(menus) ? edgeGlobal.dupObject(menus) : {}
+  if (!Array.isArray(normalized['Site Root']))
+    normalized['Site Root'] = []
+  if (!Array.isArray(normalized['Not In Menu']))
+    normalized['Not In Menu'] = []
+  return normalized
+}
+
+const walkMenuEntries = (items, callback) => {
+  if (!Array.isArray(items))
+    return
+  for (const entry of items) {
+    if (!entry || typeof entry !== 'object')
+      continue
+    callback(entry)
+    if (isPlainObject(entry.item)) {
+      for (const nested of Object.values(entry.item)) {
+        if (Array.isArray(nested))
+          walkMenuEntries(nested, callback)
+      }
+    }
+  }
+}
+
+const menuIncludesDocId = (menus, docId) => {
+  let found = false
+  const checkEntry = (entry) => {
+    if (found)
+      return
+    if (typeof entry?.item === 'string' && entry.item === docId)
+      found = true
+  }
+  for (const menuItems of Object.values(menus || {})) {
+    walkMenuEntries(menuItems, checkEntry)
+    if (found)
+      return true
+  }
+  return false
+}
+
+const collectMenuPageNames = (menus) => {
+  const names = new Set()
+  const collectEntry = (entry) => {
+    if (typeof entry?.item !== 'string')
+      return
+    const name = String(entry?.name || '').trim()
+    if (name)
+      names.add(name)
+  }
+  for (const menuItems of Object.values(menus || {}))
+    walkMenuEntries(menuItems, collectEntry)
+  return names
+}
+
+const slugifyMenuPageName = (value) => {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)+/g, '') || 'page'
+}
+
+const makeUniqueMenuPageName = (value, existingNames = new Set()) => {
+  const base = slugifyMenuPageName(value)
+  let candidate = base
+  let suffix = 2
+  while (existingNames.has(candidate)) {
+    candidate = `${base}-${suffix}`
+    suffix += 1
+  }
+  return candidate
+}
+
+const addImportedPageToSiteMenu = async (docId, pageName = '') => {
+  const nextDocId = String(docId || '').trim()
+  if (!nextDocId)
+    return
+  const siteId = String(props.site || '').trim()
+  if (!siteId)
+    return
+
+  const sitesCollectionPath = `${edgeGlobal.edgeState.organizationDocPath}/sites`
+  const siteDoc = edgeFirebase.data?.[sitesCollectionPath]?.[siteId] || {}
+  const menus = normalizeMenusForImport(siteDoc?.menus)
+  if (menuIncludesDocId(menus, nextDocId))
+    return
+
+  const existingNames = collectMenuPageNames(menus)
+  const menuName = makeUniqueMenuPageName(pageName || nextDocId, existingNames)
+  menus['Site Root'].push({ name: menuName, item: nextDocId })
+
+  const results = await edgeFirebase.changeDoc(sitesCollectionPath, siteId, { menus })
+  if (results?.success === false)
+    throw new Error('Could not save updated site menu.')
+}
+
+const makeRandomPageDocId = (docsMap = {}) => {
+  let nextDocId = String(edgeGlobal.generateShortId() || '').trim()
+  while (!nextDocId || docsMap[nextDocId])
+    nextDocId = String(edgeGlobal.generateShortId() || '').trim()
+  return nextDocId
+}
+
+const makeImportedPageNameForNew = (baseName, docsMap = {}) => {
+  const normalizedBase = String(baseName || '').trim() || 'page'
+  const existingNames = new Set(
+    Object.values(docsMap || {})
+      .map(doc => String(doc?.name || '').trim().toLowerCase())
+      .filter(Boolean),
+  )
+
+  let suffix = 1
+  let candidate = `${normalizedBase}-${suffix}`
+  while (existingNames.has(candidate.toLowerCase())) {
+    suffix += 1
+    candidate = `${normalizedBase}-${suffix}`
+  }
+  return candidate
+}
+
+const requestPageImportDocId = (initialValue = '') => {
+  state.importDocIdValue = String(initialValue || '')
+  state.importDocIdDialogOpen = true
+  return new Promise((resolve) => {
+    pageImportDocIdResolver.value = resolve
+  })
+}
+
+const resolvePageImportDocId = (value = '') => {
+  const resolver = pageImportDocIdResolver.value
+  pageImportDocIdResolver.value = null
+  state.importDocIdDialogOpen = false
+  if (resolver)
+    resolver(String(value || '').trim())
+}
+
+const requestPageImportConflict = (docId) => {
+  state.importConflictDocId = String(docId || '')
+  state.importConflictDialogOpen = true
+  return new Promise((resolve) => {
+    pageImportConflictResolver.value = resolve
+  })
+}
+
+const resolvePageImportConflict = (action = 'cancel') => {
+  const resolver = pageImportConflictResolver.value
+  pageImportConflictResolver.value = null
+  state.importConflictDialogOpen = false
+  if (resolver)
+    resolver(action)
+}
+
+watch(() => state.importDocIdDialogOpen, (open) => {
+  if (!open && pageImportDocIdResolver.value) {
+    const resolver = pageImportDocIdResolver.value
+    pageImportDocIdResolver.value = null
+    resolver('')
+  }
+})
+
+watch(() => state.importConflictDialogOpen, (open) => {
+  if (!open && pageImportConflictResolver.value) {
+    const resolver = pageImportConflictResolver.value
+    pageImportConflictResolver.value = null
+    resolver('cancel')
+  }
+})
+
+const getImportDocId = async (incomingDoc, fallbackDocId = '') => {
+  let nextDocId = String(incomingDoc?.docId || '').trim()
+  if (!nextDocId)
+    nextDocId = await requestPageImportDocId(fallbackDocId)
+  if (!nextDocId)
+    throw new Error('Import canceled. A docId is required.')
+  if (nextDocId.includes('/'))
+    throw new Error('docId cannot include "/".')
+  return nextDocId
+}
+
+const notifySuccess = (message) => {
+  edgeFirebase?.toast?.success?.(message)
+}
+
+const notifyError = (message) => {
+  edgeFirebase?.toast?.error?.(message)
+}
+
+const openImportErrorDialog = (message) => {
+  state.importErrorMessage = String(message || 'Failed to import page JSON.')
+  state.importErrorDialogOpen = true
+}
+
+const exportCurrentPage = () => {
+  const doc = currentPage.value
+  if (!doc || !props.page || props.page === 'new') {
+    notifyError('Save this page before exporting.')
+    return
+  }
+  const docId = String(doc.docId || props.page).trim()
+  const exportPayload = { ...getPageDocDefaults(), ...doc, docId }
+  downloadJsonFile(exportPayload, `page-${docId}.json`)
+  notifySuccess(`Exported page "${docId}".`)
+}
+
+const triggerPageImport = () => {
+  pageImportInputRef.value?.click()
+}
+
+const importSinglePageFile = async (file, existingPages = {}, fallbackDocId = '') => {
+  const fileText = await readTextFile(file)
+  const parsed = JSON.parse(fileText)
+  const importedDoc = applyImportedPageSeoDefaults(validateImportedPageDoc(normalizeImportedDoc(parsed, fallbackDocId)))
+  const incomingDocId = await getImportDocId(importedDoc, fallbackDocId)
+  let targetDocId = incomingDocId
+  let importDecision = 'create'
+
+  if (existingPages[targetDocId]) {
+    const decision = await requestPageImportConflict(targetDocId)
+    if (decision === 'cancel')
+      return ''
+    if (decision === 'new') {
+      targetDocId = makeRandomPageDocId(existingPages)
+      importedDoc.name = makeImportedPageNameForNew(importedDoc.name || incomingDocId, existingPages)
+      importDecision = 'new'
+    }
+    else {
+      importDecision = 'overwrite'
+    }
+  }
+
+  const isCreatingNewPage = !existingPages[targetDocId]
+  const payload = { ...getPageDocDefaults(), ...importedDoc, docId: targetDocId }
+  await edgeFirebase.storeDoc(pagesCollectionPath.value, payload, targetDocId)
+  existingPages[targetDocId] = payload
+
+  if (isCreatingNewPage) {
+    try {
+      await addImportedPageToSiteMenu(targetDocId, importedDoc.name)
+    }
+    catch (menuError) {
+      console.error('Imported page but failed to update site menu', menuError)
+      openImportErrorDialog('Imported page, but could not add it to Site Menu automatically.')
+    }
+  }
+
+  if (importDecision === 'overwrite')
+    notifySuccess(`Overwrote page "${targetDocId}".`)
+  else if (importDecision === 'new')
+    notifySuccess(`Imported page as new "${targetDocId}".`)
+  else
+    notifySuccess(`Imported page "${targetDocId}".`)
+
+  return targetDocId
+}
+
+const handlePageImport = async (event) => {
+  const input = event?.target
+  const files = Array.from(input?.files || [])
+  if (!files.length)
+    return
+
+  state.importingJson = true
+  const fallbackDocId = props.page !== 'new' ? props.page : ''
+  const existingPages = { ...(pagesCollection.value || {}) }
+  let lastImportedDocId = ''
+  try {
+    for (const file of files) {
+      try {
+        const importedDocId = await importSinglePageFile(file, existingPages, fallbackDocId)
+        if (importedDocId)
+          lastImportedDocId = importedDocId
+      }
+      catch (error) {
+        console.error('Failed to import page JSON', error)
+        const message = error?.message || 'Failed to import page JSON.'
+        if (/^Import canceled\./i.test(message))
+          continue
+        if (error instanceof SyntaxError || message === INVALID_PAGE_IMPORT_MESSAGE)
+          openImportErrorDialog(INVALID_PAGE_IMPORT_MESSAGE)
+        else
+          openImportErrorDialog(message)
+      }
+    }
+
+    if (files.length === 1 && lastImportedDocId && lastImportedDocId !== props.page)
+      await router.push(`${pageEditorBasePath.value}/${lastImportedDocId}`)
+  }
+  finally {
+    state.importingJson = false
+    if (input)
+      input.value = ''
+  }
+}
+
 watch (currentPage, (newPage) => {
   state.workingDoc.last_updated = newPage?.last_updated
   state.workingDoc.metaTitle = newPage?.metaTitle
@@ -1141,7 +1785,7 @@ const hasUnsavedChanges = (changes) => {
     @unsaved-changes="hasUnsavedChanges"
   >
     <template #header="slotProps">
-      <div class="relative flex items-center bg-secondary p-2 justify-between sticky top-0 z-50 bg-primary rounded h-[50px]">
+      <div class="relative flex items-center p-2 justify-between sticky top-0 z-50 bg-gray-100 rounded h-[50px]">
         <span class="text-lg font-semibold whitespace-nowrap pr-1">{{ pageName }}</span>
 
         <div class="flex w-full items-center">
@@ -1188,6 +1832,21 @@ const hasUnsavedChanges = (changes) => {
           </div>
           <div class="w-full border-t border-border" aria-hidden="true" />
 
+          <div class="flex items-center gap-2 px-3">
+            <edge-shad-button
+              type="button"
+              size="icon"
+              variant="outline"
+              class="h-8 w-8"
+              :disabled="!currentPage || !props.page || props.page === 'new'"
+              title="Export Page"
+              aria-label="Export Page"
+              @click="exportCurrentPage"
+            >
+              <Download class="w-3.5 h-3.5" />
+            </edge-shad-button>
+          </div>
+
           <div class="flex items-center gap-1 pr-3">
             <span class="text-[11px] uppercase tracking-wide text-muted-foreground">Viewport</span>
             <edge-shad-button
@@ -1276,10 +1935,10 @@ const hasUnsavedChanges = (changes) => {
         <TabsContent value="list">
           <Separator class="my-4" />
           <div
-            :key="selectedThemeId"
-            class="w-full mx-auto bg-card border border-border rounded-lg shadow-sm md:shadow-md p-0 space-y-6"
-            :class="{ 'transition-all duration-300': !state.editMode }"
-            :style="previewViewportStyle"
+            :key="`${pagePreviewRenderKey}:list`"
+            class="w-full mx-auto bg-card border border-border shadow-sm md:shadow-md p-0 space-y-6"
+            :class="[{ 'transition-all duration-300': !state.editMode }, state.editMode ? 'rounded-lg' : 'rounded-none']"
+            :style="previewViewportContainStyle"
           >
             <edge-button-divider v-if="state.editMode" class="my-2">
               <Popover v-model:open="state.addRowPopoverOpen.listTop">
@@ -1419,9 +2078,11 @@ const hasUnsavedChanges = (changes) => {
                               <div :key="blockId" class="relative group">
                                 <edge-cms-block
                                   v-if="blockIndex(slotProps.workingDoc, blockId, false) !== -1"
+                                  :key="`${pagePreviewRenderKey}:${blockId}:${effectiveThemeId}:list`"
                                   v-model="slotProps.workingDoc.content[blockIndex(slotProps.workingDoc, blockId, false)]"
                                   :site-id="props.site"
                                   :edit-mode="state.editMode"
+                                  :contain-fixed="true"
                                   :viewport-mode="previewViewportMode"
                                   :block-id="blockId"
                                   :theme="theme"
@@ -1527,10 +2188,10 @@ const hasUnsavedChanges = (changes) => {
         <TabsContent value="post">
           <Separator class="my-4" />
           <div
-            :key="`${selectedThemeId}-post`"
-            class="w-full mx-auto bg-card border border-border rounded-lg shadow-sm md:shadow-md p-4 space-y-6"
-            :class="{ 'transition-all duration-300': !state.editMode }"
-            :style="previewViewportStyle"
+            :key="`${pagePreviewRenderKey}:post`"
+            class="w-full mx-auto bg-card border border-border shadow-sm md:shadow-md p-4 space-y-6"
+            :class="[{ 'transition-all duration-300': !state.editMode }, state.editMode ? 'rounded-lg' : 'rounded-none']"
+            :style="previewViewportContainStyle"
           >
             <edge-button-divider v-if="state.editMode" class="my-2">
               <Popover v-model:open="state.addRowPopoverOpen.postTop">
@@ -1670,8 +2331,10 @@ const hasUnsavedChanges = (changes) => {
                               <div :key="blockId" class="relative group">
                                 <edge-cms-block
                                   v-if="blockIndex(slotProps.workingDoc, blockId, true) !== -1"
+                                  :key="`${pagePreviewRenderKey}:${blockId}:${effectiveThemeId}:post`"
                                   v-model="slotProps.workingDoc.postContent[blockIndex(slotProps.workingDoc, blockId, true)]"
                                   :edit-mode="state.editMode"
+                                  :contain-fixed="true"
                                   :viewport-mode="previewViewportMode"
                                   :block-id="blockId"
                                   :theme="theme"
@@ -1846,6 +2509,72 @@ const hasUnsavedChanges = (changes) => {
       </Sheet>
     </template>
   </edge-editor>
+  <edge-shad-dialog v-model="state.importDocIdDialogOpen">
+    <DialogContent class="pt-8">
+      <DialogHeader>
+        <DialogTitle class="text-left">
+          Enter Page Doc ID
+        </DialogTitle>
+        <DialogDescription>
+          This JSON file does not include a <code>docId</code>. Enter the doc ID you want to import into this site.
+        </DialogDescription>
+      </DialogHeader>
+      <edge-shad-input
+        v-model="state.importDocIdValue"
+        name="page-import-doc-id"
+        label="Doc ID"
+        placeholder="example-page-id"
+      />
+      <DialogFooter class="pt-2 flex justify-between">
+        <edge-shad-button variant="outline" @click="resolvePageImportDocId('')">
+          Cancel
+        </edge-shad-button>
+        <edge-shad-button @click="resolvePageImportDocId(state.importDocIdValue)">
+          Continue
+        </edge-shad-button>
+      </DialogFooter>
+    </DialogContent>
+  </edge-shad-dialog>
+  <edge-shad-dialog v-model="state.importConflictDialogOpen">
+    <DialogContent class="pt-8">
+      <DialogHeader>
+        <DialogTitle class="text-left">
+          Page Already Exists
+        </DialogTitle>
+        <DialogDescription>
+          <code>{{ state.importConflictDocId }}</code> already exists in this site. Choose to overwrite it or import as a new page.
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter class="pt-2 flex justify-between">
+        <edge-shad-button variant="outline" @click="resolvePageImportConflict('cancel')">
+          Cancel
+        </edge-shad-button>
+        <edge-shad-button variant="outline" @click="resolvePageImportConflict('new')">
+          Add As New
+        </edge-shad-button>
+        <edge-shad-button @click="resolvePageImportConflict('overwrite')">
+          Overwrite
+        </edge-shad-button>
+      </DialogFooter>
+    </DialogContent>
+  </edge-shad-dialog>
+  <edge-shad-dialog v-model="state.importErrorDialogOpen">
+    <DialogContent class="pt-8">
+      <DialogHeader>
+        <DialogTitle class="text-left">
+          Import Failed
+        </DialogTitle>
+        <DialogDescription class="text-left">
+          {{ state.importErrorMessage }}
+        </DialogDescription>
+      </DialogHeader>
+      <DialogFooter class="pt-2">
+        <edge-shad-button @click="state.importErrorDialogOpen = false">
+          Close
+        </edge-shad-button>
+      </DialogFooter>
+    </DialogContent>
+  </edge-shad-dialog>
   <edge-shad-dialog v-model="state.showUnpublishedChangesDialog">
     <DialogContent class="max-w-2xl">
       <DialogHeader>