fix(deck): keep navigation chrome host-owned

Author: bone3deep1962-collab

apps/daemon/src/prompts/discovery.ts

@@ -285,7 +285,7 @@ Show something visible early, even if it is a wireframe with grey blocks and lab
 Prefer the active design system's palette OR the chosen direction's palette. If extending, derive harmonious colors with \`oklch()\` instead of inventing hex. The background must be selected from the user's product domain, brand assets, screenshots, or chosen direction — never from generic app chrome or a default cozy canvas. For product utilities, marketplaces, dashboards, and SaaS, start from neutral or brand-colored foundations; do not fall back to warm beige / peach / pink / orange-brown Claude-style canvases just because no brand was provided. Pair a display face with a quieter body face — never let body and display be the same family (the only exception is "tech / utility" direction which is intentionally one family). One accent colour, used at most twice per screen.
 
 ### G. Slides + prototypes
-Slides: follow the active deck directive or skill seed and tag slides with \`data-screen-label="01 Title"\`. Slide numbers are 1-indexed. Do not add a second navigation layer or place navigation inside the slide canvas; group any standalone navigation chrome in one \`data-deck-nav\` container outside the canvas so the host can hide it. Surface hierarchy: unless the user or active design system explicitly requires another surface program, choose one dominant light/dark surface from the brand or direction. Consecutive same-surface slides are valid. Use an inverse surface only for a named narrative role such as a chapter break, key reveal, proof point, or closing; never alternate by slide index or quota.
+Slides: follow the active deck directive or skill seed and tag slides with \`data-screen-label="01 Title"\`. Slide numbers are 1-indexed. Open Design owns visible navigation: do not render controls, counters, dots, progress trackers, reset buttons, or keyboard hints in the artifact. Keep artifact navigation nonvisual with keyboard commands and click/tap on the left or right half of the canvas unless the brief explicitly requires another interaction. Surface hierarchy: unless the user or active design system explicitly requires another surface program, choose one dominant light/dark surface from the brand or direction. Consecutive same-surface slides are valid. Use an inverse surface only for a named narrative role such as a chapter break, key reveal, proof point, or closing; never alternate by slide index or quota.
 Product prototypes: do **not** include floating Tweaks panels, platform/settings choosers, theme knobs, viewport toggles, or other designer/demo controls in the artifact. If variation controls are useful for internal iteration, keep them out of final product files unless the user explicitly asks for a design-system/spec dashboard.
 
 ### H. Cross-platform + multi-device layouts — use platform contracts and shared frames

apps/daemon/src/prompts/official-system.ts

@@ -83,7 +83,7 @@ Object.assign(window, { Terminal, Line, Spacer, Bold });
 Avoid \`type="module"\` on script imports — it breaks Babel transpilation.
 
 ## Decks (slide presentations)
-For decks, follow the active deck directive or skill seed. Do not invent a second deck framework or place navigation inside the slide canvas. If standalone navigation chrome is needed, group it in one \`data-deck-nav\` container outside the slide canvas so Open Design can hide it when host navigation is present.
+For decks, follow the active deck directive or skill seed. Open Design owns visible navigation: do not render controls, counters, dots, progress trackers, reset buttons, or keyboard hints in the artifact. Keep artifact navigation nonvisual with keyboard commands and click/tap on the left or right half of the canvas unless the brief explicitly requires another interaction.
 
 Tag each slide with \`data-screen-label="01 Title"\` etc. so the user can reference them. Slide numbers are **1-indexed**.
 

apps/desktop/src/main/deck-capture.ts

@@ -95,7 +95,7 @@ const SLIDE_MAX_PX = 8192;
 // in design-templates/html-ppt/assets/runtime.js, but avoids bare `.notes` and
 // `.overview`: those class names are generic enough to be authored content.
 export const HIDE_CHROME_SELECTOR =
-  ".progress-bar, .notes-overlay, aside.notes, .speaker-notes, .deck-nav, .deck-hint, .deck-counter";
+  ".progress-bar, .notes-overlay, aside.notes, .speaker-notes, .deck-nav, .data-deck-nav, .deck-hint, .deck-counter, [data-deck-nav], [data-od-id=\"deck-nav\"], [data-slide-nav]";
 
 // The slide-surface family, matching the print/export path in pdf-export.ts
 // (`.slide, [data-screen-label], .deck-slide, .ppt-slide`) — decks ship under

apps/desktop/tests/main/scroll-stitch-geometry.test.ts

@@ -107,6 +107,10 @@ describe('deck capture DOM prep', () => {
     expect(HIDE_CHROME_SELECTOR).toContain('.notes-overlay');
     expect(HIDE_CHROME_SELECTOR).toContain('aside.notes');
     expect(HIDE_CHROME_SELECTOR).toContain('.speaker-notes');
+    expect(HIDE_CHROME_SELECTOR).toContain('.data-deck-nav');
+    expect(HIDE_CHROME_SELECTOR).toContain('[data-deck-nav]');
+    expect(HIDE_CHROME_SELECTOR).toContain('[data-od-id="deck-nav"]');
+    expect(HIDE_CHROME_SELECTOR).toContain('[data-slide-nav]');
   });
 
   test('off-stage slide fallback offsets the capture clone instead of clearing transforms', () => {

apps/web/src/components/FileViewer.tsx

@@ -10456,6 +10456,7 @@ function HtmlViewer({
       filePath: file.name,
       fallbackHtml: context?.content ?? source ?? '',
       fallbackTitle: context?.title ?? exportTitle,
+      deck: deckExportSignalForContext(context),
       ...(context?.versionId ? { versionId: context.versionId } : {}),
     }));
   }

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

@@ -247,12 +247,23 @@ function collectSlideElements(doc: Document): Element[] {
 const SCRIPT_CONTENT_MUTATION_RE =
   /(?:\.innerHTML\s*=|\.outerHTML\s*=|\.textContent\s*=|\.appendChild\s*\(|\.append\s*\(|\.prepend\s*\(|\.replaceChildren\s*\(|\.insertAdjacentHTML\s*\()/;
 
+function escapeScriptRegex(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function scriptMutatesBinding(source: string, binding: string): boolean {
+  const access = `\\b${escapeScriptRegex(binding)}\\s*(?:\\?\\.|\\.)\\s*`;
+  return new RegExp(
+    `(?:${access}(?:innerHTML|outerHTML|textContent)\\s*=|${access}(?:appendChild|append|prepend|replaceChildren|insertAdjacentHTML)\\s*\\()`,
+  ).test(source);
+}
+
 /**
  * Static thumbnails cannot reproduce DOM that a deck builds at runtime.
- * Detect only high-confidence cases: an executable script both performs a
- * content-building mutation and directly looks up an element that belongs to
- * a slide. Ordinary deck navigation (querying slides and toggling classes)
- * deliberately stays on the cheap static path.
+ * Detect only high-confidence cases: a script binds a slide-owned element and
+ * then content-mutates that same binding. Keeping lookup and mutation coupled
+ * matters: deck navigation often queries every slide while separately updating
+ * an outside counter, which must stay on the cheap static thumbnail path.
  */
 function hasScriptBuiltSlideContent(doc: Document, slides: Element[]): boolean {
   const belongsToSlide = (target: Element): boolean =>
@@ -266,25 +277,36 @@ function hasScriptBuiltSlideContent(doc: Document, slides: Element[]): boolean {
     const source = script.textContent || '';
     if (!SCRIPT_CONTENT_MUTATION_RE.test(source)) continue;
 
-    const idLookup = /getElementById\s*\(\s*(['"])([^'"]+)\1\s*\)/g;
-    let idMatch: RegExpExecArray | null;
-    while ((idMatch = idLookup.exec(source))) {
-      const target = doc.getElementById(idMatch[2] || '');
-      if (target && belongsToSlide(target)) return true;
-    }
-
-    const selectorLookup = /querySelector(?:All)?\s*\(\s*(['"])([^'"]+)\1\s*\)/g;
-    let selectorMatch: RegExpExecArray | null;
-    while ((selectorMatch = selectorLookup.exec(source))) {
+    const lookupBinding =
+      /\b(?:const|let|var)\s+([A-Za-z_$][\w$]*)\s*=\s*document\.(getElementById|querySelector)\s*\(\s*(['"])([^'"]+)\3\s*\)/g;
+    let bindingMatch: RegExpExecArray | null;
+    while ((bindingMatch = lookupBinding.exec(source))) {
+      const binding = bindingMatch[1] || '';
+      if (!scriptMutatesBinding(source, binding)) continue;
       try {
-        if (Array.from(doc.querySelectorAll(selectorMatch[2] || '')).some(belongsToSlide)) {
-          return true;
-        }
+        const target = bindingMatch[2] === 'getElementById'
+          ? doc.getElementById(bindingMatch[4] || '')
+          : doc.querySelector(bindingMatch[4] || '');
+        if (target && belongsToSlide(target)) return true;
       } catch {
         // Invalid or dynamically escaped selectors are not high-confidence
         // evidence; the iframe fallback remains available for known media.
       }
     }
+
+    const directLookupMutation =
+      /document\.(getElementById|querySelector)\s*\(\s*(['"])([^'"]+)\2\s*\)\s*(?:\?\.|\.)\s*(?:(?:innerHTML|outerHTML|textContent)\s*=|(?:appendChild|append|prepend|replaceChildren|insertAdjacentHTML)\s*\()/g;
+    let directMatch: RegExpExecArray | null;
+    while ((directMatch = directLookupMutation.exec(source))) {
+      try {
+        const target = directMatch[1] === 'getElementById'
+          ? doc.getElementById(directMatch[3] || '')
+          : doc.querySelector(directMatch[3] || '');
+        if (target && belongsToSlide(target)) return true;
+      } catch {
+        // Same high-confidence rule as bound lookups above.
+      }
+    }
   }
   return false;
 }

apps/web/src/runtime/exports.ts

@@ -10,7 +10,7 @@
 //            file content is the same source the Source view shows. See
 //            issue #279.
 
-import { buildSrcdoc, type SrcdocOptions } from './srcdoc';
+import { buildSrcdoc, DECK_CHROME_HIDE_CSS, type SrcdocOptions } from './srcdoc';
 import { buildReactComponentSrcdoc } from './react-component';
 import { buildZip } from './zip';
 import { randomUUID } from '../utils/uuid';
@@ -69,8 +69,22 @@ function triggerDownload(blob: Blob, filename: string): void {
   setTimeout(() => URL.revokeObjectURL(url), 60_000);
 }
 
-export function exportAsHtml(html: string, title: string): void {
-  const doc = buildSrcdoc(html);
+function injectExportDeckChromeHiding(doc: string): string {
+  const tag = `<style data-od-export-deck-chrome-hidden>
+${DECK_CHROME_HIDE_CSS}
+</style>`;
+  if (/<\/head>/i.test(doc)) return doc.replace(/<\/head>/i, `${tag}</head>`);
+  if (/<head[^>]*>/i.test(doc)) return doc.replace(/<head[^>]*>/i, (match) => `${match}${tag}`);
+  return tag + doc;
+}
+
+export function exportAsHtml(
+  html: string,
+  title: string,
+  options: { deck?: boolean } = {},
+): void {
+  const srcdoc = buildSrcdoc(html);
+  const doc = options.deck ? injectExportDeckChromeHiding(srcdoc) : srcdoc;
   const blob = new Blob([doc], { type: 'text/html;charset=utf-8' });
   triggerDownload(blob, `${safeFilename(title, 'artifact')}.html`);
 }
@@ -81,6 +95,7 @@ export async function exportProjectAsHtml(opts: {
   fallbackHtml: string;
   fallbackTitle: string;
   versionId?: string;
+  deck?: boolean;
 }): Promise<void> {
   const segments = opts.filePath
     .split('/')
@@ -93,11 +108,16 @@ export async function exportProjectAsHtml(opts: {
   try {
     const resp = await fetch(url);
     if (!resp.ok) throw new Error(`html export request failed (${resp.status})`);
-    const blob = await resp.blob();
+    const blob = opts.deck
+      ? new Blob(
+        [injectExportDeckChromeHiding(await resp.text())],
+        { type: 'text/html;charset=utf-8' },
+      )
+      : await resp.blob();
     triggerDownload(blob, `${safeFilename(opts.fallbackTitle, 'artifact')}.html`);
   } catch (err) {
     console.warn('[exportProjectAsHtml] falling back to source HTML export:', err);
-    exportAsHtml(opts.fallbackHtml, opts.fallbackTitle);
+    exportAsHtml(opts.fallbackHtml, opts.fallbackTitle, { deck: opts.deck });
   }
 }
 
@@ -1520,7 +1540,8 @@ const DECK_PRINT_CSS = `
     transition: none !important;
   }
   .slide:last-child, [data-screen-label]:last-child { page-break-after: auto; break-after: auto; }
