rikiki-deck 0.1.0 → 0.2.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.
Files changed (101) hide show
  1. package/README.md +18 -17
  2. package/dist/atoms/deck-badge.d.ts.map +1 -0
  3. package/dist/atoms/deck-code.d.ts.map +1 -0
  4. package/dist/atoms/deck-kicker.d.ts.map +1 -0
  5. package/dist/atoms/deck-punch.d.ts.map +1 -0
  6. package/dist/click-stages.js +1 -0
  7. package/dist/deck-code.js +2 -2
  8. package/dist/deck-presenter.js +18 -13
  9. package/dist/deck-root.js +3 -3
  10. package/dist/index.d.ts +28 -24
  11. package/dist/index.d.ts.map +1 -1
  12. package/dist/index.js +71 -21
  13. package/dist/layouts/deck-cover.d.ts.map +1 -0
  14. package/dist/layouts/deck-feature-cards.d.ts.map +1 -0
  15. package/dist/layouts/deck-feature.d.ts.map +1 -0
  16. package/dist/layouts/deck-photo.d.ts.map +1 -0
  17. package/dist/layouts/deck-section.d.ts.map +1 -0
  18. package/dist/layouts/deck-split.d.ts.map +1 -0
  19. package/dist/layouts/deck-takeaway.d.ts.map +1 -0
  20. package/dist/livereload.js +1 -1
  21. package/dist/molecules/deck-callout.d.ts.map +1 -0
  22. package/dist/molecules/deck-card.d.ts.map +1 -0
  23. package/dist/molecules/deck-grid.d.ts.map +1 -0
  24. package/dist/molecules/deck-md.d.ts.map +1 -0
  25. package/dist/molecules/deck-mermaid.d.ts.map +1 -0
  26. package/dist/molecules/deck-metric.d.ts.map +1 -0
  27. package/dist/molecules/deck-shortcut.d.ts.map +1 -0
  28. package/dist/molecules/deck-stack.d.ts.map +1 -0
  29. package/dist/molecules/deck-stat.d.ts.map +1 -0
  30. package/dist/molecules/deck-step-list.d.ts.map +1 -0
  31. package/dist/molecules/deck-tier-list.d.ts.map +1 -0
  32. package/dist/plugins/click-stages.d.ts +2 -0
  33. package/dist/plugins/click-stages.d.ts.map +1 -0
  34. package/dist/{shiki-plugin.d.ts → plugins/shiki.d.ts} +1 -1
  35. package/dist/plugins/shiki.d.ts.map +1 -0
  36. package/dist/runtime/deck-help.d.ts.map +1 -0
  37. package/dist/runtime/deck-notes.d.ts.map +1 -0
  38. package/dist/runtime/deck-overview.d.ts.map +1 -0
  39. package/dist/runtime/deck-presenter.d.ts.map +1 -0
  40. package/dist/runtime/deck-root.d.ts.map +1 -0
  41. package/dist/runtime/deck-transition.d.ts.map +1 -0
  42. package/dist/standalone.js +58 -53
  43. package/package.json +5 -3
  44. package/dist/deck-badge.d.ts.map +0 -1
  45. package/dist/deck-callout.d.ts.map +0 -1
  46. package/dist/deck-card.d.ts.map +0 -1
  47. package/dist/deck-code.d.ts.map +0 -1
  48. package/dist/deck-cover.d.ts.map +0 -1
  49. package/dist/deck-feature-cards.d.ts.map +0 -1
  50. package/dist/deck-feature.d.ts.map +0 -1
  51. package/dist/deck-grid.d.ts.map +0 -1
  52. package/dist/deck-help.d.ts.map +0 -1
  53. package/dist/deck-kicker.d.ts.map +0 -1
  54. package/dist/deck-md.d.ts.map +0 -1
  55. package/dist/deck-mermaid.d.ts.map +0 -1
  56. package/dist/deck-metric.d.ts.map +0 -1
  57. package/dist/deck-notes.d.ts.map +0 -1
  58. package/dist/deck-overview.d.ts.map +0 -1
  59. package/dist/deck-photo.d.ts.map +0 -1
  60. package/dist/deck-presenter.d.ts.map +0 -1
  61. package/dist/deck-punch.d.ts.map +0 -1
  62. package/dist/deck-root.d.ts.map +0 -1
  63. package/dist/deck-section.d.ts.map +0 -1
  64. package/dist/deck-shortcut.d.ts.map +0 -1
  65. package/dist/deck-split.d.ts.map +0 -1
  66. package/dist/deck-stack.d.ts.map +0 -1
  67. package/dist/deck-stat.d.ts.map +0 -1
  68. package/dist/deck-step-list.d.ts.map +0 -1
  69. package/dist/deck-takeaway.d.ts.map +0 -1
  70. package/dist/deck-tier-list.d.ts.map +0 -1
  71. package/dist/deck-transition.d.ts.map +0 -1
  72. package/dist/shiki-plugin.d.ts.map +0 -1
  73. /package/dist/{deck-badge.d.ts → atoms/deck-badge.d.ts} +0 -0
  74. /package/dist/{deck-code.d.ts → atoms/deck-code.d.ts} +0 -0
  75. /package/dist/{deck-kicker.d.ts → atoms/deck-kicker.d.ts} +0 -0
  76. /package/dist/{deck-punch.d.ts → atoms/deck-punch.d.ts} +0 -0
  77. /package/dist/{deck-cover.d.ts → layouts/deck-cover.d.ts} +0 -0
  78. /package/dist/{deck-feature-cards.d.ts → layouts/deck-feature-cards.d.ts} +0 -0
  79. /package/dist/{deck-feature.d.ts → layouts/deck-feature.d.ts} +0 -0
  80. /package/dist/{deck-photo.d.ts → layouts/deck-photo.d.ts} +0 -0
  81. /package/dist/{deck-section.d.ts → layouts/deck-section.d.ts} +0 -0
  82. /package/dist/{deck-split.d.ts → layouts/deck-split.d.ts} +0 -0
  83. /package/dist/{deck-takeaway.d.ts → layouts/deck-takeaway.d.ts} +0 -0
  84. /package/dist/{deck-callout.d.ts → molecules/deck-callout.d.ts} +0 -0
  85. /package/dist/{deck-card.d.ts → molecules/deck-card.d.ts} +0 -0
  86. /package/dist/{deck-grid.d.ts → molecules/deck-grid.d.ts} +0 -0
  87. /package/dist/{deck-md.d.ts → molecules/deck-md.d.ts} +0 -0
  88. /package/dist/{deck-mermaid.d.ts → molecules/deck-mermaid.d.ts} +0 -0
  89. /package/dist/{deck-metric.d.ts → molecules/deck-metric.d.ts} +0 -0
  90. /package/dist/{deck-shortcut.d.ts → molecules/deck-shortcut.d.ts} +0 -0
  91. /package/dist/{deck-stack.d.ts → molecules/deck-stack.d.ts} +0 -0
  92. /package/dist/{deck-stat.d.ts → molecules/deck-stat.d.ts} +0 -0
  93. /package/dist/{deck-step-list.d.ts → molecules/deck-step-list.d.ts} +0 -0
  94. /package/dist/{deck-tier-list.d.ts → molecules/deck-tier-list.d.ts} +0 -0
  95. /package/dist/{deck-help.d.ts → runtime/deck-help.d.ts} +0 -0
  96. /package/dist/{deck-notes.d.ts → runtime/deck-notes.d.ts} +0 -0
  97. /package/dist/{deck-overview.d.ts → runtime/deck-overview.d.ts} +0 -0
  98. /package/dist/{deck-presenter.d.ts → runtime/deck-presenter.d.ts} +0 -0
  99. /package/dist/{deck-root.d.ts → runtime/deck-root.d.ts} +0 -0
  100. /package/dist/{deck-transition.d.ts → runtime/deck-transition.d.ts} +0 -0
  101. /package/dist/{shiki-plugin.js → shiki.js} +0 -0
