rikiki-deck 0.1.1 → 0.3.0

package/README.md

@@ -8,7 +8,7 @@ A tiny **Lit Web Components** framework for technical presentations. Drop a fold
 cp starter.html my-deck.html
 ```
 
-Edit `my-deck.html`. Each slide is a custom element. Markdown is available anywhere via `<deck-md>`. Navigate with `←` / `→` for sections, `↑` / `↓` within a section, `Space` for linear, `O` for overview.
+Edit `my-deck.html`. Each slide is a custom element. Markdown is available anywhere via `<deck-md>`. Navigate with `←` / `→` (or click, or the scroll wheel), `O` for the overview grid. Decks are linear by default; add `nav="2d"` on `<deck-root>` for chapter/slide grid navigation.
 
 ## Layout
 
@@ -122,16 +122,37 @@ Parser: `marked` 12 from CDN. Supports GFM (tables, task lists), code blocks, in
 
 ## Navigation
 
-| Key | Effect |
+By default navigation is **linear**: arrows move to the next / previous slide.
+Add `nav="2d"` on `<deck-root>` (with `<deck-section>` chapters) to opt into grid
+navigation, where `←` / `→` move between chapters and `↑` / `↓` within one.
+
+| Key | Effect (linear default) |
 |---|---|
-| `→` / `←` | Next / previous section (chapter) · falls back to linear at deck edges |
-| `↓` / `↑` | Next / previous slide within the current section |
-| `Space` / `PageDown` | Linear next (any axis) |
-| `PageUp` | Linear back |
+| `→` / `←` | Next / previous slide (or step) |
+| `Space` / `PageDown` | Advance · `PageUp` back |
 | `Home` / `End` | First / last slide |
-| `O` | Toggle overview |
+| `O` | Toggle overview grid (type to filter) |
+| `P` | Presenter / speaker-notes window |
 | `?` / `H` | Show keyboard help |
 
+The bottom-left hint chips (`← → O P ?`) are clickable shortcuts for the same
+actions.
+
+### Mouse
+
+On by default since 0.3.0: click to advance (Shift+click to go back), scroll
+wheel, discreet chevrons bottom-right, and mouse back/forward buttons. The wheel
+yields to scrollable content (a tall `deck-code`, a zoomable `<svg>`): it scrolls
+that element and only advances the deck once it reaches its scroll edge. Links,
+buttons and inputs never trigger navigation; add `data-no-advance` to opt any
+element out.
+
+```html
+<deck-root>                          <!-- everything on (default) -->
+<deck-root mouse-nav="none">         <!-- keyboard-only, pre-0.3 behavior -->
+<deck-root mouse-nav="wheel arrows"> <!-- pick from: click wheel arrows aux -->
+```
+
 ## Themes
 
 Picking a theme is one `<link>` change:
@@ -177,8 +198,16 @@ npm run typecheck  # tsc --noEmit
 
 `dist/` is versioned · consumers don't run a build.
 
+## Reveals & animations
+
+Per-element click-through builds are an opt-in plugin (`installClickStages()` from
+`dist/click-stages.js`): annotate elements with `data-click`, `data-click-hide`,
+`data-click-auto`, `data-click-stagger`, and `data-morph` (Keynote-style Magic
+Move via View Transitions). Slide transitions are driven by `transition="…"` on
+`<deck-root>`. See `docs/llms/rikiki-reference.md` §7 for the full attribute set,
+and `decks/tests/demo.html` for a runnable feature tour.
+
 ## Known limits
 
 - **Step reveal on code blocks** uses `step-groups` on `<deck-code>` but is not exposed elsewhere yet.
-- **No transitions** between slides · plain `display: none` toggle. Extend via opacity transition if needed.
-- **Syntax highlighting** is ~10 keywords of JS/TS, no AST. Hook a real highlighter (Prism, Shiki) if you need more.
+- **Syntax highlighting** is ~10 keywords of JS/TS, no AST. Hook a real highlighter (Prism, Shiki) if you need more, via `installShiki()`.

package/dist/atoms/deck-badge.d.ts

@@ -10,4 +10,3 @@ declare global {
         'deck-badge': DeckBadge;
     }
 }
-//# sourceMappingURL=deck-badge.d.ts.map

package/dist/atoms/deck-code.d.ts

@@ -19,4 +19,3 @@ declare global {
         'deck-code': DeckCode;
     }
 }
-//# sourceMappingURL=deck-code.d.ts.map

package/dist/atoms/deck-kicker.d.ts

@@ -3,4 +3,3 @@ export declare class DeckKicker extends LitElement {
     static styles: import("lit").CSSResult;
     render(): import("lit-html").TemplateResult<1>;
 }
-//# sourceMappingURL=deck-kicker.d.ts.map

package/dist/atoms/deck-punch.d.ts

@@ -15,4 +15,3 @@ declare global {
         'deck-punch': DeckPunch;
     }
 }
-//# sourceMappingURL=deck-punch.d.ts.map

package/dist/click-stages.js

@@ -0,0 +1 @@
+var D="data-click",v="data-click-hide",$="data-click-auto",S="data-click-stagger",Z="data-click-children";function J(t){return!t.hasAttribute(S)&&(t.parentElement?.hasAttribute(S)??!1)}function C(t){return x()?0:parseInt(t.getAttribute("data-anim-delay")??"",10)||0}var P=new WeakSet;function Q(t){t.querySelectorAll(`[${Z}]`).forEach(e=>{P.has(e)||(P.add(e),Array.from(e.children).forEach(n=>{let r=n;r.hasAttribute(D)||r.setAttribute(D,"");for(let s of["data-anim","data-anim-duration","data-anim-delay","data-anim-ease"]){let a=e.getAttribute(s);a&&!r.hasAttribute(s)&&r.setAttribute(s,a)}}))})}function tt(t){return z(t).reduce((e,n)=>Math.max(e,n.step),0)}function z(t){Q(t);let e=[],n=0,r=0;return t.querySelectorAll(`[${D}], [${v}], [${$}], [${S}]`).forEach(s=>{if(s.hasAttribute(S)){let m=parseInt(s.getAttribute(S)??"",10),b=Number.isFinite(m)?Math.max(0,m):80,G=++n;r=0,Array.from(s.children).forEach((A,o)=>{let i=A;e.push({el:i,step:G,hide:i.hasAttribute(v),delay:o*b+C(i),scheduled:!0})});return}if(J(s))return;if(s.hasAttribute($)){r+=parseInt(s.getAttribute($)??"",10)||0,e.push({el:s,step:n,hide:!1,delay:r+C(s),scheduled:!0});return}let a=s.hasAttribute(v),u=s.getAttribute(a?v:D)??"",c=parseInt(u,10),p=Number.isFinite(c)&&c>0,d=p?c:++n;p?n=Math.max(n,c):r=0,e.push({el:s,step:d,hide:a,delay:0})}),e}var O="data-morph",y=!1;function T(t){let e=new Map;return t.querySelectorAll(`[${O}]`).forEach(n=>{let r=n.getAttribute(O);r&&e.set(r,[...e.get(r)??[],n])}),e}function N(t){let e=getComputedStyle(t);return e.display==="none"||e.visibility==="hidden"?!1:(t.style.opacity!==""?t.style.opacity:e.opacity)!=="0"&&t.getClientRects().length>0}function et(t,e){let n=T(e);return Array.from(T(t).keys()).filter(r=>n.has(r))}var nt=t=>t.replace(/[^a-zA-Z0-9_-]/g,"_");function _(t,e){t.forEach((n,r)=>{let s=!1;n.forEach(a=>{let c=(e?.get(a)??N(a))&&!s;c&&(s=!0),a.style.viewTransitionName=c?`rk-morph-${nt(r)}`:"none"})})}function j(t,e){return t.find(n=>e?.get(n)??N(n))}function F(t){let e=new Map;return t.forEach((n,r)=>{let s=j(n);s&&e.set(r,s.getBoundingClientRect())}),e}var X=360,rt="cubic-bezier(0.22, 1, 0.3, 1)";function W(t,e,n){t.forEach((r,s)=>{let a=e.get(s),u=j(r,n);if(!a||!u)return;let c=u.getBoundingClientRect();if(!c.width||!c.height||!a.width||!a.height)return;let p=a.left-c.left,d=a.top-c.top,m=a.width/c.width,b=a.height/c.height;!p&&!d&&m===1&&b===1||u.animate([{transformOrigin:"top left",transform:`translate(${p}px, ${d}px) scale(${m}, ${b})`},{transformOrigin:"top left",transform:"none"}],{duration:X,easing:rt})})}var q=new WeakSet,ot={out:"cubic-bezier(0.22, 1, 0.36, 1)",spring:"cubic-bezier(0.5, 1.8, 0.3, 1)","in-out":"cubic-bezier(0.45, 0, 0.55, 1)"};function x(){return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches??!1}function st(t){if(x())return{dur:1,delay:0,ease:"linear"};let e=parseInt(t.getAttribute("data-anim-duration")??"",10)||320,n=parseInt(t.getAttribute("data-anim-delay")??"",10)||0,r=t.getAttribute("data-anim-ease")??"out";return{dur:e,delay:n,ease:ot[r]??r}}var it="path, line, polyline, polygon, circle, ellipse, rect";function B(t){return t instanceof SVGGeometryElement?[t]:Array.from(t.querySelectorAll(it))}function at(t,e){B(t).forEach(n=>{let r=n.getTotalLength?.()??0;r&&(n.style.strokeDasharray=String(r),n.style.transition=e)})}function ct(t,e){B(t).forEach(n=>{let r=n.getTotalLength?.()??0;r&&(n.style.strokeDashoffset=e?"0":String(r))}),t.style.pointerEvents=e?"":"none"}function lt(t,e,n=!1){if(q.has(t))return;q.add(t);let{dur:r,delay:s,ease:a}=st(t),u=n?0:s,c=t.getAttribute("data-anim"),p=c==="blur"?["opacity","transform","filter"]:c==="draw"?["stroke-dashoffset"]:["opacity","transform"],d=p.map(m=>`${m} ${r}ms ${a} ${u}ms`).join(", ");c==="draw"?at(t,d):(t.style.transition=d,t.style.willChange=p.join(", ")),R(t,e)}function ut(t){switch(t.getAttribute("data-anim")){case"slide-up":return"translateY(16px)";case"slide-down":return"translateY(-16px)";case"slide-left":return"translateX(16px)";case"slide-right":return"translateX(-16px)";case"scale":return"scale(0.92)";case"flip-up":return"perspective(600px) rotateX(35deg)";default:return"none"}}function R(t,e){if(t.getAttribute("data-anim")==="draw"){ct(t,e);return}t.style.opacity=e?"1":"0",t.style.transform=e?"none":ut(t),t.getAttribute("data-anim")==="blur"&&(t.style.filter=e?"none":"blur(12px)"),t.style.pointerEvents=e?"":"none"}function dt(){let t=customElements.get("deck-root");if(!t){console.warn("[rikiki/click-stages] <deck-root> is not defined yet \xB7 import rikiki first");return}let e=t.prototype;if(e._clickStagesInstalled)return;e._clickStagesInstalled=!0;let n=e._maxSteps;e._maxSteps=function(){let o=n.call(this),i=this.slides?.[this.current],l=i?tt(i):0;return Math.max(o,l)};let r=new WeakMap;function s(o){let i=r.get(o);i!==void 0&&(window.clearTimeout(i),r.delete(o))}function a(o,i,l){s(o),r.set(o,window.setTimeout(()=>{r.delete(o),R(o,i)},l))}let u=null;function c(o,i,l){u?u.push({el:o,target:i,delay:l}):a(o,i,l)}function p(){u=[]}function d(){let o=u??[];u=null,o.forEach(({el:i,target:l,delay:f})=>a(i,l,f))}function m(o){s(o),u&&(u=u.filter(i=>i.el!==o))}let b=new WeakMap,G=e._applyStep;e._applyStep=function(){G.call(this);let o=this.slides?.[this.current];if(!o)return;let i=b.get(this),l=i&&i.slide===this.current?i.step:-1;b.set(this,{slide:this.current,step:this.step});let f=z(o),E=()=>f.forEach(({el:g,step:M,hide:L,delay:H,scheduled:K})=>{lt(g,L,K),m(g);let w=this.step>=M,V=L?!w:w,Y=w&&this.step===M&&l<M,U=w&&M===0&&l===-1;H>0&&(Y||U)?(R(g,L),c(g,V,H)):R(g,V)}),I=document.startViewTransition?.bind(document),h=l!==-1&&l!==this.step&&!y&&!x()?T(o):null;if(h&&h.size>0){let g=new Map(f.map(({el:M,step:L,hide:H})=>[M,H?this.step<L:this.step>=L]));if(I){_(h),y=!0,p();try{I(()=>{E(),_(h,g)}).finished.finally(()=>{y=!1,d()})}catch{y=!1,E(),d()}}else{let M=F(h);E(),W(h,M,g)}}else E()};let A=e._goTo;e._goTo=function(o){let i=this.slides??[],l=i[this.current],f=i[Math.max(0,Math.min(i.length-1,o))],E=document.startViewTransition?.bind(document);if((l&&f&&l!==f?et(l,f):[]).length===0||y||x()){A.call(this,o);return}let k=this;if(!E){let h=F(T(l));k.__rkMorphActive=!0,A.call(this,o),W(T(f),h),window.setTimeout(()=>{k.__rkMorphActive=!1},X+40);return}_(T(l)),y=!0,k.__rkMorphActive=!0,p();try{E(()=>{A.call(this,o),_(T(f))}).finished.finally(()=>{y=!1,k.__rkMorphActive=!1,d()})}catch{y=!1,k.__rkMorphActive=!1,A.call(this,o),d()}},document.querySelectorAll("deck-root").forEach(o=>{o._applyStep?.()})}export{dt as installClickStages};

package/dist/deck-help.js

@@ -1,4 +1,4 @@
-var t="data-deck-help",o=`
+var t="data-deck-help",d=`
   #kb-overlay {
     position: fixed; inset: 0;
     background: rgba(10,10,10,0.7);
@@ -61,7 +61,7 @@ var t="data-deck-help",o=`
     box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
   }
   .kb-row .desc { color: var(--rik-text-default--muted); }