-  .deck-counter, .deck-hint, .deck-nav,
+  .deck-counter, .deck-hint, .deck-nav, .data-deck-nav,
+  [data-deck-nav], [data-od-id="deck-nav"], [data-slide-nav],
   [aria-label="Previous slide"], [aria-label="Next slide"] {
     display: none !important;
   }
@@ -1678,7 +1699,10 @@ async function captureArtifactSlides(
   iframe.setAttribute('aria-hidden', 'true');
   iframe.setAttribute('tabindex', '-1');
   iframe.style.cssText = `position:fixed;left:-100000px;top:0;width:${width}px;height:${height}px;border:0;background:#fff;`;
-  iframe.srcdoc = buildSrcdoc(html, { deck: opts.deck });
+  iframe.srcdoc = buildSrcdoc(html, {
+    deck: opts.deck,
+    hideDeckChrome: opts.deck,
+  });
   document.body.appendChild(iframe);
 
   const slides: CapturedSlide[] = [];

apps/web/src/runtime/srcdoc.ts

@@ -2421,13 +2421,14 @@ export const DECK_MOTION_FREEZE_CSS = `*, *::before, *::after {
   scroll-behavior: auto !important;
 }`;
 
-// `data-od-id="deck-nav"` is the backward-compatible marker emitted by
-// freeform decks before the prompt standardized `data-deck-nav`. Keep both:
+// `data-od-id="deck-nav"` and `.data-deck-nav` are backward-compatible
+// markers emitted by freeform decks. Keep them alongside `data-deck-nav`:
 // localized aria-labels cannot be enumerated safely, while a generic `.nav`
 // selector would hide legitimate in-slide content.
 export const DECK_CHROME_HIDE_CSS = `.deck-counter,
 .deck-hint,
 .deck-nav,
+.data-deck-nav,
 .deck-floating-nav,
 .deck-floating-reset,
 .deck-controls,

apps/web/tests/runtime/deck-thumbnail-parser.test.ts

@@ -324,6 +324,24 @@ describe('parseDeckThumbnails', () => {
     expect(parsed.slides).toHaveLength(2);
   });
 
+  it('keeps navigation counters separate from queried slide content', () => {
+    const deck = frameworkDeck(2).replace(
+      '<script>/* nav */</script>',
+      `<script>
+        const slides = document.querySelectorAll('.slide');
+        const counter = document.querySelector('.data-deck-nav');
+        function paint(index) {
+          slides.forEach((slide, i) => slide.classList.toggle('active', i === index));
+          counter.textContent = (index + 1) + ' / ' + slides.length;
+        }
+        paint(0);
+      </script>`,
+    );
+    const parsed = parseDeckThumbnails(deck);
+    expect(parsed.renderable).toBe(true);
+    expect(parsed.slides).toHaveLength(2);
+  });
+
   it('strips executable content from untrusted slide markup', () => {
     const deck = [
       '<!doctype html><html><head><style>',

apps/web/tests/runtime/exports.test.ts

@@ -599,6 +599,30 @@ describe('exportProjectAsHtml', () => {
     expect(await capturedBlob!.text()).toBe('<!doctype html><p>version</p>');
   });
 
+  it('hides authored navigation chrome in standalone deck HTML', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => new Response(
+      '<!doctype html><html><body><nav class="data-deck-nav">1 / 12</nav><section class="slide">A</section></body></html>',
+      {
+        headers: { 'content-type': 'text/html' },
+        status: 200,
+      },
+    )));
+
+    await exportProjectAsHtml({
+      projectId: 'proj-1',
+      filePath: 'deck.html',
+      fallbackHtml: '<section class="slide">fallback</section>',
+      fallbackTitle: 'Deck',
+      deck: true,
+    });
+
+    const exported = await capturedBlob!.text();
+    expect(exported).toContain('data-od-export-deck-chrome-hidden');
+    expect(exported).toContain('.data-deck-nav,');
+    expect(exported).toContain('[data-deck-nav],');
+    expect(exported).toContain('display: none !important');
+  });
+
   it('falls back to the source HTML export when the daemon inline endpoint fails', async () => {
     vi.spyOn(console, 'warn').mockImplementation(() => {});
     vi.stubGlobal('fetch', vi.fn(async () => new Response('nope', { status: 500 })));
@@ -608,10 +632,12 @@ describe('exportProjectAsHtml', () => {
       filePath: 'index.html',
       fallbackHtml: '<main>fallback</main>',
       fallbackTitle: 'Fallback',
+      deck: true,
     });
 
     expect(capturedFilename).toBe('Fallback.html');
     expect(await capturedBlob!.text()).toContain('<main>fallback</main>');
+    expect(await capturedBlob!.text()).toContain('data-od-export-deck-chrome-hidden');
   });
 });