rikiki-deck 0.7.1 → 0.7.2

package/dist/deck-overview.js

@@ -1,6 +1,6 @@
-var I="data-deck-overview",O="data-overview-tokens",P=`
+var F="data-deck-overview",K=new WeakMap,R=new WeakMap;function J(t){let r=t.outerHTML,o=r.indexOf(">");return r.slice(0,o).replace(/\sactive(?:="[^"]*")?/,"")+r.slice(o)}var Q=`
   :host([overview]) ::slotted(*) { display: none !important; }
-  :host([overview]) #overview-grid {
+  :host(:is([overview], [data-overview-warming])) #overview-grid {
     position: fixed; inset: 0;
     background: var(--rik-surface-page);
     overflow: hidden;
@@ -10,7 +10,7 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
   }
 
   /* \u2500\u2500 Top bar \xB7 search, slide count, close hint \u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  :host([overview]) .ov-bar {
+  :host(:is([overview], [data-overview-warming])) .ov-bar {
     display: flex; align-items: center; gap: 16px;
     padding: 14px 28px;
     background: var(--rik-surface-raised);
@@ -19,7 +19,7 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
     letter-spacing: 0.10em;
     color: var(--rik-text-default--faint);
   }
-  :host([overview]) .ov-bar .ov-search {
+  :host(:is([overview], [data-overview-warming])) .ov-bar .ov-search {
     flex: 1;
     appearance: none;
     background: var(--rik-surface-raised--strong);
@@ -31,28 +31,28 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
     letter-spacing: 0;
     max-width: 480px;
   }
-  :host([overview]) .ov-bar .ov-search:focus {
+  :host(:is([overview], [data-overview-warming])) .ov-bar .ov-search:focus {
     outline: none;
     border-color: var(--rik-accent);
     box-shadow: 0 0 0 3px var(--rik-accent--soft);
   }
-  :host([overview]) .ov-bar .ov-count { color: var(--rik-accent); }
-  :host([overview]) .ov-bar .ov-hint { letter-spacing: 0.16em; text-transform: uppercase; }
+  :host(:is([overview], [data-overview-warming])) .ov-bar .ov-count { color: var(--rik-accent); }
+  :host(:is([overview], [data-overview-warming])) .ov-bar .ov-hint { letter-spacing: 0.16em; text-transform: uppercase; }
 
   /* \u2500\u2500 Sidebar layout (many slides) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  :host([overview]) .ov-body {
+  :host(:is([overview], [data-overview-warming])) .ov-body {
     display: grid;
     grid-template-columns: 240px 1fr;
     min-height: 0;
   }
-  :host([overview]) .ov-body.compact { grid-template-columns: 1fr; }
-  :host([overview]) .ov-aside {
+  :host(:is([overview], [data-overview-warming])) .ov-body.compact { grid-template-columns: 1fr; }
+  :host(:is([overview], [data-overview-warming])) .ov-aside {
     border-right: 1px solid var(--rik-border-default);
     background: var(--rik-surface-raised);
     overflow-y: auto;
     padding: 16px 0;
   }
-  :host([overview]) .ov-aside-item {
+  :host(:is([overview], [data-overview-warming])) .ov-aside-item {
     display: grid;
     grid-template-columns: 36px 1fr;
     gap: 10px;
@@ -63,84 +63,84 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
     color: var(--rik-text-default--muted);
     transition: background 0.12s, color 0.12s, border-color 0.12s;
   }
-  :host([overview]) .ov-aside-item:hover {
+  :host(:is([overview], [data-overview-warming])) .ov-aside-item:hover {
     background: var(--rik-surface-tint);
     color: var(--rik-text-default);
   }
-  :host([overview]) .ov-aside-item[data-active] {
+  :host(:is([overview], [data-overview-warming])) .ov-aside-item[data-active] {
     background: var(--rik-accent--faint);
     border-left-color: var(--rik-accent);
     color: var(--rik-text-default);
   }
-  :host([overview]) .ov-aside-num {
+  :host(:is([overview], [data-overview-warming])) .ov-aside-num {
     font: 800 0.85rem/1 var(--rik-font-mono);
     color: var(--rik-accent);
   }
-  :host([overview]) .ov-aside-text {
+  :host(:is([overview], [data-overview-warming])) .ov-aside-text {
     font: 700 0.92rem/1.3 var(--rik-font-display, var(--rik-font-sans));
     letter-spacing: -0.005em;
   }
-  :host([overview]) .ov-aside-count {
+  :host(:is([overview], [data-overview-warming])) .ov-aside-count {
     font: 600 0.70rem/1 var(--rik-font-mono);
     color: var(--rik-text-default--faint);
     margin-top: 4px;
   }
 
   /* \u2500\u2500 Main scroll area \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  :host([overview]) .ov-main {
+  :host(:is([overview], [data-overview-warming])) .ov-main {
     overflow-y: auto;
     padding: 24px 32px 48px;
     display: flex; flex-direction: column;
     gap: 32px;
     min-width: 0;
   }
-  :host([overview]) .ov-chapter {
+  :host(:is([overview], [data-overview-warming])) .ov-chapter {
     display: flex; flex-direction: column;
     gap: 12px;
     scroll-margin-top: 24px;
   }
-  :host([overview]) .ov-chapter-head {
+  :host(:is([overview], [data-overview-warming])) .ov-chapter-head {
     display: flex; align-items: baseline; gap: 12px;
     padding-bottom: 6px;
     border-bottom: 2px solid var(--rik-accent);
   }
-  :host([overview]) .ov-chapter-num {
+  :host(:is([overview], [data-overview-warming])) .ov-chapter-num {
     font: 800 0.85rem/1 var(--rik-font-mono);
     color: var(--rik-accent);
     letter-spacing: 0.12em;
   }
-  :host([overview]) .ov-chapter-title {
+  :host(:is([overview], [data-overview-warming])) .ov-chapter-title {
     font: 800 1.2rem/1.2 var(--rik-font-display, var(--rik-font-sans));
     color: var(--rik-text-default);
     letter-spacing: -0.012em;
     flex: 1;
     min-width: 0;
   }
-  :host([overview]) .ov-chapter-count {
+  :host(:is([overview], [data-overview-warming])) .ov-chapter-count {
     font: 700 0.72rem/1 var(--rik-font-mono);
     color: var(--rik-text-default--faint);
     letter-spacing: 0.1em;
     text-transform: uppercase;
   }
-  :host([overview]) .ov-row {
+  :host(:is([overview], [data-overview-warming])) .ov-row {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(var(--ov-cell-min, 180px), 1fr));
     gap: 12px;
   }
 
   /* \u2500\u2500 Path layout (\u2264 60 slides) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  :host([overview]) .ov-path .ov-row {
+  :host(:is([overview], [data-overview-warming])) .ov-path .ov-row {
     display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
   }
-  :host([overview]) .ov-path .ov-connector {
+  :host(:is([overview], [data-overview-warming])) .ov-path .ov-connector {
     flex: 0 0 auto;
     width: 16px; height: 2px;
     background: var(--rik-border-default);
   }
-  :host([overview]) .ov-path .ov-cell { flex: 0 0 auto; width: clamp(160px, 14vw, 260px); }
+  :host(:is([overview], [data-overview-warming])) .ov-path .ov-cell { flex: 0 0 auto; width: clamp(160px, 14vw, 260px); }
 
   /* \u2500\u2500 Thumbnail cell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
-  :host([overview]) .ov-cell {
+  :host(:is([overview], [data-overview-warming])) .ov-cell {
     position: relative;
     aspect-ratio: 16 / 9;
     background:
@@ -160,24 +160,24 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
   }
   /* The keyboard user must see where they are \xB7 without this the grid moves
      focus invisibly. */