-`,d=`
+`,n=`
   <div id="kb-overlay">
     <div class="kb-card">
       <div class="kb-card-header">
@@ -77,6 +77,9 @@ var t="data-deck-help",o=`
       <div class="kb-group-label">View</div>
       <div class="kb-row"><span class="desc">Toggle overview</span><span class="keys"><kbd>O</kbd></span></div>
       <div class="kb-row"><span class="desc">Show this help</span><span class="keys"><kbd>?</kbd><kbd>H</kbd></span></div>
+      <div class="kb-group-label">Mouse</div>
+      <div class="kb-row"><span class="desc">Next / Previous</span><span class="keys"><kbd>Click</kbd><kbd>Shift+Click</kbd></span></div>
+      <div class="kb-row"><span class="desc">Navigate</span><span class="keys"><kbd>Wheel</kbd><kbd>Back/Fwd buttons</kbd></span></div>
     </div>
   </div>
-`;function n(e){let a=e.querySelector("#kb-overlay");if(a)return a;if(!e.querySelector(`style[${t}]`)){let s=document.createElement("style");s.setAttribute(t,"1"),s.textContent=o,e.appendChild(s)}let r=document.createElement("div");return r.innerHTML=d,a=r.firstElementChild,e.appendChild(a),a.addEventListener("click",()=>i(e.host)),a.querySelector(".kb-card")?.addEventListener("click",s=>s.stopPropagation()),a}function c(e){if(!e.shadowRoot)return;n(e.shadowRoot).classList.toggle("open")}function i(e){e.shadowRoot?.querySelector("#kb-overlay")?.classList.remove("open")}export{i as closeHelp,c as toggleHelp};
+`;function o(e){let s=e.querySelector("#kb-overlay");if(s)return s;if(!e.querySelector(`style[${t}]`)){let a=document.createElement("style");a.setAttribute(t,"1"),a.textContent=d,e.appendChild(a)}let r=document.createElement("div");return r.innerHTML=n,s=r.firstElementChild,e.appendChild(s),s.addEventListener("click",()=>i(e.host)),s.querySelector(".kb-card")?.addEventListener("click",a=>a.stopPropagation()),s}function c(e){if(!e.shadowRoot)return;o(e.shadowRoot).classList.toggle("open")}function i(e){e.shadowRoot?.querySelector("#kb-overlay")?.classList.remove("open")}export{i as closeHelp,c as toggleHelp};

package/dist/deck-mermaid.js

@@ -1,3 +1,3 @@
-var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var o=(n,t,i,r)=>{for(var e=r>1?void 0:r?l(t,i):t,d=n.length-1,s;d>=0;d--)(s=n[d])&&(e=(r?s(t,i,e):s(e))||e);return r&&e&&c(t,i,e),e};import{LitElement as h,html as v,css as g}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as p,property as u,state as f}from"https://cdn.jsdelivr.net/npm/lit@3/decorators.js/+esm";var m=!1;async function w(){m||(window.mermaid||await new Promise((n,t)=>{let i=document.createElement("script");i.src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js",i.onload=()=>n(),i.onerror=()=>t(new Error("mermaid failed to load")),document.head.appendChild(i)}),window.mermaid.initialize({startOnLoad:!1,theme:"dark",themeVariables:{background:"#0f0f10",mainBkg:"#2a2a2a",nodeBorder:"#555",lineColor:"#777",textColor:"#e5e5e5",fontSize:"13px",edgeLabelBackground:"#111"},flowchart:{curve:"basis",htmlLabels:!0,padding:12},securityLevel:"loose"}),m=!0)}var b=0,a=class extends h{constructor(){super(...arguments);this.rendered=!1;this._svg="";this._source=""}connectedCallback(){super.connectedCallback(),this._source=(this.textContent??"").trim();let i=this._source.split(`
-`),r=i.filter(e=>e.trim()).reduce((e,d)=>Math.min(e,d.match(/^ */)?.[0].length??0),1/0);r<1/0&&(this._source=i.map(e=>e.slice(r)).join(`
-`)),this._render()}async _render(){if(!this._source)return;await w();let i=`mmd-${++b}`;try{let{svg:r}=await window.mermaid.render(i,this._source);this._svg=r,this.rendered=!0}catch(r){console.error("Mermaid render error",r);let e=r instanceof Error?r.message:String(r);this._svg=`<pre style="color:#f87171">${e}</pre>`}}render(){return v`<div class="canvas" .innerHTML="${this._svg}"></div>`}};a.styles=g`:host{display:flex;align-items:center;justify-content:center;background:var(--deck-mermaid-bg,var(--rik-code__bg));border:1px solid var(--deck-mermaid-border,var(--rik-code__border));border-radius:var(--deck-mermaid-radius,var(--rik-radius-md));padding:var(--deck-mermaid-padding,var(--rik-space-4));box-shadow:var(--rik-elevation-2);overflow:hidden;min-width:0}:host([compact]){padding:var(--rik-space-2)}.canvas{width:100%;max-width:100%;text-align:center;overflow:hidden}.canvas svg{width:100% !important;height:auto !important;max-width:100% !important;max-height:60vh}:host([compact]) .canvas{max-width:60%}:host([compact]) .canvas svg{max-height:22vh}`,o([u({type:Boolean,reflect:!0})],a.prototype,"rendered",2),o([f()],a.prototype,"_svg",2),a=o([p("deck-mermaid")],a);export{a as DeckMermaid};
+var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var d=(a,t,i,r)=>{for(var e=r>1?void 0:r?l(t,i):t,s=a.length-1,o;s>=0;s--)(o=a[s])&&(e=(r?o(t,i,e):o(e))||e);return r&&e&&c(t,i,e),e};import{LitElement as v,html as h,css as g}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as u,property as p,state as f}from"https://cdn.jsdelivr.net/npm/lit@3/decorators.js/+esm";var m=!1;async function w(){m||(window.mermaid||await new Promise((a,t)=>{let i=document.createElement("script");i.src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js",i.onload=()=>a(),i.onerror=()=>t(new Error("mermaid failed to load")),document.head.appendChild(i)}),window.mermaid.initialize({startOnLoad:!1,theme:"dark",themeVariables:{background:"#0f0f10",mainBkg:"#2a2a2a",nodeBorder:"#555",lineColor:"#777",textColor:"#e5e5e5",fontSize:"13px",edgeLabelBackground:"#111"},flowchart:{curve:"basis",htmlLabels:!0,padding:12},securityLevel:"loose"}),m=!0)}var b=0,n=class extends v{constructor(){super(...arguments);this.rendered=!1;this._svg="";this._source="";this._renderPromise=null}get renderedSvg(){return this._svg}get whenRendered(){return this._renderPromise??Promise.resolve()}connectedCallback(){super.connectedCallback(),this._source=(this.textContent??"").trim();let i=this._source.split(`
+`),r=i.filter(e=>e.trim()).reduce((e,s)=>Math.min(e,s.match(/^ */)?.[0].length??0),1/0);r<1/0&&(this._source=i.map(e=>e.slice(r)).join(`
+`)),this._renderPromise=this._render()}async _render(){if(!this._source)return;await w();let i=`mmd-${++b}`;try{let{svg:r}=await window.mermaid.render(i,this._source);this._svg=r,this.rendered=!0}catch(r){console.error("Mermaid render error",r);let e=r instanceof Error?r.message:String(r);this._svg=`<pre style="color:#f87171">${e}</pre>`}}render(){return h`<div class="canvas" .innerHTML="${this._svg}"></div>`}};n.styles=g`:host{display:flex;align-items:center;justify-content:center;background:var(--deck-mermaid-bg,var(--rik-code__bg));border:1px solid var(--deck-mermaid-border,var(--rik-code__border));border-radius:var(--deck-mermaid-radius,var(--rik-radius-md));padding:var(--deck-mermaid-padding,var(--rik-space-4));box-shadow:var(--rik-elevation-2);overflow:hidden;min-width:0}:host([compact]){padding:var(--rik-space-2)}.canvas{width:100%;max-width:100%;text-align:center;overflow:hidden}.canvas svg{width:100% !important;height:auto !important;max-width:100% !important;max-height:60vh}:host([compact]) .canvas{max-width:60%}:host([compact]) .canvas svg{max-height:22vh}`,d([p({type:Boolean,reflect:!0})],n.prototype,"rendered",2),d([f()],n.prototype,"_svg",2),n=d([u("deck-mermaid")],n);export{n as DeckMermaid};

package/dist/deck-overview.js

@@ -1,4 +1,4 @@
-var H="data-deck-overview",O="data-overview-tokens",A=`
+var I="data-deck-overview",q="data-overview-tokens",O=`
   :host([overview]) ::slotted(*) { display: none !important; }
   :host([overview]) #overview-grid {
     position: fixed; inset: 0;
@@ -189,6 +189,18 @@ var H="data-deck-overview",O="data-overview-tokens",A=`
     pointer-events: none;
   }
   :host([overview]) .ov-thumb > * { display: flex !important; }