package/README.md CHANGED
@@ -20,22 +20,23 @@ rikiki/
20
20
  │ ├── siliceum.css ← alternative theme (warm paper + yellow)
21
21
  │ └── siliceum-fonts.css ← self-hosted Source Sans Pro + JetBrains Mono
22
22
  ├── fonts/ ← woff2 files used by the Siliceum theme
23
- ├── src/ ← TypeScript sources · contributors edit these
24
- │ ├── deck-root.ts deck wrapper · navigation, overview, hash, kb hints
25
- │ ├── deck-cover.ts ← layouts
26
- │ ├── deck-section.ts
27
- │ ├── deck-feature.ts
28
- │ ├── deck-split.ts
29
- │ ├── deck-feature-cards.ts
30
- │ ├── deck-takeaway.ts
31
- │ ├── deck-md.ts ← atoms
32
- │ ├── deck-code.ts
33
- │ ├── deck-callout.ts
34
- │ ├── deck-card.ts
35
- │ ├── … ← deck-badge, deck-metric, deck-tier-list, etc.
23
+ ├── src/ ← TypeScript sources · organised by DS bucket
24
+ │ ├── index.ts registers every component
36
25
  │ ├── shared-styles.ts
37
- └── index.ts ← registers every component
38
- ├── dist/ built output · consumers import from here
26
+ ├── livereload.ts
27
+ ├── runtime/ deck-root, deck-help, deck-overview,
28
+ │ │ deck-presenter, deck-transition, deck-notes
29
+ │ ├── layouts/ ← deck-cover, deck-section, deck-feature,
30
+ │ │ deck-split, deck-feature-cards, deck-takeaway,
31
+ │ │ deck-photo
32
+ │ ├── molecules/ ← deck-callout, deck-card, deck-md, deck-mermaid,
33
+ │ │ deck-stat, deck-metric, deck-tier-list,
34
+ │ │ deck-step-list, deck-shortcut, deck-stack,
35
+ │ │ deck-grid
36
+ │ ├── atoms/ ← deck-badge, deck-kicker, deck-punch, deck-code
37
+ │ └── plugins/ ← opt-in (shiki for advanced syntax highlighting)
38
+ ├── dist/ ← built output · FLAT regardless of src bucket
39
+ │ (deck-root's dynamic imports rely on it)
39
40
  ├── build.mjs ← esbuild script
40
41
  ├── tsconfig.json
41
42
  └── starter.html ← blank template, one slide per layout type
@@ -44,7 +45,7 @@ rikiki/
44
45
  ## Three-layer styling
45
46
 
46
47
  1. **Theme tokens** (`themes/<name>.css`) at `:root` · custom properties cross the Shadow DOM, so they reach every component.
47
- 2. **Shared styles** (`src/shared-styles.ts`) · base typography, helpers, imported by every component via `static styles`.
48
+ 2. **Shared styles** (`src/shared-styles.ts`) · base typography, helpers, imported by every layout via `static styles`.
48
49
  3. **Layout-specific CSS** · each component's own Shadow DOM.
49
50
 
50
51
  To re-theme: copy a theme file, change the values, that's it. All components follow.
@@ -163,7 +164,7 @@ deck-cover::part(brand) { font-family: 'Comic Sans'; }
163
164
 
164
165
  ### Add a layout
165
166
 
166
- Create `src/deck-my-layout.ts`, import `slideBase` from `shared-styles.js`, extend `LitElement`, register in `src/index.ts`. Rebuild.
167
+ Create `src/layouts/deck-my-layout.ts`, `import { slideBase } from '../shared-styles.js'`, extend `LitElement`, register in `src/index.ts`. Rebuild.
167
168
 
168
169
  ## Build
169
170
 
@@ -0,0 +1 @@
1
+ {"version":3,"file":"deck-badge.d.ts","sourceRoot":"","sources":["../../src/atoms/deck-badge.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAEvE,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAgBpB;IAE0B,IAAI,CAAC,EAAE,aAAa,CAAC;IAExC,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"deck-code.d.ts","sourceRoot":"","sources":["../../src/atoms/deck-code.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,YAAY,GACpB,IAAI,GAAG,IAAI,GAAG,MAAM,GACpB,MAAM,GAAG,KAAK,GAAG,KAAK,GACtB,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAiD5B,qBACa,QAAS,SAAQ,UAAU;IAMtC,OAAgB,MAAM,0BAqCpB;IAEmC,IAAI,EAAE,MAAM,CAAM;IACX,IAAI,UAAS;IACb,MAAM,UAAS;IACL,UAAU,CAAC,EAAE,MAAM,CAAC;IACjE,OAAO,CAAC,KAAK,CAAM;IAC5B,OAAO,CAAC,OAAO,CAA2B;IAEjC,iBAAiB;IAQ1B,OAAO,CAAC,UAAU;IAkBlB,0EAA0E;IAC1E,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAgBjB,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"deck-kicker.d.ts","sourceRoot":"","sources":["../../src/atoms/deck-kicker.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBAAa,UAAW,SAAQ,UAAU;IAIxC,OAAgB,MAAM,0BAUpB;IACO,MAAM;CAChB"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"deck-punch.d.ts","sourceRoot":"","sources":["../../src/atoms/deck-punch.ts"],"names":[],"mappings":"AAgBA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AACnF,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;AAmBzE,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAiBpB;IAE0B,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,aAAa,CAAC;IACN,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEjD,OAAO;IAaP,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}
@@ -0,0 +1 @@
1
+ var l="data-click",i="data-click-hide";function m(t){let e=0,s=0;return t.querySelectorAll(`[${l}], [${i}]`).forEach(n=>{let r=n.getAttribute(l)??n.getAttribute(i)??"",o=parseInt(r,10);Number.isFinite(o)&&o>0?s=Math.max(s,o):e+=1}),Math.max(s,e)}function f(t){let e=0,s=[];return t.querySelectorAll(`[${l}], [${i}]`).forEach(a=>{let n=a.hasAttribute(i),r=a.getAttribute(n?i:l)??"",o=parseInt(r,10),c=Number.isFinite(o)&&o>0?o:++e;s.push({el:a,step:c,hide:n})}),s}var p=new WeakSet;function h(t,e){if(p.has(t))return;p.add(t);let s=window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;t.style.transition=s?"opacity 0.01s linear":"opacity 0.32s ease, transform 0.32s cubic-bezier(0.22,1,0.36,1)",t.style.willChange="opacity, transform",d(t,e)}function k(t){switch(t.getAttribute("data-anim")){case"slide-up":return"translateY(16px)";case"slide-left":return"translateX(16px)";case"scale":return"scale(0.92)";default:return"none"}}function d(t,e){t.style.opacity=e?"1":"0",t.style.transform=e?"none":k(t),t.style.pointerEvents=e?"":"none"}function y(){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 s=e._maxSteps;e._maxSteps=function(){let n=s.call(this),r=this.slides?.[this.current],o=r?m(r):0;return Math.max(n,o)};let a=e._applyStep;e._applyStep=function(){a.call(this);let n=this.slides?.[this.current];n&&f(n).forEach(({el:r,step:o,hide:c})=>{h(r,c);let u=this.step>=o;d(r,c?!u:u)})},document.querySelectorAll("deck-root").forEach(n=>{n._applyStep?.()})}export{y as installClickStages};
package/dist/deck-code.js CHANGED
@@ -1,2 +1,2 @@
1
- var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(d,n,e,s)=>{for(var r=s>1?void 0:s?h(n,e):n,a=d.length-1,i;a>=0;a--)(i=d[a])&&(r=(s?i(n,e,r):i(r))||r);return s&&r&&m(n,e,r),r};import{LitElement as u,html as v,css as f}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as y,property as g,state as k}from"https://cdn.jsdelivr.net/npm/lit@3/decorators.js/+esm";function _(d,n){let e=d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),s=[],r=(t,c)=>{let p="P"+s.length+"E";return s.push('<span class="'+t+'">'+c+"</span>"),p};return n==="html"||n==="xml"||n==="svg"?(e=e.replace(/(&lt;!--[\s\S]*?--&gt;)/g,t=>r("cmt",t)),e=e.replace(/(&lt;!doctype[^&]*&gt;)/gi,t=>r("cmt",t)),e=e.replace(/("[^"]*"|'[^']*')/g,t=>r("str",t)),e=e.replace(/(&lt;\/?)([a-zA-Z][a-zA-Z0-9:-]*)/g,(t,c,p)=>c+r("kw",p)),e=e.replace(/\b([a-zA-Z][a-zA-Z0-9-]*)(?==)/g,t=>r("prop",t))):n==="css"||n==="scss"||n==="less"?(e=e.replace(/(\/\*[\s\S]*?\*\/)/g,t=>r("cmt",t)),e=e.replace(/("[^"]*"|'[^']*')/g,t=>r("str",t)),e=e.replace(/([a-zA-Z-]+)(?=\s*:)/g,t=>r("prop",t)),e=e.replace(/(#[0-9a-fA-F]{3,8})\b/g,t=>r("num",t)),e=e.replace(/\b(\d+(?:\.\d+)?)(px|rem|em|%|vh|vw|vmin|vmax|s|ms|deg)?/g,(t,c,p)=>r("num",c+(p??"")))):(e=e.replace(/(\/\/[^\n]*)/g,t=>r("cmt",t)),e=e.replace(/(['"`])((?:\\.|(?!\1)[^\\])*)\1/g,t=>r("str",t)),e=e.replace(/\b(const|let|var|function|return|if|else|for|while|class|extends|new|export|import|from|as|await|async|of|in|typeof|instanceof|true|false|null|undefined)\b/g,t=>r("kw",t)),e=e.replace(/\b(\d+(?:\.\d+)?)\b/g,t=>r("num",t))),e=e.replace(/P(\d+)E/g,(t,c)=>s[+c]??""),e}var o=class extends u{constructor(){super(...arguments);this.lang="";this.hero=!1;this.nested=!1;this._html="";this._groups=null}connectedCallback(){super.connectedCallback(),this._highlight();try{this._groups=JSON.parse(this.getAttribute("step-groups")??"null")}catch{this._groups=null}}_highlight(){let s=(this.textContent??"").split(`
2
- `);for(;s.length&&!s[0].trim();)s.shift();for(;s.length&&!s[s.length-1].trim();)s.pop();let r=s.filter(i=>i.trim().length>0).reduce((i,t)=>Math.min(i,t.match(/^ */)?.[0].length??0),1/0),a=r===1/0?s:s.map(i=>i.slice(r));this._html=a.map((i,t)=>'<span class="line" data-line="'+(t+1)+'">'+_(i||" ",this.lang)+"</span>").join("")}applyStep(e){if(!this._groups)return;let s=this.shadowRoot?.querySelectorAll(".line");if(s)if(e===0)s.forEach(r=>r.classList.remove("dim","lit"));else{let r=this._groups[Math.min(e-1,this._groups.length-1)]??[];s.forEach(a=>{let i=parseInt(a.dataset.line??"0",10);a.classList.toggle("lit",r.includes(i)),a.classList.toggle("dim",!r.includes(i))})}}render(){return v`<pre><code .innerHTML="${this._html}"></code></pre>`}};o.styles=f`:host{display:block;background:var(--deck-code-bg,var(--rik-code__bg));border:1px solid var(--deck-code-border,var(--rik-code__border));border-radius:var(--deck-code-radius,var(--rik-radius-md));padding:var(--deck-code-padding-y,var(--rik-space-3)) var(--deck-code-padding-x,var(--rik-space-4));font-family:var(--rik-font-mono);font-size:var(--rik-font-size-mono);line-height:1.7;color:var(--deck-code-text,var(--rik-code__text));box-shadow:var(--rik-elevation-2);overflow:auto;white-space:pre}:host([hero]){display:flex;align-items:safe center;padding:var(--rik-space-4) var(--rik-space-5)}:host([nested]){box-shadow:none;border-radius:var(--rik-radius-sm);padding:var(--rik-space-2) var(--rik-space-3)}pre{margin:0;font:inherit;color:inherit}code{display:block;width:100%;font:inherit;color:inherit}.line{transition:opacity 0.25s ease;display:block}.line.dim{opacity:0.25}.line.lit{opacity:1}.kw{color:var(--deck-code-syntax-kw,var(--rik-code__syntax-keyword))}.fn{color:var(--deck-code-syntax-fn,var(--rik-code__syntax-function))}.str{color:var(--deck-code-syntax-str,var(--rik-code__syntax-string))}.num{color:var(--deck-code-syntax-num,var(--rik-code__syntax-number))}.cmt{color:var(--deck-code-syntax-cmt,var(--rik-code__syntax-comment));font-style:italic}.ty{color:var(--deck-code-syntax-ty,var(--rik-code__syntax-type))}.prop{color:var(--deck-code-syntax-prop,var(--rik-code__syntax-property))}`,l([g({type:String})],o.prototype,"lang",2),l([g({type:Boolean,reflect:!0})],o.prototype,"hero",2),l([g({type:Boolean,reflect:!0})],o.prototype,"nested",2),l([g({type:String,attribute:"step-groups"})],o.prototype,"stepGroups",2),l([k()],o.prototype,"_html",2),o=l([y("deck-code")],o);export{o as DeckCode};
1
+ var m=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var l=(d,n,e,s)=>{for(var r=s>1?void 0:s?h(n,e):n,a=d.length-1,i;a>=0;a--)(i=d[a])&&(r=(s?i(n,e,r):i(r))||r);return s&&r&&m(n,e,r),r};import{LitElement as v,html as u,css as y}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";import{customElement as f,property as g,state as k}from"https://cdn.jsdelivr.net/npm/lit@3/decorators.js/+esm";function _(d,n){let e=d.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),s=[],r=(t,c)=>{let p="P"+s.length+"E";return s.push('<span class="'+t+'">'+c+"</span>"),p};return n==="html"||n==="xml"||n==="svg"?(e=e.replace(/(&lt;!--[\s\S]*?--&gt;)/g,t=>r("cmt",t)),e=e.replace(/(&lt;!doctype[^&]*&gt;)/gi,t=>r("cmt",t)),e=e.replace(/("[^"]*"|'[^']*')/g,t=>r("str",t)),e=e.replace(/(&lt;\/?)([a-zA-Z][a-zA-Z0-9:-]*)/g,(t,c,p)=>c+r("kw",p)),e=e.replace(/\b([a-zA-Z][a-zA-Z0-9-]*)(?==)/g,t=>r("prop",t))):n==="css"||n==="scss"||n==="less"?(e=e.replace(/(\/\*[\s\S]*?\*\/)/g,t=>r("cmt",t)),e=e.replace(/("[^"]*"|'[^']*')/g,t=>r("str",t)),e=e.replace(/([a-zA-Z-]+)(?=\s*:)/g,t=>r("prop",t)),e=e.replace(/(#[0-9a-fA-F]{3,8})\b/g,t=>r("num",t)),e=e.replace(/\b(\d+(?:\.\d+)?)(px|rem|em|%|vh|vw|vmin|vmax|s|ms|deg)?/g,(t,c,p)=>r("num",c+(p??"")))):(e=e.replace(/(\/\/[^\n]*)/g,t=>r("cmt",t)),e=e.replace(/(['"`])((?:\\.|(?!\1)[^\\])*)\1/g,t=>r("str",t)),e=e.replace(/\b(const|let|var|function|return|if|else|for|while|class|extends|new|export|import|from|as|await|async|of|in|typeof|instanceof|true|false|null|undefined)\b/g,t=>r("kw",t)),e=e.replace(/\b(\d+(?:\.\d+)?)\b/g,t=>r("num",t))),e=e.replace(/P(\d+)E/g,(t,c)=>s[+c]??""),e}var o=class extends v{constructor(){super(...arguments);this.lang="";this.hero=!1;this.nested=!1;this._html="";this._groups=null}connectedCallback(){super.connectedCallback(),this._highlight();try{this._groups=JSON.parse(this.getAttribute("step-groups")??"null")}catch{this._groups=null}}_highlight(){let s=(this.textContent??"").split(`
2
+ `);for(;s.length&&!s[0].trim();)s.shift();for(;s.length&&!s[s.length-1].trim();)s.pop();let r=s.filter(i=>i.trim().length>0).reduce((i,t)=>Math.min(i,t.match(/^ */)?.[0].length??0),1/0),a=r===1/0?s:s.map(i=>i.slice(r));this._html=a.map((i,t)=>'<span class="line" data-line="'+(t+1)+'">'+_(i||" ",this.lang)+"</span>").join("")}applyStep(e){if(!this._groups)return;let s=this.shadowRoot?.querySelectorAll(".line");if(s)if(e===0)s.forEach(r=>r.classList.remove("dim","lit"));else{let r=this._groups[Math.min(e-1,this._groups.length-1)]??[];s.forEach(a=>{let i=parseInt(a.dataset.line??"0",10);a.classList.toggle("lit",r.includes(i)),a.classList.toggle("dim",!r.includes(i))})}}render(){return u`<pre><code .innerHTML="${this._html}"></code></pre>`}};o.styles=y`:host{display:block;background:var(--deck-code-bg,var(--rik-code__bg));border:1px solid var(--deck-code-border,var(--rik-code__border));border-radius:var(--deck-code-radius,var(--rik-radius-md));padding:var(--deck-code-padding-y,var(--rik-space-3)) var(--deck-code-padding-x,var(--rik-space-4));font-family:var(--rik-font-mono);font-size:var(--rik-font-size-mono);line-height:1.7;color:var(--deck-code-text,var(--rik-code__text));box-shadow:var(--rik-elevation-2);overflow:auto;white-space:pre}:host([hero]){display:flex;align-items:safe center;padding:var(--deck-code-padding-y,var(--rik-space-4)) var(--deck-code-padding-x,var(--rik-space-5))}:host([nested]){box-shadow:none;border-radius:var(--rik-radius-sm);padding:var(--deck-code-padding-y,var(--rik-space-2)) var(--deck-code-padding-x,var(--rik-space-3))}pre{margin:0;font:inherit;color:inherit}code{display:block;width:100%;font:inherit;color:inherit}.line{transition:opacity 0.25s ease;display:block}.line.dim{opacity:0.25}.line.lit{opacity:1}.kw{color:var(--deck-code-syntax-kw,var(--rik-code__syntax-keyword))}.fn{color:var(--deck-code-syntax-fn,var(--rik-code__syntax-function))}.str{color:var(--deck-code-syntax-str,var(--rik-code__syntax-string))}.num{color:var(--deck-code-syntax-num,var(--rik-code__syntax-number))}.cmt{color:var(--deck-code-syntax-cmt,var(--rik-code__syntax-comment));font-style:italic}.ty{color:var(--deck-code-syntax-ty,var(--rik-code__syntax-type))}.prop{color:var(--deck-code-syntax-prop,var(--rik-code__syntax-property))}`,l([g({type:String})],o.prototype,"lang",2),l([g({type:Boolean,reflect:!0})],o.prototype,"hero",2),l([g({type:Boolean,reflect:!0})],o.prototype,"nested",2),l([g({type:String,attribute:"step-groups"})],o.prototype,"stepGroups",2),l([k()],o.prototype,"_html",2),o=l([f("deck-code")],o);export{o as DeckCode};
@@ -1,4 +1,4 @@
1
- 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>
1
+ 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>
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="utf-8">
@@ -10,11 +10,14 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
10
10
  display: grid;
