fix(community): make deck remix previews reliable (#6996)

* fix(community): make deck remix previews reliable

* fix(community): support nested deck scrollers

* fix(web): isolate nested deck fallback scrolling

* fix(web): infer deck scroll axis from slide geometry

Author: lefarcen

apps/daemon/src/routes/plugins/index.ts

@@ -281,6 +281,25 @@ export interface RegisterPluginRoutesDeps {
   helpers: PluginRouteHelpers;
 }
 
+function duplicatedProjectKind(plugin: InstalledPluginLike): ProjectMetadata['kind'] {
+  const od = plugin.manifest?.['od'];
+  const mode = od && typeof od === 'object'
+    ? (od as { mode?: unknown }).mode
+    : null;
+  switch (mode) {
+    case 'deck':
+    case 'image':
+    case 'video':
+    case 'audio':
+    case 'brand':
+    case 'template':
+    case 'prototype':
+      return mode;
+    default:
+      return 'prototype';
+  }
+}
+
 export function registerPluginEventRoutes(app: Express, deps: RegisterPluginEventRoutesDeps): void {
   const resolveEventScope = async (req: Request, res: Response) => {
     const authority = await resolveOptionalWorkspaceRequestAuthority(
@@ -719,7 +738,11 @@ export function registerPluginRoutes(app: Express, deps: RegisterPluginRoutesDep
       const conversationId = ids.randomId();
       cleanupProjectId = projectId;
       const metadata: ProjectMetadata = {
-        kind: 'prototype',
+        // Preserve the plugin's artifact contract. Treating every duplicate as
+        // a prototype made deck behavior depend on the copied HTML happening
+        // to match the viewer's heuristic; fixed-canvas/vertical deck examples
+        // then opened without slide chrome or a thumbnail rail.
+        kind: duplicatedProjectKind(plugin),
         templateId: `plugin:${plugin.id}`,
         templateLabel: plugin.title || plugin.id,
         duplicatedFromPluginId: plugin.id,

apps/daemon/tests/plugins-duplicate-project.test.ts

@@ -205,6 +205,7 @@ describe('plugin project duplication', () => {
     const root = await makeTempRoot('od-plugin-duplicate-workspace-');
     const projectsRoot = path.join(root, 'projects');
     const plugin = await makePreviewPlugin(root, 'workspace-plugin-fixture');
+    (plugin.manifest.od as { mode?: string }).mode = 'deck';
     const projectId = 'workspace-plugin-project';
     const project = {
       id: projectId,
@@ -234,6 +235,10 @@ describe('plugin project duplication', () => {
       transactionSteps.push('workspace:bind');
       return input;
     });
+    const insertProjectMock = vi.fn(() => {
+      transactionSteps.push('project:insert');
+      return project;
+    });
     const app = express();
     app.use(express.json());
     registerPluginRoutes(app, {
@@ -249,10 +254,7 @@ describe('plugin project duplication', () => {
           .mockReturnValueOnce('workspace-plugin-conversation'),
       },
       projectStore: {
-        insertProject: vi.fn(() => {
-          transactionSteps.push('project:insert');
-          return project;
-        }),
+        insertProject: insertProjectMock,
         getProject: vi.fn(() => project),
         ensureWorkspaceProject,
         dbDeleteProject: vi.fn(),
@@ -298,6 +300,12 @@ describe('plugin project duplication', () => {
         },
       );
       expect(resp.status).toBe(201);
+      expect(insertProjectMock).toHaveBeenCalledWith(
+        db,
+        expect.objectContaining({
+          metadata: expect.objectContaining({ kind: 'deck' }),
+        }),
+      );
       expect(ensureWorkspaceProject).toHaveBeenCalledWith(
         db,
         expect.objectContaining({

apps/web/src/components/CommunityView.tsx

@@ -5,15 +5,14 @@ import { useI18n } from '../i18n';
 import { listPlugins } from '../state/projects';
 import {
   buildCommunityTemplates,
-  copyTemplatePrompt,
   isPromptArtifact,
-  templateActionLabel,
   TEMPLATE_TYPE_LABEL_KEY,
   TEMPLATE_TYPE_ORDER,
   type TemplateDemo,
   type TemplateType,
 } from './CommunityTemplatePreview';
 import { MediaSurface } from './plugins-home/cards/MediaSurface';
+import { canDuplicatePluginPreview } from './plugins-home/duplicate';
 import { PluginDetailsModal } from './PluginDetailsModal';
 import type { PluginUseAction } from './plugins-home/useActions';
 import { useInView } from './plugins-home/useInView';
@@ -102,9 +101,9 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
   const [detailsRecord, setDetailsRecord] = useState<InstalledPluginRecord | null>(null);
   const [activeType, setActiveType] = useState<TemplateType>('Slides');
   const [activeSubtype, setActiveSubtype] = useState('All');
-  // Remix (and the prompt-artifact copy path it shares) hands off to a
-  // fire-and-forget parent callback (`onRemixTemplate`/`onUsePrompt` return
-  // void) that kicks off a real POST /api/projects — nothing here observes
+  // Remix hands off to a fire-and-forget parent callback
+  // (`onRemixTemplate` returns void) that kicks off a real POST /api/projects
+  // — nothing here observes
   // when it settles. Without a guard, N rapid clicks before the resulting
   // navigation actually leaves this view fired N separate creates,
   // duplicating the project N times ("Community 的模板 remix 点击多次会复制
@@ -147,6 +146,10 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
     () => buildCommunityTemplates(plugins, locale, t, workspaceContext),
     [plugins, locale, t, workspaceContext],
   );
+  const pluginById = useMemo(
+    () => new Map(plugins.map((record) => [record.id, record])),
+    [plugins],
+  );
   const typeOptions = TEMPLATE_TYPE_ORDER.filter((type) =>
     templates.some((template) => template.type === type),
   );
@@ -165,19 +168,6 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
     return sourceKind === 'bundled' || sourceKind === 'marketplace' ? 'official' as const : 'personal' as const;
   };
   const handleTemplateAction = (template: TemplateDemo) => {
-    if (isPromptArtifact(template)) {
-      trackCommunityTemplateClick(analytics.track, {
-        page_name: 'community',
-        area: 'community_templates',
-        element: 'copy_prompt',
-        template_key: template.id,
-        template_type: template.type,
-        resource_scope: templateScope(template.id),
-        ...workspaceDimensions,
-      });
-      void copyTemplatePrompt(template);
-      return;
-    }
     // Synchronous check-and-set on the ref: this is what actually decides
     // whether a request goes out. See the remixingIdRef comment above for
     // why the state flag alone cannot gate this.
@@ -195,6 +185,28 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
     setRemixingId(template.id);
     onRemixTemplate?.({ templateId: template.id, prompt: template.prompt });
   };
+  const handleCardUse = (template: TemplateDemo) => {
+    const target = templateUseTarget(template);
+    trackCommunityTemplateClick(analytics.track, {
+      page_name: 'community',
+      area: 'community_templates',
+      element: 'use_prompt',
+      template_key: template.id,
+      template_type: template.type,
+      resource_scope: templateScope(template.id),
+      ...workspaceDimensions,
+    });
+    const record = pluginById.get(template.id);
+    if (record && onUsePlugin) {
+      onUsePlugin(record, 'use-with-query', target);
+      return;
+    }
+    onUsePrompt?.(target);
+  };
+  const canRemixTemplate = (template: TemplateDemo) => {
+    const record = pluginById.get(template.id);
+    return !isPromptArtifact(template) && Boolean(record && canDuplicatePluginPreview(record));
+  };
   const templateById = useCallback(
     (id: string) => templates.find((template) => template.id === id) ?? null,
     [templates],
@@ -217,7 +229,7 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
   /** The detail modal's Use split action. Shells that own a Home hand-off
    *  route the plugin as the composer's active driver; without one, fall back
    *  to seeding the composer with the template's prompt (same destination the
-   *  card's own prompt button uses). */
+   *  card's own Use button uses). */
   const handleDetailsUse = (record: InstalledPluginRecord, action: PluginUseAction) => {
     setDetailsRecord(null);
     const template = templateById(record.id);
@@ -330,7 +342,7 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
             onClick={() => openTemplateDetails(template)}
           >
             <div
-              className="community-template-card__preview"
+              className={`community-template-card__preview${template.type === 'Slides' ? ' is-deck' : ''}`}
               style={{ '--template-accent': template.accent } as CSSProperties}
               aria-hidden
             >
@@ -339,34 +351,27 @@ export function CommunityView({ onRemixTemplate, onUsePrompt, onUsePlugin }: Com
             <footer className="community-template-card__foot">
               <span>{template.meta}</span>
               <div className="community-template-card__actions">
-                <button
-                  type="button"
-                  disabled={remixingId === template.id}
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    handleTemplateAction(template);
-                  }}
-                >
-                  {remixingId === template.id ? t('common.loading') : templateActionLabel(template)}
-                </button>
+                {canRemixTemplate(template) ? (
+                  <button
+                    type="button"
+                    disabled={remixingId === template.id}
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleTemplateAction(template);
+                    }}
+                  >
+                    {remixingId === template.id ? t('common.loading') : 'Remix'}
+                  </button>
+                ) : null}
                 <button
                   type="button"
                   className="community-template-card__prompt-btn"
                   onClick={(event) => {
                     event.stopPropagation();
-                    trackCommunityTemplateClick(analytics.track, {
-                      page_name: 'community',
-                      area: 'community_templates',
-                      element: 'use_prompt',
-                      template_key: template.id,
-                      template_type: template.type,
-                      resource_scope: templateScope(template.id),
-                      ...workspaceDimensions,
-                    });
-                    onUsePrompt?.(templateUseTarget(template));
+                    handleCardUse(template);
                   }}
                 >
-                  {t('community.usePrompt')}
+                  {t('pluginCard.use')}
                 </button>
               </div>
             </footer>

apps/web/src/runtime/deck-thumbnail-parser.ts

@@ -44,7 +44,7 @@ export interface ParsedDeckThumbnails {
   reason?: DeckThumbnailFallbackReason;
   /** `outerHTML` of each slide, in document order. */
   slides: string[];
-  /** Concatenated deck stylesheets, `:root`/`html`/`body` rewritten to `:host`,
+  /** Concatenated deck stylesheets, root selectors rewritten for shadow DOM,
    *  `@font-face` stripped (see `fontFaces`), relative `url()` absolutized. */
   styleText: string;
   /** `@font-face` blocks lifted out of `styleText` — must live in the host
@@ -240,8 +240,23 @@ interface DesignSize {
 // Design canvas size (viewport-unit decks are already excluded upstream):
 // explicit `<deck-stage width height>`, then an explicit px `width`+`height` on
 // a stage/slide rule, else the 1920×1080 default.
-const STAGE_SIZE_SELECTOR_RE =
-  /(?:\bdeck-stage\b|\.deck-stage\b|\.canvas\b|#deck\b|\.deck\b|\.slide\b|\.ppt-slide\b|\.deck-slide\b|\[data-screen-label\])/i;
+const STAGE_SIZE_TARGET_RE =
+  /(?:^|[^\w-])deck-stage(?![\w-])|(?:\.deck-stage|\.canvas|#deck|\.deck|\.slide|\.slide-frame|\.ppt-slide|\.deck-slide|\[data-screen-label(?:[\s~|^$*]?=[^\]]+)?\])(?![\w-])/i;
+
+// A size declaration only describes the design canvas when the rule's TARGET
+// is a stage/slide. Merely mentioning `.slide` in an ancestor is insufficient:
+// real decks commonly contain rules such as `.slide .kicker-line { width:72px;
+// height:6px }`. Treating that decoration as the canvas collapses the whole
+// thumbnail into a 72x6 strip.
+function selectorTargetsStageOrSlide(selectorList: string): boolean {
+  return selectorList.split(',').some((selector) => {
+    const trimmed = selector.trim();
+    if (!trimmed || /::(?:before|after)\b/i.test(trimmed)) return false;
+    const compounds = trimmed.split(/\s+|[>+~]/).filter(Boolean);
+    const target = compounds.at(-1) ?? '';
+    return STAGE_SIZE_TARGET_RE.test(target);
+  });
+}
 
 function resolveDesignSize(doc: Document, css: string): DesignSize {
   const stage = doc.querySelector('deck-stage[width][height]');
@@ -254,7 +269,7 @@ function resolveDesignSize(doc: Document, css: string): DesignSize {
   }
 
   for (const block of iterateRuleBlocks(css)) {
-    if (!STAGE_SIZE_SELECTOR_RE.test(block.selector)) continue;
+    if (!selectorTargetsStageOrSlide(block.selector)) continue;
     const width = matchPxLength(block.body, 'width');
     const height = matchPxLength(block.body, 'height');
     if (width && height) return { width, height };
@@ -296,13 +311,19 @@ function stripCssComments(css: string): string {
   return css.replace(/\/\*[\s\S]*?\*\//g, '');
 }
 
-// Rewrite `:root`, `html`, and `body` (as standalone selectors in a selector
-// list) to `:host`, so the deck's custom properties, base font, and base color
-// land on the shadow host and inherit into the re-parented slide. Compound
-// selectors like `body.dark` are left untouched (they'd match nothing, but
-// forcing them onto `:host` risks unwanted rules).
+// Rewrite `:root`/`html` to `:host`, so document-level variables inherit into
+// the reconstructed slide. Body rules belong on the design canvas itself: host
+// page styles intentionally own the shadow host's dark thumbnail frame and win
+// over ordinary `:host` declarations, which used to hide transparent slides on
+// that dark frame. Applying body paint/layout to `.od-thumb-canvas` preserves
+// the source deck's paper/background inside the frame. Compound selectors like
+// `body.dark` are left untouched.
 function rewriteRootSelectors(css: string): string {
-  return css.replace(/(^|[{};,])(\s*)(:root|html|body)(\s*)(?=[,{])/g, '$1$2:host$4');
+  return css.replace(
+    /(^|[{};,])(\s*)(:root|html|body)(\s*)(?=[,{])/g,
+    (_whole, prefix: string, whitespace: string, selector: string, trailing: string) =>
+      `${prefix}${whitespace}${selector.toLowerCase() === 'body' ? '.od-thumb-canvas' : ':host'}${trailing}`,
+  );
 }
 
 // Lift `@font-face` blocks out; they're ignored inside a shadow root and must be