@edgedev/create-edge-app 1.2.33 → 1.2.34

package/edge/components/cms/blockEditor.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { HelpCircle, Maximize2, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
+import { Download, HelpCircle, Maximize2, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
 import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 const props = defineProps({
@@ -12,20 +12,12 @@ const props = defineProps({
 const emit = defineEmits(['head'])
 
 const edgeFirebase = inject('edgeFirebase')
-
-const route = useRoute()
+const { blocks: blockNewDocSchema } = useCmsNewDocs()
 
 const state = reactive({
   filter: '',
   newDocs: {
-    blocks: {
-      name: { value: '' },
-      content: { value: '' },
-      tags: { value: [] },
-      themes: { value: [] },
-      synced: { value: false },
-      version: 1,
-    },
+    blocks: blockNewDocSchema.value,
   },
   mounted: false,
   workingDoc: {},
@@ -40,6 +32,8 @@ const state = reactive({
   seedingInitialBlocks: false,
   previewViewport: 'full',
   previewBlock: null,
+  editorWorkingDoc: null,
+  themeDefaultAppliedForBlockId: '',
 })
 
 const blockSchema = toTypedSchema(z.object({
@@ -54,6 +48,14 @@ const previewViewportOptions = [
   { id: 'medium', label: 'Medium', width: '992px', icon: Tablet },
   { id: 'mobile', label: 'Mobile', width: '420px', icon: Smartphone },
 ]
+const previewTypeOptions = [
+  { name: 'light', title: 'Light Preview' },
+  { name: 'dark', title: 'Dark Preview' },
+]
+
+const normalizePreviewType = (value) => {
+  return value === 'dark' ? 'dark' : 'light'
+}
 
 const selectedPreviewViewport = computed(() => previewViewportOptions.find(option => option.id === state.previewViewport) || previewViewportOptions[0])
 
@@ -79,6 +81,19 @@ const previewViewportMode = computed(() => {
   return state.previewViewport
 })
 
+const previewSurfaceClass = computed(() => {
+  const previewType = normalizePreviewType(state.previewBlock?.previewType)
+  return previewType === 'light'
+    ? 'bg-white text-black'
+    : 'bg-neutral-950 text-neutral-50'
+})
+
+const previewCanvasClass = computed(() => {
+  const content = String(state.previewBlock?.content || '')
+  const hasFixedContent = /\bfixed\b/.test(content)
+  return hasFixedContent ? 'min-h-[calc(100vh-360px)]' : 'min-h-[88px]'
+})
+
 onMounted(() => {
   // state.mounted = true
 })
@@ -92,7 +107,7 @@ const PLACEHOLDERS = {
     'Consectetur adipiscing elit.',
     'Sed do eiusmod tempor incididunt.',
   ],
-  image: '/images/filler.png',
+  image: 'https://imagedelivery.net/h7EjKG0X9kOxmLp41mxOng/f1f7f610-dfa9-4011-08a3-7a98d95e7500/thumbnail',
 }
 
 const contentEditorRef = ref(null)
@@ -172,6 +187,14 @@ function insertBlockContentSnippet(snippet) {
   editor.insertSnippet(snippet)
 }
 
+const updateWorkingPreviewType = (nextValue) => {
+  const normalized = normalizePreviewType(nextValue)
+  if (state.editorWorkingDoc)
+    state.editorWorkingDoc.previewType = normalized
+  if (state.previewBlock)
+    state.previewBlock.previewType = normalized
+}
+
 function normalizeConfigLiteral(str) {
   // ensure keys are quoted: { title: "x", field: "y" } -> { "title": "x", "field": "y" }
   return str
@@ -451,6 +474,7 @@ const buildPreviewBlock = (workingDoc, parsed) => {
     id: state.previewBlock?.id || 'preview',
     blockId: props.blockId,
     name: workingDoc?.name || state.previewBlock?.name || '',
+    previewType: normalizePreviewType(workingDoc?.previewType),
     content,
     values: nextValues,
     meta: nextMeta,
@@ -459,15 +483,32 @@ const buildPreviewBlock = (workingDoc, parsed) => {
 }
 
 const theme = computed(() => {
-  const theme = edgeGlobal.edgeState.blockEditorTheme || ''
-  let themeContents = null
-  if (theme) {
-    themeContents = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`]?.[theme]?.theme || null
+  const selectedThemeId = String(edgeGlobal.edgeState.blockEditorTheme || '').trim()
+  if (!selectedThemeId)
+    return null
+  const themeDoc = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`]?.[selectedThemeId] || null
+  const themeContents = themeDoc?.theme || null
+  if (!themeContents)
+    return null
+  const extraCSS = typeof themeDoc?.extraCSS === 'string' ? themeDoc.extraCSS : ''
+  if (typeof themeContents === 'object' && !Array.isArray(themeContents))
+    return { ...themeContents, extraCSS }
+  try {
+    const parsedTheme = JSON.parse(themeContents)
+    if (!parsedTheme || typeof parsedTheme !== 'object' || Array.isArray(parsedTheme))
+      return null
+    return { ...parsedTheme, extraCSS }
   }
-  if (themeContents) {
-    return JSON.parse(themeContents)
+  catch {
+    return null
   }
-  return null
+})
+
+const previewThemeRenderKey = computed(() => {
+  const themeId = String(edgeGlobal.edgeState.blockEditorTheme || 'no-theme')
+  const siteId = String(edgeGlobal.edgeState.blockEditorSite || 'no-site')
+  const previewType = normalizePreviewType(state.previewBlock?.previewType)
+  return `${themeId}:${siteId}:${state.previewViewport}:${previewType}`
 })
 
 const headObject = computed(() => {
@@ -485,6 +526,7 @@ watch(headObject, (newHeadElements) => {
 }, { immediate: true, deep: true })
 
 const editorDocUpdates = (workingDoc) => {
+  state.editorWorkingDoc = workingDoc || null
   const parsed = blockModel(workingDoc.content)
   state.workingDoc = parsed
   state.previewBlock = buildPreviewBlock(workingDoc, parsed)
@@ -510,11 +552,51 @@ const themes = computed(() => {
   return Object.values(edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/themes`] || {})
 })
 
-watch (themes, async (newThemes) => {
-  state.loading = true
-  if (!edgeGlobal.edgeState.blockEditorTheme && newThemes.length > 0) {
-    edgeGlobal.edgeState.blockEditorTheme = newThemes[0].docId
+const availableThemeIds = computed(() => {
+  return themes.value
+    .map(themeDoc => String(themeDoc?.docId || '').trim())
+    .filter(Boolean)
+})
+
+const currentBlockAllowedThemeIds = computed(() => {
+  const currentBlockDoc = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/blocks`]?.[props.blockId]
+  if (!Array.isArray(currentBlockDoc?.themes))
+    return []
+  return currentBlockDoc.themes.map(themeId => String(themeId || '').trim()).filter(Boolean)
+})
+
+const preferredThemeDefaultForBlock = computed(() => {
+  const firstAllowedAvailable = currentBlockAllowedThemeIds.value.find(themeId => availableThemeIds.value.includes(themeId))
+  if (firstAllowedAvailable)
+    return firstAllowedAvailable
+  return availableThemeIds.value[0] || ''
+})
+
+const applyThemeDefaultForBlock = () => {
+  const blockId = String(props.blockId || '').trim()
+  if (!blockId)
+    return
+  if (state.themeDefaultAppliedForBlockId === blockId)
+    return
+
+  const preferredThemeId = preferredThemeDefaultForBlock.value
+  if (!preferredThemeId) {
+    if (!availableThemeIds.value.length)
+      edgeGlobal.edgeState.blockEditorTheme = ''
+    return
   }
+
+  edgeGlobal.edgeState.blockEditorTheme = preferredThemeId
+  state.themeDefaultAppliedForBlockId = blockId
+}
+
+watch(() => props.blockId, () => {
+  state.themeDefaultAppliedForBlockId = ''
+}, { immediate: true })
+
+watch([availableThemeIds, currentBlockAllowedThemeIds, () => props.blockId], async () => {
+  state.loading = true
+  applyThemeDefaultForBlock()
   await nextTick()
   state.loading = false
 }, { immediate: true, deep: true })
@@ -567,6 +649,59 @@ const getTagsFromBlocks = computed(() => {
   // Always prepend it
   return [{ name: 'Quick Picks', title: 'Quick Picks' }, ...filtered]
 })
+
+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 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 getBlockDocDefaults = () => getDocDefaultsFromSchema(blockNewDocSchema.value || {})
+
+const notifySuccess = (message) => {
+  edgeFirebase?.toast?.success?.(message)
+}
+
+const notifyError = (message) => {
+  edgeFirebase?.toast?.error?.(message)
+}
+
+const exportCurrentBlock = () => {
+  const doc = blocks.value?.[props.blockId]
+  if (!doc || !doc.docId) {
+    notifyError('Save this block before exporting.')
+    return
+  }
+  const exportPayload = { ...getBlockDocDefaults(), ...doc }
+  downloadJsonFile(exportPayload, `block-${doc.docId}.json`)
+  notifySuccess(`Exported block "${doc.docId}".`)
+}
 </script>
 
 <template>
@@ -578,7 +713,9 @@ const getTagsFromBlocks = computed(() => {
       :doc-id="props.blockId"
       :schema="blockSchema"
       :new-doc-schema="state.newDocs.blocks"
-      class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none"
+      header-class="py-2 bg-secondary text-foreground rounded-none sticky top-0 border"
+      class="w-full mx-auto flex-1 bg-transparent flex flex-col border-none shadow-none pt-0 px-0"
+      card-content-class="px-0"
       :show-footer="false"
       :no-close-after-save="true"
       :working-doc-overrides="state.workingDoc"
@@ -589,29 +726,52 @@ const getTagsFromBlocks = computed(() => {
         {{ slotProps.title }}
       </template>
       <template #header-center>
-        <div class="w-full flex gap-1 px-4">
-          <div class="w-1/2">
+        <div class="w-full flex gap-2 px-4 items-center">
+          <div class="flex-1">
             <edge-shad-select
               v-if="!state.loading"
               v-model="edgeGlobal.edgeState.blockEditorTheme"
-              label="Theme Viewer Select"
               name="theme"
               :items="themes.map(t => ({ title: t.name, name: t.docId }))"
               placeholder="Theme Viewer Select"
               class="w-full"
             />
           </div>
-          <div class="w-1/2">
+          <div class="flex-1">
             <edge-shad-select
               v-if="!state.loading"
               v-model="edgeGlobal.edgeState.blockEditorSite"
-              label="Site"
               name="site"
               :items="sites.map(s => ({ title: s.name, name: s.docId }))"
               placeholder="Select Site"
               class="w-full"
             />
           </div>
+          <div class="flex-1">
+            <edge-shad-select
+              v-if="!state.loading"
+              :model-value="state.editorWorkingDoc?.previewType || 'light'"
+              name="previewType"
+              :items="previewTypeOptions"
+              placeholder="Preview Surface"
+              class="w-full"
+              @update:model-value="updateWorkingPreviewType($event)"
+            />
+          </div>
+          <div class="flex items-center gap-2">
+            <edge-shad-button
+              type="button"
+              size="icon"
+              variant="outline"
+              class="h-9 w-9"
+              :disabled="props.blockId === 'new' || !blocks?.[props.blockId]"
+              title="Export Block"
+              aria-label="Export Block"
+              @click="exportCurrentBlock"
+            >
+              <Download class="h-4 w-4" />
+            </edge-shad-button>
+          </div>
         </div>
       </template>
       <template #main="slotProps">
@@ -659,55 +819,53 @@ const getTagsFromBlocks = computed(() => {
           </div>
           <div class="flex gap-4">
             <div class="w-1/2">
-              <div class="flex gap-2">
-                <div class="w-2/12 mb-3 rounded-md border border-slate-200 bg-white/80 p-3 shadow-sm shadow-slate-200/60 dark:border-slate-800 dark:bg-slate-900/60">
-                  <div class="flex flex-col gap-2">
-                    <edge-shad-button
-                      type="button"
-                      size="sm"
-                      variant="secondary"
-                      class="w-full h-8 px-2 text-[11px] uppercase tracking-wide gap-2"
-                      @click="state.helpOpen = true"
-                    >
-                      <HelpCircle class="w-4 h-4" />
-                      Block Help
-                    </edge-shad-button>
-                    <div class="text-xs font-semibold uppercase tracking-wide text-slate-600 dark:text-slate-300 whitespace-nowrap">
-                      Dynamic Content
-                    </div>
-                  </div>
-                  <div class="mt-2 flex flex-wrap gap-2">
-                    <edge-tooltip
-                      v-for="snippet in BLOCK_CONTENT_SNIPPETS"
-                      :key="snippet.label"
-                    >
+              <edge-cms-code-editor
+                ref="contentEditorRef"
+                v-model="slotProps.workingDoc.content"
+                title="Block Content"
+                language="handlebars"
+                name="content"
+                :enable-formatting="false"
+                height="calc(100vh - 300px)"
+                class="mb-4 flex-1"
+                @line-click="payload => handleEditorLineClick(payload, slotProps.workingDoc)"
+              >
+                <template #end-actions>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger as-child>
                       <edge-shad-button
+                        type="button"
                         size="sm"
                         variant="outline"
-                        class="text-xs w-full"
-                        @click="insertBlockContentSnippet(snippet.snippet)"
+                        class="h-8 px-2 text-[11px] uppercase tracking-wide"
                       >
-                        {{ snippet.label }}
+                        Dynamic Content
                       </edge-shad-button>
-                      <template #content>
-                        <pre class="max-w-[320px] whitespace-pre-wrap break-words text-left text-xs font-mono leading-tight">{{ snippet.snippet }}</pre>
-                      </template>
-                    </edge-tooltip>
-                  </div>
-                </div>
-                <div class="w-10/12">
-                  <edge-cms-code-editor
-                    ref="contentEditorRef"
-                    v-model="slotProps.workingDoc.content"
-                    title="Block Content"
-                    language="html"
-                    name="content"
-                    height="calc(100vh - 300px)"
-                    class="mb-4 flex-1"
-                    @line-click="payload => handleEditorLineClick(payload, slotProps.workingDoc)"
-                  />
-                </div>
-              </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" class="w-72">
+                      <DropdownMenuItem
+                        v-for="snippet in BLOCK_CONTENT_SNIPPETS"
+                        :key="snippet.label"
+                        class="cursor-pointer flex-col items-start gap-0.5"
+                        @click="insertBlockContentSnippet(snippet.snippet)"
+                      >
+                        <span class="text-sm font-medium">{{ snippet.label }}</span>
+                        <span class="text-xs text-muted-foreground whitespace-normal">{{ snippet.description }}</span>
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                  <edge-shad-button
+                    type="button"
+                    size="sm"
+                    variant="secondary"
+                    class="h-8 px-2 text-[11px] uppercase tracking-wide gap-2"
+                    @click="state.helpOpen = true"
+                  >
+                    <HelpCircle class="w-4 h-4" />
+                    Block Help
+                  </edge-shad-button>
+                </template>
+              </edge-cms-code-editor>
             </div>
             <div class="w-1/2 space-y-2">
               <div class="flex items-center justify-between">
@@ -728,19 +886,24 @@ const getTagsFromBlocks = computed(() => {
                 </div>
               </div>
               <div
-                class="w-full mx-auto bg-card border border-border rounded-lg shadow-sm md:shadow-md"
+                class="w-full mx-auto rounded-none overflow-visible"
                 :style="previewViewportStyle"
               >
-                <edge-cms-block
-                  v-if="state.previewBlock"
-                  v-model="state.previewBlock"
-                  :site-id="edgeGlobal.edgeState.blockEditorSite"
-                  :theme="theme"
-                  :edit-mode="true"
-                  :viewport-mode="previewViewportMode"
-                  :block-id="state.previewBlock.id"
-                  @delete="ignorePreviewDelete"
-                />
+                <div class="relative overflow-visible rounded-none" :class="[previewSurfaceClass, previewCanvasClass]" style="transform: translateZ(0);">
+                  <edge-cms-block
+                    v-if="state.previewBlock"
+                    :key="previewThemeRenderKey"
+                    v-model="state.previewBlock"
+                    :site-id="edgeGlobal.edgeState.blockEditorSite"
+                    :theme="theme"
+                    :edit-mode="true"
+                    :contain-fixed="true"
+                    :allow-delete="false"
+                    :viewport-mode="previewViewportMode"
+                    :block-id="state.previewBlock.id"
+                    @delete="ignorePreviewDelete"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -759,13 +922,16 @@ const getTagsFromBlocks = computed(() => {
         </SheetHeader>
         <div class="px-6 pb-6">
           <Tabs class="w-full" default-value="guide">
-            <TabsList class="w-full mt-3 bg-secondary rounded-sm grid grid-cols-3">
+            <TabsList class="w-full mt-3 bg-secondary rounded-sm grid grid-cols-4">
               <TabsTrigger value="guide" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
                 Block Guide
               </TabsTrigger>
               <TabsTrigger value="carousel" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
                 Carousel Usage
               </TabsTrigger>
+              <TabsTrigger value="nav-bar" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
+                Nav Bar
+              </TabsTrigger>
               <TabsTrigger value="scroll-reveals" class="w-full text-black data-[state=active]:bg-black data-[state=active]:text-white">
                 Scroll Reveals
               </TabsTrigger>
@@ -1296,6 +1462,129 @@ const getTagsFromBlocks = computed(() => {
               </div>
             </TabsContent>
 
+            <TabsContent value="nav-bar">
+              <div class="h-[calc(100vh-190px)] overflow-y-auto pr-1 pb-6">
+                <div class="space-y-6">
+                  <section class="space-y-2">
+                    <h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                      What This Does
+                    </h3>
+                    <p class="text-sm text-foreground">
+                      Use helper classes to make a CMS nav block interactive: hamburger toggle, right slide-out menu, close actions, and contained preview behavior.
+                    </p>
+                    <p class="text-sm text-foreground">
+                      The runtime in <code>htmlContent.vue</code> auto-wires these helpers and marks them as interactive so they do not open the block editor when clicked.
+                    </p>
+                  </section>
+
+                  <section class="space-y-2">
+                    <h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                      Helper Class Contract
+                    </h3>
+                    <div class="text-sm text-foreground space-y-1">
+                      <div><code>cms-nav-root</code>: nav behavior root (required).</div>
+                      <div><code>cms-nav-toggle</code>: button that toggles open/closed (required).</div>
+                      <div><code>cms-nav-panel</code>: right slide-out panel (required).</div>
+                      <div><code>cms-nav-overlay</code>: backdrop click-to-close (optional but recommended).</div>
+                      <div><code>cms-nav-close</code>: explicit close button in panel (optional).</div>
+                      <div><code>cms-nav-link</code>: links that should close panel on click (optional).</div>
+                    </div>
+                  </section>
+
+                  <section class="space-y-2">
+                    <h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                      Optional Root Attributes
+                    </h3>
+                    <div class="text-sm text-foreground space-y-1">
+                      <div><code>data-cms-nav-open="true"</code> to start open.</div>
+                      <div><code>data-cms-nav-open-class="your-class"</code> to change the root open class (default <code>is-open</code>).</div>
+                      <div><code>data-cms-nav-close-on-link="false"</code> to keep panel open after link clicks.</div>
+                    </div>
+                  </section>
+
+                  <section class="space-y-3">
+                    <h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                      Nav Block Template (Copy / Paste)
+                    </h3>
+                    <pre v-pre class="rounded-md bg-muted p-3 text-xs overflow-auto"><code>&lt;div class="cms-nav-root" data-cms-nav-root data-cms-nav-close-on-link="true"&gt;
+  &lt;nav class="fixed inset-x-0 top-0 z-30 w-full bg-transparent text-navText"&gt;
+    {{{#array {"field":"siteDoc","as":"site","collection":{"path":"sites","query":[{"field":"docId","operator":"==","value":"{siteId}"}],"order":[]},"limit":1,"value":[]}}}}
+    &lt;div class="relative w-full px-6 md:px-12"&gt;
+      &lt;div class="flex h-[64px] md:h-[88px] items-center justify-between gap-6 py-6 md:py-8"&gt;
+        &lt;a href="/" class="cursor-pointer text-xl text-navText"&gt;
+          &lt;img src="{{site.logo}}" class="h-[56px] md:h-[72px] py-3" /&gt;
+        &lt;/a&gt;
+
+        &lt;div class="ml-auto flex items-center gap-2"&gt;
+          &lt;ul class="hidden lg:flex items-center space-x-[20px] pt-1 text-sm uppercase tracking-widest"&gt;
+            {{{#subarray:navItem {"field":"item.menus.Site Root","value":[]}}}}
+            &lt;li class="relative group"&gt;
+              {{{#if {"cond":"navItem.item.type == external"}}}}
+              &lt;a href="{{navItem.item.url}}" class="nav-item cursor-pointer"&gt;{{navItem.name}}&lt;/a&gt;
+              {{{#else}}}
+              {{{#if {"cond":"navItem.name == home"}}}}
+              &lt;a href="/" class="nav-item cursor-pointer"&gt;{{navItem.name}}&lt;/a&gt;
+              {{{#else}}}
+              &lt;a href="/{{navItem.name}}" class="nav-item cursor-pointer"&gt;{{navItem.name}}&lt;/a&gt;
+              {{{/if}}}
+              {{{/if}}}
+            &lt;/li&gt;
+            {{{/subarray}}}
+          &lt;/ul&gt;
+
+          &lt;button class="cms-nav-toggle flex h-12 w-12 items-center justify-center rounded-full text-navText" type="button" aria-label="Open Menu"&gt;
+            &lt;svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg"&gt;
+              &lt;path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /&gt;
+            &lt;/svg&gt;
+          &lt;/button&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+    {{{/array}}}
+  &lt;/nav&gt;
+
+  &lt;div class="cms-nav-overlay fixed inset-0 z-[110] bg-black/50 transition-opacity duration-300 opacity-0 pointer-events-none"&gt;&lt;/div&gt;
+
+  &lt;aside class="cms-nav-panel fixed inset-y-0 right-0 z-[120] w-full max-w-md bg-sideNavBg text-sideNavText transition-all duration-300 translate-x-full opacity-0 pointer-events-none"&gt;
+    &lt;div class="relative h-full overflow-y-auto px-8 py-10"&gt;
+      &lt;button type="button" class="cms-nav-close absolute right-6 top-6 text-4xl text-sideNavText"&gt;&amp;times;&lt;/button&gt;
+
+      &lt;ul class="mt-14 space-y-4 uppercase"&gt;
+        {{{#array {"field":"siteDoc","as":"site","collection":{"path":"sites","query":[{"field":"docId","operator":"==","value":"{siteId}"}],"order":[]},"limit":1,"value":[]}}}}
+        {{{#subarray:navItem {"field":"item.menus.Site Root","value":[]}}}}
+        &lt;li&gt;
+          {{{#if {"cond":"navItem.item.type == external"}}}}
+          &lt;a href="{{navItem.item.url}}" class="cms-nav-link block text-sideNavText"&gt;{{navItem.name}}&lt;/a&gt;
+          {{{#else}}}
+          {{{#if {"cond":"navItem.name == home"}}}}
+          &lt;a href="/" class="cms-nav-link block text-sideNavText"&gt;{{navItem.name}}&lt;/a&gt;
+          {{{#else}}}
+          &lt;a href="/{{navItem.name}}" class="cms-nav-link block text-sideNavText"&gt;{{navItem.name}}&lt;/a&gt;
+          {{{/if}}}
+          {{{/if}}}
+        &lt;/li&gt;
+        {{{/subarray}}}
+        {{{/array}}}
+      &lt;/ul&gt;
+    &lt;/div&gt;
+  &lt;/aside&gt;
+&lt;/div&gt;</code></pre>
+                  </section>
+
+                  <section class="space-y-2">
+                    <h3 class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                      Preview + Edit Behavior
+                    </h3>
+                    <div class="text-sm text-foreground space-y-1">
+                      <div>Clicking the nav button opens the slide-out in Block Editor preview and Page Preview mode.</div>
+                      <div>Interactive nav elements do not trigger “Edit Block”. Clicking outside them still opens the editor in edit mode.</div>
+                      <div>In CMS preview, fixed nav and panel are contained to the preview surface by the block wrapper.</div>
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </TabsContent>
+
             <TabsContent value="scroll-reveals">
               <div class="h-[calc(100vh-190px)] overflow-y-auto pr-1 pb-6">
                 <div class="space-y-6">