@edgedev/create-edge-app 1.2.29 → 1.2.31

package/.env

@@ -11,4 +11,4 @@ VITE_FIREBASE_EMULATOR_FIRESTORE=
 VITE_FIREBASE_EMULATOR_FUNCTIONS=
 VITE_FIREBASE_EMULATOR_STORAGE=
 REGISTRATION_CODE=organization-registration-template
-DEVELOPMENT_MODE=false
+DEVELOPMENT_MODE=false

package/.env.dev

@@ -11,4 +11,4 @@ VITE_FIREBASE_EMULATOR_FIRESTORE=8080
 VITE_FIREBASE_EMULATOR_FUNCTIONS=5001
 VITE_FIREBASE_EMULATOR_STORAGE=9199
 REGISTRATION_CODE=organization-registration-template
-DEVELOPMENT_MODE=true
+DEVELOPMENT_MODE=true

package/{pages/app/dashboard/blocks/index.vue → edge/components/cms/blocksManager.vue}

@@ -7,15 +7,7 @@ const state = reactive({
   themesFilter: [],
 })
 
-const previewState = reactive({
-  loaded: [],
-})
-
-definePageMeta({
-  middleware: 'auth',
-})
-
-const rawInitBlockFiles = import.meta.glob('../../../../edge/components/cms/init_blocks/*.html', {
+const rawInitBlockFiles = import.meta.glob('./init_blocks/*.html', {
   as: 'raw',
   eager: true,
 })
@@ -74,14 +66,6 @@ const seedInitialBlocks = async () => {
   return created
 }
 
-onBeforeMount(async () => {
-  restoreFilters()
-  if (!edgeFirebase.data?.[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`]) {
-    await edgeFirebase.startSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`)
-  }
-  state.mounted = true
-})
-
 const getThemeFromId = (themeId) => {
   const theme = edgeFirebase.data[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`]?.[themeId]
   console.log('getThemeFromId', themeId, theme.name)
@@ -93,13 +77,6 @@ const loadingRender = (content) => {
   return safeContent.replaceAll('{{loading}}', '').replaceAll('{{loaded}}', 'hidden')
 }
 
-const markPreviewLoaded = (isLoading, id) => {
-  if (!isLoading && !previewState.loaded.includes(id))
-    previewState.loaded.push(id)
-}
-
-const hasPreviewLoaded = id => previewState.loaded.includes(id)
-
 const FILTER_STORAGE_KEY = 'edge.blocks.filters'
 
 const restoreFilters = () => {
@@ -136,6 +113,14 @@ watch(
   { deep: true },
 )
 
+onBeforeMount(async () => {
+  restoreFilters()
+  if (!edgeFirebase.data?.[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`]) {
+    await edgeFirebase.startSnapshot(`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`)
+  }
+  state.mounted = true
+})
+
 const tagOptions = computed(() => {
   const tagsSet = new Set()
   const blocks = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/blocks`] || {}

package/edge/components/cms/site.vue

@@ -103,6 +103,7 @@ const schemas = {
         message: 'At least one domain is required',
         path: ['domains', 0],
       }),
+    forwardApex: z.boolean().optional(),
     contactEmail: z.string().optional(),
     contactPhone: z.string().optional(),
     theme: z.string({
@@ -783,6 +784,7 @@ const isSiteDiff = computed(() => {
       brandLogoLight: publishedSite.brandLogoLight,
       favicon: publishedSite.favicon,
       menuPosition: publishedSite.menuPosition,
+      forwardApex: publishedSite.forwardApex,
       contactEmail: publishedSite.contactEmail,
       contactPhone: publishedSite.contactPhone,
       metaTitle: publishedSite.metaTitle,
@@ -810,6 +812,7 @@ const isSiteDiff = computed(() => {
       brandLogoLight: siteData.value.brandLogoLight,
       favicon: siteData.value.favicon,
       menuPosition: siteData.value.menuPosition,
+      forwardApex: siteData.value.forwardApex,
       contactEmail: siteData.value.contactEmail,
       contactPhone: siteData.value.contactPhone,
       metaTitle: siteData.value.metaTitle,
@@ -851,6 +854,7 @@ const discardSiteSettings = async () => {
       brandLogoLight: publishedSite.brandLogoLight || '',
       favicon: publishedSite.favicon || '',
       menuPosition: publishedSite.menuPosition || '',
+      forwardApex: publishedSite.forwardApex === false ? false : true,
       contactEmail: publishedSite.contactEmail || '',
       contactPhone: publishedSite.contactPhone || '',
       metaTitle: publishedSite.metaTitle || '',
@@ -1699,6 +1703,7 @@ const pageSettingsUpdated = async (pageData) => {
                 :enable-media-picker="true"
                 :site-id="props.site"
                 :domain-error="domainError"
+                :settings-open="state.siteSettings"
               />
             </div>
             <SheetFooter class="pt-2 flex justify-between">

package/edge/components/cms/siteSettingsForm.vue

@@ -42,6 +42,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  settingsOpen: {
+    type: Boolean,
+    default: true,
+  },
 })
 
 const edgeFirebase = inject('edgeFirebase')
@@ -101,41 +105,266 @@ const menuPositionOptions = [
 
 const domainError = computed(() => String(props.domainError || '').trim())
 const serverPagesProject = ref('')
+const domainRegistry = ref({})
+const loadingDomainRegistry = ref(false)
+const hasLoadedDomainRegistry = ref(false)
 const pagesProject = computed(() => String(serverPagesProject.value || '').trim())
 const pagesDomain = computed(() => (pagesProject.value ? `${pagesProject.value}.pages.dev` : '(CLOUDFLARE_PAGES_PROJECT).pages.dev'))
+const forwardApexEnabled = computed({
+  get: () => props.settings?.forwardApex !== false,
+  set: (value) => {
+    props.settings.forwardApex = !!value
+  },
+})
+
+const normalizeDomain = (value) => {
+  if (!value)
+    return ''
+  let normalized = String(value).trim().toLowerCase()
+  if (!normalized)
+    return ''
+  if (normalized.includes('://')) {
+    try {
+      normalized = new URL(normalized).host
+    }
+    catch {
+      normalized = normalized.split('://').pop() || normalized
+    }
+  }
+  normalized = normalized.split('/')[0] || ''
+  if (normalized.includes(':') && !normalized.startsWith('[')) {
+    normalized = normalized.split(':')[0] || ''
+  }
+  return normalized.replace(/\.+$/g, '')
+}
+
+const isIpv4Address = (value) => {
+  const parts = String(value || '').split('.')
+  if (parts.length !== 4)
+    return false
+  return parts.every((part) => {
+    if (!/^\d{1,3}$/.test(part))
+      return false
+    const num = Number(part)
+    return num >= 0 && num <= 255
+  })
+}
+
+const isIpv6Address = (value) => {
+  const normalized = String(value || '').toLowerCase()
+  if (!normalized.includes(':'))
+    return false
+  return /^[0-9a-f:]+$/.test(normalized)
+}
+
+const isIpAddress = value => isIpv4Address(value) || isIpv6Address(value)
+
+const shouldDisplayDomainDnsRecords = (domain) => {
+  if (!domain)
+    return false
+  if (domain.includes('localhost'))
+    return false
+  if (isIpAddress(domain))
+    return false
+  if (domain.endsWith('.dev'))
+    return false
+  return true
+}
+
+const getCloudflareApexDomain = (domain) => {
+  if (!domain)
+    return ''
+  if (domain.startsWith('www.'))
+    return domain.slice(4)
+  return domain
+}
+
+const getCloudflarePagesDomain = (domain) => {
+  if (!domain)
+    return ''
+  if (domain.startsWith('www.'))
+    return domain
+  return `www.${domain}`
+}
+
+const normalizedDomains = computed(() => {
+  const values = Array.isArray(props.settings?.domains) ? props.settings.domains : []
+  return Array.from(new Set(values.map(normalizeDomain).filter(Boolean)))
+})
+
+const dnsEligibleDomains = computed(() => normalizedDomains.value.filter(shouldDisplayDomainDnsRecords))
+
+const organizationId = computed(() => String(edgeGlobal?.edgeState?.currentOrganization || '').trim())
+const shouldShowDomainRegistryLoading = computed(() => {
+  if (!normalizedDomains.value.length)
+    return false
+  return loadingDomainRegistry.value || !hasLoadedDomainRegistry.value
+})
+const DOMAIN_REGISTRY_POLL_MS = 2500
+let domainRegistryPollTimer = null
+
+const buildFallbackDomainEntry = (domain) => {
+  const apexDomain = getCloudflareApexDomain(domain)
+  const wwwDomain = getCloudflarePagesDomain(apexDomain)
+  const target = pagesDomain.value
+  const hasTarget = !!String(target || '').trim()
+  return {
+    domain,
+    apexDomain,
+    wwwDomain,
+    apexAttempted: false,
+    apexAdded: false,
+    apexError: '',
+    dnsGuidance: 'Add the www CNAME record. Apex is unavailable; forward apex to www.',
+    dnsRecords: {
+      target,
+      www: {
+        type: 'CNAME',
+        name: 'www',
+        host: wwwDomain,
+        value: target,
+        enabled: hasTarget,
+      },
+      apex: {
+        type: 'CNAME',
+        name: '@',
+        host: apexDomain,
+        value: target,
+        enabled: false,
+      },
+    },
+  }
+}
+
+const domainDnsEntries = computed(() => {
+  return dnsEligibleDomains.value.map((domain) => {
+    const fallback = buildFallbackDomainEntry(domain)
+    const value = domainRegistry.value?.[domain] || {}
+    const dnsRecords = {
+      ...fallback.dnsRecords,
+      ...(value.dnsRecords || {}),
+      www: {
+        ...fallback.dnsRecords.www,
+        ...(value?.dnsRecords?.www || {}),
+      },
+      apex: {
+        ...fallback.dnsRecords.apex,
+        ...(value?.dnsRecords?.apex || {}),
+      },
+    }
+    const apexAdded = value?.apexAdded === true
+    return {
+      ...fallback,
+      ...value,
+      dnsRecords,
+      apexAdded,
+      apexAttempted: value?.apexAttempted === true,
+      apexError: String(value?.apexError || '').trim(),
+      dnsGuidance: String(value?.dnsGuidance || '').trim()
+        || (apexAdded ? '' : fallback.dnsGuidance),
+    }
+  })
+})
 
-onMounted(async () => {
+const fetchDomainRegistry = async (options = {}) => {
+  const { background = false } = options
   if (!edgeFirebase?.runFunction)
     return
+  const domains = normalizedDomains.value
+  if (!background)
+    loadingDomainRegistry.value = true
   try {
-    const response = await edgeFirebase.runFunction('cms-getCloudflarePagesProject', {})
+    const response = await edgeFirebase.runFunction('cms-getCloudflarePagesProject', {
+      orgId: organizationId.value,
+      siteId: props.siteId || '',
+      domains,
+    })
     serverPagesProject.value = String(response?.data?.project || '').trim()
+    const nextRegistry = response?.data?.domainRegistry
+    if (domains.length && nextRegistry && typeof nextRegistry === 'object')
+      domainRegistry.value = nextRegistry
+    else
+      domainRegistry.value = {}
+    hasLoadedDomainRegistry.value = true
   }
   catch {
     serverPagesProject.value = ''
+    domainRegistry.value = {}
+    hasLoadedDomainRegistry.value = true
   }
+  finally {
+    if (!background)
+      loadingDomainRegistry.value = false
+  }
+}
+
+const stopDomainRegistryPolling = () => {
+  if (domainRegistryPollTimer) {
+    clearInterval(domainRegistryPollTimer)
+    domainRegistryPollTimer = null
+  }
+}
+
+const startDomainRegistryPolling = () => {
+  stopDomainRegistryPolling()
+  if (!props.settingsOpen)
+    return
+  if (!normalizedDomains.value.length)
+    return
+  domainRegistryPollTimer = setInterval(() => {
+    fetchDomainRegistry({ background: true }).catch(() => {})
+  }, DOMAIN_REGISTRY_POLL_MS)
+}
+
+watch(() => `${props.siteId}:${organizationId.value}:${normalizedDomains.value.join('|')}`, async () => {
+  hasLoadedDomainRegistry.value = false
+  await fetchDomainRegistry()
+  startDomainRegistryPolling()
+})
+
+watch(() => props.settingsOpen, async (open) => {
+  if (open) {
+    hasLoadedDomainRegistry.value = false
+    await fetchDomainRegistry()
+    startDomainRegistryPolling()
+  }
+  else {
+    stopDomainRegistryPolling()
+  }
+}, { immediate: true })
+
+onBeforeUnmount(() => {
+  stopDomainRegistryPolling()
 })
+
+watch(() => props.settings?.forwardApex, (value) => {
+  if (value === undefined)
+    props.settings.forwardApex = true
+}, { immediate: true })
 </script>
 
 <template>
   <Tabs class="w-full" default-value="general">
-    <TabsList class="w-full gap-2 bg-muted/40 p-1 rounded-lg">
-      <TabsTrigger value="general" class="text-sm uppercase font-medium">
+    <TabsList class="w-full mt-3 bg-secondary rounded-sm grid grid-cols-2 md:grid-cols-4 xl:grid-cols-7 gap-1">
+      <TabsTrigger value="general" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         General
       </TabsTrigger>
-      <TabsTrigger value="appearance" class="text-sm uppercase font-medium">
+      <TabsTrigger value="domains" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+        Domains
+      </TabsTrigger>
+      <TabsTrigger value="appearance" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Appearance
       </TabsTrigger>
-      <TabsTrigger value="branding" class="text-sm uppercase font-medium">
+      <TabsTrigger value="branding" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Branding
       </TabsTrigger>
-      <TabsTrigger value="seo" class="text-sm uppercase font-medium">
+      <TabsTrigger value="seo" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         SEO
       </TabsTrigger>
-      <TabsTrigger value="tracking" class="text-sm uppercase font-medium">
+      <TabsTrigger value="tracking" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Tracking Pixels
       </TabsTrigger>
-      <TabsTrigger value="social" class="text-sm uppercase font-medium">
+      <TabsTrigger value="social" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
         Social Media
       </TabsTrigger>
     </TabsList>
@@ -147,46 +376,6 @@ onMounted(async () => {
         placeholder="Enter name"
         class="w-full"
       />
-      <edge-shad-tags
-        v-model="props.settings.domains"
-        name="domains"
-        label="Domains"
-        placeholder="Add or remove domains"
-        class="w-full"
-      />
-      <Alert v-if="domainError" variant="destructive">
-        <CircleAlert class="h-4 w-4" />
-        <AlertTitle>Domain error</AlertTitle>
-        <AlertDescription class="text-sm">
-          {{ domainError }}
-        </AlertDescription>
-      </Alert>
-      <div class="rounded-lg border border-border/60 bg-muted/40 p-4 space-y-3">
-        <div class="flex items-center justify-between">
-          <div class="text-sm font-semibold text-foreground">
-            Domain DNS records
-          </div>
-          <div class="text-xs text-muted-foreground">
-            Target: <span class="font-mono">{{ pagesDomain }}</span>
-          </div>
-        </div>
-        <p class="text-sm text-muted-foreground">
-          Add these records at your DNS provider.
-        </p>
-        <div class="space-y-2 text-sm">
-          <div class="grid grid-cols-[70px_1fr] gap-3">
-            <div class="text-muted-foreground">CNAME</div>
-            <div class="font-mono">www → {{ pagesDomain }}</div>
-          </div>
-          <div class="grid grid-cols-[70px_1fr] gap-3">
-            <div class="text-muted-foreground">CNAME</div>
-            <div class="font-mono">@ → {{ pagesDomain }}</div>
-          </div>
-        </div>
-        <p class="text-xs text-muted-foreground">
-          Then forward the root/apex (TLD) domain to <span class="font-mono">www</span> with a 301 redirect.
-        </p>
-      </div>
       <edge-shad-input
         v-model="props.settings.contactEmail"
         name="contactEmail"
@@ -219,6 +408,99 @@ onMounted(async () => {
         No organization users available for this site.
       </p>
     </TabsContent>
+    <TabsContent value="domains" class="pt-4 space-y-4">
+      <edge-shad-tags
+        v-model="props.settings.domains"
+        name="domains"
+        label="Domains"
+        placeholder="Add or remove domains"
+        class="w-full"
+      />
+      <div class="rounded-lg border border-border/60 bg-muted/40 p-4 space-y-3">
+        <edge-shad-switch
+          v-model="forwardApexEnabled"
+          name="forwardApex"
+          label="Forward Apex (non-www) domains to www"
+          class="w-full"
+        >
+          Use a single canonical host (www) to avoid duplicate URLs and consolidate SEO signals.
+        </edge-shad-switch>
+        <p class="text-xs text-amber-700 dark:text-amber-300">
+          Warning: if your DNS provider already redirects www to non-www, this can create a redirect loop.
+        </p>
+      </div>
+      <Alert v-if="domainError" variant="destructive">
+        <CircleAlert class="h-4 w-4" />
+        <AlertTitle>Domain error</AlertTitle>
+        <AlertDescription class="text-sm">
+          {{ domainError }}
+        </AlertDescription>
+      </Alert>
+      <div class="rounded-lg border border-border/60 bg-muted/40 p-4 space-y-3">
+        <div class="flex items-center justify-between">
+          <div class="text-sm font-semibold text-foreground">
+            Domain DNS records
+          </div>
+          <div class="text-xs text-muted-foreground">
+            Target: <span class="font-mono">{{ pagesDomain }}</span>
+          </div>
+        </div>
+        <p class="text-sm text-muted-foreground">
+          Records are listed for each domain.
+        </p>
+        <p v-if="shouldShowDomainRegistryLoading" class="text-xs text-muted-foreground">
+          Waiting for latest domain sync results...
+        </p>
+        <div v-if="!domainDnsEntries.length" class="text-sm text-muted-foreground italic">
+          Add at least one valid domain to see DNS records.
+        </div>
+        <div
+          v-for="entry in domainDnsEntries"
+          :key="entry.domain"
+          class="rounded-md border border-border/50 bg-background/70 p-3 space-y-3"
+        >
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-sm font-semibold text-foreground font-mono">
+              {{ entry.domain }}
+            </div>
+            <div class="text-xs">
+              <span
+                v-if="entry.apexAdded"
+                class="rounded bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 px-2 py-1"
+              >
+                Apex added
+              </span>
+              <span
+                v-else
+                class="rounded bg-amber-500/15 text-amber-700 dark:text-amber-300 px-2 py-1"
+              >
+                Apex not added
+              </span>
+            </div>
+          </div>
+          <div class="space-y-2 text-sm">
+            <div class="grid grid-cols-[70px_1fr] gap-3">
+              <div class="text-muted-foreground">CNAME</div>
+              <div class="font-mono">
+                {{ entry?.dnsRecords?.www?.name || 'www' }} → {{ entry?.dnsRecords?.www?.value || pagesDomain }}
+              </div>
+            </div>
+            <div class="grid grid-cols-[70px_1fr] gap-3">
+              <div class="text-muted-foreground">CNAME</div>
+              <div class="font-mono">
+                {{ entry?.dnsRecords?.apex?.name || '@' }} → {{ entry?.dnsRecords?.apex?.value || pagesDomain }}
+              </div>
+            </div>
+          </div>
+          <p v-if="entry.apexError" class="text-xs text-amber-700 dark:text-amber-300">
+            {{ entry.apexError }}
+          </p>
+          <p v-if="!entry.apexAdded && entry.dnsGuidance" class="text-xs text-muted-foreground">
+            {{ entry.dnsGuidance }}
+          </p>
+        </div>
+      </div>
+    </TabsContent>
     <TabsContent value="appearance" class="pt-4 space-y-4">
       <edge-shad-select-tags
         v-if="props.showThemeFields && props.isAdmin"

package/edge/components/cms/sitesManager.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { Loader2 } from 'lucide-vue-next'
+
+const edgeFirebase = inject('edgeFirebase')
+const isAiBusy = status => status === 'queued' || status === 'running'
+
+const state = reactive({
+  filter: '',
+})
+
+const isAdmin = computed(() => {
+  return edgeGlobal.isAdminGlobal(edgeFirebase).value
+})
+
+const disableAddSiteForNonAdmin = true
+
+const currentOrgRoleName = computed(() => {
+  return String(edgeGlobal.getRoleName(edgeFirebase?.user?.roles || [], edgeGlobal.edgeState.currentOrganization) || '').toLowerCase()
+})
+
+const canAddSite = computed(() => {
+  if (!disableAddSiteForNonAdmin)
+    return true
+  return currentOrgRoleName.value === 'admin'
+})
+
+const queryField = computed(() => {
+  if (!isAdmin.value) {
+    return 'users'
+  }
+  return ''
+})
+
+const queryValue = computed(() => {
+  if (!isAdmin.value) {
+    return [edgeFirebase?.user?.uid]
+  }
+  return ''
+})
+
+const queryOperator = computed(() => {
+  if (!isAdmin.value) {
+    return 'array-contains-any'
+  }
+  return ''
+})
+</script>
+
+<template>
+  <edge-dashboard
+    :filter="state.filter"
+    :query-field="queryField"
+    :query-value="queryValue"
+    :query-operator="queryOperator"
+    collection="sites"
+    class="flex-1 pt-0"
+  >
+    <template #header-end>
+      <edge-shad-button
+        v-if="canAddSite"
+        class="uppercase bg-primary"
+        to="/app/dashboard/sites/new"
+      >
+        Add Site
+      </edge-shad-button>
+      <div v-else class="hidden" />
+    </template>
+    <template #list="slotProps">
+      <template v-for="item in slotProps.filtered" :key="item.docId">
+        <edge-shad-button
+          variant="text"
+          class="cursor-pointer w-full flex justify-between items-center py-2 gap-3"
+          :to="isAiBusy(item.aiBootstrapStatus) ? undefined : `/app/dashboard/sites/${item.docId}`"
+          :disabled="isAiBusy(item.aiBootstrapStatus)"
+        >
+          <div>
+            <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
+              <FilePenLine class="h-5 w-5" />
+            </Avatar>
+          </div>
+          <div class="grow text-left">
+            <div class="text-lg">
+              {{ item.name }}
+            </div>
+            <div v-if="isAiBusy(item.aiBootstrapStatus)" class="flex items-center gap-2 text-xs text-muted-foreground">
+              <Loader2 class="h-3 w-3 animate-spin" />
+              <span>AI is preparing this site</span>
+            </div>
+          </div>
+          <div>
+            <edge-shad-button
+              size="icon"
+              class="bg-slate-600 h-7 w-7"
+              @click.stop="slotProps.deleteItem(item.docId)"
+            >
+              <Trash class="h-5 w-5" />
+            </edge-shad-button>
+          </div>
+        </edge-shad-button>
+        <Separator class="dark:bg-slate-600" />
+      </template>
+      <div
+        v-if="slotProps.filtered.length === 0 && !isAdmin && disableAddSiteForNonAdmin"
+        class="px-4 py-6 text-sm text-muted-foreground"
+      >
+        No sites are assigned to your account. Contact an organization admin to add a site for you.
+      </div>
+    </template>
+  </edge-dashboard>
+</template>

package/edge/components/editor.vue

@@ -96,6 +96,46 @@ const state = reactive({
 const edgeFirebase = inject('edgeFirebase')
 // const edgeGlobal = inject('edgeGlobal')
 
+const normalizeObject = (value) => {
+  if (Array.isArray(value)) {
+    return value.map(item => normalizeObject(item))
+  }
+
+  if (value && typeof value === 'object') {
+    return Object.keys(value)
+      .sort()
+      .reduce((acc, key) => {
+        acc[key] = normalizeObject(value[key])
+        return acc
+      }, {})
+  }
+
+  return value
+}
+
+const withSchemaDefaults = (doc = {}) => {
+  const normalizedDoc = edgeGlobal.dupObject(doc || {})
+  Object.keys(newDoc.value).forEach((field) => {
+    if (!edgeGlobal.objHas(normalizedDoc, field)) {
+      normalizedDoc[field] = newDoc.value[field]
+    }
+  })
+  return normalizedDoc
+}
+
+const comparableDoc = (doc = {}) => {
+  const sourceDoc = (doc && typeof doc === 'object') ? doc : {}
+  const comparable = {}
+  Object.keys(props.newDocSchema || {}).forEach((field) => {
+    if (edgeGlobal.objHas(sourceDoc, field)) {
+      comparable[field] = sourceDoc[field]
+      return
+    }
+    comparable[field] = newDoc.value[field]
+  })
+  return normalizeObject(comparable)
+}
+
 const unsavedChanges = computed(() => {
   if (props.docId === 'new') {
     return false
@@ -107,9 +147,9 @@ const unsavedChanges = computed(() => {
     return false
   }
 
-  console.log('comparing', state.workingDoc, baselineDoc)
-  console.log('unsavedChanges', JSON.stringify(state.workingDoc) !== JSON.stringify(baselineDoc))
-  return JSON.stringify(state.workingDoc) !== JSON.stringify(baselineDoc)
+  const workingComparable = comparableDoc(state.workingDoc)
+  const baselineComparable = comparableDoc(baselineDoc)
+  return JSON.stringify(workingComparable) !== JSON.stringify(baselineComparable)
 })
 
 onBeforeRouteLeave((to, from, next) => {
@@ -164,7 +204,7 @@ const discardChanges = async () => {
     }
     return
   }
-  state.workingDoc = await edgeGlobal.dupObject(state.collectionData[props.docId])
+  state.workingDoc = withSchemaDefaults(state.collectionData[props.docId])
   state.bypassUnsavedChanges = true
   state.dialog = false
   edgeGlobal.edgeState.changeTracker = {}
@@ -328,44 +368,63 @@ const initData = (newVal) => {
     if (edgeGlobal.objHas(newVal, props.docId) === false) {
       return
     }
-    state.workingDoc = edgeGlobal.dupObject(newVal[props.docId])
-    Object.keys(newDoc.value).forEach((field) => {
-      if (!edgeGlobal.objHas(state.workingDoc, field)) {
-        state.workingDoc[field] = newDoc.value[field]
-      }
-    })
+    state.workingDoc = withSchemaDefaults(newVal[props.docId])
     state.afterMount = true
   }
   else {
     if (!state.afterMount) {
-      state.workingDoc = edgeGlobal.dupObject(newDoc.value)
+      state.workingDoc = withSchemaDefaults(newDoc.value)
     }
     state.afterMount = true
   }
 }
 
-onBeforeMount(async () => {
-  state.bypassUnsavedChanges = false
-  edgeGlobal.edgeState.changeTracker = {}
-  for (const field of Object.keys(props.newDocSchema)) {
+const startCollectionSnapshots = async () => {
+  for (const field of Object.keys(props.newDocSchema || {})) {
     if (props.newDocSchema[field].type === 'collection') {
       await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${field}`)
     }
   }
