@edgedev/create-edge-app 1.2.32 → 1.2.34

package/edge/components/cms/blockPicker.vue

@@ -86,6 +86,29 @@ const activeSiteId = computed(() => activeProps.value.siteId || '')
 const pickerTheme = computed(() => activeProps.value.theme || null)
 const pickerViewport = computed(() => activeProps.value.viewportMode || 'auto')
 
+const normalizePreviewType = (value) => {
+  return value === 'dark' ? 'dark' : 'light'
+}
+
+const previewSurfaceClass = (value) => {
+  return normalizePreviewType(value) === 'light'
+    ? 'bg-white text-black'
+    : 'bg-neutral-950 text-neutral-50'
+}
+
+const blockOverridePreviewType = computed(() => {
+  const directPreviewType = normalizePreviewType(props.blockOverride?.previewType)
+  if (props.blockOverride?.previewType === 'light' || props.blockOverride?.previewType === 'dark')
+    return directPreviewType
+
+  const blockId = String(props.blockOverride?.blockId || '').trim()
+  if (!blockId)
+    return 'light'
+
+  const savedPreviewType = edgeFirebase.data?.[`${edgeGlobal.edgeState.organizationDocPath}/blocks`]?.[blockId]?.previewType
+  return normalizePreviewType(savedPreviewType)
+})
+
 const blocks = computed(() => {
   let blocks = []
   if (edgeFirebase?.data?.[`${edgeGlobal.edgeState.organizationDocPath}/blocks`]) {
@@ -245,6 +268,7 @@ const chooseBlock = (block) => {
   }
   blockModelData.name = block.name
   blockModelData.blockId = block.docId
+  delete blockModelData.previewType
   console.log('Chosen block:', blockModelData)
   if (isSharedMode.value) {
     const handler = HANDLERS.get(SHARED_PICKER_STATE.activeInstance)
@@ -310,7 +334,7 @@ const clearTagFilters = () => {
 </script>
 
 <template>
-  <div v-if="props.blockOverride">
+  <div v-if="props.blockOverride" :class="previewSurfaceClass(blockOverridePreviewType)">
     <edge-cms-block-api
       :content="props.blockOverride.content"
       :values="props.blockOverride.values"
@@ -357,12 +381,13 @@ const clearTagFilters = () => {
           <button
             :ref="el => setBtnRef(block.docId, el)"
             type="button"
-            class="p-0 text-left hover:bg-primary text-slate-500  border !hover:text-white   border-dashed cursor-pointer w-full overflow-hidden relative"
+            class="p-0 text-left text-slate-500 border border-dashed border-border/70 hover:border-primary hover:ring-1 hover:ring-primary/40 cursor-pointer w-full overflow-hidden relative transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
           >
             <div class="scale-wrapper">
               <div
                 :ref="el => setInnerRef(block.docId, el)"
                 class="scale-inner scale p-4"
+                :class="previewSurfaceClass(block.previewType)"
                 :data-block-id="block.docId"
               >
                 <div class="text-4xl relative text-inherit text-center">
@@ -432,13 +457,14 @@ const clearTagFilters = () => {
                   <button
                     :ref="el => setBtnRef(block.docId, el)"
                     type="button"
-                    class="p-0 text-left hover:bg-primary text-slate-500  border !hover:text-white   border-dashed cursor-pointer w-full overflow-hidden relative"
+                    class="p-0 text-left text-slate-500 border border-dashed border-border/70 hover:border-primary hover:ring-1 hover:ring-primary/40 cursor-pointer w-full overflow-hidden relative transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
                     @click="chooseBlock(block)"
                   >
                     <div class="scale-wrapper">
                       <div
                 :ref="el => setInnerRef(block.docId, el)"
                 class="scale-inner scale p-4"
+                :class="previewSurfaceClass(block.previewType)"
                 :data-block-id="block.docId"
               >
                 <div class="text-4xl relative text-inherit text-center">

package/edge/components/cms/blockRender.vue

@@ -4,15 +4,15 @@ import { renderTemplate } from '@edgedev/template-engine'
 const props = defineProps({
   content: {
     type: String,
-    required: true,
+    default: '',
   },
   values: {
     type: Object,
-    required: true,
+    default: () => ({}),
   },
   meta: {
     type: Object,
-    required: true,
+    default: () => ({}),
   },
   theme: {
     type: Object,