+  :host([overview]) .ov-mermaid-snap {
+    display: flex; align-items: center; justify-content: center;
+    background: var(--rik-code__bg);
+    border: 1px solid var(--rik-code__border);
+    border-radius: var(--rik-radius-md);
+    padding: var(--rik-space-4);
+    overflow: hidden; min-width: 0;
+  }
+  :host([overview]) .ov-mermaid-snap svg {
+    width: 100% !important; height: auto !important;
+    max-width: 100% !important; max-height: 60vh;
+  }
   :host([overview]) .ov-cell-label {
     position: absolute; bottom: 6px; right: 8px;
     font: 700 0.70rem/1 var(--rik-font-mono);
@@ -199,4 +211,4 @@ var H="data-deck-overview",O="data-overview-tokens",A=`
     pointer-events: none;
   }
   :host(:not([overview])) #overview-grid { display: none; }
-`;function P(s){if(s.querySelector(`style[${H}]`))return;let i=document.createElement("style");i.setAttribute(H,"1"),i.textContent=A,s.appendChild(i)}function R(s,i){if(s.querySelector(`link[${O}]`))return;let l=document.createElement("link");l.rel="stylesheet",l.setAttribute(O,"1"),l.href=new URL("../tokens.css",i).href,s.appendChild(l)}function $(s){let l=s.slides[0]?.querySelector("h1");return l?Array.from(l.childNodes).map(r=>r.nodeName==="BR"?" ":r.textContent??"").join("").replace(/\s+/g," ").trim()||`Slide ${s.startIdx+1}`:`Slide ${s.startIdx+1}`}function z(s){return(s.textContent||"").replace(/\s+/g," ").trim().slice(0,400).toLowerCase()}function W(s,i){let l=s.shadowRoot;if(!l)return()=>{};P(l),R(l,import.meta.url);let r=l.querySelector("#overview-grid");r||(r=document.createElement("div"),r.id="overview-grid",l.appendChild(r)),r.innerHTML="";let u=i.slides.length,f=u>60,S=u>300?140:u>150?160:u>60?180:220;r.style.setProperty("--ov-cell-min",S+"px");let L=window.innerWidth,q=window.innerHeight;r.style.setProperty("--ov-thumb-w",`${L}px`),r.style.setProperty("--ov-thumb-h",`${q}px`),requestAnimationFrame(()=>{let e=r.querySelector(".ov-cell")?.clientWidth??S;r.style.setProperty("--overview-scale",String(e/L))});let x=document.createElement("div");x.className="ov-bar";let p=document.createElement("input");p.className="ov-search",p.type="search",p.placeholder=`Search ${u} slides \xB7 type to filter`,p.spellcheck=!1,x.appendChild(p);let w=document.createElement("span");w.className="ov-count",w.textContent=`${u} slides \xB7 ${i.chapters.length} chapters`,x.appendChild(w);let k=document.createElement("span");k.className="ov-hint",k.textContent="O \xB7 Esc \xB7 close",x.appendChild(k),r.appendChild(x);let b=document.createElement("div");b.className="ov-body"+(f?"":" compact"),r.appendChild(b);let h=f?document.createElement("aside"):null;h&&(h.className="ov-aside",b.appendChild(h));let g=document.createElement("div");g.className="ov-main"+(f?"":" ov-path"),b.appendChild(g);let y=[],N=[],T=new WeakMap,E=new IntersectionObserver(e=>{for(let a of e){if(!a.isIntersecting)continue;let o=a.target;if(o.dataset.loaded)continue;let d=T.get(o);if(!d)continue;let t=document.createElement("div");t.className="ov-thumb";let v=d.cloneNode(!0);v.setAttribute("active",""),t.appendChild(v),o.insertBefore(t,o.firstChild),o.dataset.loaded="1",E.unobserve(o)}},{root:null,rootMargin:"300px 0px",threshold:0});i.chapters.forEach((e,a)=>{let o=document.createElement("section");if(o.className="ov-chapter",o.id=`ov-chapter-${a}`,f){let t=document.createElement("header");t.className="ov-chapter-head";let v=document.createElement("span");v.className="ov-chapter-num",v.textContent=String(a+1).padStart(2,"0"),t.appendChild(v);let c=document.createElement("span");c.className="ov-chapter-title",c.textContent=$(e),t.appendChild(c);let n=document.createElement("span");n.className="ov-chapter-count",n.textContent=`${e.slides.length} slide${e.slides.length>1?"s":""}`,t.appendChild(n),o.appendChild(t)}let d=document.createElement("div");if(d.className="ov-row",e.slides.forEach((t,v)=>{if(!f&&v>0){let I=document.createElement("div");I.className="ov-connector",d.appendChild(I)}let c=e.startIdx+v,n=document.createElement("div");n.className="ov-cell",n.dataset.idx=String(c),n.dataset.search=z(t),c===i.currentIdx&&(n.dataset.current="1"),T.set(n,t),E.observe(n);let m=document.createElement("span");m.className="ov-cell-label",m.textContent=String(c+1),n.appendChild(m),n.addEventListener("click",()=>i.onPick(c)),d.appendChild(n)}),o.appendChild(d),g.appendChild(o),y.push(o),h){let t=document.createElement("button");t.type="button",t.className="ov-aside-item",i.currentIdx>=e.startIdx&&i.currentIdx<e.startIdx+e.slides.length&&(t.dataset.active="1");let c=document.createElement("span");c.className="ov-aside-num",c.textContent=String(a+1).padStart(2,"0"),t.appendChild(c);let n=document.createElement("span");n.className="ov-aside-text",n.textContent=$(e);let m=document.createElement("div");m.className="ov-aside-count",m.textContent=`${e.slides.length} slide${e.slides.length>1?"s":""}`,n.appendChild(m),t.appendChild(n),t.addEventListener("click",()=>{o.scrollIntoView({behavior:"smooth",block:"start"})}),h.appendChild(t),N.push(t)}});let C=null;h&&(C=new IntersectionObserver(e=>{let a=e.filter(o=>o.isIntersecting).sort((o,d)=>o.boundingClientRect.top-d.boundingClientRect.top);if(a.length>0){let o=y.indexOf(a[0].target);o>=0&&N.forEach((d,t)=>{t===o?d.dataset.active="1":delete d.dataset.active})}},{root:g,rootMargin:"0px 0px -70% 0px",threshold:0}),y.forEach(e=>C.observe(e)));let M=r.querySelectorAll(".ov-cell");return p.addEventListener("input",()=>{let e=p.value.trim().toLowerCase();if(!e){M.forEach(a=>delete a.dataset.filteredOut);return}M.forEach(a=>{(a.dataset.search||"").includes(e)?delete a.dataset.filteredOut:a.dataset.filteredOut="1"})}),requestAnimationFrame(()=>{let e=r.querySelector(".ov-cell[data-current]");e&&e.scrollIntoView({block:"center"})}),()=>{C?.disconnect(),E.disconnect(),r&&(r.innerHTML="")}}export{W as mountOverview};
+`;function R(r){if(r.querySelector(`style[${I}]`))return;let n=document.createElement("style");n.setAttribute(I,"1"),n.textContent=O,r.appendChild(n)}function P(r,n){if(r.querySelector(`link[${q}]`))return;let t=document.createElement("link");t.rel="stylesheet",t.setAttribute(q,"1"),t.href=new URL("../tokens.css",n).href,r.appendChild(t)}function $(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 _=["fill","stroke","clip-path","mask","filter","marker-start","marker-mid","marker-end","style"];function W(r,n){let t=new Map;if(r.querySelectorAll("[id]").forEach(o=>{t.set(o.id,o.id+n),o.id=o.id+n}),t.size===0)return;let e=o=>o.replace(/url\(['"]?#([^'")]+)['"]?\)/g,(i,l)=>t.has(l)?`url(#${t.get(l)})`:i);r.querySelectorAll("*").forEach(o=>{for(let i of _){let l=o.getAttribute(i);l&&l.includes("url(")&&o.setAttribute(i,e(l))}for(let i of["href","xlink:href"]){let l=o.getAttribute(i);l&&l.startsWith("#")&&t.has(l.slice(1))&&o.setAttribute(i,"#"+t.get(l.slice(1)))}});let v=r.querySelectorAll("style");if(v.length){let o=i=>i.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");v.forEach(i=>{let l=i.textContent??"";t.forEach((E,f)=>{l=l.replace(new RegExp("#"+o(f)+"(?![\\w-])","g"),"#"+E)}),i.textContent=l})}}function B(r,n){let t=r.querySelectorAll("svg");n.querySelectorAll("svg").forEach((e,v)=>{let o=t[v]?.getBoundingClientRect();if(o&&o.width>0)e.setAttribute("width",String(Math.round(o.width))),e.setAttribute("height",String(Math.round(o.height))),e.style.maxWidth="100%";else if(e.hasAttribute("viewBox")&&!e.hasAttribute("width")){let i=(e.getAttribute("viewBox")??"").split(/[\s,]+/).map(Number);i.length===4&&i[2]>0&&(e.setAttribute("width",String(i[2])),e.setAttribute("height",String(i[3])),e.style.maxWidth="100%",e.style.height="auto")}})}function F(r,n){let t=r.querySelectorAll("deck-mermaid");n.querySelectorAll("deck-mermaid").forEach((e,v)=>{let o=t[v],i=document.createElement("div");i.className="ov-mermaid-snap",i.innerHTML=o?.renderedSvg??"";let l=o?.getBoundingClientRect();l&&l.width>0&&(i.style.width=l.width+"px",i.style.height=l.height+"px"),e.replaceWith(i)})}function U(r,n){let t=r.cloneNode(!0);return t.setAttribute("active",""),B(r,t),F(r,t),W(t,`-ov${n}`),t}async function Y(r,n){let t=Array.from(n.querySelectorAll("deck-mermaid")).map(v=>v.whenRendered).filter(v=>!!v);t.length&&await Promise.all(t).catch(()=>{});let e=document.createElement("div");e.className="ov-thumb",e.appendChild(U(n,Number(r.dataset.idx))),r.insertBefore(e,r.firstChild),r.dataset.loaded="1",delete r.dataset.building}function D(r,n){let t=r.shadowRoot;if(!t)return()=>{};R(t),P(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 v=n.slides.length,o=v>60,i=v>300?140:v>150?160:v>60?180:220;e.style.setProperty("--ov-cell-min",i+"px");let l=window.innerWidth,E=window.innerHeight;e.style.setProperty("--ov-thumb-w",`${l}px`),e.style.setProperty("--ov-thumb-h",`${E}px`),requestAnimationFrame(()=>{let s=e.querySelector(".ov-cell")?.clientWidth??i;e.style.setProperty("--overview-scale",String(s/l))});let f=document.createElement("div");f.className="ov-bar";let g=document.createElement("input");g.className="ov-search",g.type="search",g.placeholder=`Search ${v} slides \xB7 type to filter`,g.spellcheck=!1,f.appendChild(g);let S=document.createElement("span");S.className="ov-count",S.textContent=`${v} slides \xB7 ${n.chapters.length} chapters`,f.appendChild(S);let C=document.createElement("span");C.className="ov-hint",C.textContent="O \xB7 Esc \xB7 close",f.appendChild(C),e.appendChild(f);let w=document.createElement("div");w.className="ov-body"+(o?"":" compact"),e.appendChild(w);let b=o?document.createElement("aside"):null;b&&(b.className="ov-aside",w.appendChild(b));let k=document.createElement("div");k.className="ov-main"+(o?"":" ov-path"),w.appendChild(k);let L=[],T=[],A=new WeakMap,y=new IntersectionObserver(s=>{for(let p of s){if(!p.isIntersecting)continue;let a=p.target;if(a.dataset.loaded||a.dataset.building)continue;let m=A.get(a);m&&(a.dataset.building="1",y.unobserve(a),Y(a,m).catch(d=>{let h=Number(a.dataset.tries??"0")+1;a.dataset.tries=String(h),console.warn("[rikiki/overview] thumbnail build failed",d),delete a.dataset.building,h<3&&y.observe(a)}))}},{root:null,rootMargin:"300px 0px",threshold:0});n.chapters.forEach((s,p)=>{let a=document.createElement("section");if(a.className="ov-chapter",a.id=`ov-chapter-${p}`,o){let d=document.createElement("header");d.className="ov-chapter-head";let h=document.createElement("span");h.className="ov-chapter-num",h.textContent=String(p+1).padStart(2,"0"),d.appendChild(h);let u=document.createElement("span");u.className="ov-chapter-title",u.textContent=$(s),d.appendChild(u);let c=document.createElement("span");c.className="ov-chapter-count",c.textContent=`${s.slides.length} slide${s.slides.length>1?"s":""}`,d.appendChild(c),a.appendChild(d)}let m=document.createElement("div");if(m.className="ov-row",s.slides.forEach((d,h)=>{if(!o&&h>0){let H=document.createElement("div");H.className="ov-connector",m.appendChild(H)}let u=s.startIdx+h,c=document.createElement("div");c.className="ov-cell",c.dataset.idx=String(u),c.dataset.search=z(d),u===n.currentIdx&&(c.dataset.current="1"),A.set(c,d),y.observe(c);let x=document.createElement("span");x.className="ov-cell-label",x.textContent=String(u+1),c.appendChild(x),c.addEventListener("click",()=>n.onPick(u)),m.appendChild(c)}),a.appendChild(m),k.appendChild(a),L.push(a),b){let d=document.createElement("button");d.type="button",d.className="ov-aside-item",n.currentIdx>=s.startIdx&&n.currentIdx<s.startIdx+s.slides.length&&(d.dataset.active="1");let u=document.createElement("span");u.className="ov-aside-num",u.textContent=String(p+1).padStart(2,"0"),d.appendChild(u);let c=document.createElement("span");c.className="ov-aside-text",c.textContent=$(s);let x=document.createElement("div");x.className="ov-aside-count",x.textContent=`${s.slides.length} slide${s.slides.length>1?"s":""}`,c.appendChild(x),d.appendChild(c),d.addEventListener("click",()=>{a.scrollIntoView({behavior:"smooth",block:"start"})}),b.appendChild(d),T.push(d)}});let M=null;b&&(M=new IntersectionObserver(s=>{let p=s.filter(a=>a.isIntersecting).sort((a,m)=>a.boundingClientRect.top-m.boundingClientRect.top);if(p.length>0){let a=L.indexOf(p[0].target);a>=0&&T.forEach((m,d)=>{d===a?m.dataset.active="1":delete m.dataset.active})}},{root:k,rootMargin:"0px 0px -70% 0px",threshold:0}),L.forEach(s=>M.observe(s)));let N=e.querySelectorAll(".ov-cell");return g.addEventListener("input",()=>{let s=g.value.trim().toLowerCase();if(!s){N.forEach(p=>delete p.dataset.filteredOut);return}N.forEach(p=>{(p.dataset.search||"").includes(s)?delete p.dataset.filteredOut:p.dataset.filteredOut="1"})}),requestAnimationFrame(()=>{let s=e.querySelector(".ov-cell[data-current]");s&&s.scrollIntoView({block:"center"})}),()=>{M?.disconnect(),y.disconnect(),e&&(e.innerHTML="")}}export{D as mountOverview};

package/dist/deck-presenter.js

@@ -1,4 +1,4 @@
-var c="rik-presenter",t=null,i=null,o=null;function m(e){let r=Array.from(e.children).filter(l=>l.tagName.toLowerCase().startsWith("deck-")),s=r.findIndex(l=>l.hasAttribute("active")),a=r[s]??null,n=r[s+1]??null,p=(a?.querySelector("deck-notes")?.textContent??"").trim(),u=document.querySelector('link[rel="stylesheet"][href*="rikiki"], link[rel="stylesheet"][href*="tokens"], link[rel="stylesheet"][href*="theme"]')?.href??"";return{current:s+1,total:r.length,slideHtml:a?.outerHTML??"",nextHtml:n?.outerHTML??null,notes:p,themeHref:u}}function d(e){i&&i.postMessage({type:"state",state:m(e)})}var h=e=>`<!doctype html>
+var c="rik-presenter",f=new URL("./index.js",import.meta.url).href,t=null,i=null,o=null;function m(e){let r=Array.from(e.children).filter(l=>l.tagName.toLowerCase().startsWith("deck-")),s=r.findIndex(l=>l.hasAttribute("active")),a=r[s]??null,n=r[s+1]??null,p=(a?.querySelector("deck-notes")?.textContent??"").trim(),u=document.querySelector('link[rel="stylesheet"][href*="rikiki"], link[rel="stylesheet"][href*="tokens"], link[rel="stylesheet"][href*="theme"]')?.href??"";return{current:s+1,total:r.length,slideHtml:a?.outerHTML??"",nextHtml:n?.outerHTML??null,notes:p,themeHref:u,bundleHref:f}}function d(e){i&&i.postMessage({type:"state",state:m(e)})}var h=e=>`<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
@@ -10,11 +10,14 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
     display: grid;
     grid-template-columns: 2fr 1fr;
     grid-template-rows: 1fr auto;
-    gap: 16px;
-    padding: 16px;
+    gap: clamp(8px, 1.5vw, 16px);
+    padding: clamp(8px, 1.5vw, 16px);
     height: 100vh;
     box-sizing: border-box;
   }
+  @media (max-width: 1000px) {
+    .grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr auto auto; }
+  }
   .panel {
     background: #1e2840;
     border-radius: 12px;
@@ -31,8 +34,8 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
     color: rgba(232,228,240,0.45);
     background: #161c2e;
   }
