@edgedev/create-edge-app 1.1.19 → 1.1.23

package/agent.md

@@ -0,0 +1,78 @@
+# Edge App Agent Guide
+
+This project is Nuxt 3 + Vue 3, SPA mode. Follow these rules so new code matches how we already build apps.
+
+## Core stack and style
+- Use `<script setup>` with JavaScript only (no TypeScript, no Options API).
+- Components and composables from `edge/composables/**` are auto-imported; avoid manual imports unless needed.
+- Utilities: use `cn` from `@/lib/utils` for class merging, `lucide-vue-next` for icons, Tailwind for layout/styling. Keep comments minimal and useful.
+- Components under `edge/components` are globally registered with the `edge-` prefix (e.g., `edge-dashboard`, `edge-editor`, `edge-shad-button`).
+
+## Firebase and data access
+- Never import Firebase SDKs directly. All Auth/Firestore/Functions/Storage access goes through the injected `edgeFirebase` plugin (`plugins/firebase.client.ts` from `@edgedev/firebase`).
+- Get the instance via `const edgeFirebase = inject('edgeFirebase')`. Use the wrapper methods already used in the codebase: `startSnapshot/stopSnapshot`, `startUsersSnapshot`, `SearchStaticData`, `getDocData`, `storeDoc`, `changeDoc`, `removeDoc`, `runFunction`, `setUserMeta`, `addUser`, `removeUserRoles`, etc.
+- Always scope Firestore paths to the active org using `edgeGlobal.edgeState.organizationDocPath` (e.g., ``${edgeGlobal.edgeState.organizationDocPath}/things``). Organization is set via `projectSetOrg`/`edgeGlobal.setOrganization` and lives in `edgeGlobal.edgeState.currentOrganization`.
+- For reads that should live-update, start a snapshot; for static one-off queries, use `new edgeFirebase.SearchStaticData().getData(path, query, order, limit)`. Clean up snapshots when appropriate.
+- Auth state comes from `edgeFirebase.user` (see `edge/components/auth.vue` patterns). Use provided helpers instead of rolling your own auth flows.
+
+## Preferred UI building blocks
+- Lists/tables: use `edge-dashboard`. Pass `collection`, `filter`/`filters`, search/sort props, and point it at the org-scoped collection path. It handles snapshots, search, pagination, delete dialogs, and navigation to item routes.
+- Editing/creation: use `edge-editor`. Provide `collection`, `docId` (`'new'` when creating), `newDocSchema` (fields with default values), and optional `schema`/overrides. It manages working copy, validation hooks, unsaved-change guards, and redirects.
+- Surrounding layout: `pages/app.vue` already wires the sidebar, menu, and panels. Put new dashboard/edit pages under `/pages/app/dashboard/...` and keep them lean—compose existing Edge components rather than building new scaffolding.
+- Form controls: prefer the Edge shadcn wrappers in `edge/components/shad` (e.g., `edge-shad-input`, `edge-shad-select`, `edge-shad-button`) and specialized controls like `edge-g-input`, `edge-auto-file-upload`, etc., instead of raw HTML inputs.
+
+## Typical collection pattern
+```vue
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+const route = useRoute()
+
+const collection = 'things'
+const docId = computed(() => route.params.docId || 'new')
+
+const newDocSchema = {
+  name: { value: '' },
+  description: { value: '' },
+}
+</script>
+
+<template>
+  <edge-dashboard
+    v-if="!route.params.docId"
+    :collection="collection"
+    class="h-full"
+    header-class="bg-secondary"
+  />
+
+  <edge-editor
+    v-else
+    :collection="collection"
+    :doc-id="docId"
+    :new-doc-schema="newDocSchema"
+  />
+</template>
+```
+Adjust props (search, filters, pagination, save overrides) using the existing component APIs rather than reinventing logic.
+
+### Slots and layout flexibility
+- Both `edge-dashboard` and `edge-editor` expose many slots (headers, footers, actions, item rendering, etc.)—use them to build richer UI without replacing the core components. You can significantly change look/behavior via slots while keeping Edge logic intact.
+- Dashboard and editor don’t need to live on the same page; feel free to separate list/detail routes or co-locate them as needed, but always compose using the Edge components.
+- Nuxt page structure can be rearranged to meet requirements, as long as navigation/layout still leans on the shared Edge tools (sidebar/menu, shadcn components, dashboard/editor, cms pieces).
+
+## Routing, state, and menus
+- Organization-aware pages assume `edgeGlobal.edgeState.currentOrganization` is set; if you need menu items, extend `edgeGlobal.edgeState.menuItems` (see `pages/app.vue`).
+- Use `useState('auth')` and other Nuxt composables already present for global auth/route handling. Keep SSR considerations minimal (app runs client-side).
+
+## Shadcn usage
+- shadcn components live under `components/ui` and Edge-wrapped variants under `edge/components/shad`. Prefer the Edge variants to keep styling consistent and take advantage of shared props/slots.
+- Styling: stick to Tailwind utility classes alongside the Edge components; when building new components, use Tailwind + `cn` for class composition instead of custom CSS where possible.
+
+## Do/Don't
+- Do reuse Edge components (`dashboard`, `editor`, `cms` blocks, auth widgets) before adding new ones.
+- Do keep Firestore paths, queries, and role checks consistent with `edgeGlobal` helpers (`isAdminGlobal`, `getRoleName`, etc.).
+- Don’t introduce TypeScript, Options API, raw Firebase SDK calls, or ad-hoc forms/tables when an Edge component exists.
+- Don’t edit code inside the `edge` folder unless absolutely required; it is a shared repo. If a change is unavoidable, keep it generic (no project-specific hacks) and call out the suggestion instead of making the edit when possible.
+
+## Firebase Functions guidance
+- Review `functions/config.js`, `functions/edgeFirebase.js`, and `functions/cms.js` to mirror established patterns, but do not edit those files.
+- When adding new cloud functions, create a new JS file under `functions/` and export handlers using the shared imports from `config.js`. Wire it up by requiring it in `functions/index.js` (same pattern as `stripe.js`), instead of modifying restricted files.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-app",
-  "version": "1.1.19",
+  "version": "1.1.23",
   "description": "Create Edge Starter App",
   "bin": {
     "create-edge-app": "./bin/cli.js"
@@ -22,6 +22,7 @@
     "@capacitor/push-notifications": "5.1.0",
     "@chenfengyuan/vue-number-input": "2",
     "@edgedev/firebase": "latest",
+    "@edgedev/template-engine": "^0.1.12",
     "@guolao/vue-monaco-editor": "^1.5.5",
     "@tiptap/extension-image": "^2.11.5",
     "@tiptap/extension-text-style": "^2.11.5",

package/pages/app/dashboard/blocks/[block].vue

@@ -0,0 +1,38 @@
+<script setup>
+const route = useRoute()
+const state = reactive({
+  mounted: false,
+  head: null,
+})
+definePageMeta({
+  middleware: 'auth',
+})
+
+const blockId = computed(() => {
+  if (route.params.block) {
+    return route.params.block
+  }
+  return ''
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+
+useHead(() => (state.head || {}))
+
+const setHead = (newHead) => {
+  state.head = newHead
+}
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-block-editor
+      :block-id="blockId"
+      @head="setHead"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,347 @@
+<script setup>
+const edgeFirebase = inject('edgeFirebase')
+const state = reactive({
+  filter: '',
+  mounted: false,
+  picksFilter: [],
+  themesFilter: [],
+})
+
+const previewState = reactive({
+  loaded: [],
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+const rawInitBlockFiles = import.meta.glob('../../../../edge/components/cms/init_blocks/*.html', {
+  as: 'raw',
+  eager: true,
+})
+
+const INITIAL_BLOCKS = Object.entries(rawInitBlockFiles).map(([path, content]) => {
+  const fileName = path.split('/').pop() || ''
+  const baseName = fileName.replace(/\.html$/i, '')
+  const formattedName = baseName
+    .split('_')
+    .filter(Boolean)
+    .map(segment => segment.charAt(0).toUpperCase() + segment.slice(1))
+    .join(' ')
+  return {
+    docId: baseName,
+    name: formattedName,
+    content,
+  }
+})
+
+const router = useRouter()
+
+const seedInitialBlocks = async () => {
+  console.log('Seeding initial blocks...')
+  console.log(`Found ${INITIAL_BLOCKS.length} initial blocks to seed.`)
+  if (!INITIAL_BLOCKS.length)
+    return 0
+
+  const organizationPath = edgeGlobal.edgeState.organizationDocPath
+  if (!organizationPath)
+    return 0
+
+  const collectionPath = `${organizationPath}/blocks`
+  let created = 0
+
+  for (const block of INITIAL_BLOCKS) {
+    if (!block.docId)
+      continue
+    try {
+      await edgeFirebase.storeDoc(collectionPath, {
+        docId: block.docId,
+        name: block.name,
+        content: block.content,
+        tags: [],
+        themes: [],
+        synced: false,
+        version: 1,
+      })
+      created++
+      console.log(`Seeded block "${block.docId}"`)
+    }
+    catch (error) {
+      console.error(`Failed to seed block "${block.docId}"`, error)
+    }
+  }
+
+  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)
+  return theme?.name || 'Unknown'
+}
+
+const loadingRender = (content) => {
+  const safeContent = typeof content === 'string' ? 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 = () => {
+  if (typeof localStorage === 'undefined')
+    return
+  try {
+    const raw = localStorage.getItem(FILTER_STORAGE_KEY)
+    if (!raw)
+      return
+    const parsed = JSON.parse(raw)
+    state.filter = parsed.filter ?? ''
+    state.picksFilter = Array.isArray(parsed.picksFilter) ? parsed.picksFilter : []
+    state.themesFilter = Array.isArray(parsed.themesFilter) ? parsed.themesFilter : []
+  }
+  catch (err) {
+    console.warn('Failed to restore block filters', err)
+  }
+}
+
+const persistFilters = () => {
+  if (typeof localStorage === 'undefined')
+    return
+  const payload = {
+    filter: state.filter,
+    picksFilter: state.picksFilter,
+    themesFilter: state.themesFilter,
+  }
+  localStorage.setItem(FILTER_STORAGE_KEY, JSON.stringify(payload))
+}
+
+watch(
+  () => [state.filter, state.picksFilter, state.themesFilter],
+  persistFilters,
+  { deep: true },
+)
+
+const tagOptions = computed(() => {
+  const tagsSet = new Set()
+  const blocks = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/blocks`] || {}
+  Object.values(blocks).forEach((block) => {
+    if (Array.isArray(block.tags))
+      block.tags.forEach(tag => tagsSet.add(tag))
+  })
+  return Array.from(tagsSet).sort((a, b) => a.localeCompare(b)).map(tag => ({ name: tag, title: tag }))
+})
+
+const themeOptions = computed(() => {
+  const themes = edgeFirebase.data?.[`organizations/${edgeGlobal.edgeState.currentOrganization}/themes`] || {}
+  return Object.entries(themes)
+    .map(([id, theme]) => ({ name: id, title: theme.name || id }))
+    .sort((a, b) => a.title.localeCompare(b.title))
+})
+
+const listFilters = computed(() => {
+  const filters = []
+  if (state.picksFilter.length)
+    filters.push({ filterFields: ['tags'], value: state.picksFilter })
+  if (state.themesFilter.length)
+    filters.push({ filterFields: ['themes'], value: state.themesFilter })
+  return filters
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-dashboard
+      :filter="state.filter"
+      :filters="listFilters"
+      collection="blocks"
+      class="pt-0 flex-1"
+    >
+      <template #header-start="slotProps">
+        <component :is="slotProps.icon" class="mr-2" />
+        Blocks
+        <edge-shad-button
+          v-if="slotProps.recordCount === 0"
+          variant="outline"
+          class="ml-4 h-8 text-xs"
+          @click="seedInitialBlocks"
+        >
+          Seed Blocks
+        </edge-shad-button>
+      </template>
+      <template #header-center>
+        <edge-shad-form class="w-full">
+          <div class="w-full px-4 md:px-6 pb-2 flex flex-col gap-3 md:flex-row md:items-center">
+            <div class="grow">
+              <edge-shad-input
+                v-model="state.filter"
+                name="filter"
+                placeholder="Search blocks..."
+                class="w-full"
+              />
+            </div>
+            <div>
+              <edge-shad-select-tags
+                v-model="state.picksFilter"
+                :items="tagOptions"
+                name="tags"
+                placeholder="Filter tags"
+              />
+            </div>
+            <div>
+              <edge-shad-select-tags
+                v-model="state.themesFilter"
+                :items="themeOptions"
+                name="themes"
+                placeholder="Filter themes"
+              />
+            </div>
+          </div>
+        </edge-shad-form>
+      </template>
+      <template #list="slotProps">
+        <div
+          class="grid gap-4 pt-4 w-full"
+          style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));"
+        >
+          <div
+            v-for="item in slotProps.filtered"
+            :key="item.docId"
+            role="button"
+            tabindex="0"
+            class="w-full h-full"
+            @click="router.push(`/app/dashboard/blocks/${item.docId}`)"
+            @keyup.enter="router.push(`/app/dashboard/blocks/${item.docId}`)"
+          >
+            <Card class="h-full cursor-pointer border border-white/5 bg-gradient-to-br from-slate-950/85 via-slate-950/65 to-slate-900/60 hover:border-primary/50 hover:shadow-[0_22px_55px_-24px_rgba(0,0,0,0.7)] transition">
+              <CardContent class="flex flex-col gap-1 p-4 sm:p-5">
+                <div class="flex items-start justify-between gap-3">
+                  <p class="text-lg font-semibold leading-snug line-clamp-2 text-white">
+                    {{ item.name }}
+                  </p>
+                  <edge-shad-button
+                    size="icon"
+                    variant="ghost"
+                    class="h-8 w-8 text-white/80 hover:text-white hover:bg-white/10"
+                    @click.stop="slotProps.deleteItem(item.docId)"
+                  >
+                    <Trash class="h-4 w-4" />
+                  </edge-shad-button>
+                </div>
+                <div v-if="item.content" class="block-preview">
+                  <div class="scale-wrapper">
+                    <div class="scale-inner scale p-4">
+                      <edge-cms-block-render
+                        :content="loadingRender(item.content)"
+                        :values="item.values"
+                        :meta="item.meta"
+                      />
+                    </div>
+                  </div>
+                  <div class="preview-overlay" />
+                </div>
+                <div v-else class="block-preview-empty">
+                  Preview unavailable for this block.
+                </div>
+                <div class="flex flex-wrap items-center gap-1 text-[11px] text-slate-300 uppercase tracking-wide overflow-hidden">
+                  <edge-chip
+                    v-for="tag in item.tags?.slice(0, 3) ?? []"
+                    :key="tag"
+                    class="bg-primary/40 text-white px-2 py-0.5 text-[10px]"
+                  >
+                    {{ tag }}
+                  </edge-chip>
+                  <span v-if="item.tags?.length > 3" class="text-white/60">+{{ item.tags.length - 3 }}</span>
+                  <edge-chip
+                    v-for="theme in item.themes?.slice(0, 2) ?? []"
+                    :key="theme"
+                    class="bg-slate-800 text-white px-2 py-0.5 text-[10px]"
+                  >
+                    {{ getThemeFromId(theme) }}
+                  </edge-chip>
+                  <span v-if="item.themes?.length > 2" class="text-white/60">+{{ item.themes.length - 2 }}</span>
+                  <span
+                    v-if="!(item.tags?.length) && !(item.themes?.length)"
+                    class="text-slate-500 lowercase"
+                  >
+                    none
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </template>
+    </edge-dashboard>
+  </div>
+</template>
+
+<style scoped>
+.block-preview {
+  position: relative;
+  height: 220px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background:
+    radial-gradient(140% 120% at 15% 15%, rgba(96, 165, 250, 0.08), transparent),
+    radial-gradient(120% 120% at 85% 0%, rgba(168, 85, 247, 0.07), transparent),
+    linear-gradient(145deg, rgba(10, 14, 26, 0.95), rgba(17, 24, 39, 0.7));
+  overflow: hidden;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.02),
+    0 18px 38px rgba(0, 0, 0, 0.35);
+}
+
+.block-preview-empty {
+  height: 220px;
+  border-radius: 14px;
+  border: 1px dashed rgba(255, 255, 255, 0.08);
+  background: linear-gradient(135deg, rgba(10, 14, 26, 0.65), rgba(17, 24, 39, 0.5));
+  color: rgba(255, 255, 255, 0.6);
+  display: grid;
+  place-items: center;
+  font-size: 13px;
+  letter-spacing: 0.01em;
+}
+
+.preview-overlay {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 20%, rgba(15, 23, 42, 0.35) 100%);
+}
+
+.scale-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+.scale-inner {
+  transform-origin: top left;
+  display: inline-block;
+  min-width: 100%;
+}
+
+.scale {
+  transform: scale(0.25);
+  width: 400%;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<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-media-manager />
+  </div>
+</template>
+
+<style>
+
+</style>

package/pages/app/dashboard/sites/[site]/[[page]].vue

@@ -0,0 +1,50 @@
+<script setup>
+const route = useRoute()
+
+// const edgeGlobal = inject('edgeGlobal')
+
+const state = reactive({
+  mounted: false,
+  head: null,
+})
+
+const page = computed(() => {
+  if (route.params?.page) {
+    return route.params.page
+  }
+  return ''
+})
+
+const site = computed(() => {
+  if (route.params?.site) {
+    return route.params.site
+  }
+  return ''
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+
+useHead(() => (state.head || {}))
+
+const setHead = (newHead) => {
+  state.head = newHead
+}
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-page
+      :site="site"
+      :page="page"
+      @head="setHead"
+    />
+  </div>
+</template>

package/pages/app/dashboard/sites/[site].vue

@@ -0,0 +1,42 @@
+<script setup>
+const route = useRoute()
+
+// const edgeGlobal = inject('edgeGlobal')
+
+const state = reactive({
+  mounted: false,
+})
+
+const page = computed(() => {
+  if (route.params?.page) {
+    return route.params.page
+  }
+  return ''
+})
+
+const site = computed(() => {
+  if (route.params?.site) {
+    return route.params.site
+  }
+  return ''
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-site
+      :site="site"
+      :page="page"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,114 @@
+<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>

package/pages/app/dashboard/templates/[page].vue

@@ -0,0 +1,44 @@
+<script setup>
+const route = useRoute()
+
+const state = reactive({
+  mounted: false,
+  head: null,
+})
+
+const page = computed(() => {
+  if (route.params?.page) {
+    return route.params.page
+  }
+  return ''
+})
+
+const site = computed(() => 'templates')
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+
+useHead(() => (state.head || {}))
+
+const setHead = (newHead) => {
+  state.head = newHead
+}
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-page
+      :site="site"
+      :page="page"
+      :is-template-site="true"
+      @head="setHead"
+    />
+  </div>
+</template>

package/pages/app/dashboard/templates.vue

@@ -0,0 +1,35 @@
+<script setup>
+const route = useRoute()
+
+// const edgeGlobal = inject('edgeGlobal')
+
+const state = reactive({
+  mounted: false,
+})
+
+const page = computed(() => {
+  if (route.params?.page) {
+    return route.params.page
+  }
+  return ''
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+onMounted(() => {
+  state.mounted = true
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-site
+      site="templates"
+      :page="page"
+    />
+  </div>
+</template>

package/pages/app/dashboard/themes/[theme].vue

@@ -0,0 +1,37 @@
+<script setup>
+const route = useRoute()
+const state = reactive({
+  mounted: false,
+})
+definePageMeta({
+  middleware: 'auth',
+  head: null,
+})
+
+const themeId = computed(() => {
+  if (route.params.theme) {
+    return route.params.theme
+  }
+  return ''
+})
+
+useHead(() => (state.head || {}))
+
+onMounted(() => {
+  state.mounted = true
+})
+const setHead = (newHead) => {
+  state.head = newHead
+}
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath && state.mounted"
+  >
+    <edge-cms-theme-editor
+      :theme-id="themeId"
+      @head="setHead"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+<script setup>
+const state = reactive({
+  filter: '',
+})
+
+definePageMeta({
+  middleware: 'auth',
+})
+</script>
+
+<template>
+  <div
+    v-if="edgeGlobal.edgeState.organizationDocPath"
+  >
+    <edge-dashboard :filter="state.filter" collection="themes" class="pt-0 flex-1">
+      <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="`/app/dashboard/themes/${item.docId}`">
+            <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>
+            <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>

package/pages/app.vue

@@ -37,6 +37,44 @@ const menuBuilder = () => {
       icon: 'Package',
       devOnly: true,
     },
+    {
+      title: 'Sites',
+      to: '/app/dashboard/sites',
+      icon: 'LayoutPanelTop',
+      devOnly: true,
+      submenu: [
+        {
+          title: 'Sites',
+          to: '/app/dashboard/sites',
+          icon: 'LayoutPanelTop',
+          devOnly: true,
+        },
+        {
+          title: 'Media',
+          to: '/app/dashboard/media',
+          icon: 'Image',
+          devOnly: true,
+        },
+        {
+          title: 'Blocks',
+          to: '/app/dashboard/blocks',
+          icon: 'Blocks',
+          devOnly: true,
+        },
+        {
+          title: 'Templates',
+          to: '/app/dashboard/templates',
+          icon: 'LayoutList',
+          devOnly: true,
+        },
+        {
+          title: 'Themes',
+          to: '/app/dashboard/themes',
+          icon: 'Paintbrush',
+          devOnly: true,
+        },
+      ],
+    },
     {
       title: 'Settings',
       to: '/app/account/my-profile',

package/plugins/icons.ts

@@ -1,11 +1,19 @@
 import {
   AlertCircle,
+  AlignHorizontalJustifyStart,
   ArrowLeft,
   ArrowRight,
+  Award,
+  BadgeCheck,
+  Blocks,
+  Bold,
   BookImage,
+  BookOpen,
+  Bot,
   Box,
   Braces,
   Brackets,
+  Building,
   CalendarIcon,
   Check,
   ChevronDown,
@@ -16,34 +24,72 @@ import {
   ChevronUp,
   ChevronsUpDown,
   CircleUser,
+  CircleX,
+  CloudUpload,
+  Code,
   Copy,
+  Download,
   Eye,
   EyeOff,
+  File,
+  FileCode2,
+  FileImage,
   FilePenLine,
+  FilePlus2,
+  FileSpreadsheet,
+  FileText,
+  FolderOpen,
+  FolderTree,
   Fullscreen,
+  Globe,
   Grip,
   Group,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
   Hourglass,
   Image,
-  Info, LayoutDashboard,
+  Inbox,
+  Info,
+  Italic,
+  Layers3,
+  LayoutDashboard,
+  LayoutList,
+  LayoutPanelTop,
+  Link,
   List,
+  ListOrdered,
   ListPlus,
   Loader2,
   LogOut,
+  Menu,
   MenuSquare,
   MoreHorizontal,
   Newspaper,
   Package,
+  Paintbrush,
   PauseCircle,
   Pencil,
   PlusIcon,
+  Printer,
+  Save,
   Settings,
   Settings2,
+  SquareCode,
+  StickyNote,
+  Store,
+  Strikethrough,
+  TextQuote,
   Trash,
   TrashIcon,
+  TriangleAlert,
+  Underline,
   Upload,
   User,
+  UserCheck,
   Users,
+  View,
   X,
   ZoomIn,
 } from 'lucide-vue-next'
@@ -97,4 +143,49 @@ export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component('ChevronRightCircle', ChevronRightCircle)
   nuxtApp.vueApp.component('Fullscreen', Fullscreen)
   nuxtApp.vueApp.component('MenuSquare', MenuSquare)
+  nuxtApp.vueApp.component('Blocks', Blocks)
+  nuxtApp.vueApp.component('LayoutPanelTop', LayoutPanelTop)
+  nuxtApp.vueApp.component('Building', Building)
+  nuxtApp.vueApp.component('Store', Store)
+  nuxtApp.vueApp.component('UserCheck', UserCheck)
+  nuxtApp.vueApp.component('Award', Award)
+  nuxtApp.vueApp.component('BadgeCheck', BadgeCheck)
+  nuxtApp.vueApp.component('BookOpen', BookOpen)
+  nuxtApp.vueApp.component('AlignHorizontalJustifyStart', AlignHorizontalJustifyStart)
+  nuxtApp.vueApp.component('Bold', Bold)
+  nuxtApp.vueApp.component('Bot', Bot)
+  nuxtApp.vueApp.component('CircleX', CircleX)
+  nuxtApp.vueApp.component('CloudUpload', CloudUpload)
+  nuxtApp.vueApp.component('Code', Code)
+  nuxtApp.vueApp.component('Download', Download)
+  nuxtApp.vueApp.component('File', File)
+  nuxtApp.vueApp.component('FileCode2', FileCode2)
+  nuxtApp.vueApp.component('FileImage', FileImage)
+  nuxtApp.vueApp.component('FilePlus2', FilePlus2)
+  nuxtApp.vueApp.component('FileSpreadsheet', FileSpreadsheet)
+  nuxtApp.vueApp.component('FileText', FileText)
+  nuxtApp.vueApp.component('FolderOpen', FolderOpen)
+  nuxtApp.vueApp.component('FolderTree', FolderTree)
+  nuxtApp.vueApp.component('Globe', Globe)
+  nuxtApp.vueApp.component('Heading1', Heading1)
+  nuxtApp.vueApp.component('Heading2', Heading2)
+  nuxtApp.vueApp.component('Heading3', Heading3)
+  nuxtApp.vueApp.component('Heading4', Heading4)
+  nuxtApp.vueApp.component('Inbox', Inbox)
+  nuxtApp.vueApp.component('Italic', Italic)
+  nuxtApp.vueApp.component('Layers3', Layers3)
+  nuxtApp.vueApp.component('LayoutList', LayoutList)
+  nuxtApp.vueApp.component('Link', Link)
+  nuxtApp.vueApp.component('ListOrdered', ListOrdered)
+  nuxtApp.vueApp.component('Menu', Menu)
+  nuxtApp.vueApp.component('Printer', Printer)
+  nuxtApp.vueApp.component('SquareCode', SquareCode)
+  nuxtApp.vueApp.component('StickyNote', StickyNote)
+  nuxtApp.vueApp.component('Strikethrough', Strikethrough)
+  nuxtApp.vueApp.component('TextQuote', TextQuote)
+  nuxtApp.vueApp.component('TriangleAlert', TriangleAlert)
+  nuxtApp.vueApp.component('Underline', Underline)
+  nuxtApp.vueApp.component('View', View)
+  nuxtApp.vueApp.component('Save', Save)
+  nuxtApp.vueApp.component('Paintbrush', Paintbrush)
 })

package/plugins/monacoEditor.ts

@@ -0,0 +1,36 @@
+import { install as VueMonacoEditorPlugin, loader } from '@guolao/vue-monaco-editor'
+import * as monaco from 'monaco-editor'
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
+import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
+import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
+import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+import { defineNuxtPlugin } from '#app'
+
+self.MonacoEnvironment = {
+  getWorker(_, label) {
+    if (label === 'json') {
+      return new JsonWorker()
+    }
+    if (label === 'css' || label === 'scss' || label === 'less') {
+      return new CssWorker()
+    }
+    if (label === 'html' || label === 'handlebars' || label === 'razor') {
+      return new HtmlWorker()
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new TsWorker()
+    }
+    return new EditorWorker()
+  },
+}
+
+loader.config({ monaco })
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueMonacoEditorPlugin, {
+    paths: {
+      vs: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.43.0/min/vs',
+    },
+  })
+})