fix: resolve thumbnail refs through ContentProvider for card previews

Cards now show thumbnail images in browse mode by resolving thumbnailRef
through the ContentProvider. Previously refs like 'hero-photo' were
passed directly as image URLs instead of being resolved to actual URLs.

Added thumbnailRef to all HTML demo cards so they show placeholder
images during browsing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: zeroxaa

src/bootstrap.ts

@@ -508,7 +508,28 @@ demoContent.set('mdn-docs', {
   url: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe',
 })
 
-// Thumbnails
+// Thumbnails for HTML cards (shown during browse mode)
+demoContent.set('thumb-landing', {
+  type: 'image',
+  src: 'https://picsum.photos/seed/landing/1040/1160',
+})
+demoContent.set('thumb-pricing', {
+  type: 'image',
+  src: 'https://picsum.photos/seed/pricing/1280/960',
+})
+demoContent.set('thumb-signup', {
+  type: 'image',
+  src: 'https://picsum.photos/seed/signup/800/1280',
+})
+demoContent.set('thumb-dashboard', {
+  type: 'image',
+  src: 'https://picsum.photos/seed/dashboard/1120/1040',
+})
+demoContent.set('thumb-mobile', {
+  type: 'image',
+  src: 'https://picsum.photos/seed/mobile/750/1400',
+})
+demoContent.set('thumb-chat', { type: 'image', src: 'https://picsum.photos/seed/chat/760/1080' })
 demoContent.set('thumb-wikipedia', {
   type: 'image',
   src: 'https://images.unsplash.com/photo-1481627834876-b7833e8f5570?w=960&h=800&fit=crop',
@@ -540,6 +561,7 @@ const DEMO_CARDS: CardRecord[] = [
     updatedAt: now,
     contentRef: 'landing-page',
     contentType: 'html',
+    thumbnailRef: 'thumb-landing',
     capabilities: CAP_FULL,
   },
   {
@@ -558,6 +580,7 @@ const DEMO_CARDS: CardRecord[] = [
     updatedAt: now,
     contentRef: 'pricing-page',
     contentType: 'html',
+    thumbnailRef: 'thumb-pricing',
     capabilities: CAP_FULL,
   },
   {
@@ -576,6 +599,7 @@ const DEMO_CARDS: CardRecord[] = [
     updatedAt: now,
     contentRef: 'signup-form',
     contentType: 'html',
+    thumbnailRef: 'thumb-signup',
     capabilities: CAP_FULL,
   },
 
@@ -596,6 +620,7 @@ const DEMO_CARDS: CardRecord[] = [
     updatedAt: now,
     contentRef: 'dashboard',
     contentType: 'html',
+    thumbnailRef: 'thumb-dashboard',
     capabilities: CAP_FULL,
   },
   {
@@ -614,6 +639,7 @@ const DEMO_CARDS: CardRecord[] = [
     updatedAt: now,
     contentRef: 'mobile-app',
     contentType: 'html',
+    thumbnailRef: 'thumb-mobile',
     capabilities: CAP_FULL,
   },
   {
@@ -632,6 +658,7 @@ const DEMO_CARDS: CardRecord[] = [
     updatedAt: now,
     contentRef: 'chat-ui',
     contentType: 'html',
+    thumbnailRef: 'thumb-chat',
     capabilities: CAP_FULL,
   },
 

src/konva/KonvaAdapter.ts

@@ -118,8 +118,6 @@ export class KonvaAdapter {
     this.worldGroup.destroyChildren()
 
     for (const card of cards.sort((a, b) => a.zIndex - b.zIndex)) {
-      const plugin = this.editor.plugins.get(card.type)
-      const descriptor = plugin.getRenderDescriptor(card)
       const frameRect = resolveCardRect(this.editor, card)
 
       const group = new Konva.Group({
@@ -143,26 +141,20 @@ export class KonvaAdapter {
         }),
       )
 
-      // Resolve thumbnail: use thumbnailRef, or for image-type cards resolve contentRef
-      let imageUrl = descriptor.src
-      if (!imageUrl && card.thumbnailRef) {
+      // Resolve an image URL for the card preview.
+      // Try thumbnailRef first, then contentRef for image-type cards.
+      // All refs go through the content provider to get actual URLs.
+      let imageUrl: string | undefined
+      const refToResolve =
+        card.thumbnailRef ?? (card.contentType === 'image' ? card.contentRef : undefined)
+      if (refToResolve) {
         try {
-          const resolved = this.editor.content.resolve(card.thumbnailRef, 'image')
+          const resolved = this.editor.content.resolve(refToResolve, 'image')
           if (!(resolved instanceof Promise) && resolved.type === 'image') {
             imageUrl = resolved.src
           }
         } catch {
-          // no thumbnail available
-        }
-      }
-      if (!imageUrl && card.contentRef && card.contentType === 'image') {
-        try {
-          const resolved = this.editor.content.resolve(card.contentRef, 'image')
-          if (!(resolved instanceof Promise) && resolved.type === 'image') {
-            imageUrl = resolved.src
-          }
-        } catch {
-          // no content available
+          // ref not resolvable — no preview
         }
       }
       if (imageUrl) {