-  .panel .body { flex: 1; min-height: 0; padding: 16px; overflow: hidden; }
-  .panel iframe { width: 100%; height: 100%; border: 0; background: white; border-radius: 8px; }
+  .panel .body { flex: 1; min-height: 0; padding: 16px; overflow: hidden; border-radius: 8px; }
+  .panel iframe { width: 100%; height: 100%; border: 0; background: #0f1422; display: block; }
   #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 {
@@ -110,15 +113,17 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
   resetBtn.onclick = () => { startedAt = Date.now(); elapsed = 0; running = true; toggleBtn.textContent = 'Pause'; };
 
   function wrapFrame(slideHtml) {
-    const themeHref = ${JSON.stringify(e.themeHref)};
-    const themeLink = themeHref ? '<link rel="stylesheet" href="' + themeHref + '">' : '';
-    // Use the consumer's rikiki bundle URL \xB7 we cannot guess it perfectly, so
-    // assume it sits next to the theme css.
-    const bundleHref = themeHref.replace(/themes\\/[^/]+\\.css.*$/, 'dist/index.js');
+    const themeHref  = ${JSON.stringify(e.themeHref)};
+    const bundleHref = ${JSON.stringify(e.bundleHref)};
+    const themeLink  = themeHref ? '<link rel="stylesheet" href="' + themeHref + '">' : '';
+    // 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');
     return '<!doctype html><html><head><meta charset="UTF-8">' + themeLink +
       '<script type="module" src="' + bundleHref + '"><' + '/script>' +
-      '<style>html,body{margin:0;padding:0;height:100%;overflow:hidden}body{display:flex}deck-root{flex:1}deck-root>*{display:flex!important}</style>' +
-      '</head><body><deck-root>' + slideHtml + '</deck-root></body></html>';
+      '<style>html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0f1422}' +
+      'deck-root{position:absolute;inset:0}</style>' +
+      '</head><body><deck-root>' + activeSlide + '</deck-root></body></html>';
   }
 
   channel.onmessage = (e) => {
@@ -145,4 +150,4 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
   channel.postMessage({ type: 'hello' });
 <\/script>
 </body>
-</html>`;function y(e){if(o=o??new WeakSet,o.has(e)){t?.close(),t=null;return}o.add(e),i=new BroadcastChannel(c),e.addEventListener("slide-change",()=>d(e)),i.addEventListener("message",a=>{let n=a.data;n?.type==="key"&&n.key&&window.dispatchEvent(new KeyboardEvent("keydown",{key:n.key,shiftKey:!!n.shift,bubbles:!0})),n?.type==="hello"&&d(e)});let r=m(e);if(t=window.open("","rikiki-presenter","width=1280,height=800,popup=yes"),!t){console.warn("[rikiki/presenter] popup was blocked \xB7 allow popups for this site"),o.delete(e);return}t.document.open(),t.document.write(h(r)),t.document.close();let s=setInterval(()=>{t&&t.closed&&(clearInterval(s),o?.delete(e),t=null)},1e3)}export{y as installPresenter};
+</html>`;function k(e){if(o=o??new WeakSet,o.has(e)){t?.close(),t=null;return}o.add(e),i=new BroadcastChannel(c),e.addEventListener("slide-change",()=>d(e)),i.addEventListener("message",a=>{let n=a.data;n?.type==="key"&&n.key&&window.dispatchEvent(new KeyboardEvent("keydown",{key:n.key,shiftKey:!!n.shift,bubbles:!0})),n?.type==="hello"&&d(e)});let r=m(e);if(t=window.open("","rikiki-presenter","width=1280,height=800,popup=yes"),!t){console.warn("[rikiki/presenter] popup was blocked \xB7 allow popups for this site"),o.delete(e);return}t.document.open(),t.document.write(h(r)),t.document.close();let s=setInterval(()=>{t&&t.closed&&(clearInterval(s),o?.delete(e),t=null)},1e3)}export{k as installPresenter};

package/dist/deck-root.js

@@ -1,11 +1,13 @@
-var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var o=(p,h,t,e)=>{for(var i=e>1?void 0:e?_(h,t):h,s=p.length-1,r;s>=0;s--)(r=p[s])&&(i=(e?r(h,t,i):r(i))||i);return e&&i&&f(h,t,i),i};import{LitElement as m,html as u,css as y}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as k,property as l,state as c}from"https://cdn.jsdelivr.net/npm/lit@3/decorators.js/+esm";var a=class extends m{constructor(){super(...arguments);this.current=0;this.step=0;this.blank=null;this.overview=!1;this.transition=null;this.autoplay=0;this.loop=!1;this.swipe=!1;this.slides=[];this.chapters=[];this._overviewTeardown=null;this._transitionLoaded=!1;this._autoplayTimer=null;this._autoplayPaused=!1;this._swipeStartX=0;this._swipeStartY=0;this._swipePointerId=null;this._onHoverEnter=()=>{this._autoplayPaused=!0,this._stopAutoplay()};this._onHoverLeave=()=>{this._autoplayPaused=!1,this.autoplay>0&&this._startAutoplay()};this._onPointerDown=t=>{!this.swipe||t.pointerType==="mouse"&&t.button!==0||t.target?.closest("a, button, input, textarea, [contenteditable]")||(this._swipePointerId=t.pointerId,this._swipeStartX=t.clientX,this._swipeStartY=t.clientY)};this._onPointerUp=t=>{if(this._swipePointerId===null||t.pointerId!==this._swipePointerId)return;let e=t.clientX-this._swipeStartX,i=t.clientY-this._swipeStartY;this._swipePointerId=null,!(Math.abs(e)<60||Math.abs(e)<Math.abs(i)*2)&&(this._stopAutoplay(),e<0?this._advance():this._back(),this.autoplay>0&&!this._autoplayPaused&&this._startAutoplay())};this._onHash=()=>{this._readHash(!1)};this._onKey=t=>{if(!(t.target&&t.target.matches?.("input,textarea,[contenteditable]"))){if(this.autoplay>0&&!this._autoplayPaused&&this._startAutoplay(),this.overview){(t.key==="Escape"||t.key==="o"||t.key==="O"||t.key==="Enter")&&(t.preventDefault(),this.overview=!1);return}if(this.blank){t.preventDefault(),this.blank=null;return}if(t.key==="."||t.key==="b"||t.key==="B"){t.preventDefault(),this.blank="black";return}if(t.key===","||t.key==="w"||t.key==="W"){t.preventDefault(),this.blank="white";return}if(t.key==="?"||t.key==="h"||t.key==="H"){this._toggleHelp();return}if(t.key==="Escape"){this._closeHelp();return}if(t.key==="o"||t.key==="O"){t.preventDefault(),this.overview=!0;return}if(t.key==="p"||t.key==="P"){t.preventDefault(),this._togglePresenter();return}if(t.key==="Home"){this._goTo(0);return}if(t.key==="End"){this._goTo(this.slides.length-1);return}if(t.key===" "||t.key==="PageDown"){t.preventDefault(),this._advance();return}if(t.key==="PageUp"){t.preventDefault(),this._back();return}if(this._has2DNav()){let{c:e,i}=this._coords(this.current);if(t.key==="ArrowRight"){t.preventDefault(),e+1<this.chapters.length?this._goToCoords(e+1,0):this._advance();return}if(t.key==="ArrowLeft"){t.preventDefault(),e-1>=0?this._goToCoords(e-1,0):this._back();return}if(t.key==="ArrowDown"){t.preventDefault();let s=this.chapters[e];s&&i+1<s.slides.length?this._goToCoords(e,i+1):this._advance();return}if(t.key==="ArrowUp"){t.preventDefault(),i-1>=0?this._goToCoords(e,i-1):this._back();return}}else{if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault(),this._advance();return}if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault(),this._back();return}}}}}firstUpdated(){this.slides=Array.from(this.querySelectorAll(":scope > *")).filter(t=>t.tagName?.toLowerCase().startsWith("deck-")&&t.tagName?.toLowerCase()!=="deck-root"),this._buildChapters(),this._readHash(!0),this._applyActive(),this._applyStep(),this._updateUI(),this.requestUpdate(),window.addEventListener("keydown",this._onKey),window.addEventListener("hashchange",this._onHash),this.autoplay>0&&this._startAutoplay(),this.swipe?(this.addEventListener("pointerdown",this._onPointerDown),this.addEventListener("pointerup",this._onPointerUp),this.addEventListener("pointercancel",this._onPointerUp),this.addEventListener("mouseenter",this._onHoverEnter),this.addEventListener("mouseleave",this._onHoverLeave)):this.autoplay>0&&(this.addEventListener("mouseenter",this._onHoverEnter),this.addEventListener("mouseleave",this._onHoverLeave))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKey),window.removeEventListener("hashchange",this._onHash),this._stopAutoplay(),this.removeEventListener("pointerdown",this._onPointerDown),this.removeEventListener("pointerup",this._onPointerUp),this.removeEventListener("pointercancel",this._onPointerUp),this.removeEventListener("mouseenter",this._onHoverEnter),this.removeEventListener("mouseleave",this._onHoverLeave)}_startAutoplay(){this._stopAutoplay(),!(this.autoplay<=0||this._autoplayPaused)&&(this._autoplayTimer=window.setInterval(()=>this._autoTick(),this.autoplay))}_stopAutoplay(){this._autoplayTimer!==null&&(window.clearInterval(this._autoplayTimer),this._autoplayTimer=null)}_autoTick(){if(this.overview)return;this.current>=this.slides.length-1&&this.step>=this._maxSteps()&&this.loop?this._goTo(0):this._advance()}_buildChapters(){this.chapters=[];let t=null;this.slides.forEach((e,i)=>{e.tagName?.toLowerCase()==="deck-section"||!t?(t={startIdx:i,slides:[e]},this.chapters.push(t)):t.slides.push(e)})}_has2DNav(){return this.chapters.some(t=>t.slides.length>1)&&this.chapters.length>1}_coords(t){for(let e=0;e<this.chapters.length;e++){let i=this.chapters[e],s=t-i.startIdx;if(s>=0&&s<i.slides.length)return{c:e,i:s}}return{c:0,i:0}}_flatFromCoords(t,e){let i=this.chapters[t];return i?i.startIdx+Math.max(0,Math.min(i.slides.length-1,e)):0}_readHash(t){let e=location.hash,i=e.match(/^#(\d+)\.(\d+)(?:s(\d+))?$/),s=e.match(/^#(\d+)(?:\.(\d+))?$/),r=this.current,n=this.step;if(this._has2DNav()&&i){let v=parseInt(i[1],10)-1,d=parseInt(i[2],10)-1;r=this._flatFromCoords(Math.max(0,v),Math.max(0,d)),n=i[3]?parseInt(i[3],10):0}else if(s)r=parseInt(s[1],10)-1,n=s[2]?parseInt(s[2],10):0;else return;r===this.current&&n===this.step&&!t||(this.current=Math.max(0,Math.min(this.slides.length-1,r)),this.step=Math.max(0,n),t||(this._applyActive(),this._applyStep(),this._updateUI()))}_writeHash(){let t=`#${this.current+1}`+(this.step>0?`.${this.step}`:"");location.hash!==t&&history.replaceState(null,"",t)}async _toggleHelp(){(await import("./deck-help.js")).toggleHelp(this)}async _togglePresenter(){(await import("./deck-presenter.js")).installPresenter(this)}async _closeHelp(){(await import("./deck-help.js")).closeHelp(this)}async _renderOverviewIfActive(){if(!this.overview){this._overviewTeardown?.(),this._overviewTeardown=null;return}let{mountOverview:t}=await import("./deck-overview.js");this._overviewTeardown=t(this,{slides:this.slides,chapters:this.chapters,currentIdx:this.current,onPick:e=>{this.overview=!1,this._goTo(e)}})}_maxSteps(){let t=this.slides[this.current];if(!t)return 0;let e=parseInt(t.getAttribute("steps")||t.dataset?.steps||"0",10);if(e>0)return e;let i=t.querySelector("deck-code[step-groups]");if(i)try{return JSON.parse(i.getAttribute("step-groups")).length}catch{}return 0}_advance(){let t=this._maxSteps();this.step<t?(this.step++,this._applyStep(),this._updateUI(),this._writeHash()):this.current<this.slides.length-1?this._goTo(this.current+1):this.loop&&this._goTo(0)}_back(){this.step>0?(this.step--,this._applyStep(),this._updateUI(),this._writeHash()):this.current>0?(this._goTo(this.current-1),this.step=this._maxSteps(),this._applyStep(),this._updateUI(),this._writeHash()):this.loop&&(this._goTo(this.slides.length-1),this.step=this._maxSteps(),this._applyStep(),this._updateUI(),this._writeHash())}_goTo(t){this.current=Math.max(0,Math.min(this.slides.length-1,t)),this.step=0,this._applyActive(),this._applyStep(),this._updateUI(),this._writeHash()}_goToCoords(t,e){let i=Math.max(0,Math.min(this.chapters.length-1,t)),s=this.chapters[i];if(!s)return;let r=Math.max(0,Math.min(s.slides.length-1,e));this._goTo(this._flatFromCoords(i,r))}_applyActive(){let t=this.slides.find(i=>i.hasAttribute("active"))??null,e=this.slides[this.current]??null;this.slides.forEach((i,s)=>{let r=s===this.current;i.toggleAttribute("active",r),r&&i.querySelectorAll("deck-mermaid").forEach(n=>n.render?.())}),this.transition&&!this._transitionLoaded&&(this._transitionLoaded=!0,import("./deck-transition.js").then(i=>i.installTransitions(this))),t!==e&&this.dispatchEvent(new CustomEvent("slide-change",{detail:{current:e,previous:t},bubbles:!1}))}_applyStep(){let t=this.slides[this.current];t&&(t.applyStep?.(this.step),t.querySelectorAll("*").forEach(e=>e.applyStep?.(this.step)),t.querySelectorAll("[data-step-block]").forEach(e=>{let i=parseInt(e.dataset.stepBlock,10);e.style.transition="opacity 0.25s ease",e.style.opacity=this.step===0||i<=this.step?"1":"0.15"}))}_updateUI(){let t=this.slides.length,e=this.current+1,i=this.renderRoot.querySelector("#progress"),s=this.renderRoot.querySelector("#counter"),r=this.renderRoot.querySelector("#step-dots");i&&(i.style.width=e/t*100+"%"),s&&(s.textContent=`${e} / ${t}`);let n=this._maxSteps();r&&(r.innerHTML=n===0?"":Array.from({length:n},(v,d)=>`<div class="dot${d<this.step?" active":""}"></div>`).join(""))}updated(){this._updateUI(),this._renderOverviewIfActive()}render(){return u`<div id="progress"></div> <div id="counter"></div> <div id="step-dots"></div> <div id="kb-hint"> <kbd>←</kbd><kbd>→</kbd> ${this._has2DNav()?u`<kbd>↑</kbd><kbd>↓</kbd>`:""}
+var f=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var a=(c,d,t,e)=>{for(var r=e>1?void 0:e?b(d,t):d,i=c.length-1,s;i>=0;i--)(s=c[i])&&(r=(e?s(d,t,r):s(r))||r);return e&&r&&f(d,t,r),r};import{LitElement as m,html as p,css as k}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as w,property as l,state as v}from"https://cdn.jsdelivr.net/npm/lit@3/decorators.js/+esm";var n=class extends m{constructor(){super(...arguments);this.current=0;this.step=0;this.blank=null;this.overview=!1;this.transition=null;this.autoplay=0;this.loop=!1;this.swipe=!1;this.mouseNav=null;this.nav=null;this.slides=[];this.chapters=[];this._overviewTeardown=null;this._transitionLoaded=!1;this._autoplayTimer=null;this._autoplayPaused=!1;this._swipeStartX=0;this._swipeStartY=0;this._swipePointerId=null;this._navDownX=0;this._navDownY=0;this._wheelAccum=0;this._wheelLockUntil=0;this._onHoverEnter=()=>{this._autoplayPaused=!0,this._stopAutoplay()};this._onHoverLeave=()=>{this._autoplayPaused=!1,this.autoplay>0&&this._startAutoplay()};this._onPointerDown=t=>{!this.swipe||t.pointerType==="mouse"&&t.button!==0||t.target?.closest("a, button, input, textarea, [contenteditable]")||(this._swipePointerId=t.pointerId,this._swipeStartX=t.clientX,this._swipeStartY=t.clientY)};this._onPointerUp=t=>{if(this._swipePointerId===null||t.pointerId!==this._swipePointerId)return;let e=t.clientX-this._swipeStartX,r=t.clientY-this._swipeStartY;this._swipePointerId=null,!(Math.abs(e)<60||Math.abs(e)<Math.abs(r)*2)&&(this._stopAutoplay(),e<0?this._advance():this._back(),this._restartAutoplay())};this._onNavPointerDown=t=>{this._navDownX=t.clientX,this._navDownY=t.clientY};this._onClickNav=t=>{if(!this._mouseEnabled("click")||this.overview||this.blank||this.shadowRoot?.querySelector("#kb-overlay.open")||Math.hypot(t.clientX-this._navDownX,t.clientY-this._navDownY)>5)return;let e=window.getSelection();e&&!e.isCollapsed||t.composedPath().some(i=>i instanceof HTMLElement?i.matches?.("a, button, input, textarea, select, [contenteditable], [data-no-advance]")?!0:i.id==="blank"||i.id==="kb-overlay"||i.id==="overview-grid"||i.id==="nav-arrows"||i.id==="kb-hint":!1)||(this._restartAutoplay(),t.shiftKey?this._back():this._advance())};this._onWheel=t=>{if(!this._mouseEnabled("wheel")||this.overview||this.blank||this._wheelTargetScrolls(t))return;t.preventDefault();let e=performance.now();if(e<this._wheelLockUntil||(this._wheelAccum+=t.deltaY,Math.abs(this._wheelAccum)<50))return;let r=this._wheelAccum>0;this._wheelAccum=0,this._wheelLockUntil=e+400,this._restartAutoplay(),r?this._advance():this._back()};this._onAuxUp=t=>{this._mouseEnabled("aux")&&(t.button!==3&&t.button!==4||(t.preventDefault(),this._restartAutoplay(),t.button===3?this._back():this._advance()))};this._onAuxClick=t=>{this._mouseEnabled("aux")&&(t.button===3||t.button===4)&&t.preventDefault()};this._onHash=()=>{this._readHash(!1)};this._onKey=t=>{if(!(t.target&&t.target.matches?.("input,textarea,[contenteditable]"))){if(this._restartAutoplay(),this.overview){(t.key==="Escape"||t.key==="o"||t.key==="O"||t.key==="Enter")&&(t.preventDefault(),this.overview=!1);return}if(this.blank){t.preventDefault(),this.blank=null;return}if(t.key==="."||t.key==="b"||t.key==="B"){t.preventDefault(),this.blank="black";return}if(t.key===","||t.key==="w"||t.key==="W"){t.preventDefault(),this.blank="white";return}if(t.key==="?"||t.key==="h"||t.key==="H"){this._toggleHelp();return}if(t.key==="Escape"){this._closeHelp();return}if(t.key==="o"||t.key==="O"){t.preventDefault(),this.overview=!0;return}if(t.key==="p"||t.key==="P"){t.preventDefault(),this._togglePresenter();return}if(t.key==="Home"){this._goTo(0);return}if(t.key==="End"){this._goTo(this.slides.length-1);return}if(t.key===" "||t.key==="PageDown"){t.preventDefault(),this._advance();return}if(t.key==="PageUp"){t.preventDefault(),this._back();return}if(this._has2DNav()){let{c:e,i:r}=this._coords(this.current);if(t.key==="ArrowRight"){t.preventDefault(),e+1<this.chapters.length?this._goToCoords(e+1,0):this._advance();return}if(t.key==="ArrowLeft"){t.preventDefault(),e-1>=0?this._goToCoords(e-1,0):this._back();return}if(t.key==="ArrowDown"){t.preventDefault();let i=this.chapters[e];i&&r+1<i.slides.length?this._goToCoords(e,r+1):this._advance();return}if(t.key==="ArrowUp"){t.preventDefault(),r-1>=0?this._goToCoords(e,r-1):this._back();return}}else{if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault(),this._advance();return}if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault(),this._back();return}}}}}firstUpdated(){this.slides=Array.from(this.querySelectorAll(":scope > *")).filter(t=>t.tagName?.toLowerCase().startsWith("deck-")&&t.tagName?.toLowerCase()!=="deck-root"),this._buildChapters(),this._readHash(!0),this._applyActive(),this._applyStep(),this._updateUI(),this.requestUpdate(),window.addEventListener("keydown",this._onKey),window.addEventListener("hashchange",this._onHash),this.addEventListener("pointerdown",this._onNavPointerDown),this.addEventListener("click",this._onClickNav),this.addEventListener("wheel",this._onWheel,{passive:!1}),window.addEventListener("mouseup",this._onAuxUp),window.addEventListener("auxclick",this._onAuxClick),this.autoplay>0&&this._startAutoplay(),this.swipe?(this.addEventListener("pointerdown",this._onPointerDown),this.addEventListener("pointerup",this._onPointerUp),this.addEventListener("pointercancel",this._onPointerUp),this.addEventListener("mouseenter",this._onHoverEnter),this.addEventListener("mouseleave",this._onHoverLeave)):this.autoplay>0&&(this.addEventListener("mouseenter",this._onHoverEnter),this.addEventListener("mouseleave",this._onHoverLeave))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("keydown",this._onKey),window.removeEventListener("hashchange",this._onHash),this.removeEventListener("pointerdown",this._onNavPointerDown),this.removeEventListener("click",this._onClickNav),this.removeEventListener("wheel",this._onWheel),window.removeEventListener("mouseup",this._onAuxUp),window.removeEventListener("auxclick",this._onAuxClick),this._stopAutoplay(),this.removeEventListener("pointerdown",this._onPointerDown),this.removeEventListener("pointerup",this._onPointerUp),this.removeEventListener("pointercancel",this._onPointerUp),this.removeEventListener("mouseenter",this._onHoverEnter),this.removeEventListener("mouseleave",this._onHoverLeave)}_startAutoplay(){this._stopAutoplay(),!(this.autoplay<=0||this._autoplayPaused)&&(this._autoplayTimer=window.setInterval(()=>this._autoTick(),this.autoplay))}_stopAutoplay(){this._autoplayTimer!==null&&(window.clearInterval(this._autoplayTimer),this._autoplayTimer=null)}_autoTick(){if(this.overview)return;this.current>=this.slides.length-1&&this.step>=this._maxSteps()&&this.loop?this._goTo(0):this._advance()}_restartAutoplay(){this.autoplay>0&&!this._autoplayPaused&&this._startAutoplay()}_wheelTargetScrolls(t){let e=t.deltaY>0,r=t.deltaX>0;for(let i of t.composedPath()){if(i===this)return!1;if(!(i instanceof Element))continue;let s=i.scrollHeight>i.clientHeight,o=i.scrollWidth>i.clientWidth;if(!s&&!o)continue;let h=getComputedStyle(i);if(s&&/auto|scroll/.test(h.overflowY)&&(e?i.scrollTop+i.clientHeight<i.scrollHeight-1:i.scrollTop>0)||o&&/auto|scroll/.test(h.overflowX)&&(r?i.scrollLeft+i.clientWidth<i.scrollWidth-1:i.scrollLeft>0))return!0}return!1}_buildChapters(){this.chapters=[];let t=null;this.slides.forEach((e,r)=>{e.tagName?.toLowerCase()==="deck-section"||!t?(t={startIdx:r,slides:[e]},this.chapters.push(t)):t.slides.push(e)})}_has2DNav(){return this.nav==="2d"&&this.chapters.length>1&&this.chapters.some(t=>t.slides.length>1)}_mouseEnabled(t){let e=(this.mouseNav??"all").trim();return e==="none"?!1:e===""||e==="all"?!0:e.split(/\s+/).includes(t)}_coords(t){for(let e=0;e<this.chapters.length;e++){let r=this.chapters[e],i=t-r.startIdx;if(i>=0&&i<r.slides.length)return{c:e,i}}return{c:0,i:0}}_flatFromCoords(t,e){let r=this.chapters[Math.max(0,Math.min(this.chapters.length-1,t))];return r?r.startIdx+Math.max(0,Math.min(r.slides.length-1,e)):0}_readHash(t){let e=location.hash,r=e.match(/^#(\d+)\.(\d+)(?:s(\d+))?$/),i=e.match(/^#(\d+)(?:\.(\d+))?$/),s=this.current,o=this.step;if(this._has2DNav()&&r){let u=parseInt(r[1],10)-1,_=parseInt(r[2],10)-1;s=this._flatFromCoords(Math.max(0,u),Math.max(0,_)),o=r[3]?parseInt(r[3],10):0}else if(i)s=parseInt(i[1],10)-1,o=i[2]?parseInt(i[2],10):0;else return;if(s===this.current&&o===this.step&&!t)return;this.current=Math.max(0,Math.min(this.slides.length-1,s));let h=this._maxSteps();this.step=h>0?Math.max(0,Math.min(h,o)):Math.max(0,o),t||(this._applyActive(),this._applyStep(),this._updateUI())}_writeHash(){let t=`#${this.current+1}`+(this.step>0?`.${this.step}`:"");if(location.hash!==t)try{history.replaceState(null,"",t)}catch{}}async _toggleHelp(){(await import("./deck-help.js")).toggleHelp(this)}async _togglePresenter(){(await import("./deck-presenter.js")).installPresenter(this)}async _closeHelp(){(await import("./deck-help.js")).closeHelp(this)}async _renderOverviewIfActive(){if(!this.overview){this._overviewTeardown?.(),this._overviewTeardown=null;return}let{mountOverview:t}=await import("./deck-overview.js");this._overviewTeardown=t(this,{slides:this.slides,chapters:this.chapters,currentIdx:this.current,onPick:e=>{this.overview=!1,this._goTo(e)}})}_maxSteps(){let t=this.slides[this.current];if(!t)return 0;let e=parseInt(t.getAttribute("steps")||t.dataset?.steps||"0",10);if(e>0)return e;let r=t.querySelector("deck-code[step-groups]");if(r)try{return JSON.parse(r.getAttribute("step-groups")).length}catch{}return 0}_advance(){let t=this._maxSteps();this.step<t?(this.step++,this._applyStep(),this._updateUI(),this._writeHash()):this.current<this.slides.length-1?this._goTo(this.current+1):this.loop&&this._goTo(0)}_back(){this.step>0?(this.step--,this._applyStep(),this._updateUI(),this._writeHash()):this.current>0?(this._goTo(this.current-1),this.step=this._maxSteps(),this._applyStep(),this._updateUI(),this._writeHash()):this.loop&&(this._goTo(this.slides.length-1),this.step=this._maxSteps(),this._applyStep(),this._updateUI(),this._writeHash())}_goTo(t){this.current=Math.max(0,Math.min(this.slides.length-1,t)),this.step=0,this._applyActive(),this._applyStep(),this._updateUI(),this._writeHash()}_goToCoords(t,e){let r=Math.max(0,Math.min(this.chapters.length-1,t)),i=this.chapters[r];if(!i)return;let s=Math.max(0,Math.min(i.slides.length-1,e));this._goTo(this._flatFromCoords(r,s))}_applyActive(){let t=this.slides.find(r=>r.hasAttribute("active"))??null,e=this.slides[this.current]??null;this.slides.forEach((r,i)=>{let s=i===this.current;r.toggleAttribute("active",s),s&&r.querySelectorAll("deck-mermaid").forEach(o=>o.render?.())}),this.transition&&!this._transitionLoaded&&(this._transitionLoaded=!0,import("./deck-transition.js").then(r=>r.installTransitions(this))),t!==e&&this.dispatchEvent(new CustomEvent("slide-change",{detail:{current:e,previous:t},bubbles:!1}))}_applyStep(){let t=this.slides[this.current];t&&(t.applyStep?.(this.step),t.querySelectorAll("*").forEach(e=>e.applyStep?.(this.step)),t.querySelectorAll("[data-step-block]").forEach(e=>{let r=parseInt(e.dataset.stepBlock,10);e.style.transition="opacity 0.25s ease",e.style.opacity=this.step===0||r<=this.step?"1":"0.15"}))}_updateUI(){let t=this.slides.length,e=this.current+1,r=this.renderRoot.querySelector("#progress"),i=this.renderRoot.querySelector("#counter"),s=this.renderRoot.querySelector("#step-dots");r&&(r.style.width=e/t*100+"%"),i&&(i.textContent=`${e} / ${t}`);let o=this._maxSteps();s&&(s.innerHTML=o===0?"":Array.from({length:o},(h,u)=>`<div class="dot${u<this.step?" active":""}"></div>`).join(""))}updated(){this._updateUI(),this._renderOverviewIfActive()}_navArrows(){if(!this._mouseEnabled("arrows")||this.overview)return"";let t=this.slides.length;if(t===0)return"";let e=this.current===0&&this.step===0,r=this.current>=t-1&&this.step>=this._maxSteps();if(this._has2DNav()){let{c:i,i:s}=this._coords(this.current),o=this.chapters[i];return p`<div id="nav-arrows"> <button class="nav-btn" title="Previous chapter" ?disabled=${!this.loop&&this.current===0} @click=${()=>i>0?this._goToCoords(i-1,0):this._back()}>&lsaquo;</button> <button class="nav-btn" title="Up" ?disabled=${s===0} @click=${()=>this._goToCoords(i,s-1)}>&uarr;</button> <button class="nav-btn" title="Down" ?disabled=${!o||s+1>=o.slides.length} @click=${()=>this._goToCoords(i,s+1)}>&darr;</button> <button class="nav-btn" title="Next chapter" ?disabled=${!this.loop&&r} @click=${()=>i+1<this.chapters.length?this._goToCoords(i+1,0):this._advance()}>&rsaquo;</button> </div>`}return p`<div id="nav-arrows"> <button class="nav-btn" title="Previous" ?disabled=${!this.loop&&e} @click=${()=>this._back()}>&lsaquo;</button> <button class="nav-btn" title="Next" ?disabled=${!this.loop&&r} @click=${()=>this._advance()}>&rsaquo;</button> </div>`}render(){return p`<div id="progress"></div> <div id="counter"></div> <div id="step-dots"></div> <div id="kb-hint"> <kbd title="Previous" @click=${()=>this._back()}>←</kbd ><kbd title="Next" @click=${()=>this._advance()}>→</kbd> ${this._has2DNav()?p`<kbd title="Previous" @click=${()=>this._back()}>↑</kbd
+            ><kbd title="Next" @click=${()=>this._advance()}>↓</kbd>`:""}
         <span>·</span>
-        <kbd>O</kbd>
+        <kbd title="Overview" @click=${()=>{this.overview=!this.overview}}>O</kbd>
         <span>·</span>
-        <kbd>P</kbd>
+        <kbd title="Presenter" @click=${()=>void this._togglePresenter()}>P</kbd>
         <span>·</span>
-        <kbd>?</kbd>
+        <kbd title="Help" @click=${()=>void this._toggleHelp()}>?</kbd>
       </div>
+      ${this._navArrows()}
       <slot></slot>
-      ${this.blank?u`<div id="blank" data-tone="${this.blank}" @click=${()=>{this.blank=null}}></div>`:""}
-    `}};a.styles=y`:host{display:block;width:100vw;height:100vh;position:relative;background:var(--deck-root-bg,var(--rik-surface-page))}#progress{position:fixed;bottom:0;left:0;height:var(--deck-root-progress-height,3px);background:var(--deck-root-progress-color,linear-gradient(90deg,var(--rik-accent),var(--rik-accent--soft)));transition:width 0.25s ease;z-index:100}#counter{position:fixed;bottom:1rem;right:1.5rem;font-size:var(--rik-font-size-xs);color:var(--deck-root-counter-color,var(--rik-text-default--faint));font-family:var(--rik-font-mono);z-index:100}#step-dots{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:100}.dot{width:6px;height:6px;border-radius:50%;background:var(--deck-root-dot-bg,#d4d4d0);transition:background 0.2s}.dot.active{background:var(--deck-root-dot-active-bg,var(--rik-accent))}#kb-hint{position:fixed;bottom:1rem;left:1.5rem;display:inline-flex;align-items:center;gap:6px;font:600 0.62rem/1 var(--rik-font-mono);color:var(--deck-root-kb-hint-color,var(--rik-text-default--faint));z-index:100;opacity:0.5;transition:opacity 0.2s ease;cursor:help}#kb-hint:hover{opacity:1}#kb-hint kbd{background:var(--rik-surface-raised);border:1px solid var(--rik-border-default);border-bottom:2px solid var(--rik-border-default);border-radius:4px;padding:2px 6px;color:var(--rik-text-default);font:inherit;min-width:16px;text-align:center}#kb-hint .sep{opacity:0.4}#blank{position:fixed;inset:0;z-index:9999;cursor:pointer}#blank[data-tone="black"]{background:#000}#blank[data-tone="white"]{background:#fff}`,o([c()],a.prototype,"current",2),o([c()],a.prototype,"step",2),o([c()],a.prototype,"blank",2),o([l({type:Boolean,reflect:!0})],a.prototype,"overview",2),o([l({type:String,reflect:!0})],a.prototype,"transition",2),o([l({type:Number,reflect:!0})],a.prototype,"autoplay",2),o([l({type:Boolean,reflect:!0})],a.prototype,"loop",2),o([l({type:Boolean,reflect:!0})],a.prototype,"swipe",2),a=o([k("deck-root")],a);export{a as DeckRoot};
+      ${this.blank?p`<div id="blank" data-tone="${this.blank}" @click=${()=>{this.blank=null}}></div>`:""}
+    `}};n.styles=k`:host{display:block;width:100vw;height:100vh;position:relative;background:var(--deck-root-bg,var(--rik-surface-page))}#progress{position:fixed;bottom:0;left:0;height:var(--deck-root-progress-height,3px);background:var(--deck-root-progress-color,linear-gradient(90deg,var(--rik-accent),var(--rik-accent--soft)));transition:width 0.25s ease;z-index:100}#counter{position:fixed;bottom:1rem;right:1.5rem;font-size:var(--rik-font-size-xs);color:var(--deck-root-counter-color,var(--rik-text-default--faint));font-family:var(--rik-font-mono);z-index:100}#step-dots{position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:100}.dot{width:6px;height:6px;border-radius:50%;background:var(--deck-root-dot-bg,#d4d4d0);transition:background 0.2s}.dot.active{background:var(--deck-root-dot-active-bg,var(--rik-accent))}#kb-hint{position:fixed;bottom:1rem;left:1.5rem;display:inline-flex;align-items:center;gap:6px;font:600 0.62rem/1 var(--rik-font-mono);color:var(--deck-root-kb-hint-color,var(--rik-text-default--faint));z-index:100;opacity:0.5;transition:opacity 0.2s ease;cursor:help}#kb-hint:hover{opacity:1}#kb-hint kbd{background:var(--rik-surface-raised);border:1px solid var(--rik-border-default);border-bottom:2px solid var(--rik-border-default);border-radius:4px;padding:2px 6px;color:var(--rik-text-default);font:inherit;min-width:16px;text-align:center;cursor:pointer}#kb-hint kbd:hover{border-color:var(--rik-accent)}#kb-hint .sep{opacity:0.4}#nav-arrows{position:fixed;bottom:2.4rem;right:1.5rem;display:flex;gap:4px;z-index:100;opacity:var(--deck-root-nav-opacity,0.35);transition:opacity 0.2s ease}#nav-arrows:hover{opacity:1}.nav-btn{appearance:none;cursor:pointer;width:30px;height:30px;display:grid;place-items:center;font:700 1rem/1 var(--rik-font-mono);color:var(--deck-root-nav-color,var(--rik-text-default));background:var(--deck-root-nav-bg,var(--rik-surface-raised));border:1px solid var(--rik-border-default);border-radius:6px;padding:0}.nav-btn:hover:not(:disabled){border-color:var(--rik-accent)}.nav-btn:disabled{opacity:0.3;cursor:default}#blank{position:fixed;inset:0;z-index:9999;cursor:pointer}#blank[data-tone="black"]{background:#000}#blank[data-tone="white"]{background:#fff}`,a([v()],n.prototype,"current",2),a([v()],n.prototype,"step",2),a([v()],n.prototype,"blank",2),a([l({type:Boolean,reflect:!0})],n.prototype,"overview",2),a([l({type:String,reflect:!0})],n.prototype,"transition",2),a([l({type:Number,reflect:!0})],n.prototype,"autoplay",2),a([l({type:Boolean,reflect:!0})],n.prototype,"loop",2),a([l({type:Boolean,reflect:!0})],n.prototype,"swipe",2),a([l({type:String,reflect:!0,attribute:"mouse-nav"})],n.prototype,"mouseNav",2),a([l({type:String,reflect:!0})],n.prototype,"nav",2),n=a([w("deck-root")],n);export{n as DeckRoot};

