rikiki-deck 0.6.0 → 0.7.2

package/dist/deck-presenter.js

@@ -1,23 +1,39 @@
-var H="rik-presenter",R=new URL("./index.js",import.meta.url).href,l=null,p=null,u=null,f=null,h=!1;async function I(){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 T(e,n){let{left:r,top:t}=C(n);e.resizeTo(g,y),e.moveTo(r,t)}function S(e,n){e.requestFullscreen?.({screen:n}).then(()=>{if(!u?.has(e)){document.exitFullscreen?.().catch(()=>{});return}h=!0}).catch(()=>{})}function P(){document.fullscreenElement||(h=!1)}function B(){document.removeEventListener("fullscreenchange",P),h&&document.fullscreenElement&&document.exitFullscreen?.().catch(()=>{}),h=!1}function v(e){l?.close(),l=null,p?.close(),p=null,u?.delete(e),e.presenterActive=!1,B()}function D(e){let n=Array.from(e.children).filter(i=>i.tagName.toLowerCase().startsWith("deck-")),r=n.findIndex(i=>i.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??"",a=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:n.length,slideHtml:t?.outerHTML??"",nextHtml:d?.outerHTML??null,notes:b,themeHref:o,inlineStyles:a,bundleHref:R,bundleInline:m}}function E(e){p&&p.postMessage({type:"state",state:D(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">
 <title>Rikiki \xB7 presenter</title>
-${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
+${e.themeHref?`<link rel="stylesheet" href="${S(e.themeHref)}">`:""}
 <style>
   html, body { margin: 0; padding: 0; height: 100%; background: #0f1422; color: #fafafa; font-family: var(--rik-font-sans, system-ui); }
   .grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
-    grid-template-rows: 1fr auto;
+    /* Next is sized to its 16:9 content (top-right); notes fill the rest of the
+       right column; current spans the full left height. Avoids the dead bands a
+       full-height narrow Next pane left around a small 16:9 thumbnail. */
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+      "current next"
+      "current notes"
+      "footer  footer";
     gap: clamp(8px, 1.5vw, 16px);
     padding: clamp(8px, 1.5vw, 16px);
     height: 100vh;
     box-sizing: border-box;
   }
+  #current { grid-area: current; }
+  #next { grid-area: next; }
+  #notes-panel { grid-area: notes; }
+  #footer { grid-area: footer; }
   @media (max-width: 1000px) {
-    .grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr auto auto; }
+    .grid {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto 1fr auto;
+      grid-template-areas: "current" "next" "notes" "footer";
+    }
   }
   .panel {
     background: #1e2840;
@@ -36,17 +52,31 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
     background: #161c2e;
   }
   .panel .body { flex: 1; min-height: 0; padding: 16px; overflow: hidden; border-radius: 8px; }
-  /* Preview panes center a 16:9 box so the thumbnail matches the projection
-     geometry regardless of the pane/window shape (issue #5) \xB7 the size
+  /* Current centers a 16:9 box in its (tall) pane so the thumbnail matches the
+     projection geometry regardless of pane shape (issue #5) \xB7 the size
      container lets the iframe size against the pane in cq units. */
-  #current .body, #next .body { display: grid; place-items: center; container-type: size; }
+  #current .body { display: grid; place-items: center; container-type: size; }
   .panel iframe { border: 0; background: #0f1422; display: block; }
-  #current-frame, #next-frame {
+  #current-viewport {
     aspect-ratio: 16 / 9;
     width: min(100cqw, calc(100cqh * 16 / 9));
     height: auto;
     max-width: 100%;
   }
+  /* 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-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 {
@@ -78,19 +108,19 @@ ${e.themeHref?`<link rel="stylesheet" href="${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" style="grid-column: 1 / -1;">
+  <section class="panel" id="notes-panel">
     <header>Speaker notes</header>
     <div id="notes" class="body"></div>
   </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>
@@ -98,9 +128,17 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
   </div>
 </div>
 <script>
-  const channel = new BroadcastChannel('${H}');
+  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');
@@ -128,25 +166,30 @@ ${e.themeHref?`<link rel="stylesheet" href="${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)};
-    const themeLink  = themeHref ? '<link rel="stylesheet" href="' + themeHref + '">' : '';
-    const themeStyle = inlineStyles ? '<style>' + 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>.
+
+
+
+
+    const escAttr  = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+    const escStyle = (s) => s.replace(/<\\/(style|script)/gi, '<\\\\/$1');
+
+
+
+
+
+
+
     let bundleTag;
     const esc = (c) => c.replace(/<\\/script/gi, '<\\\\/script');
     if (bundleInline) {
@@ -160,12 +203,12 @@ ${e.themeHref?`<link rel="stylesheet" href="${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,"*");};' +
@@ -174,47 +217,76 @@ ${e.themeHref?`<link rel="stylesheet" href="${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 F(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 $(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 N(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}=N(e,n.x??.5,n.y??.5);return{x:r,y:t,target:F(r,t)??e}}function A(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 O(e){if(u=u??new WeakSet,u.has(e)){v(e);return}u.add(e);let n=e.mouseNav;p=new BroadcastChannel(H),e.addEventListener("slide-change",()=>E(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:a,y:m,target:i}=L(e,o),c={bubbles:!0,composed:!0,cancelable:!0,clientX:a,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:a,y:m,target:i}=L(e,o),c=o.dx??0,k=o.dy??0,x=$(i,c,k);x?x.scrollBy({left:c,top:k}):i.dispatchEvent(new WheelEvent("wheel",{bubbles:!0,composed:!0,cancelable:!0,clientX:a,clientY:m,deltaX:c,deltaY:k,view:window}))}else o?.type==="config"&&typeof o.advanceOnClick=="boolean"?e.mouseNav=o.advanceOnClick?n:A(n):o?.type==="hello"&&E(e)});let r=f,t=r?.screens.find(s=>s!==r.currentScreen)??null;t?S(e,t):I().then(s=>{if(!s)return;let o=s.screens.find(a=>a!==s.currentScreen);o&&S(e,o),l&&s.currentScreen&&T(l,s.currentScreen)});let d=D(e),w=r?.currentScreen?M(r.currentScreen):`popup=yes,width=${g},height=${y}`;if(l=window.open("","rikiki-presenter",w),!l){console.warn("[rikiki/presenter] popup was blocked \xB7 allow popups for this site"),v(e);return}l.document.open(),l.document.write(W(d)),l.document.close(),e.presenterActive=!0,document.addEventListener("fullscreenchange",P);let b=setInterval(()=>{l?.closed&&(clearInterval(b),v(e))},1e3)}export{O 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/deck-pull.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export type DeckPullSide = 'left' | 'right' | 'full';
+export declare class DeckPull extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** `full` (default), or floated to one side so the text wraps around it. */
+    side: DeckPullSide;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'deck-pull': DeckPull;
+    }
+}

package/dist/deck-pull.js

@@ -0,0 +1 @@
+var s=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var p=(a,t,i,l)=>{for(var e=l>1?void 0:l?c(t,i):t,d=a.length-1,o;d>=0;d--)(o=a[d])&&(e=(l?o(t,i,e):o(e))||e);return l&&e&&s(t,i,e),e};import{LitElement as n,css as f,html as g}from"./vendor/lit.js";import{customElement as k,property as v}from"./vendor/lit.js";var r=class extends n{constructor(){super(...arguments);this.side="full"}render(){return g`<slot></slot>`}};r.styles=f`:host{display:block;font-family:var(--deck-pull-font,var(--rik-font-display,var(--rik-font-sans)));font-size:var(--deck-pull-size,var(--rik-font-size-big));line-height:1.15;letter-spacing:-0.02em;font-weight:800;color:var(--deck-pull-color,var(--rik-text-default));background:var(--deck-pull-bg,transparent);padding:var(--deck-pull-padding,var(--rik-space-2) 0);border-left:var(--deck-pull-rule-width,4px) solid var(--deck-pull-rule,var(--rik-accent));padding-left:var(--rik-space-4);text-wrap:balance}:host([side='left']),:host([side='right']){width:var(--deck-pull-width,38%);margin-block:var(--rik-space-2)}:host([side='left']){float:left;margin-right:var(--rik-space-4)}:host([side='right']){float:right;margin-left:var(--rik-space-4);border-left:0;border-right:var(--deck-pull-rule-width,4px) solid var(--deck-pull-rule,var(--rik-accent));padding-left:0;padding-right:var(--rik-space-4);text-align:right}@media print{:host{-webkit-print-color-adjust:exact;print-color-adjust:exact}}`,p([v({type:String,reflect:!0})],r.prototype,"side",2),r=p([k("deck-pull")],r);export{r as DeckPull};

package/dist/{atoms/deck-punch.d.ts → deck-punch.d.ts}

@@ -7,6 +7,12 @@ export declare class DeckPunch extends LitElement {
     size?: DeckPunchSize;
     weight?: string;
     align?: string;
+    /** Shrink to fit the box (overrides `size`/cqw fluid scaling). */
+    fit: boolean;
+    /** fit floor / ceiling in rem · default 1 / 12. */
+    fitMin?: number;
+    fitMax?: number;
+    private fitter;
     updated(): void;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/deck-punch.js

@@ -1 +1 @@
-var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var r=(n,i,o,s)=>{for(var t=s>1?void 0:s?d(i,o):i,l=n.length-1,c;l>=0;l--)(c=n[l])&&(t=(s?c(i,o,t):c(t))||t);return s&&t&&p(i,o,t),t};import{LitElement as f,html as m,css as v}from"./vendor/lit.js";import{customElement as y,property as a}from"./vendor/lit.js";var g={warn:"var(--rik-status-warn)",danger:"var(--rik-status-danger)",ok:"var(--rik-status-success)",info:"var(--rik-accent)",muted:"var(--rik-text-default--faint)",accent:"var(--rik-accent)"},h={lead:"var(--rik-font-size-lead)",big:"var(--rik-font-size-big)",mega:"var(--rik-font-size-mega)",stat:"var(--rik-font-size-stat)",display:"clamp(2.6rem, 6cqw, 5rem)"},e=class extends f{updated(){this.tone&&g[this.tone]?this.style.setProperty("--_color",g[this.tone]):this.style.removeProperty("--_color"),this.size&&h[this.size]?this.style.setProperty("--_size",h[this.size]):this.style.removeProperty("--_size")}render(){return m`<slot></slot>`}};e.styles=v`:host{display:block;margin:0;font-family:var(--rik-font-display,var(--rik-font-sans));font-weight:900;line-height:1.1;letter-spacing:-0.02em;font-size:var(--deck-punch-size,var(--_size,var(--rik-font-size-lead)));color:var(--deck-punch-color,var(--_color,inherit))}:host([weight="700"]){font-weight:700}:host([weight="800"]){font-weight:800}:host([align="center"]){text-align:center}:host([align="right"]){text-align:right}`,r([a({type:String})],e.prototype,"tone",2),r([a({type:String})],e.prototype,"size",2),r([a({type:String,reflect:!0})],e.prototype,"weight",2),r([a({type:String,reflect:!0})],e.prototype,"align",2),e=r([y("deck-punch")],e);export{e as DeckPunch};
+var p=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var n=(a,t,r,l)=>{for(var e=l>1?void 0:l?d(t,r):t,o=a.length-1,s;o>=0;o--)(s=a[o])&&(e=(l?s(t,r,e):s(e))||e);return l&&e&&p(t,r,e),e};import{LitElement as u,html as v,css as y}from"./vendor/lit.js";import{customElement as b,property as h}from"./vendor/lit.js";function g(a,t,r,l=.5){if(t<=a)return a;if(r(t))return t;let e=a,o=t;for(;o-e>l;){let s=(e+o)/2;r(s)?e=s:o=s}return e}var c=class{constructor(t,r={}){this.host=t;this.opts=r;t.addController(this)}hostConnected(){this.ro=new ResizeObserver(()=>this.refit()),this.ro.observe(this.host),this.refit(),document.fonts?.ready?.then(()=>{this.ro&&this.refit()})}hostDisconnected(){this.ro?.disconnect(),this.ro=void 0}refit(){let t=this.host;if(this.opts.enabled&&!this.opts.enabled()){t.style.removeProperty("font-size");return}if(t.clientWidth===0||t.clientHeight===0)return;let r=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,l=(this.opts.minRem?.()??1)*r,e=(this.opts.maxRem?.()??12)*r,o=s=>(t.style.fontSize=`${s}px`,t.scrollWidth<=t.clientWidth&&t.scrollHeight<=t.clientHeight);t.style.fontSize=`${g(l,e,o)}px`}};var m={warn:"var(--rik-status-warn__text)",danger:"var(--rik-status-danger__text)",ok:"var(--rik-status-success__text)",info:"var(--rik-accent__text)",muted:"var(--rik-text-default--faint)",accent:"var(--rik-accent__text)"},f={lead:"var(--rik-font-size-lead)",big:"var(--rik-font-size-big)",mega:"var(--rik-font-size-mega)",stat:"var(--rik-font-size-stat)",display:"clamp(2.6rem, 6cqw, 5rem)"},i=class extends u{constructor(){super(...arguments);this.fit=!1;this.fitter=new c(this,{enabled:()=>this.fit,minRem:()=>this.fitMin??1,maxRem:()=>this.fitMax??12})}updated(){this.fitter.refit(),this.tone&&m[this.tone]?this.style.setProperty("--_color",m[this.tone]):this.style.removeProperty("--_color"),this.size&&f[this.size]?this.style.setProperty("--_size",f[this.size]):this.style.removeProperty("--_size")}render(){return v`<slot></slot>`}};i.styles=y`:host{display:block;margin:0;font-family:var(--rik-font-display,var(--rik-font-sans));font-weight:900;line-height:1.1;letter-spacing:-0.02em;font-size:var(--deck-punch-size,var(--_size,var(--rik-font-size-lead)));color:var(--deck-punch-color,var(--_color,inherit))}:host([weight="700"]){font-weight:700}:host([weight="800"]){font-weight:800}:host([align="center"]){text-align:center}:host([align="right"]){text-align:right}:host([fit]){display:block;width:100%;height:100%;overflow:hidden}`,n([h({type:String})],i.prototype,"tone",2),n([h({type:String})],i.prototype,"size",2),n([h({type:String,reflect:!0})],i.prototype,"weight",2),n([h({type:String,reflect:!0})],i.prototype,"align",2),n([h({type:Boolean})],i.prototype,"fit",2),n([h({type:Number,attribute:"fit-min"})],i.prototype,"fitMin",2),n([h({type:Number,attribute:"fit-max"})],i.prototype,"fitMax",2),i=n([b("deck-punch")],i);export{i as DeckPunch};

package/dist/deck-quote.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export type DeckQuoteSize = 'lead' | 'big' | 'mega';
+export declare class DeckQuote extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Attributed name · omitted, the quote stands alone. */
+    author?: string;
+    /** Role or affiliation, under the name.
+     *
+     *  NOT `role`: that attribute is ARIA's, and putting "CTO, Acme" in it would
+     *  announce the figure as a landmark of that name. The property would also
+     *  shadow HTMLElement.role. */
+    authorRole?: string;
+    /** Type size of the quoted line. */
+    size: DeckQuoteSize;
+    /** Drop the accent rule down the left edge. */
+    plain: boolean;
+    /** Use the inverse text tokens · for a quote on a dark slide. */
+    onDark: boolean;
+    /** Hide the decorative opening mark. */
+    noMark: boolean;
+    willUpdate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'deck-quote': DeckQuote;
+    }
+}

package/dist/deck-quote.js

@@ -0,0 +1,6 @@
+var p=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var r=(s,o,n,i)=>{for(var t=i>1?void 0:i?k(o,n):o,c=s.length-1,d;c>=0;c--)(d=s[c])&&(t=(i?d(o,n,t):d(t))||t);return i&&t&&p(o,n,t),t};import{LitElement as h,css as f,html as l}from"./vendor/lit.js";import{customElement as v,property as a}from"./vendor/lit.js";var u={lead:"var(--rik-font-size-lead)",big:"var(--rik-font-size-big)",mega:"var(--rik-font-size-mega)"},e=class extends h{constructor(){super(...arguments);this.size="big";this.plain=!1;this.onDark=!1;this.noMark=!1}willUpdate(){this.style.setProperty("--_size",u[this.size]??u.big)}render(){return l`<figure> ${this.noMark?"":l`<span class="mark" aria-hidden="true">&ldquo;</span>`}
+        <blockquote class="quote" part="quote"><slot></slot></blockquote>
+        ${this.author?l`<figcaption class="who" part="attribution"> <span class="author">${this.author}</span> ${this.authorRole?l`<span class="role">${this.authorRole}</span>`:""}
+              </figcaption>`:""}
+      </figure>
+    `}};e.styles=f`:host{display:block;font-family:var(--rik-font-sans);padding-left:var(--rik-space-4);border-left:var(--deck-quote-rule-width,3px) solid var(--deck-quote-rule,var(--rik-accent))}figure{margin:0}:host([plain]){padding-left:0;border-left:none}.mark{display:block;font-family:var(--rik-font-display,var(--rik-font-sans));font-size:var(--deck-quote-mark-size,calc(var(--_size) * 1.8));line-height:0.8;color:var(--deck-quote-mark-color,var(--rik-accent));user-select:none}.quote{display:block;font-size:var(--deck-quote-size,var(--_size));line-height:1.25;color:var(--deck-quote-color,var(--rik-text-default));max-width:var(--deck-quote-max-width,26ch);margin:var(--deck-quote-gap,var(--rik-space-2)) 0;text-wrap:balance}.who{margin-top:var(--deck-quote-gap,var(--rik-space-2));line-height:1.35}.author{display:block;font-weight:700;color:var(--deck-quote-author-color,var(--rik-text-default))}.role{display:block;font-size:var(--rik-font-size-body);color:var(--deck-quote-role-color,var(--rik-text-default--muted))}:host([on-dark]) .quote,:host([on-dark]) .author{color:var(--rik-text-inverse)}:host([on-dark]) .role{color:var(--rik-text-inverse--muted)}`,r([a({type:String})],e.prototype,"author",2),r([a({type:String,attribute:"author-role"})],e.prototype,"authorRole",2),r([a({type:String,reflect:!0})],e.prototype,"size",2),r([a({type:Boolean,reflect:!0})],e.prototype,"plain",2),r([a({type:Boolean,reflect:!0,attribute:"on-dark"})],e.prototype,"onDark",2),r([a({type:Boolean,attribute:"no-mark"})],e.prototype,"noMark",2),e=r([v("deck-quote")],e);export{e as DeckQuote};

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;
@@ -153,12 +156,29 @@ export declare class DeckRoot extends LitElement {
      *  the container for an embedded one). Driven by a ResizeObserver. */
     private _applyScale;
     private _resizeObserver;
+    /** A step the opening fragment asked for, held until the slide can hear it.
+     *
+     *  The components that carry steps are opt-in modules, and a module can
+     *  register AFTER the engine has read the fragment and applied the step. The
+     *  step reached a slide whose children were still plain elements with no
+     *  applyStep to call, so it landed on nothing and no second attempt was ever
+     *  made · every link into the middle of a build opened its neutral state,
+     *  which is the one thing such a link exists to avoid. */
+    private _pendingStep;
+    private _stepWatcher;
     /** Zoom is live only in the fixed canvas and outside overlays. */
     private _zoomEnabled;
     /** Publish zoom + pan as custom props the #stage transform reads. */
     private _applyZoom;
     /** Keep the pan within bounds so the magnified stage always covers the
      *  viewport (no gaps); at fit (zoom 1) it forces re-centring. */
+    /** The three fields above, as the viewport model sees them. */
+    private get _view();
+    private set _view(value);
+    /** The logical canvas and the box it is shown in · the two measurements the
+     *  arithmetic in src/domain/viewport.ts needs, and the only DOM it involves. */
+    private get _canvas();
+    private get _box();
     private _clampPan;
     /** Zoom by a factor, keeping the point at viewport (cx, cy) fixed. */
     private _zoomAt;
@@ -176,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
@@ -195,6 +225,15 @@ export declare class DeckRoot extends LitElement {
      *  slide · it comes last so it wins the equal-specificity tie with the
      *  `:not([fluid])` rule. The `height:100%` pair backs the 100% `:host`
      *  sizing. */
+    /** Size the printed page from the deck's own canvas.
+     *
+     *  `@page` cannot read a custom property, so the rule is written from JS every
+     *  time the canvas changes. Without it the browser prints A4 and crops a 16:9
+     *  slide down its right edge · the exact symptom the FAQ promised away. */
+    /** What a screen reader hears on a slide change · position first, because
+     *  that is the part a listener cannot get any other way. */
+    private _liveLabel;
+    private _applyPageSize;
     private static _injectGlobals;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -221,6 +260,9 @@ export declare class DeckRoot extends LitElement {
     private _onAuxUp;
     private _onAuxClick;
     /** Group slides into chapters bounded by <deck-section> markers. */
+    /** The deck's shape as the navigation model sees it · rebuilt with the DOM
+     *  chapter list, and the only thing the decisions below read. */
+    private _outline;
     private _buildChapters;
     /** 2D navigation is opt-in via `nav="2d"` · it also needs the structure to
      *  make sense (2+ chapters, at least one with multiple slides). Without the
@@ -230,9 +272,34 @@ export declare class DeckRoot extends LitElement {
     private _mouseEnabled;
     /** Flat index → {chapter, intra-chapter index}. */
     private _coords;
-    private _flatFromCoords;
+    /** True when the deck IS the page rather than a widget inside one.
+     *
+     *  A full-page deck owns the URL, the keyboard and the wheel · that is the
+     *  whole point. An embedded deck owns none of them by default: the host put
+     *  the anchor in the URL, the host's reader is using the arrow keys to read
+     *  the host's page, and the wheel over a widget scrolls the page it sits in. */
+    private _isFullPage;
+    /** Does a key press belong to this deck right now? Always, when the deck is
+     *  the page · only while focus is inside it, when it is embedded. */
+    private _ownsKeyboard;
     private _onHash;
+    /** What the deep-link use case needs to know about this deck right now. */
+    private _linkContext;
     private _readHash;
+    /** Watch for a stepping component arriving late, and replay the step at it.
+     *
+     *  The trigger is the `data-steps` attribute a stepping component writes onto
+     *  its slide when it connects: that mutation IS the moment a component
+     *  capable of hearing a step appears. Watching it beats polling or waiting a
+     *  fixed time, and beats asking every component to reach back into the deck.
+     *
+     *  Armed only for a fragment that asks for a step, and disarmed at the first
+     *  move the reader makes · their navigation outranks the link they opened. */
+    private _watchForLateSteps;
+    /** Replay the opening step now that something on the slide can receive it. */
+    private _replayPendingStep;
+    /** Stop waiting · the link was honoured, or the reader moved on themselves. */
+    private _forgetPendingStep;
     private _writeHash;
     private _onKey;
     /** Lazy-import the help module the first time the user opens it. */
@@ -243,20 +310,33 @@ export declare class DeckRoot extends LitElement {
     /** Lazy-import the overview module the first time the user opens it. */
     private _renderOverviewIfActive;
     private _maxSteps;
-    /** The engine's own step count for the active slide · `steps`/`data-steps`
-     *  attribute, or a `deck-code[step-groups]` group count. Plugins extend this
-     *  through their `steps` hook (see _maxSteps). */
+    /** Step count for ANY slide · the navigation model asks about the slide it is
+     *  moving TO. Going back into the previous slide has to know that slide's
+     *  last step BEFORE the move, which is why this is not limited to `current`.
+     *  This is the `StepsOf` the domain takes. */
+    private _maxStepsFor;
+    /** The engine's own step count for a slide · `steps`/`data-steps` attribute,
+     *  or a `deck-code[step-groups]` group count. Plugins extend it through their
+     *  `steps` hook (see _maxStepsFor). */
     private _baseMaxSteps;
+    /** Where the deck is, as the navigation model sees it. */
+    private get _position();
+    /** Apply a whole position decided by the domain.
+     *
+     *  Slide AND step move together. The engine used to set them in two
+     *  statements, so a plugin that DEFERS navigation (a View Transition) ran the
+     *  second one against the old slide and the deferred move then reset the step
+     *  to 0 · going back into a slide landed on step 0 instead of its last step.
+     *  One value, applied once, cannot come apart that way. */
+    private _applyPosition;
+    private _moveTo;
     private _advance;
     private _back;
     private _goTo;
-    private _goToNow;
     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;