-  :host([overview]) .ov-cell:focus-visible {
+  :host(:is([overview], [data-overview-warming])) .ov-cell:focus-visible {
     outline: var(--rik-focus-ring--width, 2px) solid var(--rik-focus-ring, currentColor);
     outline-offset: var(--rik-focus-ring--offset, 2px);
     z-index: 2;
   }
-  :host([overview]) .ov-cell:hover {
+  :host(:is([overview], [data-overview-warming])) .ov-cell:hover {
     transform: translateY(-2px) scale(1.015);
     border-color: var(--rik-accent--soft);
     box-shadow: var(--rik-elevation-3);
     z-index: 1;
   }
-  :host([overview]) .ov-cell[data-current] {
+  :host(:is([overview], [data-overview-warming])) .ov-cell[data-current] {
     border-color: var(--rik-accent);
     box-shadow: 0 0 0 3px var(--rik-accent--soft), var(--rik-elevation-2);
   }
-  :host([overview]) .ov-cell[data-filtered-out] { opacity: 0.10; pointer-events: none; transform: scale(0.96); }
-  :host([overview]) .ov-cell:not([data-loaded]) .ov-thumb { display: none; }
-  :host([overview]) .ov-cell:not([data-loaded])::before {
+  :host(:is([overview], [data-overview-warming])) .ov-cell[data-filtered-out] { opacity: 0.10; pointer-events: none; transform: scale(0.96); }
+  :host(:is([overview], [data-overview-warming])) .ov-cell:not([data-loaded]) .ov-thumb { display: none; }
+  :host(:is([overview], [data-overview-warming])) .ov-cell:not([data-loaded])::before {
     content: '';
     position: absolute; inset: 0;
     background:
@@ -197,7 +197,7 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
   /* The thumb mirrors the letterboxed stage, so make it a size container too \xB7
      the cloned slide's cqw/cqh then resolve exactly as they do live instead of
      falling back to the (larger) window. */
-  :host([overview]) .ov-thumb {
+  :host(:is([overview], [data-overview-warming])) .ov-thumb {
     position: absolute; top: 0; left: 0;
     width: var(--ov-thumb-w, 1920px); height: var(--ov-thumb-h, 1080px);
     transform: scale(var(--overview-scale, 0.2));
@@ -205,8 +205,8 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
     pointer-events: none;
     container-type: size;
   }
-  :host([overview]) .ov-thumb > * { display: flex !important; }
-  :host([overview]) .ov-mermaid-snap {
+  :host(:is([overview], [data-overview-warming])) .ov-thumb > * { display: flex !important; }
+  :host(:is([overview], [data-overview-warming])) .ov-mermaid-snap {
     display: flex; align-items: center; justify-content: center;
     background: var(--rik-code__bg);
     border: 1px solid var(--rik-code__border);
@@ -214,11 +214,11 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
     padding: var(--rik-space-4);
     overflow: hidden; min-width: 0;
   }
-  :host([overview]) .ov-mermaid-snap svg {
+  :host(:is([overview], [data-overview-warming])) .ov-mermaid-snap svg {
     width: 100% !important; height: auto !important;
     max-width: 100% !important; max-height: 60cqh;
   }
-  :host([overview]) .ov-cell-label {
+  :host(:is([overview], [data-overview-warming])) .ov-cell-label {
     position: absolute; bottom: 6px; right: 8px;
     font: 700 0.70rem/1 var(--rik-font-mono);
     color: var(--rik-text-default);
@@ -227,5 +227,6 @@ var I="data-deck-overview",O="data-overview-tokens",P=`
     z-index: 2;
     pointer-events: none;
   }
-  :host(:not([overview])) #overview-grid { display: none; }
-`;function W(r){if(r.querySelector(`style[${I}]`))return;let o=document.createElement("style");o.setAttribute(I,"1"),o.textContent=P,r.appendChild(o)}function _(r,o){if(r.querySelector(`link[${O}]`))return;let t=document.createElement("link");t.rel="stylesheet",t.setAttribute(O,"1"),t.href=new URL("../tokens.css",o).href,r.appendChild(t)}function R(r){let t=r.slides[0]?.querySelector("h1");return t?Array.from(t.childNodes).map(e=>e.nodeName==="BR"?" ":e.textContent??"").join("").replace(/\s+/g," ").trim()||`Slide ${r.startIdx+1}`:`Slide ${r.startIdx+1}`}function z(r){return(r.textContent||"").replace(/\s+/g," ").trim().slice(0,400).toLowerCase()}var B=["fill","stroke","clip-path","mask","filter","marker-start","marker-mid","marker-end","style"];function D(r,o){let t=new Map;if(r.querySelectorAll("[id]").forEach(a=>{t.set(a.id,a.id+o),a.id=a.id+o}),t.size===0)return;let e=a=>a.replace(/url\(['"]?#([^'")]+)['"]?\)/g,(s,d)=>t.has(d)?`url(#${t.get(d)})`:s);r.querySelectorAll("*").forEach(a=>{for(let s of B){let d=a.getAttribute(s);d?.includes("url(")&&a.setAttribute(s,e(d))}for(let s of["href","xlink:href"]){let d=a.getAttribute(s);d?.startsWith("#")&&t.has(d.slice(1))&&a.setAttribute(s,`#${t.get(d.slice(1))}`)}});let u=r.querySelectorAll("style");if(u.length){let a=s=>s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");u.forEach(s=>{let d=s.textContent??"";t.forEach((w,S)=>{d=d.replace(new RegExp(`#${a(S)}(?![\\w-])`,"g"),`#${w}`)}),s.textContent=d})}}function V(r,o){let t=r.querySelectorAll("svg");o.querySelectorAll("svg").forEach((e,u)=>{let a=t[u]?.getBoundingClientRect();if(a&&a.width>0)e.setAttribute("width",String(Math.round(a.width))),e.setAttribute("height",String(Math.round(a.height))),e.style.maxWidth="100%";else if(e.hasAttribute("viewBox")&&!e.hasAttribute("width")){let s=(e.getAttribute("viewBox")??"").split(/[\s,]+/).map(Number);s.length===4&&s[2]>0&&(e.setAttribute("width",String(s[2])),e.setAttribute("height",String(s[3])),e.style.maxWidth="100%",e.style.height="auto")}})}function G(r,o){let t=r.querySelectorAll("deck-mermaid");o.querySelectorAll("deck-mermaid").forEach((e,u)=>{let a=t[u],s=document.createElement("div");s.className="ov-mermaid-snap",s.innerHTML=a?.renderedSvg??"";let d=a?.getBoundingClientRect();d&&d.width>0&&(s.style.width=`${d.width}px`,s.style.height=`${d.height}px`),e.replaceWith(s)})}function U(r){r.querySelectorAll("[data-click], [data-click-auto], [data-click-children], [data-click-stagger] > *").forEach(o=>{o.style.opacity="",o.style.transform="",o.style.filter="",o.style.pointerEvents="",o.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect").forEach(t=>{t.style.strokeDashoffset=""})})}function F(r,o){let t=r.cloneNode(!0);return t.setAttribute("active",""),U(t),V(r,t),G(r,t),D(t,`-ov${o}`),t}async function K(r,o){let t=Array.from(o.querySelectorAll("deck-mermaid")).map(u=>u.whenRendered).filter(u=>!!u);t.length&&await Promise.all(t).catch(()=>{});let e=document.createElement("div");e.className="ov-thumb",e.appendChild(F(o,Number(r.dataset.idx))),r.insertBefore(e,r.firstChild),r.dataset.loaded="1",delete r.dataset.building}function Y(r,o){let t=r.shadowRoot;if(!t)return()=>{};W(t),_(t,import.meta.url);let e=t.querySelector("#overview-grid");e||(e=document.createElement("div"),e.id="overview-grid",t.appendChild(e)),e.innerHTML="";let u=o.slides.length,a=u>60,s=u>300?140:u>150?160:u>60?180:220;e.style.setProperty("--ov-cell-min",`${s}px`);let d=t.querySelector("#stage"),w=d?.clientWidth||window.innerWidth,S=d?.clientHeight||window.innerHeight;e.style.setProperty("--ov-thumb-w",`${w}px`),e.style.setProperty("--ov-thumb-h",`${S}px`),requestAnimationFrame(()=>{let i=e.querySelector(".ov-cell")?.clientWidth??s;e.style.setProperty("--overview-scale",String(i/w))});let x=document.createElement("div");x.className="ov-bar";let f=document.createElement("input");f.className="ov-search",f.type="search",f.placeholder=`Search ${u} slides \xB7 type to filter`,f.spellcheck=!1,x.appendChild(f);let C=document.createElement("span");C.className="ov-count",C.textContent=`${u} slides \xB7 ${o.chapters.length} chapters`,x.appendChild(C);let L=document.createElement("span");L.className="ov-hint",L.textContent="O \xB7 Esc \xB7 close",x.appendChild(L),e.appendChild(x);let k=document.createElement("div");k.className=`ov-body${a?"":" compact"}`,e.appendChild(k);let b=a?document.createElement("aside"):null;b&&(b.className="ov-aside",k.appendChild(b));let y=document.createElement("div");y.className=`ov-main${a?"":" ov-path"}`,k.appendChild(y);let T=[],A=[],H=new WeakMap,E=new IntersectionObserver(i=>{for(let v of i){if(!v.isIntersecting)continue;let n=v.target;if(n.dataset.loaded||n.dataset.building)continue;let m=H.get(n);m&&(n.dataset.building="1",E.unobserve(n),K(n,m).catch(l=>{let h=Number(n.dataset.tries??"0")+1;n.dataset.tries=String(h),console.warn("[rikiki/overview] thumbnail build failed",l),delete n.dataset.building,h<3&&E.observe(n)}))}},{root:null,rootMargin:"300px 0px",threshold:0});o.chapters.forEach((i,v)=>{let n=document.createElement("section");if(n.className="ov-chapter",n.id=`ov-chapter-${v}`,a){let l=document.createElement("header");l.className="ov-chapter-head";let h=document.createElement("span");h.className="ov-chapter-num",h.textContent=String(v+1).padStart(2,"0"),l.appendChild(h);let p=document.createElement("span");p.className="ov-chapter-title",p.textContent=R(i),l.appendChild(p);let c=document.createElement("span");c.className="ov-chapter-count",c.textContent=`${i.slides.length} slide${i.slides.length>1?"s":""}`,l.appendChild(c),n.appendChild(l)}let m=document.createElement("div");if(m.className="ov-row",i.slides.forEach((l,h)=>{if(!a&&h>0){let q=document.createElement("div");q.className="ov-connector",m.appendChild(q)}let p=i.startIdx+h,c=document.createElement("button");c.type="button",c.className="ov-cell",c.dataset.idx=String(p),c.dataset.search=z(l),p===o.currentIdx&&(c.dataset.current="1"),H.set(c,l),E.observe(c);let g=document.createElement("span");g.className="ov-cell-label",g.textContent=String(p+1),c.appendChild(g);let $=z(l).trim().slice(0,80);c.setAttribute("aria-label",`Slide ${p+1} of ${u}${$?` \xB7 ${$}`:""}`),p===o.currentIdx&&c.setAttribute("aria-current","true"),c.addEventListener("click",()=>o.onPick(p)),m.appendChild(c)}),n.appendChild(m),y.appendChild(n),T.push(n),b){let l=document.createElement("button");l.type="button",l.className="ov-aside-item",o.currentIdx>=i.startIdx&&o.currentIdx<i.startIdx+i.slides.length&&(l.dataset.active="1");let p=document.createElement("span");p.className="ov-aside-num",p.textContent=String(v+1).padStart(2,"0"),l.appendChild(p);let c=document.createElement("span");c.className="ov-aside-text",c.textContent=R(i);let g=document.createElement("div");g.className="ov-aside-count",g.textContent=`${i.slides.length} slide${i.slides.length>1?"s":""}`,c.appendChild(g),l.appendChild(c),l.addEventListener("click",()=>{n.scrollIntoView({behavior:"smooth",block:"start"})}),b.appendChild(l),A.push(l)}});let M=null;b&&(M=new IntersectionObserver(i=>{let v=i.filter(n=>n.isIntersecting).sort((n,m)=>n.boundingClientRect.top-m.boundingClientRect.top);if(v.length>0){let n=T.indexOf(v[0].target);n>=0&&A.forEach((m,l)=>{l===n?m.dataset.active="1":delete m.dataset.active})}},{root:y,rootMargin:"0px 0px -70% 0px",threshold:0}),T.forEach(i=>{M.observe(i)}));let N=e.querySelectorAll(".ov-cell");return f.addEventListener("input",()=>{let i=f.value.trim().toLowerCase();if(!i){N.forEach(v=>{delete v.dataset.filteredOut});return}N.forEach(v=>{(v.dataset.search||"").includes(i)?delete v.dataset.filteredOut:v.dataset.filteredOut="1"})}),requestAnimationFrame(()=>{let i=e.querySelector(".ov-cell[data-current]");i&&(i.scrollIntoView({block:"center"}),i.focus({preventScroll:!0}))}),e.addEventListener("keydown",i=>{let v=i.key;if(v!=="ArrowLeft"&&v!=="ArrowRight")return;let n=[...e.querySelectorAll(".ov-cell")].filter(h=>!h.dataset.filteredOut),m=n.indexOf(document.activeElement);if(m<0)return;i.preventDefault();let l=n[m+(v==="ArrowRight"?1:-1)];l?.focus(),l?.scrollIntoView({block:"nearest"})}),()=>{M?.disconnect(),E.disconnect(),e&&(e.innerHTML="")}}export{Y as mountOverview};
+  :host(:not([overview])) #overview-grid { visibility: hidden; pointer-events: none; }
+  :host(:not([overview]):not([data-overview-warming])) #overview-grid { display: none; }
+`;function X(t){if(t.querySelector(`style[${F}]`))return;let r=document.createElement("style");r.setAttribute(F,"1"),r.textContent=Q,t.appendChild(r)}function G(t){let o=t.slides[0]?.querySelector("h1");return o?Array.from(o.childNodes).map(i=>i.nodeName==="BR"?" ":i.textContent??"").join("").replace(/\s+/g," ").trim()||`Slide ${t.startIdx+1}`:`Slide ${t.startIdx+1}`}function U(t){return(t.textContent||"").replace(/\s+/g," ").trim().slice(0,400).toLowerCase()}var Z=["fill","stroke","clip-path","mask","filter","marker-start","marker-mid","marker-end","style"];function ee(t,r){let o=new Map;if(t.querySelectorAll("[id]").forEach(s=>{o.set(s.id,s.id+r),s.id=s.id+r}),o.size===0)return;let i=s=>s.replace(/url\(['"]?#([^'")]+)['"]?\)/g,(n,l)=>o.has(l)?`url(#${o.get(l)})`:n);t.querySelectorAll("*").forEach(s=>{for(let n of Z){let l=s.getAttribute(n);l?.includes("url(")&&s.setAttribute(n,i(l))}for(let n of["href","xlink:href"]){let l=s.getAttribute(n);l?.startsWith("#")&&o.has(l.slice(1))&&s.setAttribute(n,`#${o.get(l.slice(1))}`)}});let u=t.querySelectorAll("style");if(u.length){let s=n=>n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");u.forEach(n=>{let l=n.textContent??"";o.forEach((g,h)=>{l=l.replace(new RegExp(`#${s(h)}(?![\\w-])`,"g"),`#${g}`)}),n.textContent=l})}}function te(t,r){let o=t.querySelectorAll("svg");r.querySelectorAll("svg").forEach((i,u)=>{let s=o[u]?.getBoundingClientRect();if(s&&s.width>0)i.setAttribute("width",String(Math.round(s.width))),i.setAttribute("height",String(Math.round(s.height))),i.style.maxWidth="100%";else if(i.hasAttribute("viewBox")&&!i.hasAttribute("width")){let n=(i.getAttribute("viewBox")??"").split(/[\s,]+/).map(Number);n.length===4&&n[2]>0&&(i.setAttribute("width",String(n[2])),i.setAttribute("height",String(n[3])),i.style.maxWidth="100%",i.style.height="auto")}})}function re(t,r){let o=t.querySelectorAll("deck-mermaid");r.querySelectorAll("deck-mermaid").forEach((i,u)=>{let s=o[u],n=document.createElement("div");n.className="ov-mermaid-snap",n.innerHTML=s?.renderedSvg??"";let l=s?.getBoundingClientRect();l&&l.width>0&&(n.style.width=`${l.width}px`,n.style.height=`${l.height}px`),i.replaceWith(n)})}function ie(t){t.querySelectorAll("[data-click], [data-click-auto], [data-click-children], [data-click-stagger] > *").forEach(r=>{r.style.opacity="",r.style.transform="",r.style.filter="",r.style.pointerEvents="",r.querySelectorAll("path, line, polyline, polygon, circle, ellipse, rect").forEach(o=>{o.style.strokeDashoffset=""})})}function oe(t,r){let o=t.cloneNode(!0);return o.setAttribute("active",""),ie(o),te(t,o),re(t,o),ee(o,`-ov${r}`),o}async function ne(t,r,o,i){let u=i+":"+t.dataset.idx+":"+r.outerHTML,s=o.get(r);if(s?.key===u){t.insertBefore(s.thumb,t.firstChild),t.dataset.loaded="1",delete t.dataset.building;return}let n=Array.from(r.querySelectorAll("deck-mermaid")).map(f=>f.whenRendered).filter(f=>!!f);if(n.length&&await Promise.all(n).catch(()=>{}),!t.isConnected)return;s?.thumb.remove();let l=document.createElement("div");l.className="ov-thumb";let g=l.attachShadow({mode:"open"});for(let f of document.querySelectorAll('link[rel="stylesheet"], style'))g.appendChild(f.cloneNode(!0));let h=document.createElement("deck-root");h.setAttribute("data-overview-snapshot","");for(let f of["preview","no-hint","no-arrows","no-counter"])h.setAttribute(f,"");let b=r.closest("deck-root");for(let f of["width","height","class","lang","dir","style"]){let E=b?.getAttribute(f);E!=null&&h.setAttribute(f,E)}h.style.cssText+=";position:absolute;inset:0;width:100%;height:100%;",h.appendChild(oe(r,Number(t.dataset.idx))),g.appendChild(h),o.set(r,{key:u,thumb:l}),t.insertBefore(l,t.firstChild),t.dataset.loaded="1",delete t.dataset.building}function ae(t,r){let o=t.shadowRoot;if(!o)return()=>{};X(o);let i=o.querySelector("#overview-grid");i||(i=document.createElement("div"),i.id="overview-grid",o.appendChild(i));let u=K.get(t);u||(u=new Map,K.set(t,u));let s=new Set(r.slides);for(let[e,c]of u)s.has(e)||(c.thumb.remove(),u.delete(e));let n=Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).filter(e=>!e.id.startsWith("rik-deck-")).map(e=>e.outerHTML).join("")+["width","height","class","lang","dir","style"].map(e=>t.getAttribute(e)).join("|"),l=n+r.slides.map(J).join("")+JSON.stringify(r.chapters.map(e=>e.startIdx)),g=R.get(t);if(g?.key===l)return i.querySelectorAll(".ov-cell").forEach(e=>{let c=Number(e.dataset.idx)===r.currentIdx;e.toggleAttribute("data-current",c),c?e.setAttribute("aria-current","true"):e.removeAttribute("aria-current")}),requestAnimationFrame(()=>{if(!t.hasAttribute("overview"))return;let e=i.querySelector(".ov-cell[data-current]");e?.scrollIntoView({block:"center"}),e?.focus({preventScroll:!0})}),g.dispose;g?.dispose(),i.innerHTML="";let h=r.slides.length,b=h>60,f=h>300?140:h>150?160:h>60?180:220;i.style.setProperty("--ov-cell-min",`${f}px`);let E=o.querySelector("#stage"),H=E?.clientWidth||window.innerWidth,Y=E?.clientHeight||window.innerHeight;i.style.setProperty("--ov-thumb-w",`${H}px`),i.style.setProperty("--ov-thumb-h",`${Y}px`);let W=new ResizeObserver(()=>{let e=i.querySelector(".ov-cell")?.clientWidth;e&&i.style.setProperty("--overview-scale",String(e/H))});W.observe(i),requestAnimationFrame(()=>{let e=i.querySelector(".ov-cell")?.clientWidth??f;i.style.setProperty("--overview-scale",String(e/H))});let S=document.createElement("div");S.className="ov-bar";let x=document.createElement("input");x.className="ov-search",x.type="search",x.placeholder=`Search ${h} slides \xB7 type to filter`,x.spellcheck=!1,S.appendChild(x);let q=document.createElement("span");q.className="ov-count",q.textContent=`${h} slides \xB7 ${r.chapters.length} chapters`,S.appendChild(q);let N=document.createElement("span");N.className="ov-hint",N.textContent="O \xB7 Esc \xB7 close",S.appendChild(N),i.appendChild(S);let C=document.createElement("div");C.className=`ov-body${b?"":" compact"}`,i.appendChild(C);let k=b?document.createElement("aside"):null;k&&(k.className="ov-aside",C.appendChild(k));let M=document.createElement("div");M.className=`ov-main${b?"":" ov-path"}`,C.appendChild(M);let $=[],z=[],P=new WeakMap,A=!1,T=[],I=!1,B=()=>{if(I||A||!T.length)return;I=!0;let e=()=>{I=!1,!A&&(T.shift()?.(),B())};"requestIdleCallback"in window?window.requestIdleCallback(e,{timeout:1e3}):setTimeout(e,32)},L=new IntersectionObserver(e=>{for(let c of e){if(!c.isIntersecting)continue;let a=c.target;if(a.dataset.loaded||a.dataset.building)continue;let p=P.get(a);if(!p)continue;a.dataset.building="1",L.unobserve(a);let d=()=>{ne(a,p,u,n).catch(w=>{let m=Number(a.dataset.tries??"0")+1;a.dataset.tries=String(m),console.warn("[rikiki/overview] thumbnail build failed",w),delete a.dataset.building,m<3&&!A&&L.observe(a)})};t.hasAttribute("overview")?d():(T.push(d),B())}},{root:null,rootMargin:"300px 0px",threshold:0});r.chapters.forEach((e,c)=>{let a=document.createElement("section");if(a.className="ov-chapter",a.id=`ov-chapter-${c}`,b){let d=document.createElement("header");d.className="ov-chapter-head";let w=document.createElement("span");w.className="ov-chapter-num",w.textContent=String(c+1).padStart(2,"0"),d.appendChild(w);let m=document.createElement("span");m.className="ov-chapter-title",m.textContent=G(e),d.appendChild(m);let v=document.createElement("span");v.className="ov-chapter-count",v.textContent=`${e.slides.length} slide${e.slides.length>1?"s":""}`,d.appendChild(v),a.appendChild(d)}let p=document.createElement("div");if(p.className="ov-row",e.slides.forEach((d,w)=>{if(!b&&w>0){let j=document.createElement("div");j.className="ov-connector",p.appendChild(j)}let m=e.startIdx+w,v=document.createElement("button");v.type="button",v.className="ov-cell",v.dataset.idx=String(m),v.dataset.search=U(d),m===r.currentIdx&&(v.dataset.current="1"),P.set(v,d),L.observe(v);let y=document.createElement("span");y.className="ov-cell-label",y.textContent=String(m+1),v.appendChild(y);let V=U(d).trim().slice(0,80);v.setAttribute("aria-label",`Slide ${m+1} of ${h}${V?` \xB7 ${V}`:""}`),m===r.currentIdx&&v.setAttribute("aria-current","true"),v.addEventListener("click",()=>r.onPick(m)),p.appendChild(v)}),a.appendChild(p),M.appendChild(a),$.push(a),k){let d=document.createElement("button");d.type="button",d.className="ov-aside-item",r.currentIdx>=e.startIdx&&r.currentIdx<e.startIdx+e.slides.length&&(d.dataset.active="1");let m=document.createElement("span");m.className="ov-aside-num",m.textContent=String(c+1).padStart(2,"0"),d.appendChild(m);let v=document.createElement("span");v.className="ov-aside-text",v.textContent=G(e);let y=document.createElement("div");y.className="ov-aside-count",y.textContent=`${e.slides.length} slide${e.slides.length>1?"s":""}`,v.appendChild(y),d.appendChild(v),d.addEventListener("click",()=>{a.scrollIntoView({behavior:"smooth",block:"start"})}),k.appendChild(d),z.push(d)}});let O=null;k&&(O=new IntersectionObserver(e=>{let c=e.filter(a=>a.isIntersecting).sort((a,p)=>a.boundingClientRect.top-p.boundingClientRect.top);if(c.length>0){let a=$.indexOf(c[0].target);a>=0&&z.forEach((p,d)=>{d===a?p.dataset.active="1":delete p.dataset.active})}},{root:M,rootMargin:"0px 0px -70% 0px",threshold:0}),$.forEach(e=>{O.observe(e)}));let _=i.querySelectorAll(".ov-cell");x.addEventListener("input",()=>{let e=x.value.trim().toLowerCase();if(!e){_.forEach(c=>{delete c.dataset.filteredOut});return}_.forEach(c=>{(c.dataset.search||"").includes(e)?delete c.dataset.filteredOut:c.dataset.filteredOut="1"})}),requestAnimationFrame(()=>{if(!t.hasAttribute("overview"))return;let e=i.querySelector(".ov-cell[data-current]");e&&(e.scrollIntoView({block:"center"}),e.focus({preventScroll:!0}))}),i.addEventListener("keydown",e=>{let c=e.key;if(c!=="ArrowLeft"&&c!=="ArrowRight")return;let a=[...i.querySelectorAll(".ov-cell")].filter(w=>!w.dataset.filteredOut),p=a.indexOf(document.activeElement);if(p<0)return;e.preventDefault();let d=a[p+(c==="ArrowRight"?1:-1)];d?.focus(),d?.scrollIntoView({block:"nearest"})});let D=()=>{A=!0,W.disconnect(),T.length=0,R.delete(t),O?.disconnect(),L.disconnect(),i&&(i.innerHTML="")};return R.set(t,{key:l,dispose:D}),D}export{ae as mountOverview};

package/dist/deck-presenter.js

@@ -1,5 +1,6 @@
-var D={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function S(e){return e==null?"":String(e).replace(/[&<>"']/g,t=>D[t])}var C="rik-presenter",T=new URL("./index.js",import.meta.url).href,a=null,p=null,u=null,h=null,f=!1;async function B(){if(h)return h;let e=window.getScreenDetails;if(!e)return null;try{return h=await e.call(window),h}catch{return null}}var g=1280,y=720;function I(e){return{left:Math.round(e.availLeft+(e.availWidth-g)/2),top:Math.round(e.availTop+(e.availHeight-y)/2)}}function M(e){let{left:t,top:r}=I(e);return`popup=yes,width=${g},height=${y},left=${t},top=${r}`}function N(e,t){let{left:r,top:n}=I(t);e.resizeTo(g,y),e.moveTo(r,n)}function E(e,t){e.requestFullscreen?.({screen:t}).then(()=>{if(!u?.has(e)){document.exitFullscreen?.().catch(()=>{});return}f=!0}).catch(()=>{})}function P(){document.fullscreenElement||(f=!1)}function A(){document.removeEventListener("fullscreenchange",P),f&&document.fullscreenElement&&document.exitFullscreen?.().catch(()=>{}),f=!1}function v(e){a?.close(),a=null,p?.close(),p=null,u?.delete(e),e.presenterActive=!1,A()}function R(e){let t=Array.from(e.children).filter(i=>i.tagName.toLowerCase().startsWith("deck-")),r=t.findIndex(i=>i.hasAttribute("active")),n=t[r]??null,d=t[r+1]??null,b=(n?.querySelector("deck-notes")?.textContent??"").trim(),o=document.querySelector('link[rel="stylesheet"][href*="rikiki"], link[rel="stylesheet"][href*="tokens"], link[rel="stylesheet"][href*="theme"]')?.href??"",l=Array.from(document.querySelectorAll("style")).map(i=>i.textContent??"").join(`
-`),m=document.querySelector('script[type="module"][data-rikiki-bundle]')?.textContent??"";return{current:r+1,total:t.length,slideHtml:n?.outerHTML??"",nextHtml:d?.outerHTML??null,notes:b,themeHref:o,inlineStyles:l,bundleHref:T,bundleInline:m}}function H(e){p&&p.postMessage({type:"state",state:R(e)})}var W=e=>`<!doctype html>
+var R={"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"};function S(e){return e==null?"":String(e).replace(/[&<>"']/g,n=>R[n])}var A="rik-presenter",D=new URL("./index.js",import.meta.url).href,a=null,p=null,u=null,f=null,h=!1;async function T(){if(f)return f;let e=window.getScreenDetails;if(!e)return null;try{return f=await e.call(window),f}catch{return null}}var g=1280,y=720;function C(e){return{left:Math.round(e.availLeft+(e.availWidth-g)/2),top:Math.round(e.availTop+(e.availHeight-y)/2)}}function M(e){let{left:n,top:r}=C(e);return`popup=yes,width=${g},height=${y},left=${n},top=${r}`}function $(e,n){let{left:r,top:t}=C(n);e.resizeTo(g,y),e.moveTo(r,t)}function E(e,n){e.requestFullscreen?.({screen:n}).then(()=>{if(!u?.has(e)){document.exitFullscreen?.().catch(()=>{});return}h=!0}).catch(()=>{})}function I(){document.fullscreenElement||(h=!1)}function B(){document.removeEventListener("fullscreenchange",I),h&&document.fullscreenElement&&document.exitFullscreen?.().catch(()=>{}),h=!1}function w(e){a?.close(),a=null,p?.close(),p=null,u?.delete(e),e.presenterActive=!1,B()}function P(e){let n=Array.from(e.children).filter(s=>s.tagName.toLowerCase().startsWith("deck-")),r=n.findIndex(s=>s.hasAttribute("active")),t=n[r]??null,d=n[r+1]??null,b=(t?.querySelector("deck-notes")?.textContent??"").trim(),o=document.querySelector('link[rel="stylesheet"][href*="rikiki"], link[rel="stylesheet"][href*="tokens"], link[rel="stylesheet"][href*="theme"]')?.href??"",l=Array.from(document.querySelectorAll("style")).map(s=>s.textContent??"").join(`
+`),m=document.querySelector('script[type="module"][data-rikiki-bundle]')?.textContent??"";return{current:r+1,total:n.length,step:e.step,steps:Number(t?.getAttribute("steps")||t?.getAttribute("data-steps")||0),slideHtml:t?.outerHTML??"",nextHtml:d?.outerHTML??null,notes:b,themeHref:o,previewStyles:Array.from(document.querySelectorAll('link[rel="stylesheet"], style')).map(s=>s.outerHTML).join(`
+`),moduleHrefs:Array.from(document.querySelectorAll('script[type="module"][src]')).map(s=>s.src),baseHref:document.baseURI,lang:document.documentElement.lang,canvasWidth:e.width,canvasHeight:e.height,inlineStyles:l,bundleHref:D,bundleInline:m}}function H(e){p&&p.postMessage({type:"state",state:P(e)})}var N=e=>`<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
@@ -56,7 +57,7 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
      container lets the iframe size against the pane in cq units. */
   #current .body { display: grid; place-items: center; container-type: size; }
   .panel iframe { border: 0; background: #0f1422; display: block; }
-  #current-frame {
+  #current-viewport {
     aspect-ratio: 16 / 9;
     width: min(100cqw, calc(100cqh * 16 / 9));
     height: auto;
@@ -64,12 +65,18 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
   }
   /* Next sizes its 16:9 box from the column width (its pane row is auto), so
      the panel hugs the thumbnail instead of stretching full-height. */
-  #next-frame {
+  #next-viewport {
     aspect-ratio: 16 / 9;
     width: 100%;
     height: auto;
     display: block;
   }
+  .preview-viewport { position: relative; overflow: hidden; }
+  .preview-viewport iframe {
+    position: absolute; top: 0; left: 0;
+    width: ${e.canvasWidth}px; height: ${e.canvasHeight}px;
+    transform-origin: top left;
+  }
   #notes { font-size: 17px; line-height: 1.6; white-space: pre-wrap; padding: 20px; overflow: auto; color: #e8e4f0; }
   #notes:empty::before { content: 'No notes for this slide.'; color: rgba(232,228,240,0.4); font-style: italic; }
   #footer {
@@ -101,11 +108,11 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
 <div class="grid">
   <section class="panel" id="current">
     <header>Current</header>
-    <div class="body"><iframe id="current-frame" srcdoc=""></iframe></div>
+    <div class="body"><div class="preview-viewport" id="current-viewport"><iframe id="current-frame" srcdoc=""></iframe></div></div>
   </section>
   <section class="panel" id="next">
     <header>Next</header>
-    <div class="body"><iframe id="next-frame" srcdoc=""></iframe></div>
+    <div class="body"><div class="preview-viewport" id="next-viewport"><iframe id="next-frame" srcdoc=""></iframe></div></div>
   </section>
   <section class="panel" id="notes-panel">
     <header>Speaker notes</header>
@@ -113,7 +120,7 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
   </section>
   <div id="footer">
     <div><span id="timer">00:00</span> <button id="timer-toggle">Pause</button> <button id="timer-reset">Reset</button></div>
-    <div id="counter">${e.current} / ${e.total}</div>
+    <div><span id="counter">${e.current} / ${e.total}</span> <span id="stepper"></span></div>
     <div>
       <label class="opt"><input type="checkbox" id="opt-advance" checked> Advance on click</label>
       <span class="ghost">\xB7 P to close</span>
@@ -121,9 +128,17 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
   </div>
 </div>
 <script>
-  const channel = new BroadcastChannel('${C}');
+  const channel = new BroadcastChannel('${A}');
   const current = document.getElementById('current-frame');
   const next = document.getElementById('next-frame');
+
+
+  const previewResize = new ResizeObserver(entries => {
+    for (const entry of entries) {
+      entry.target.querySelector('iframe').style.transform = 'scale(' + (entry.contentRect.width / ${e.canvasWidth}) + ')';
+    }
+  });
+  document.querySelectorAll('.preview-viewport').forEach(el => previewResize.observe(el));
   const notes = document.getElementById('notes');
   const counter = document.getElementById('counter');
   const timerEl = document.getElementById('timer');
@@ -151,31 +166,30 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
   };
   resetBtn.onclick = () => { startedAt = Date.now(); elapsed = 0; running = true; toggleBtn.textContent = 'Pause'; };
 
-  // Presentation options \xB7 push each change to the live deck over the channel.
   document.getElementById('opt-advance').addEventListener('change', (e) => {
     channel.postMessage({ type: 'config', advanceOnClick: e.target.checked });
   });
 
   function wrapFrame(slideHtml, forward) {
-    const themeHref    = ${JSON.stringify(e.themeHref)};
-    const inlineStyles = ${JSON.stringify(e.inlineStyles)};
+    const previewStyles = ${JSON.stringify(e.previewStyles).replace(/</g,"\\u003c")};
+    const moduleHrefs = ${JSON.stringify(e.moduleHrefs).replace(/</g,"\\u003c")};
+    const baseHref = ${JSON.stringify(e.baseHref).replace(/</g,"\\u003c")};
+    const lang = ${JSON.stringify(e.lang).replace(/</g,"\\u003c")};
     const bundleHref   = ${JSON.stringify(e.bundleHref)};
     const bundleInline = ${JSON.stringify(e.bundleInline)};
-    // Both values come from the host document, so they are only as trustworthy
-    // as the deck \xB7 escape before they become markup. escAttr closes an attribute
-    // breakout; escStyle stops a </style> inside the deck's own CSS (a string or
-    // a comment) from ending the block early.
+
+
+
+
     const escAttr  = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
     const escStyle = (s) => s.replace(/<\\/(style|script)/gi, '<\\\\/$1');
-    const themeLink  = themeHref ? '<link rel="stylesheet" href="' + escAttr(themeHref) + '">' : '';
-    const themeStyle = inlineStyles ? '<style>' + escStyle(inlineStyles) + '</style>' : '';
-    // Bootstrap rikiki inside the iframe so its <deck-*> elements upgrade.
-    //  \xB7 single-file deck \u2192 the framework is inlined and tagged \xB7 re-inline it
-    //    so the module base is the iframe document URL (a <script src="data:">
-    //    or a non-existent ./index.js would break new URL(rel, import.meta.url)
-    //    and abort registration). Escape any script end-tag so it can't close
-    //    this block early (this comment must avoid the literal too).
-    //  \xB7 served deck \u2192 load the real bundle URL with <script src>.
+
+
+
+
+
+
+
     let bundleTag;
     const esc = (c) => c.replace(/<\\/script/gi, '<\\\\/script');
     if (bundleInline) {
@@ -189,12 +203,12 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
     } else {
       bundleTag = '<script type="module" src="' + bundleHref + '"><' + '/script>';
     }
-    // Mark the cloned slide [active] so its real component CSS applies
-    // (:host([active]){display:flex}) instead of forcing display via !important.
+
+
     const activeSlide = slideHtml.replace(/^(\\s*<deck-[a-z-]+)/i, '$1 active');
-    // Only the "Current" pane is a control surface \xB7 it captures key/click/wheel
-    // and posts them to this popup window, which relays them onto the channel so
-    // the live deck acts on them. Coords are normalised 0..1 over the iframe.
+
+
+
     const forwarder = forward
       ? '<scr' + 'ipt>(function(){' +
         'var post=function(o){o.source="rikiki-presenter-input";parent.postMessage(o,"*");};' +
@@ -203,47 +217,76 @@ ${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
         'addEventListener("wheel",function(e){if(e.ctrlKey||e.metaKey)return;post({type:"wheel",x:e.clientX/innerWidth,y:e.clientY/innerHeight,dx:e.deltaX,dy:e.deltaY});},{passive:true});' +
         '})();<' + '/scr' + 'ipt>'
       : '';
-    // The deck always letterboxes into its logical canvas, so the slide keeps
-    // its 16:9 proportions regardless of the pane's shape \xB7 just drop the
-    // hint / nav-arrow chrome for a clean, correctly-shaped thumbnail.
-    return '<!doctype html><html><head><meta charset="UTF-8">' + themeLink + themeStyle +
-      bundleTag +
+
+
+
+    return '<!doctype html><html lang="' + escAttr(lang) + '"><head><meta charset="UTF-8"><base href="' + escAttr(baseHref) + '">' + previewStyles +
+      bundleTag + moduleHrefs.filter((href) => href !== bundleHref).map((href) => '<script type="module" src="' + escAttr(href) + '"><' + '/script>').join('') +
       '<style>html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0f1422}' +
       'deck-root{position:absolute;inset:0}</style>' +
-      '</head><body><deck-root no-hint no-arrows no-counter preview>' + activeSlide + '</deck-root>' + forwarder + '</body></html>';
+      '</head><body><deck-root width="${e.canvasWidth}" height="${e.canvasHeight}" no-hint no-arrows no-counter preview data-overview-snapshot>' + activeSlide + '</deck-root>' + forwarder + '</body></html>';
   }
 
+
+  const frames = new Map();
+  function updateFrame(frame, html, step, forward) {
+    let state = frames.get(frame);
+    if (!state) {
+      state = { html, step, ready: false, painted: null };
+      frames.set(frame, state);
+      frame.addEventListener('load', () => {
+        state.ready = true;
+        paint();
+      });
+      frame.srcdoc = wrapFrame('', forward);
+    }
+    state.html = html;
+    state.step = step;
+    function paint() {
+      if (!state.ready) return;
+      const root = frame.contentDocument?.querySelector('deck-root');
+      if (!root) return;
+      if (state.painted !== state.html) {
+        root.innerHTML = state.html || '<div style="padding:3rem;color:white">End of deck</div>';
+        root.firstElementChild?.setAttribute('active', '');
+        state.painted = state.html;
+      }
+
+      Promise.resolve().then(async () => {
+        const elements = [root.firstElementChild, ...root.querySelectorAll('*')].filter(Boolean);
+        await Promise.all(elements.map(el => el.updateComplete));
+        elements.forEach(el => el.applyStep?.(state.step));
+      });
+    }
+    paint();
+  }
   channel.onmessage = (e) => {
     if (e.data?.type !== 'state') return;
     const s = e.data.state;
     counter.textContent = s.current + ' / ' + s.total;
+    document.getElementById('stepper').textContent = s.steps ? ' \xB7 \xC9tape ' + s.step + ' / ' + s.steps : '';
     notes.textContent = s.notes;
-    if (s.slideHtml) current.srcdoc = wrapFrame(s.slideHtml, true);
-    if (s.nextHtml)  next.srcdoc = wrapFrame(s.nextHtml, false);
-    else next.srcdoc = '<!doctype html><html><body style="background:#0f1422;color:rgba(232,228,240,0.4);display:flex;align-items:center;justify-content:center;font-family:system-ui">End of deck</body></html>';
+    updateFrame(current, s.slideHtml, s.step, true);
+    updateFrame(next, s.nextHtml, 0, false);
   };
 
-  // Initial paint from the seed state
-  const seed = ${JSON.stringify(e)};
+  const seed = ${JSON.stringify(e).replace(/</g,"\\u003c")};
   channel.postMessage({ type: 'state', state: seed });
 
-  // Forward keys back to the main window (so the speaker can drive nav from the laptop)
   window.addEventListener('keydown', (e) => {
     if (e.target.matches && e.target.matches('input,textarea,button')) return;
     channel.postMessage({ type: 'key', key: e.key, shift: e.shiftKey });
   });
 
-  // Relay input captured inside the "Current" preview iframe (key/click/wheel)
-  // onto the channel \xB7 the iframe is a separate browsing context so its events
-  // never reach this window directly \xB7 it postMessages them here instead.
+
+
   window.addEventListener('message', (e) => {
     const d = e.data;
     if (!d || d.source !== 'rikiki-presenter-input') return;
     channel.postMessage({ type: d.type, key: d.key, shift: d.shift, x: d.x, y: d.y, dx: d.dx, dy: d.dy });
   });
 
-  // Tell main window we're alive
   channel.postMessage({ type: 'hello' });
 <\/script>
 </body>
-</html>`;function $(e,t){let r=document.elementFromPoint(e,t);for(;r?.shadowRoot;){let n=r.shadowRoot.elementFromPoint(e,t);if(!n||n===r)break;r=n}return r}function F(e,t,r){for(let n=e;n;n=n.parentElement){let d=getComputedStyle(n);if(r!==0&&n.scrollHeight>n.clientHeight&&/auto|scroll/.test(d.overflowY)||t!==0&&n.scrollWidth>n.clientWidth&&/auto|scroll/.test(d.overflowX))return n}return null}function O(e,t,r){let n=e.getBoundingClientRect();return{x:n.left+t*n.width,y:n.top+r*n.height}}function L(e,t){let{x:r,y:n}=O(e,t.x??.5,t.y??.5);return{x:r,y:n,target:$(r,n)??e}}function q(e){let t=(e??"all").trim();return t==="none"?"none":t===""||t==="all"?"wheel arrows aux":t.split(/\s+/).filter(r=>r!=="click").join(" ")||"none"}function U(e){if(u=u??new WeakSet,u.has(e)){v(e);return}u.add(e);let t=e.mouseNav;p=new BroadcastChannel(C),e.addEventListener("slide-change",()=>H(e)),p.addEventListener("message",s=>{let o=s.data;if(o?.type==="key"&&o.key)window.dispatchEvent(new KeyboardEvent("keydown",{key:o.key,shiftKey:!!o.shift,bubbles:!0}));else if(o?.type==="click"){let{x:l,y:m,target:i}=L(e,o),c={bubbles:!0,composed:!0,cancelable:!0,clientX:l,clientY:m,view:window,shiftKey:!!o.shift};i.dispatchEvent(new PointerEvent("pointerdown",{...c,pointerId:1,isPrimary:!0})),i.dispatchEvent(new PointerEvent("pointerup",{...c,pointerId:1,isPrimary:!0})),i.dispatchEvent(new MouseEvent("click",c))}else if(o?.type==="wheel"){let{x:l,y:m,target:i}=L(e,o),c=o.dx??0,k=o.dy??0,x=F(i,c,k);x?x.scrollBy({left:c,top:k}):i.dispatchEvent(new WheelEvent("wheel",{bubbles:!0,composed:!0,cancelable:!0,clientX:l,clientY:m,deltaX:c,deltaY:k,view:window}))}else o?.type==="config"&&typeof o.advanceOnClick=="boolean"?e.mouseNav=o.advanceOnClick?t:q(t):o?.type==="hello"&&H(e)});let r=h,n=r?.screens.find(s=>s!==r.currentScreen)??null;n?E(e,n):B().then(s=>{if(!s)return;let o=s.screens.find(l=>l!==s.currentScreen);o&&E(e,o),a&&s.currentScreen&&N(a,s.currentScreen)});let d=R(e),w=r?.currentScreen?M(r.currentScreen):`popup=yes,width=${g},height=${y}`;if(a=window.open("","rikiki-presenter",w),!a){console.warn("[rikiki/presenter] popup was blocked \xB7 allow popups for this site"),v(e);return}a.document.open(),a.document.write(W(d)),a.document.close(),e.presenterActive=!0,document.addEventListener("fullscreenchange",P);let b=setInterval(()=>{a?.closed&&(clearInterval(b),v(e))},1e3)}export{U as installPresenter};
+</html>`;function W(e,n){let r=document.elementFromPoint(e,n);for(;r?.shadowRoot;){let t=r.shadowRoot.elementFromPoint(e,n);if(!t||t===r)break;r=t}return r}function q(e,n,r){for(let t=e;t;t=t.parentElement){let d=getComputedStyle(t);if(r!==0&&t.scrollHeight>t.clientHeight&&/auto|scroll/.test(d.overflowY)||n!==0&&t.scrollWidth>t.clientWidth&&/auto|scroll/.test(d.overflowX))return t}return null}function F(e,n,r){let t=e.getBoundingClientRect();return{x:t.left+n*t.width,y:t.top+r*t.height}}function L(e,n){let{x:r,y:t}=F(e,n.x??.5,n.y??.5);return{x:r,y:t,target:W(r,t)??e}}function O(e){let n=(e??"all").trim();return n==="none"?"none":n===""||n==="all"?"wheel arrows aux":n.split(/\s+/).filter(r=>r!=="click").join(" ")||"none"}function j(e){if(u=u??new WeakSet,u.has(e)){w(e);return}u.add(e);let n=e.mouseNav;p=new BroadcastChannel(A),e.addEventListener("step-change",()=>H(e)),p.addEventListener("message",i=>{let o=i.data;if(o?.type==="key"&&o.key)window.dispatchEvent(new KeyboardEvent("keydown",{key:o.key,shiftKey:!!o.shift,bubbles:!0}));else if(o?.type==="click"){let{x:l,y:m,target:s}=L(e,o),c={bubbles:!0,composed:!0,cancelable:!0,clientX:l,clientY:m,view:window,shiftKey:!!o.shift};s.dispatchEvent(new PointerEvent("pointerdown",{...c,pointerId:1,isPrimary:!0})),s.dispatchEvent(new PointerEvent("pointerup",{...c,pointerId:1,isPrimary:!0})),s.dispatchEvent(new MouseEvent("click",c))}else if(o?.type==="wheel"){let{x:l,y:m,target:s}=L(e,o),c=o.dx??0,v=o.dy??0,x=q(s,c,v);x?x.scrollBy({left:c,top:v}):s.dispatchEvent(new WheelEvent("wheel",{bubbles:!0,composed:!0,cancelable:!0,clientX:l,clientY:m,deltaX:c,deltaY:v,view:window}))}else o?.type==="config"&&typeof o.advanceOnClick=="boolean"?e.mouseNav=o.advanceOnClick?n:O(n):o?.type==="hello"&&H(e)});let r=f,t=r?.screens.find(i=>i!==r.currentScreen)??null;t?E(e,t):T().then(i=>{if(!i)return;let o=i.screens.find(l=>l!==i.currentScreen);o&&E(e,o),a&&i.currentScreen&&$(a,i.currentScreen)});let d=P(e),k=r?.currentScreen?M(r.currentScreen):`popup=yes,width=${g},height=${y}`;if(a=window.open("","rikiki-presenter",k),!a){console.warn("[rikiki/presenter] popup was blocked \xB7 allow popups for this site"),w(e);return}a.document.open(),a.document.write(N(d)),a.document.close(),e.presenterActive=!0,document.addEventListener("fullscreenchange",I);let b=setInterval(()=>{a?.closed&&(clearInterval(b),w(e))},1e3)}export{j as installPresenter};

package/dist/{runtime/deck-root.d.ts → deck-root.d.ts}

@@ -35,6 +35,9 @@ export interface DeckPlugin {
     navigate?(to: number, ctx: DeckContext, proceed: () => void): boolean | void;
 }
 export declare class DeckRoot extends LitElement {
+    /** Internal overview surface: author selectors still see deck-root, but the
+     *  outer thumbnail owns sizing and no presentation runtime is needed. */
+    private get _overviewSnapshot();
     static styles: import("lit").CSSResult;
     current: number;
     step: number;
@@ -193,6 +196,16 @@ export declare class DeckRoot extends LitElement {
      *  surface · removing the override lets the bands fall back to that same
      *  surface, which stays seamless too. */
     private _applyLetterbox;
+    /** A slide can reach the engine before its own module does · an opt-in
+     *  component loads from its own script tag, and nothing orders the two.
+     *  Until it upgrades it has no shadow DOM and reports a TRANSPARENT
+     *  background, so the read above finds nothing and the bands keep the page
+     *  surface. This is the only measurement in the engine with no observer
+     *  behind it, so without this it would never be taken again.
+     *
+     *  Same shape as _stepWatcher below, which catches a step count that
+     *  arrives late for the same reason. */
+    private _repaintLetterboxWhenDefined;
     /** The scaling baseline is a framework concern, not a theme one: inject it
      *  globally so any theme (or none) gets it. The rem unit tracks the logical
      *  canvas height · the #stage transform does the responsive scaling · and the
@@ -323,9 +336,7 @@ export declare class DeckRoot extends LitElement {
     private _goToCoords;
     private _applyActive;
     private _applyStep;
-    /** The bottom-right slide counter is noise in modes where it shouldn't show:
-     *  the overview grid, a black/white blanked screen, and the cover slide (the
-     *  title slide has no business carrying a page number). */
+    /** Keep numbering on all slide layouts; hide it only in overlay modes. */
     private _counterHidden;
     private _updateUI;
     updated(changed: PropertyValues<this>): void;