package/dist/deck-transition.js

@@ -48,4 +48,4 @@ var e={slide:560,"slide-up":520,"slide-down":520,"slide-right":560,fade:480,zoom
     ::slotted([active][class*='rk-enter-']),
     ::slotted(.rk-leaving)                  { animation: none; }
   }
-`,v=["rk-enter-slide","rk-enter-slide-up","rk-enter-slide-down","rk-enter-slide-right","rk-enter-fade","rk-enter-zoom","rk-enter-flip"],$=["rk-exit-slide","rk-exit-slide-up","rk-exit-slide-down","rk-exit-slide-right","rk-exit-fade","rk-exit-zoom","rk-exit-flip"];function x(s){if(s.__rkTransitions)return s.__rkTransitions;let f=s.shadowRoot;if(!f)return()=>{};let a=document.createElement("style");a.textContent=w,a.setAttribute("data-rik-transitions",""),f.appendChild(a);function h(m,n){if(!n)return 0;let t=m.compareDocumentPosition(n);return t&Node.DOCUMENT_POSITION_PRECEDING?1:t&Node.DOCUMENT_POSITION_FOLLOWING?-1:0}let d=m=>{let n=m,t=n.detail.current,o=n.detail.previous;if(!t)return;let i=t.dataset.transition||s.transition||"fade",l=h(t,o);i==="slide"&&l<0?i="slide-right":i==="slide-right"&&l>0?i="slide":i==="slide-up"&&l<0?i="slide-down":i==="slide-down"&&l>0&&(i="slide-up");let u=`rk-enter-${i}`,p=`rk-exit-${i}`,g=e[i]??480;o&&o!==t&&(o.classList.remove(...v,...$,"rk-leaving"),o.style.display="flex",o.style.zIndex="1",o.offsetWidth,o.classList.add("rk-leaving",p),window.setTimeout(()=>{o.classList.remove("rk-leaving",p),o.style.display="",o.style.zIndex=""},g+40)),t.classList.remove(...v),t.style.zIndex="2",t.offsetWidth,t.classList.add(u),window.setTimeout(()=>{t.classList.remove(u),t.style.zIndex=""},g+40)};s.addEventListener("slide-change",d);let k=s.querySelector(":scope > [active]");k&&d(new CustomEvent("slide-change",{detail:{current:k,previous:null}}));let c=()=>{s.removeEventListener("slide-change",d),a.remove(),delete s.__rkTransitions};return s.__rkTransitions=c,c}export{x as installTransitions};
+`,g=["rk-enter-slide","rk-enter-slide-up","rk-enter-slide-down","rk-enter-slide-right","rk-enter-fade","rk-enter-zoom","rk-enter-flip"],$=["rk-exit-slide","rk-exit-slide-up","rk-exit-slide-down","rk-exit-slide-right","rk-exit-fade","rk-exit-zoom","rk-exit-flip"];function x(s){if(s.__rkTransitions)return s.__rkTransitions;let f=s.shadowRoot;if(!f)return()=>{};let a=document.createElement("style");a.textContent=w,a.setAttribute("data-rik-transitions",""),f.appendChild(a);function h(m,n){if(!n)return 0;let t=m.compareDocumentPosition(n);return t&Node.DOCUMENT_POSITION_PRECEDING?1:t&Node.DOCUMENT_POSITION_FOLLOWING?-1:0}let d=m=>{if(s.__rkMorphActive)return;let n=m,t=n.detail.current,o=n.detail.previous;if(!t)return;let i=t.dataset.transition||s.transition||"fade",l=h(t,o);i==="slide"&&l<0?i="slide-right":i==="slide-right"&&l>0?i="slide":i==="slide-up"&&l<0?i="slide-down":i==="slide-down"&&l>0&&(i="slide-up");let u=`rk-enter-${i}`,p=`rk-exit-${i}`,v=e[i]??480;o&&o!==t&&(o.classList.remove(...g,...$,"rk-leaving"),o.style.display="flex",o.style.zIndex="1",o.offsetWidth,o.classList.add("rk-leaving",p),window.setTimeout(()=>{o.classList.remove("rk-leaving",p),o.style.display="",o.style.zIndex=""},v+40)),t.classList.remove(...g),t.style.zIndex="2",t.offsetWidth,t.classList.add(u),window.setTimeout(()=>{t.classList.remove(u),t.style.zIndex=""},v+40)};s.addEventListener("slide-change",d);let k=s.querySelector(":scope > [active]");k&&d(new CustomEvent("slide-change",{detail:{current:k,previous:null}}));let c=()=>{s.removeEventListener("slide-change",d),a.remove(),delete s.__rkTransitions};return s.__rkTransitions=c,c}export{x as installTransitions};

package/dist/index.d.ts

@@ -26,4 +26,3 @@ import './atoms/deck-badge.js';
 import './atoms/deck-kicker.js';
 import './atoms/deck-punch.js';
 import './atoms/deck-code.js';
-//# sourceMappingURL=index.d.ts.map