11
11
  grid-template-columns: 2fr 1fr;
12
12
  grid-template-rows: 1fr auto;
13
- gap: 16px;
14
- padding: 16px;
13
+ gap: clamp(8px, 1.5vw, 16px);
14
+ padding: clamp(8px, 1.5vw, 16px);
15
15
  height: 100vh;
16
16
  box-sizing: border-box;
17
17
  }
18
+ @media (max-width: 1000px) {
19
+ .grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr auto auto; }
20
+ }
18
21
  .panel {
19
22
  background: #1e2840;
20
23
  border-radius: 12px;
@@ -31,8 +34,8 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
31
34
  color: rgba(232,228,240,0.45);
32
35
  background: #161c2e;
33
36
  }
34
- .panel .body { flex: 1; min-height: 0; padding: 16px; overflow: hidden; }
35
- .panel iframe { width: 100%; height: 100%; border: 0; background: white; border-radius: 8px; }
37
+ .panel .body { flex: 1; min-height: 0; padding: 16px; overflow: hidden; border-radius: 8px; }
38
+ .panel iframe { width: 100%; height: 100%; border: 0; background: #0f1422; display: block; }
36
39
  #notes { font-size: 17px; line-height: 1.6; white-space: pre-wrap; padding: 20px; overflow: auto; color: #e8e4f0; }
37
40
  #notes:empty::before { content: 'No notes for this slide.'; color: rgba(232,228,240,0.4); font-style: italic; }
38
41
  #footer {
@@ -110,15 +113,17 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
110
113
  resetBtn.onclick = () => { startedAt = Date.now(); elapsed = 0; running = true; toggleBtn.textContent = 'Pause'; };
111
114
 
112
115
  function wrapFrame(slideHtml) {
113
- const themeHref = ${JSON.stringify(e.themeHref)};
114
- const themeLink = themeHref ? '<link rel="stylesheet" href="' + themeHref + '">' : '';
115
- // Use the consumer's rikiki bundle URL \xB7 we cannot guess it perfectly, so
116
- // assume it sits next to the theme css.
117
- const bundleHref = themeHref.replace(/themes\\/[^/]+\\.css.*$/, 'dist/index.js');
116
+ const themeHref = ${JSON.stringify(e.themeHref)};
117
+ const bundleHref = ${JSON.stringify(e.bundleHref)};
118
+ const themeLink = themeHref ? '<link rel="stylesheet" href="' + themeHref + '">' : '';
119
+ // Mark the cloned slide [active] so its real component CSS applies
120
+ // (:host([active]){display:flex}) instead of forcing display via !important.
121
+ const activeSlide = slideHtml.replace(/^(\\s*<deck-[a-z-]+)/i, '$1 active');
118
122
  return '<!doctype html><html><head><meta charset="UTF-8">' + themeLink +
119
123
  '<script type="module" src="' + bundleHref + '"><' + '/script>' +
120
- '<style>html,body{margin:0;padding:0;height:100%;overflow:hidden}body{display:flex}deck-root{flex:1}deck-root>*{display:flex!important}</style>' +
121
- '</head><body><deck-root>' + slideHtml + '</deck-root></body></html>';
124
+ '<style>html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0f1422}' +
125
+ 'deck-root{position:absolute;inset:0}</style>' +
126
+ '</head><body><deck-root>' + activeSlide + '</deck-root></body></html>';
122
127
  }
123
128
 
124
129
  channel.onmessage = (e) => {
@@ -145,4 +150,4 @@ ${e.themeHref?`<link rel="stylesheet" href="${e.themeHref}">`:""}
145
150
  channel.postMessage({ type: 'hello' });
146
151
  <\/script>
147
152
  </body>
148
- </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};
153
+ </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 CHANGED
@@ -1,4 +1,4 @@
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 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>`:""}
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>`:""}
2
2
  <span>·</span>
