@edgedev/create-edge-app 1.2.33 → 1.2.35

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,7 +20,18 @@ const props = defineProps({
 const emit = defineEmits(['head'])
 
 const edgeFirebase = inject('edgeFirebase')
+const router = useRouter()
 const { buildPageStructuredData } = useStructuredDataTemplates()
+const cmsMultiOrg = useState('cmsMultiOrg', () => true)
+const isAdmin = computed(() => edgeGlobal.isAdminGlobal(edgeFirebase).value)
+const isDevModeEnabled = computed(() => process.dev || Boolean(edgeGlobal.edgeState.devOverride))
+const canOpenPreviewBlockContentEditor = computed(() => {
+  if (!isAdmin.value)
+    return false
+  if (cmsMultiOrg.value)
+    return true
+  return isDevModeEnabled.value
+})
 
 const state = reactive({
   newDocs: {
@@ -41,7 +52,15 @@ const state = reactive({
   workingDoc: {},
   seoAiLoading: false,
   seoAiError: '',
+  importingJson: false,
+  importDocIdDialogOpen: false,
+  importDocIdValue: '',
+  importConflictDialogOpen: false,
+  importConflictDocId: '',
+  importErrorDialogOpen: false,
+  importErrorMessage: '',
   previewViewport: 'full',
+  previewPageView: 'list',
   newRowLayout: '6',
   newPostRowLayout: '6',
   rowSettings: {
@@ -68,6 +87,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,10 +120,28 @@ const previewViewportStyle = computed(() => {
   }
 })
 
+const previewViewportContainStyle = computed(() => {
+  return {
+    ...(previewViewportStyle.value || {}),
+  }
+})
+
 const setPreviewViewport = (viewportId) => {
   state.previewViewport = viewportId
 }
 
+const hasPostView = (workingDoc) => {
+  if (!workingDoc || typeof workingDoc !== 'object')
+    return false
+  return Boolean(workingDoc.post)
+    || (Array.isArray(workingDoc.postContent) && workingDoc.postContent.length > 0)
+    || (Array.isArray(workingDoc.postStructure) && workingDoc.postStructure.length > 0)
+}
+
+const setPreviewPageView = (view) => {
+  state.previewPageView = view === 'post' ? 'post' : 'list'
+}
+
 const previewViewportMode = computed(() => {
   if (state.previewViewport === 'full')
     return 'auto'
@@ -108,6 +149,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',
@@ -135,6 +183,14 @@ const ROW_GAP_OPTIONS = [
   { name: '8', title: 'X-Large' },
 ]
 
+const ROW_GAP_CLASS_MAP = {
+  0: 'gap-0 sm:gap-0',
+  2: 'gap-0 sm:gap-2',
+  4: 'gap-0 sm:gap-4',
+  6: 'gap-0 sm:gap-6',
+  8: 'gap-0 sm:gap-8',
+}
+
 const ROW_MOBILE_STACK_OPTIONS = [
   { name: 'normal', title: 'Left first' },
   { name: 'reverse', title: 'Right first' },
@@ -440,17 +496,51 @@ const blockPick = (block, index, slotProps, post = false) => {
 }
 
 const applyCollectionUniqueKeys = (workingDoc) => {
+  const hasTemplateToken = (value) => {
+    if (typeof value === 'string')
+      return value.includes('{orgId}') || value.includes('{siteId}')
+    if (Array.isArray(value))
+      return value.some(entry => hasTemplateToken(entry))
+    if (value && typeof value === 'object')
+      return Object.values(value).some(entry => hasTemplateToken(entry))
+    return false
+  }
+
+  const resolveTokens = (value) => {
+    if (typeof value === 'string') {
+      let resolved = value
+      const orgId = edgeGlobal.edgeState.currentOrganization || ''
+      const siteId = props.site || ''
+      if (resolved.includes('{orgId}') && orgId)
+        resolved = resolved.replaceAll('{orgId}', orgId)
+      if (resolved.includes('{siteId}') && siteId)
+        resolved = resolved.replaceAll('{siteId}', siteId)
+      return resolved
+    }
+    if (Array.isArray(value))
+      return value.map(entry => resolveTokens(entry))
+    if (value && typeof value === 'object') {
+      const out = {}
+      Object.keys(value).forEach((key) => {
+        out[key] = resolveTokens(value[key])
+      })
+      return out
+    }
+    return value
+  }
+
+  const isEmptyQueryItem = (value) => {
+    if (value === undefined || value === null || value === '')
+      return true
+    if (Array.isArray(value))
+      return value.length === 0
+    return false
+  }
+
   const resolveUniqueKey = (template) => {
     if (!template || typeof template !== 'string')
       return ''
-    let resolved = template
-    const orgId = edgeGlobal.edgeState.currentOrganization || ''
-    const siteId = props.site || ''
-    if (resolved.includes('{orgId}') && orgId)
-      resolved = resolved.replaceAll('{orgId}', orgId)
-    if (resolved.includes('{siteId}') && siteId)
-      resolved = resolved.replaceAll('{siteId}', siteId)
-    return resolved
+    return resolveTokens(template)
   }
 
   const applyToBlocks = (blocks) => {
@@ -462,6 +552,27 @@ const applyCollectionUniqueKeys = (workingDoc) => {
         return
       Object.keys(meta).forEach((fieldKey) => {
         const cfg = meta[fieldKey]
+        if (!cfg || typeof cfg !== 'object')
+          return
+
+        // Materialize tokenized collection.query filters (e.g. {siteId}) into queryItems
+        // so frontend hydration receives concrete runtime filter selections.
+        if (Array.isArray(cfg?.collection?.query)) {
+          if (!cfg.queryItems || typeof cfg.queryItems !== 'object')
+            cfg.queryItems = {}
+          for (const queryFilter of cfg.collection.query) {
+            const queryField = queryFilter?.field
+            if (!queryField || typeof queryField !== 'string')
+              continue
+            const rawValue = queryFilter?.value
+            if (!hasTemplateToken(rawValue))
+              continue
+            if (!isEmptyQueryItem(cfg.queryItems[queryField]))
+              continue
+            cfg.queryItems[queryField] = resolveTokens(rawValue)
+          }
+        }
+
         if (!cfg?.collection?.uniqueKey)
           return
         const resolved = resolveUniqueKey(cfg.collection.uniqueKey)
@@ -493,11 +604,48 @@ 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))
     ensureStructureDefaults(workingDoc, true)
   applyCollectionUniqueKeys(workingDoc)
+  if (!hasPostView(workingDoc) && state.previewPageView === 'post')
+    state.previewPageView = 'list'
   const blockIds = (workingDoc.content || []).map(block => block.blockId).filter(id => id)
   const postBlockIds = workingDoc.postContent ? workingDoc.postContent.map(block => block.blockId).filter(id => id) : []
   blockIds.push(...postBlockIds)
@@ -528,19 +676,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(() => {
@@ -612,11 +945,7 @@ const rowUsesSpans = row => (row?.columns || []).some(col => Number.isFinite(col
 
 const rowGapClass = (row) => {
   const gap = Number(row?.gap)
-  const allowed = new Set([0, 2, 4, 6, 8])
-  const safeGap = allowed.has(gap) ? gap : 4
-  if (safeGap === 0)
-    return 'gap-0'
-  return ['gap-0', `sm:gap-${safeGap}`].join(' ')
+  return ROW_GAP_CLASS_MAP[gap] || ROW_GAP_CLASS_MAP[4]
 }
 
 const rowGridClass = (row) => {
@@ -847,14 +1176,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 +1253,403 @@ 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 titleFromSlug = (slug) => {
+  if (!slug)
+    return ''
+  return String(slug).replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+}
+
+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)
+  const menuTitle = String(pageName || '').trim() || titleFromSlug(menuName)
+  menus['Site Root'].push({ name: menuName, menuTitle, 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
@@ -1132,7 +1864,7 @@ const hasUnsavedChanges = (changes) => {
     :doc-id="page"
     :schema="schemas.pages"
     :new-doc-schema="state.newDocs.pages"
-    class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none pt-0 px-0"
+    class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none pt-0 px-0" :class="[!state.editMode ? 'cms-page-preview-mode' : '']"
     :show-footer="false"
     :save-redirect-override="`/app/dashboard/sites/${site}`"
     :no-close-after-save="true"
@@ -1141,7 +1873,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  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,22 +1920,62 @@ const hasUnsavedChanges = (changes) => {
           </div>
           <div class="w-full border-t border-border" aria-hidden="true" />
 
-          <div class="flex items-center gap-1 pr-3">
-            <span class="text-[11px] uppercase tracking-wide text-muted-foreground">Viewport</span>
+          <div class="flex items-center gap-2 px-3">
             <edge-shad-button
-              v-for="option in previewViewportOptions"
-              :key="option.id"
               type="button"
-              variant="ghost"
               size="icon"
-              class="h-[26px] w-[26px] text-xs gap-1 border transition-colors"
-              :class="state.previewViewport === option.id ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
-              @click="setPreviewViewport(option.id)"
+              variant="outline"
+              class="h-8 w-8"
+              :disabled="!currentPage || !props.page || props.page === 'new'"
+              title="Export Page"
+              aria-label="Export Page"
+              @click="exportCurrentPage"
             >
-              <component :is="option.icon" class="w-3.5 h-3.5" />
+              <Download class="w-3.5 h-3.5" />
             </edge-shad-button>
           </div>
 
+          <div class="flex flex-col items-center gap-1 px-2">
+            <div class="flex items-center gap-1">
+              <edge-shad-button
+                v-for="option in previewViewportOptions"
+                :key="option.id"
+                type="button"
+                variant="ghost"
+                size="icon"
+                class="h-[26px] w-[26px] text-xs gap-1 border transition-colors"
+                :class="state.previewViewport === option.id ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
+                @click="setPreviewViewport(option.id)"
+              >
+                <component :is="option.icon" class="w-3.5 h-3.5" />
+              </edge-shad-button>
+            </div>
+            <span class="text-[10px] leading-tight text-muted-foreground">Viewport</span>
+          </div>
+          <div v-if="hasPostView(slotProps.workingDoc)" class="flex flex-col items-center gap-1 px-2">
+            <div class="flex items-center gap-1">
+              <edge-shad-button
+                type="button"
+                variant="ghost"
+                class="h-[26px] px-2 text-xs border transition-colors"
+                :class="state.previewPageView === 'list' ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
+                @click="setPreviewPageView('list')"
+              >
+                Index
+              </edge-shad-button>
+              <edge-shad-button
+                type="button"
+                variant="ghost"
+                class="h-[26px] px-2 text-xs border transition-colors"
+                :class="state.previewPageView === 'post' ? 'bg-primary text-primary-foreground border-primary shadow-sm' : 'bg-muted text-foreground border-border hover:bg-muted/80'"
+                @click="setPreviewPageView('post')"
+              >
+                Detail
+              </edge-shad-button>
+            </div>
+            <span class="text-[10px] leading-tight text-muted-foreground">View</span>
+          </div>
+
           <edge-shad-button variant="text" class="hover:text-primary/50 text-xs h-[26px] text-primary" @click="state.editMode = !state.editMode">
             <template v-if="state.editMode">
               <Eye class="w-4 h-4" />
@@ -1247,7 +2019,7 @@ const hasUnsavedChanges = (changes) => {
       </div>
     </template>
     <template #success-alert>
-      <div v-if="!props.isTemplateSite" class="mt-2 flex flex-wrap items-center gap-2">
+      <div v-if="state.editMode && !props.isTemplateSite" class="mt-2 flex flex-wrap items-center gap-2">
         <edge-shad-button
           variant="outline"
           class="text-xs h-[28px] gap-1"
@@ -1264,22 +2036,15 @@ const hasUnsavedChanges = (changes) => {
       </div>
     </template>
     <template #main="slotProps">
-      <Tabs class="w-full" default-value="list">
-        <TabsList v-if="slotProps.workingDoc?.post" class="w-full mt-3 bg-primary rounded-sm">
-          <TabsTrigger value="list">
-            Index Page
-          </TabsTrigger>
-          <TabsTrigger value="post">
-            Detail Page
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="list">
-          <Separator class="my-4" />
+      <Tabs class="w-full" :model-value="hasPostView(slotProps.workingDoc) ? state.previewPageView : 'list'">
+        <TabsContent value="list" class="mt-0">
           <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`"
+            data-cms-preview-surface="page"
+            :data-cms-preview-mode="state.editMode ? 'edit' : 'preview'"
+            class="w-full h-[calc(100vh-180px)]  mt-2 overflow-y-auto 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 +2184,13 @@ 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"
+                                  :override-clicks-in-edit-mode="state.editMode"
+                                  :allow-preview-content-edit="!state.editMode && canOpenPreviewBlockContentEditor"
+                                  :contain-fixed="state.editMode"
                                   :viewport-mode="previewViewportMode"
                                   :block-id="blockId"
                                   :theme="theme"
@@ -1524,13 +2293,14 @@ const hasUnsavedChanges = (changes) => {
             </edge-button-divider>
           </div>
         </TabsContent>
-        <TabsContent value="post">
-          <Separator class="my-4" />
+        <TabsContent v-if="hasPostView(slotProps.workingDoc)" value="post" class="mt-0">
           <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`"
+            data-cms-preview-surface="page"
+            :data-cms-preview-mode="state.editMode ? 'edit' : 'preview'"
+            class="w-full  h-[calc(100vh-180px)]  mt-2 overflow-y-auto 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.postTop">
@@ -1670,8 +2440,12 @@ 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"
+                                  :override-clicks-in-edit-mode="state.editMode"
+                                  :allow-preview-content-edit="!state.editMode && canOpenPreviewBlockContentEditor"
+                                  :contain-fixed="state.editMode"
                                   :viewport-mode="previewViewportMode"
                                   :block-id="blockId"
                                   :theme="theme"
@@ -1846,6 +2620,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>
@@ -1924,4 +2764,8 @@ const hasUnsavedChanges = (changes) => {
 .block-drag-handle:active {
   cursor: grabbing;
 }
+
+.cms-page-preview-mode :deep(.border-emerald-200.bg-emerald-50) {
+  display: none !important;
+}
 </style>