-  emit('unsavedChanges', unsavedChanges.value)
-  // console.log('mounting editor for', props.collection, props.docId)
-  // console.log('starting snapshot for collection:', props.collection)
-  // await edgeFirebase.startSnapshot(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`)
-  if (!edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]) {
-    console.log(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`)
-    console.log(props.docId)
-    const docData = await edgeFirebase.getDocData(`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`, props.docId)
-    state.collectionData[props.docId] = docData
-    initData(state.collectionData)
-  }
-  else {
-    state.collectionData = edgeFirebase.data[`${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`]
+}
+
+const setCollectionData = async () => {
+  const collectionPath = `${edgeGlobal.edgeState.organizationDocPath}/${props.collection}`
+  if (!edgeFirebase.data?.[collectionPath]) {
+    if (props.docId !== 'new') {
+      const docData = await edgeFirebase.getDocData(collectionPath, props.docId)
+      state.collectionData = {
+        ...(state.collectionData || {}),
+        [props.docId]: docData,
+      }
+    }
+    else if (!state.collectionData || typeof state.collectionData !== 'object') {
+      state.collectionData = {}
+    }
+    return
   }
+  state.collectionData = edgeFirebase.data[collectionPath]
+}
+
+const resetEditorState = () => {
+  state.bypassUnsavedChanges = false
+  state.bypassRoute = ''
+  state.afterMount = false
+  state.dialog = false
+  state.successMessage = ''
+  state.skipNextValidation = props.docId === 'new'
+  edgeGlobal.edgeState.changeTracker = {}
+}
+
+const refreshEditorData = async () => {
+  resetEditorState()
+  await startCollectionSnapshots()
+  await setCollectionData()
+  initData(state.collectionData)
+  emit('unsavedChanges', unsavedChanges.value)
+}
+
+onBeforeMount(async () => {
+  await refreshEditorData()
   if (props.noCloseAfterSave) {
     state.overrideClose = true
   }
@@ -374,6 +433,17 @@ onBeforeMount(async () => {
 watch(() => state.collectionData, (newVal) => {
   initData(newVal)
 })
+
+watch(() => [props.collection, props.docId], async (newVal, oldVal) => {
+  if (!oldVal) {
+    return
+  }
+  if (newVal[0] === oldVal[0] && newVal[1] === oldVal[1]) {
+    return
+  }
+  await refreshEditorData()
+})
+
 onActivated(() => {
   // console.log('activated')
   state.bypassUnsavedChanges = false
@@ -384,17 +454,12 @@ onActivated(() => {
     if (edgeGlobal.objHas(state.collectionData, props.docId) === false) {
       return
     }
-    state.workingDoc = edgeGlobal.dupObject(state.collectionData[props.docId])
-    Object.keys(newDoc.value).forEach((field) => {
-      if (!edgeGlobal.objHas(state.workingDoc, field)) {
-        state.workingDoc[field] = newDoc.value[field]
-      }
-    })
+    state.workingDoc = withSchemaDefaults(state.collectionData[props.docId])
 
     // console.log('state.workingDoc', state.workingDoc)
   }
   else {
-    state.workingDoc = edgeGlobal.dupObject(newDoc.value)
+    state.workingDoc = withSchemaDefaults(newDoc.value)
     Object.entries(route.query).forEach(([key, value]) => {
     // Check if the key exists in state.workingDoc, and if so, set the value
       if (key in state.workingDoc) {

package/edge/composables/siteSettingsTemplate.js

@@ -15,6 +15,7 @@ export const useSiteSettingsTemplate = () => {
     favicon: '',
     menuPosition: 'right',
     domains: [],
+    forwardApex: true,
     contactEmail: '',
     contactPhone: '',
     metaTitle: '',
@@ -49,6 +50,7 @@ export const useSiteSettingsTemplate = () => {
       favicon: { bindings: { 'field-type': 'text', 'label': 'Favicon' }, cols: '12', value: defaults.favicon },
       menuPosition: { bindings: { 'field-type': 'select', 'label': 'Menu Position', 'items': ['left', 'center', 'right'] }, cols: '12', value: defaults.menuPosition },
       domains: { bindings: { 'field-type': 'tags', 'label': 'Domains', 'helper': 'Add or remove domains' }, cols: '12', value: defaults.domains },
+      forwardApex: { bindings: { 'field-type': 'boolean', 'label': 'Forward Apex (non-www) domains to www' }, cols: '12', value: defaults.forwardApex },
       contactEmail: { bindings: { 'field-type': 'text', 'label': 'Contact Email' }, cols: '12', value: defaults.contactEmail },
       contactPhone: { bindings: { 'field-type': 'text', 'label': 'Contact Phone' }, cols: '12', value: defaults.contactPhone },
       metaTitle: { bindings: { 'field-type': 'text', 'label': 'Meta Title' }, cols: '12', value: defaults.metaTitle },

package/edge/routes/cms/dashboard/blocks/index.vue

@@ -0,0 +1,21 @@
+<script setup>
+const state = reactive({
+  mounted: false,
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-blocks-manager />
+  </div>
+</template>

package/edge/routes/cms/dashboard/sites/index.vue

@@ -0,0 +1,13 @@
+<script setup>
+definePageMeta({
+  middleware: 'auth',
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+  >
+    <edge-cms-sites-manager />
+  </div>
+</template>

package/edge/routes/cms/nuxtHooks.js

@@ -0,0 +1,52 @@
+import { resolve as resolvePath } from 'node:path'
+import { cmsRoutes } from './routes'
+
+const resolveRouteFileFromCwd = (file) => {
+  const normalizedPath = String(file || '').replace(/^\.\//, '')
+  return resolvePath(process.cwd(), normalizedPath)
+}
+
+export const createCmsNuxtHooks = (resolveFile) => {
+  const resolveRouteFile = typeof resolveFile === 'function'
+    ? resolveFile
+    : resolveRouteFileFromCwd
+
+  const routeExists = (routeList, name) => {
+    for (const route of routeList) {
+      if (route.name === name)
+        return true
+      if (route.children?.length && routeExists(route.children, name))
+        return true
+    }
+    return false
+  }
+
+  const resolveCmsRoute = (route, appRootRoute, isChild = false) => {
+    const shouldStripAppPrefix = Boolean(appRootRoute) && !isChild
+    const nextRoute = {
+      ...route,
+      path: shouldStripAppPrefix
+        ? route.path.replace(/^\/app\/?/, '')
+        : route.path,
+      file: resolveRouteFile(route.file),
+    }
+
+    if (route.children?.length)
+      nextRoute.children = route.children.map(child => resolveCmsRoute(child, appRootRoute, true))
+
+    return nextRoute
+  }
+
+  return {
+    'pages:extend': (pages) => {
+      const appRootRoute = pages.find(page => page.path === '/app')
+      const targetRoutes = appRootRoute?.children || pages
+
+      cmsRoutes.forEach((route) => {
+        const routeToAdd = resolveCmsRoute(route, appRootRoute)
+        if (!routeExists(targetRoutes, routeToAdd.name))
+          targetRoutes.push(routeToAdd)
+      })
+    },
+  }
+}

package/edge/routes/cms/routes.js

@@ -0,0 +1,56 @@
+export const cmsRoutes = [
+  {
+    name: 'cms-dashboard-sites-index',
+    path: '/app/dashboard/sites',
+    file: './edge/routes/cms/dashboard/sites/index.vue',
+  },
+  {
+    name: 'cms-dashboard-blocks-index',
+    path: '/app/dashboard/blocks',
+    file: './edge/routes/cms/dashboard/blocks/index.vue',
+  },
+  {
+    name: 'cms-dashboard-blocks-block',
+    path: '/app/dashboard/blocks/:block',
+    file: './edge/routes/cms/dashboard/blocks/[block].vue',
+  },
+  {
+    name: 'cms-dashboard-media-index',
+    path: '/app/dashboard/media',
+    file: './edge/routes/cms/dashboard/media/index.vue',
+  },
+  {
+    name: 'cms-dashboard-sites-site',
+    path: '/app/dashboard/sites/:site',
+    file: './edge/routes/cms/dashboard/sites/[site].vue',
+    children: [
+      {
+        name: 'cms-dashboard-sites-site-page',
+        path: ':page',
+        file: './edge/routes/cms/dashboard/sites/[site]/[[page]].vue',
+      },
+    ],
+  },
+  {
+    name: 'cms-dashboard-templates-index',
+    path: '/app/dashboard/templates',
+    file: './edge/routes/cms/dashboard/templates/index.vue',
+    children: [
+      {
+        name: 'cms-dashboard-templates-page',
+        path: ':page',
+        file: './edge/routes/cms/dashboard/templates/[page].vue',
+      },
+    ],
+  },
+  {
+    name: 'cms-dashboard-themes-index',
+    path: '/app/dashboard/themes',
+    file: './edge/routes/cms/dashboard/themes/index.vue',
+  },
+  {
+    name: 'cms-dashboard-themes-theme',
+    path: '/app/dashboard/themes/:theme',
+    file: './edge/routes/cms/dashboard/themes/[theme].vue',
+  },
+]

package/nuxt.config.ts

@@ -1,3 +1,8 @@
+import { createCmsNuxtHooks } from './edge/routes/cms/nuxtHooks'
+
+const cmsRouteHooks = {}
+Object.assign(cmsRouteHooks, createCmsNuxtHooks()) // Comment out this line to disable CMS routes.
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   ssr: false,
@@ -16,6 +21,12 @@ export default defineNuxtConfig({
         { rel: 'apple-touch-icon', sizes: '180x180', href: '/favicon/apple-touch-icon.png' },
         { rel: 'manifest', href: '/favicon/site.webmanifest' },
       ],
+      meta: [
+        {
+          'http-equiv': 'Content-Security-Policy',
+          'content': 'font-src \'self\' https://files.edgemarketingdesign.com https://use.typekit.net https://p.typekit.net data:;',
+        },
+      ],
     },
   },
   modules: ['@vant/nuxt', '@nuxtjs/tailwindcss', '@nuxtjs/color-mode', 'shadcn-nuxt'],
@@ -40,9 +51,11 @@ export default defineNuxtConfig({
   },
   components: {
     dirs: [
-      { path: '~/components/formSubtypes', global: true, prefix: 'edge-form-subtypes' },
+      { path: '~/components' },
+
+      // Namespaced wrappers — keep them, but lower priority is fine
       { path: '~/edge/components', global: true, prefix: 'edge' },
-      '~/components',
+      { path: '~/components/formSubtypes', global: true, prefix: 'edge-form-subtypes' },
     ],
   },
   vite: {
@@ -50,11 +63,15 @@ export default defineNuxtConfig({
       'process.env.DEBUG': false,
     },
     server: {
+      watch: {
+        ignored: ['**/.nuxt/**', '**/.output/**', '**/dist/**', '**/node_modules/**'],
+      },
       hmr: {
         port: 3000, // Make sure this port matches your Nuxt server port
         clientPort: 3000, // Ensure this matches your Nuxt server port as well
       },
     },
   },
+  hooks: cmsRouteHooks,
   devtools: { enabled: false },
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.2.29",
+  "version": "1.2.31",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"

package/pages/app/dashboard/sites/index.vue

@@ -1,114 +0,0 @@
-<script setup>
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { Loader2 } from 'lucide-vue-next'
-const route = useRoute()
-// const edgeGlobal = inject('edgeGlobal')
-
-const edgeFirebase = inject('edgeFirebase')
-const isAiBusy = status => status === 'queued' || status === 'running'
-
-const state = reactive({
-  filter: '',
-  newDocs: {
-    sites: {
-      name: { bindings: { 'field-type': 'text', 'label': 'Name', 'helper': 'Name' }, cols: '12', value: '' },
-    },
-  },
-})
-
-const schemas = {
-  sites: toTypedSchema(z.object({
-    name: z.string({
-      required_error: 'Name is required',
-    }).min(1, { message: 'Name is required' }),
-  })),
-}
-
-const collection = computed(() => {
-  if (route.params.collection) {
-    return route.params.collection
-  }
-  return ''
-})
-const docId = computed(() => {
-  if (route.params.docId) {
-    return route.params.docId
-  }
-  return ''
-})
-definePageMeta({
-  middleware: 'auth',
-})
-
-onBeforeMount(() => {
-  // edgeGlobal.showLeftPanel(true)
-})
-const isAdmin = computed(() => {
-  return edgeGlobal.isAdminGlobal(edgeFirebase).value
-})
-const queryField = computed(() => {
-  if (!isAdmin.value) {
-    return 'users'
-  }
-  return ''
-})
-
-const queryValue = computed(() => {
-  if (!isAdmin.value) {
-    return [edgeFirebase?.user?.uid]
-  }
-  return ''
-})
-
-const queryOperator = computed(() => {
-  if (!isAdmin.value) {
-    return 'array-contains-any'
-  }
-  return ''
-})
-</script>
-
-<template>
-  <div
-    v-if="edgeGlobal.edgeState.organizationDocPath"
-  >
-    <edge-dashboard :load-first-if-one="!isAdmin" :filter="state.filter" :query-field="queryField" :query-value="queryValue" :query-operator="queryOperator" collection="sites" class="flex-1 pt-0">
-      <template #list="slotProps">
-        <template v-for="item in slotProps.filtered" :key="item.docId">
-          <edge-shad-button
-            variant="text"
-            class="cursor-pointer w-full flex justify-between items-center py-2 gap-3"
-            :to="isAiBusy(item.aiBootstrapStatus) ? undefined : `/app/dashboard/sites/${item.docId}`"
-            :disabled="isAiBusy(item.aiBootstrapStatus)"
-          >
-            <div>
-              <Avatar class="cursor-pointer p-0 h-8 w-8 mr-2">
-                <FilePenLine class="h-5 w-5" />
-              </Avatar>
-            </div>
-            <div class="grow text-left">
-              <div class="text-lg">
-                {{ item.name }}
-              </div>
-              <div v-if="isAiBusy(item.aiBootstrapStatus)" class="flex items-center gap-2 text-xs text-muted-foreground">
-                <Loader2 class="h-3 w-3 animate-spin" />
-                <span>AI is preparing this site</span>
-              </div>
-            </div>
-            <div>
-              <edge-shad-button
-                size="icon"
-                class="bg-slate-600 h-7 w-7"
-                @click.stop="slotProps.deleteItem(item.docId)"
-              >
-                <Trash class="h-5 w-5" />
-              </edge-shad-button>
-            </div>
-          </edge-shad-button>
-          <Separator class="dark:bg-slate-600" />
-        </template>
-      </template>
-    </edge-dashboard>
-  </div>
-</template>