3
3
  <kbd>O</kbd>
4
4
  <span>·</span>
@@ -7,5 +7,5 @@ var f=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var o=(p,h,t,e
7
7
  <kbd>?</kbd>
8
8
  </div>
9
9
  <slot></slot>
10
- ${this.blank?u`<div id="blank" data-tone="${this.blank}" @click=${()=>{this.blank=null}}></div>`:""}
11
- `}};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};
10
+ ${this.blank?c`<div id="blank" data-tone="${this.blank}" @click=${()=>{this.blank=null}}></div>`:""}
11
+ `}};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([u()],a.prototype,"current",2),o([u()],a.prototype,"step",2),o([u()],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};
package/dist/index.d.ts CHANGED
@@ -1,25 +1,29 @@
1
- import './deck-root.js';
2
- import './deck-cover.js';
3
- import './deck-section.js';
4
- import './deck-feature.js';
5
- import './deck-split.js';
6
- import './deck-feature-cards.js';
7
- import './deck-photo.js';
8
- import './deck-takeaway.js';
9
- import './deck-md.js';
10
- import './deck-code.js';
11
- import './deck-callout.js';
12
- import './deck-card.js';
13
- import './deck-mermaid.js';
14
- import './deck-step-list.js';
15
- import './deck-metric.js';
16
- import './deck-tier-list.js';
17
- import './deck-badge.js';
18
- import './deck-kicker.js';
19
- import './deck-stack.js';
20
- import './deck-grid.js';
21
- import './deck-punch.js';
22
- import './deck-stat.js';
23
- import './deck-shortcut.js';
24
- import './deck-notes.js';
1
+ import './runtime/deck-root.js';
2
+ import './runtime/deck-transition.js';
3
+ import './runtime/deck-help.js';
4
+ import './runtime/deck-overview.js';
5
+ import './runtime/deck-presenter.js';
6
+ import './runtime/deck-notes.js';
7
+ import './layouts/deck-cover.js';
8
+ import './layouts/deck-section.js';
9
+ import './layouts/deck-feature.js';
10
+ import './layouts/deck-split.js';
11
+ import './layouts/deck-feature-cards.js';
12
+ import './layouts/deck-photo.js';
13
+ import './layouts/deck-takeaway.js';
14
+ import './molecules/deck-callout.js';
15
+ import './molecules/deck-card.js';
16
+ import './molecules/deck-md.js';
17
+ import './molecules/deck-mermaid.js';
18
+ import './molecules/deck-stat.js';
19
+ import './molecules/deck-metric.js';
20
+ import './molecules/deck-tier-list.js';
21
+ import './molecules/deck-step-list.js';
22
+ import './molecules/deck-shortcut.js';
23
+ import './molecules/deck-stack.js';
24
+ import './molecules/deck-grid.js';
25
+ import './atoms/deck-badge.js';
26
+ import './atoms/deck-kicker.js';
27
+ import './atoms/deck-punch.js';
28
+ import './atoms/deck-code.js';
25
29
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,iBAAiB,CAAC;AACzB,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,iBAAiB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,wBAAwB,CAAC;AAChC,OAAO,8BAA8B,CAAC;AACtC,OAAO,wBAAwB,CAAC;AAChC,OAAO,4BAA4B,CAAC;AACpC,OAAO,6BAA6B,CAAC;AACrC,OAAO,yBAAyB,CAAC;AAGjC,OAAO,yBAAyB,CAAC;AACjC,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AACjC,OAAO,iCAAiC,CAAC;AACzC,OAAO,yBAAyB,CAAC;AACjC,OAAO,4BAA4B,CAAC;AAGpC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,+BAA+B,CAAC;AACvC,OAAO,+BAA+B,CAAC;AACvC,OAAO,8BAA8B,CAAC;AACtC,OAAO,2BAA2B,CAAC;AACnC,OAAO,0BAA0B,CAAC;AAGlC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC"}