rikiki-deck 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -9
- package/dist/atoms/deck-badge.d.ts +0 -1
- package/dist/atoms/deck-code.d.ts +0 -1
- package/dist/atoms/deck-kicker.d.ts +0 -1
- package/dist/atoms/deck-punch.d.ts +0 -1
- package/dist/click-stages.js +1 -1
- package/dist/deck-help.js +6 -3
- package/dist/deck-mermaid.js +3 -3
- package/dist/deck-overview.js +14 -2
- package/dist/deck-root.js +8 -6
- package/dist/deck-transition.js +1 -1
- package/dist/index.d.ts +0 -1
- package/dist/index.js +43 -41
- package/dist/layouts/deck-cover.d.ts +0 -1
- package/dist/layouts/deck-feature-cards.d.ts +0 -1
- package/dist/layouts/deck-feature.d.ts +0 -1
- package/dist/layouts/deck-photo.d.ts +0 -1
- package/dist/layouts/deck-section.d.ts +0 -1
- package/dist/layouts/deck-split.d.ts +0 -1
- package/dist/layouts/deck-takeaway.d.ts +0 -1
- package/dist/livereload.d.ts +0 -1
- package/dist/molecules/deck-callout.d.ts +0 -1
- package/dist/molecules/deck-card.d.ts +0 -1
- package/dist/molecules/deck-grid.d.ts +0 -1
- package/dist/molecules/deck-md.d.ts +0 -1
- package/dist/molecules/deck-mermaid.d.ts +6 -1
- package/dist/molecules/deck-metric.d.ts +0 -1
- package/dist/molecules/deck-shortcut.d.ts +0 -1
- package/dist/molecules/deck-stack.d.ts +0 -1
- package/dist/molecules/deck-stat.d.ts +0 -1
- package/dist/molecules/deck-step-list.d.ts +0 -1
- package/dist/molecules/deck-tier-list.d.ts +0 -1
- package/dist/plugins/click-stages.d.ts +0 -1
- package/dist/plugins/shiki.d.ts +0 -1
- package/dist/runtime/deck-help.d.ts +0 -1
- package/dist/runtime/deck-notes.d.ts +0 -1
- package/dist/runtime/deck-overview.d.ts +0 -1
- package/dist/runtime/deck-presenter.d.ts +0 -1
- package/dist/runtime/deck-root.d.ts +32 -2
- package/dist/runtime/deck-transition.d.ts +0 -1
- package/dist/shared-styles.d.ts +0 -1
- package/dist/standalone.js +59 -42
- package/package.json +1 -1
- package/dist/atoms/deck-badge.d.ts.map +0 -1
- package/dist/atoms/deck-code.d.ts.map +0 -1
- package/dist/atoms/deck-kicker.d.ts.map +0 -1
- package/dist/atoms/deck-punch.d.ts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/layouts/deck-cover.d.ts.map +0 -1
- package/dist/layouts/deck-feature-cards.d.ts.map +0 -1
- package/dist/layouts/deck-feature.d.ts.map +0 -1
- package/dist/layouts/deck-photo.d.ts.map +0 -1
- package/dist/layouts/deck-section.d.ts.map +0 -1
- package/dist/layouts/deck-split.d.ts.map +0 -1
- package/dist/layouts/deck-takeaway.d.ts.map +0 -1
- package/dist/livereload.d.ts.map +0 -1
- package/dist/molecules/deck-callout.d.ts.map +0 -1
- package/dist/molecules/deck-card.d.ts.map +0 -1
- package/dist/molecules/deck-grid.d.ts.map +0 -1
- package/dist/molecules/deck-md.d.ts.map +0 -1
- package/dist/molecules/deck-mermaid.d.ts.map +0 -1
- package/dist/molecules/deck-metric.d.ts.map +0 -1
- package/dist/molecules/deck-shortcut.d.ts.map +0 -1
- package/dist/molecules/deck-stack.d.ts.map +0 -1
- package/dist/molecules/deck-stat.d.ts.map +0 -1
- package/dist/molecules/deck-step-list.d.ts.map +0 -1
- package/dist/molecules/deck-tier-list.d.ts.map +0 -1
- package/dist/plugins/click-stages.d.ts.map +0 -1
- package/dist/plugins/shiki.d.ts.map +0 -1
- package/dist/runtime/deck-help.d.ts.map +0 -1
- package/dist/runtime/deck-notes.d.ts.map +0 -1
- package/dist/runtime/deck-overview.d.ts.map +0 -1
- package/dist/runtime/deck-presenter.d.ts.map +0 -1
- package/dist/runtime/deck-root.d.ts.map +0 -1
- package/dist/runtime/deck-transition.d.ts.map +0 -1
- package/dist/shared-styles.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ A tiny **Lit Web Components** framework for technical presentations. Drop a fold
|
|
|
8
8
|
cp starter.html my-deck.html
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
Edit `my-deck.html`. Each slide is a custom element. Markdown is available anywhere via `<deck-md>`. Navigate with `←` / `→`
|
|
11
|
+
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.
|
|
12
12
|
|
|
13
13
|
## Layout
|
|
14
14
|
|
|
@@ -122,16 +122,37 @@ Parser: `marked` 12 from CDN. Supports GFM (tables, task lists), code blocks, in
|
|
|
122
122
|
|
|
123
123
|
## Navigation
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
By default navigation is **linear**: arrows move to the next / previous slide.
|
|
126
|
+
Add `nav="2d"` on `<deck-root>` (with `<deck-section>` chapters) to opt into grid
|
|
127
|
+
navigation, where `←` / `→` move between chapters and `↑` / `↓` within one.
|
|
128
|
+
|
|
129
|
+
| Key | Effect (linear default) |
|
|
126
130
|
|---|---|
|
|
127
|
-
| `→` / `←` | Next / previous
|
|
128
|
-
|
|
|
129
|
-
| `Space` / `PageDown` | Linear next (any axis) |
|
|
130
|
-
| `PageUp` | Linear back |
|
|
131
|
+
| `→` / `←` | Next / previous slide (or step) |
|
|
132
|
+
| `Space` / `PageDown` | Advance · `PageUp` back |
|
|
131
133
|
| `Home` / `End` | First / last slide |
|
|
132
|
-
| `O` | Toggle overview |
|
|
134
|
+
| `O` | Toggle overview grid (type to filter) |
|
|
135
|
+
| `P` | Presenter / speaker-notes window |
|
|
133
136
|
| `?` / `H` | Show keyboard help |
|
|
134
137
|
|
|
138
|
+
The bottom-left hint chips (`← → O P ?`) are clickable shortcuts for the same
|
|
139
|
+
actions.
|
|
140
|
+
|
|
141
|
+
### Mouse
|
|
142
|
+
|
|
143
|
+
On by default since 0.3.0: click to advance (Shift+click to go back), scroll
|
|
144
|
+
wheel, discreet chevrons bottom-right, and mouse back/forward buttons. The wheel
|
|
145
|
+
yields to scrollable content (a tall `deck-code`, a zoomable `<svg>`): it scrolls
|
|
146
|
+
that element and only advances the deck once it reaches its scroll edge. Links,
|
|
147
|
+
buttons and inputs never trigger navigation; add `data-no-advance` to opt any
|
|
148
|
+
element out.
|
|
149
|
+
|
|
150
|
+
```html
|
|
151
|
+
<deck-root> <!-- everything on (default) -->
|
|
152
|
+
<deck-root mouse-nav="none"> <!-- keyboard-only, pre-0.3 behavior -->
|
|
153
|
+
<deck-root mouse-nav="wheel arrows"> <!-- pick from: click wheel arrows aux -->
|
|
154
|
+
```
|
|
155
|
+
|
|
135
156
|
## Themes
|
|
136
157
|
|
|
137
158
|
Picking a theme is one `<link>` change:
|
|
@@ -177,8 +198,16 @@ npm run typecheck # tsc --noEmit
|
|
|
177
198
|
|
|
178
199
|
`dist/` is versioned · consumers don't run a build.
|
|
179
200
|
|
|
201
|
+
## Reveals & animations
|
|
202
|
+
|
|
203
|
+
Per-element click-through builds are an opt-in plugin (`installClickStages()` from
|
|
204
|
+
`dist/click-stages.js`): annotate elements with `data-click`, `data-click-hide`,
|
|
205
|
+
`data-click-auto`, `data-click-stagger`, and `data-morph` (Keynote-style Magic
|
|
206
|
+
Move via View Transitions). Slide transitions are driven by `transition="…"` on
|
|
207
|
+
`<deck-root>`. See `docs/llms/rikiki-reference.md` §7 for the full attribute set,
|
|
208
|
+
and `decks/tests/demo.html` for a runnable feature tour.
|
|
209
|
+
|
|
180
210
|
## Known limits
|
|
181
211
|
|
|
182
212
|
- **Step reveal on code blocks** uses `step-groups` on `<deck-code>` but is not exposed elsewhere yet.
|
|
183
|
-
- **
|
|
184
|
-
- **Syntax highlighting** is ~10 keywords of JS/TS, no AST. Hook a real highlighter (Prism, Shiki) if you need more.
|
|
213
|
+
- **Syntax highlighting** is ~10 keywords of JS/TS, no AST. Hook a real highlighter (Prism, Shiki) if you need more, via `installShiki()`.
|
package/dist/click-stages.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var t="data-deck-help",
|
|
1
|
+
var t="data-deck-help",d=`
|
|
2
2
|
#kb-overlay {
|
|
3
3
|
position: fixed; inset: 0;
|
|
4
4
|
background: rgba(10,10,10,0.7);
|
|
@@ -61,7 +61,7 @@ var t="data-deck-help",o=`
|
|
|
61
61
|
box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
|
|
62
62
|
}
|
|
63
63
|
.kb-row .desc { color: var(--rik-text-default--muted); }
|
|
64
|
-
`,
|
|
64
|
+
`,n=`
|
|
65
65
|
<div id="kb-overlay">
|
|
66
66
|
<div class="kb-card">
|
|
67
67
|
<div class="kb-card-header">
|
|
@@ -77,6 +77,9 @@ var t="data-deck-help",o=`
|
|
|
77
77
|
<div class="kb-group-label">View</div>
|
|
78
78
|
<div class="kb-row"><span class="desc">Toggle overview</span><span class="keys"><kbd>O</kbd></span></div>
|
|
79
79
|
<div class="kb-row"><span class="desc">Show this help</span><span class="keys"><kbd>?</kbd><kbd>H</kbd></span></div>
|
|
80
|
+
<div class="kb-group-label">Mouse</div>
|
|
81
|
+
<div class="kb-row"><span class="desc">Next / Previous</span><span class="keys"><kbd>Click</kbd><kbd>Shift+Click</kbd></span></div>
|
|
82
|
+
<div class="kb-row"><span class="desc">Navigate</span><span class="keys"><kbd>Wheel</kbd><kbd>Back/Fwd buttons</kbd></span></div>
|
|
80
83
|
</div>
|
|
81
84
|
</div>
|
|
82
|
-
`;function
|
|
85
|
+
`;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
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
var c=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var
|
|
2
|
-
`),r=i.filter(e=>e.trim()).reduce((e,
|
|
3
|
-
`)),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
|
|
1
|
+
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(`
|
|
2
|
+
`),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(`
|
|
3
|
+
`)),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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var I="data-deck-overview",q="data-overview-tokens",O=`
|
|
2
2
|
:host([overview]) ::slotted(*) { display: none !important; }
|
|
3
3
|
:host([overview]) #overview-grid {
|
|
4
4
|
position: fixed; inset: 0;
|
|
@@ -189,6 +189,18 @@ var H="data-deck-overview",O="data-overview-tokens",A=`
|
|
|
189
189
|
pointer-events: none;
|
|
190
190
|
}
|
|
191
191
|
:host([overview]) .ov-thumb > * { display: flex !important; }
|
|
192
|
+
:host([overview]) .ov-mermaid-snap {
|
|
193
|
+
display: flex; align-items: center; justify-content: center;
|
|
194
|
+
background: var(--rik-code__bg);
|
|
195
|
+
border: 1px solid var(--rik-code__border);
|
|
196
|
+
border-radius: var(--rik-radius-md);
|
|
197
|
+
padding: var(--rik-space-4);
|
|
198
|
+
overflow: hidden; min-width: 0;
|
|
199
|
+
}
|
|
200
|
+
:host([overview]) .ov-mermaid-snap svg {
|
|
201
|
+
width: 100% !important; height: auto !important;
|
|
202
|
+
max-width: 100% !important; max-height: 60vh;
|
|
203
|
+
}
|
|
192
204
|
:host([overview]) .ov-cell-label {
|
|
193
205
|
position: absolute; bottom: 6px; right: 8px;
|
|
194
206
|
font: 700 0.70rem/1 var(--rik-font-mono);
|
|
@@ -199,4 +211,4 @@ var H="data-deck-overview",O="data-overview-tokens",A=`
|
|
|
199
211
|
pointer-events: none;
|
|
200
212
|
}
|
|
201
213
|
:host(:not([overview])) #overview-grid { display: none; }
|
|
202
|
-
`;function
|
|
214
|
+
`;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-root.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
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 c,css as y}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as k,property as l,state as u}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}`:"");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 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 c`<div id="progress"></div> <div id="counter"></div> <div id="step-dots"></div> <div id="kb-hint"> <kbd>←</kbd><kbd>→</kbd> ${this._has2DNav()?c`<kbd>↑</kbd><kbd>↓</kbd>`:""}
|
|
1
|
+
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()}>‹</button> <button class="nav-btn" title="Up" ?disabled=${s===0} @click=${()=>this._goToCoords(i,s-1)}>↑</button> <button class="nav-btn" title="Down" ?disabled=${!o||s+1>=o.slides.length} @click=${()=>this._goToCoords(i,s+1)}>↓</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()}>›</button> </div>`}return p`<div id="nav-arrows"> <button class="nav-btn" title="Previous" ?disabled=${!this.loop&&e} @click=${()=>this._back()}>‹</button> <button class="nav-btn" title="Next" ?disabled=${!this.loop&&r} @click=${()=>this._advance()}>›</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
|
|
2
|
+
><kbd title="Next" @click=${()=>this._advance()}>↓</kbd>`:""}
|
|
2
3
|
<span>·</span>
|
|
3
|
-
<kbd>O</kbd>
|
|
4
|
+
<kbd title="Overview" @click=${()=>{this.overview=!this.overview}}>O</kbd>
|
|
4
5
|
<span>·</span>
|
|
5
|
-
<kbd>P</kbd>
|
|
6
|
+
<kbd title="Presenter" @click=${()=>void this._togglePresenter()}>P</kbd>
|
|
6
7
|
<span>·</span>
|
|
7
|
-
<kbd>?</kbd>
|
|
8
|
+
<kbd title="Help" @click=${()=>void this._toggleHelp()}>?</kbd>
|
|
8
9
|
</div>
|
|
10
|
+
${this._navArrows()}
|
|
9
11
|
<slot></slot>
|
|
10
|
-
${this.blank?
|
|
11
|
-
`}};
|
|
12
|
+
${this.blank?p`<div id="blank" data-tone="${this.blank}" @click=${()=>{this.blank=null}}></div>`:""}
|
|
13
|
+
`}};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
CHANGED
|
@@ -48,4 +48,4 @@ var e={slide:560,"slide-up":520,"slide-down":520,"slide-right":560,fade:480,zoom
|
|
|
48
48
|
::slotted([active][class*='rk-enter-']),
|
|
49
49
|
::slotted(.rk-leaving) { animation: none; }
|
|
50
50
|
}
|
|
51
|
-
`,
|
|
51
|
+
`,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
CHANGED