rikiki-deck 0.6.0 → 0.7.2

package/dist/deck-outline.d.ts

@@ -0,0 +1,50 @@
+/** A run of consecutive slides under one section heading. */
+export interface Chapter {
+    /** Index of the chapter's first slide in the flat slide list. */
+    readonly start: number;
+    /** How many slides the chapter holds · always >= 1. */
+    readonly length: number;
+}
+/** Slide count plus chapter structure · everything navigation needs to know
+ *  about the deck's shape, and nothing about its content. */
+export interface DeckOutline {
+    readonly slideCount: number;
+    readonly chapters: readonly Chapter[];
+}
+/** Where the deck is · a slide and a step within it. */
+export interface DeckPosition {
+    readonly slide: number;
+    readonly step: number;
+}
+/** A coordinate in the 2D (chapter × slide) model. */
+export interface DeckCoords {
+    readonly chapter: number;
+    readonly index: number;
+}
+/** How many steps a slide has · injected, because the count comes from the DOM
+ *  and from plugin hooks, which the domain must not know about. */
+export type StepsOf = (slide: number) => number;
+export declare const EMPTY_OUTLINE: DeckOutline;
+/** Build an outline from the slides' tag names.
+ *
+ *  A `deck-section` opens a new chapter; anything else joins the current one.
+ *  The first slide always opens one, whatever its tag, so every slide belongs
+ *  to exactly one chapter. */
+export declare function outlineOf(tagNames: readonly string[]): DeckOutline;
+/** Is 2D navigation meaningful for this outline?
+ *
+ *  It is opt-in (`nav="2d"`) AND needs a structure that makes sense: more than
+ *  one chapter, at least one of them holding more than one slide. Without the
+ *  opt-in the arrows stay linear, so a sectioned deck does not surprise its
+ *  author by remapping left/right to chapter jumps. */
+export declare function supportsTwoD(outline: DeckOutline, optedIn: boolean): boolean;
+/** Flat slide index → chapter coordinate. Falls back to the origin for an index
+ *  that belongs to no chapter (an empty deck). */
+export declare function coordsOf(outline: DeckOutline, slide: number): DeckCoords;
+/** Chapter coordinate → flat slide index.
+ *
+ *  An out-of-range chapter clamps to the nearest one rather than snapping back
+ *  to slide 0: a deep link to a coordinate that no longer exists (a chapter
+ *  removed while iterating) should land on the closest valid slide. */
+export declare function slideAt(outline: DeckOutline, coords: DeckCoords): number | null;
+export declare function clamp(value: number, min: number, max: number): number;

package/dist/deck-outline.js

@@ -0,0 +1 @@
+var s={slideCount:0,chapters:[]};function l(t){let e=[];return t.forEach((r,n)=>{if(r.toLowerCase()==="deck-section"||e.length===0)e.push({start:n,length:1});else{let c=e[e.length-1];e[e.length-1]={start:c.start,length:c.length+1}}}),{slideCount:t.length,chapters:e}}function p(t,e){return e&&t.chapters.length>1&&t.chapters.some(r=>r.length>1)}function h(t,e){for(let r=0;r<t.chapters.length;r++){let n=t.chapters[r],o=e-n.start;if(o>=0&&o<n.length)return{chapter:r,index:o}}return{chapter:0,index:0}}function u(t,e){if(t.chapters.length===0)return null;let r=a(e.chapter,0,t.chapters.length-1),n=t.chapters[r],o=a(e.index,0,n.length-1);return n.start+o}function a(t,e,r){return Number.isNaN(t)?e:Math.max(e,Math.min(r,t))}export{s as EMPTY_OUTLINE,a as clamp,h as coordsOf,l as outlineOf,u as slideAt,p as supportsTwoD};

package/dist/deck-overview.js

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

package/dist/deck-persona.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class DeckPersona extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name?: string;
+    /** Job title · NOT the `role` attribute, which belongs to ARIA. */
+    personRole?: string;
+    org?: string;
+    /** One line of situation · what makes the story concrete. */
+    context?: string;
+    /** A portrait · without one the initials stand in, so a deck with no photos
+     *  still looks deliberate. */
+    src?: string;
+    onDark: boolean;
+    /** Reduce portrait, type and spacing for a supporting persona. */
+    compact: boolean;
+    /** Place name, role and context in a wrapping horizontal line. */
+    inline: boolean;
+    private get _initials();
+    /** The job and the company, written as a phrase.
+     *
+     *  It used to be joined with a middle dot, which is one of the surest marks
+     *  of a generated page and reads as a machine string rather than as a person
+     *  being introduced. */
+    private get _line();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'deck-persona': DeckPersona;
+    }
+}

package/dist/deck-persona.js

@@ -0,0 +1,6 @@
+var m=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var e=(p,n,t,o)=>{for(var i=o>1?void 0:o?v(n,t):n,c=p.length-1,l;c>=0;c--)(l=p[c])&&(i=(o?l(n,t,i):l(i))||i);return o&&i&&m(n,t,i),i};import{LitElement as k,css as h,html as s}from"./vendor/lit.js";import{customElement as f,property as a}from"./vendor/lit.js";import{css as g}from"./vendor/lit.js";var d=g`.mass{background:var(--rik-extras-mass,var(--rik-surface-inverse));color:var(--rik-extras-mass-text,var(--rik-text-inverse));padding:var(--rik-space-3) var(--rik-space-4);border-radius:var(--rik-radius-sm)}.statement{font-family:var(--rik-font-display,var(--rik-font-sans));font-size:var(--rik-extras-statement,var(--rik-font-size-mega));font-weight:800;line-height:0.95;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.reading{font-family:var(--rik-font-sans);font-size:var(--rik-extras-reading,var(--rik-font-size-body));font-weight:400;line-height:1.35;max-width:62ch}.quiet{color:var(--rik-extras-quiet,var(--rik-text-default--muted))}.edge{border:0;border-top:1px solid var(--rik-extras-edge,var(--rik-border-default));margin:0}@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}`;var r=class extends k{constructor(){super(...arguments);this.onDark=!1;this.compact=!1;this.inline=!1}get _initials(){return(this.name??"").split(/\s+/).filter(Boolean).slice(0,2).map(t=>t[0]?.toUpperCase()??"").join("")}get _line(){return this.personRole&&this.org?`${this.personRole} at ${this.org}`:this.personRole??this.org??""}render(){let t=this.src?s`<span class="avatar" part="avatar" aria-hidden="true"><img src=${this.src} alt="" /></span>`:this._initials?s`<span class="avatar" part="avatar" aria-hidden="true"><span class="statement">${this._initials}</span></span>`:"";return s`${t} <span class="who"> ${this.name?s`<span class="name statement" part="name">${this.name}</span>`:""}
+        ${this._line?s`<span class="role reading" part="role">${this._line}</span>`:""}
+        ${this.context?s`<span class="context reading quiet" part="context">${this.context}</span>`:""}
+        <slot></slot>
+      </span>
+    `}};r.styles=[d,h`:host{display:flex;align-items:start;gap:var(--deck-persona-gap,var(--rik-space-5))}.avatar{flex:none;box-sizing:border-box;width:var(--deck-persona-avatar-size,clamp(4.5rem,7cqw,8rem));height:var(--deck-persona-avatar-size,clamp(4.5rem,7cqw,8rem));display:grid;place-items:center;overflow:hidden;background:var(--deck-persona-avatar-bg,var(--rik-surface-inverse));color:var(--deck-persona-initials-color,var(--rik-text-inverse));border-radius:var(--rik-radius-sm)}.avatar .statement{font-size:var( --deck-persona-initials-size,calc(var(--deck-persona-avatar-size,clamp(4.5rem,7cqw,8rem)) * 0.42) );line-height:1}.avatar img{width:100%;height:100%;object-fit:cover;display:block}.who{min-width:0;display:flex;flex-direction:column;gap:var(--rik-space-1);padding-top:var(--deck-persona-name-lift,0.12em)}.name{font-size:var(--deck-persona-name-size,clamp(1.75rem,2.6cqw,3rem));color:var(--deck-persona-name-color,var(--rik-text-default))}.role{color:var(--deck-persona-role-color,var(--rik-text-default--muted))}.context{margin-top:var(--rik-space-3);color:var(--deck-persona-context-color,var(--rik-text-default--muted))}:host([on-dark]) .avatar{background:var(--deck-persona-avatar-bg,var(--rik-surface-page));color:var(--deck-persona-initials-color,var(--rik-text-default))}:host([on-dark]) .name{color:var(--rik-text-inverse)}:host([on-dark]) .role,:host([on-dark]) .context{color:var(--rik-text-inverse--muted)}:host([compact]),:host([inline]){--deck-persona-avatar-size:var(--deck-persona-compact-avatar-size,clamp(3rem,4cqw,4.5rem));--deck-persona-name-size:var(--deck-persona-compact-name-size,clamp(1.35rem,2cqw,2.1rem));--deck-persona-gap:var(--rik-space-3)}:host([compact]) .context,:host([inline]) .context{margin-top:var(--rik-space-1);font-size:var(--rik-font-size-sm)}:host([inline]){align-items:center}:host([inline]) .who{flex:1 1 auto;flex-direction:row;align-items:baseline;flex-wrap:wrap;column-gap:var(--rik-space-2);row-gap:var(--rik-space-1);padding-top:0}:host([inline]) .context{margin-top:0}@media print{.avatar{-webkit-print-color-adjust:exact;print-color-adjust:exact}}`],e([a({type:String})],r.prototype,"name",2),e([a({type:String,attribute:"person-role"})],r.prototype,"personRole",2),e([a({type:String})],r.prototype,"org",2),e([a({type:String})],r.prototype,"context",2),e([a({type:String,reflect:!0})],r.prototype,"src",2),e([a({type:Boolean,reflect:!0,attribute:"on-dark"})],r.prototype,"onDark",2),e([a({type:Boolean,reflect:!0})],r.prototype,"compact",2),e([a({type:Boolean,reflect:!0})],r.prototype,"inline",2),r=e([f("deck-persona")],r);export{r as DeckPersona};

package/dist/deck-photo.js

@@ -1 +1 @@
-var g=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(s,e,o,n)=>{for(var r=n>1?void 0:n?v(e,o):e,l=s.length-1,d;l>=0;l--)(d=s[l])&&(r=(n?d(e,o,r):d(r))||r);return n&&r&&g(e,o,r),r};import{LitElement as f,html as x,css as k}from"./vendor/lit.js";import{customElement as m,property as a}from"./vendor/lit.js";import{css as c}from"./vendor/lit.js";var p=c`:host{display:none;position:absolute;inset:0;padding:var(--rik-slide-padding-y) var(--rik-slide-padding-x);flex-direction:column;overflow:hidden;background:var(--rik-surface-page);font-family:var(--rik-font-sans);color:var(--rik-text-default)}:host([active]){display:flex}`,u=c`h1{font-size:var(--rik-font-size-h1);font-weight:700;color:var(--rik-text-default);letter-spacing:-0.022em;line-height:1.15;margin-bottom:var(--rik-space-4);padding-bottom:var(--rik-space-2);border-bottom:3px solid var(--rik-accent);display:inline-block;align-self:flex-start;flex:0 0 auto}h1 .accent{color:var(--rik-accent)}::slotted(p),p{font-size:var(--rik-font-size-body);line-height:1.65;color:var(--rik-text-default--muted);margin:0}::slotted(strong),strong{color:var(--rik-text-default);font-weight:700}::slotted(code),code{font-family:var(--rik-font-mono);font-size:var(--rik-font-size-mono-sm);background:rgba(0,0,0,0.06);padding:2px 6px;border-radius:var(--rik-radius-sm);color:var(--rik-text-default)}`,y=c`.lbl{display:inline-block;padding:var(--deck-eyebrow-padding-y,4px) var(--deck-eyebrow-padding-x,12px);background:var(--deck-eyebrow-bg,var(--rik-accent));color:var(--deck-eyebrow-color,var(--rik-accent__on,var(--rik-surface-inverse)));border-radius:var(--deck-eyebrow-radius,var(--rik-radius-pill));font-size:var(--rik-font-size-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--rik-space-1);align-self:flex-start}.lead{font-size:var(--rik-font-size-lead);color:var(--rik-text-default--faint);line-height:1.5;margin-bottom:var(--rik-space-4);max-width:75ch;flex:0 0 auto}.kicker{font-size:var(--rik-font-size-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--rik-text-default--faint);margin-bottom:var(--rik-space-3);display:block}.kicker.on-dark{color:rgba(255,255,255,0.35)}.caption{font-size:var(--rik-font-size-sm);color:var(--rik-text-default--faint);line-height:1.55}.caption.on-dark{color:rgba(255,255,255,0.5)}.col-label{font-size:var(--rik-font-size-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--rik-text-default--faint);margin-bottom:var(--rik-space-2)}`;var t=class extends f{updated(){this.position&&this.style.setProperty("--_pos",this.position),typeof this.darken=="number"&&this.style.setProperty("--_dim",String(this.darken));let e=this.align==="top"?"flex-start":this.align==="bottom"?"flex-end":"center";if(this.style.setProperty("--_align",e),this.textAlign){this.style.setProperty("--_text-align",this.textAlign);let o=this.textAlign==="center"?"center":this.textAlign==="right"?"flex-end":"flex-start";this.style.setProperty("--_text-align-items",o)}}render(){let e=this.src?`background-image: url("${this.src.replace(/"/g,"%22")}")`:"";return x`<div class="bg" part="bg" style=${e}></div> <div class="overlay" part="overlay"></div> <div class="content" part="content"><slot></slot></div>`}};t.styles=[p,k`:host{padding:0;color:var(--deck-photo-text-color,var(--rik-text-inverse));overflow:hidden}.bg{position:absolute;inset:0;background-size:cover;background-position:var(--_pos,center);background-repeat:no-repeat}.overlay{position:absolute;inset:0;background:var(--deck-photo-overlay-color,rgba(0,0,0,var(--_dim,0.35)))}.content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--rik-space-3);padding:var(--deck-photo-padding-y,var(--rik-slide-padding-y)) var(--deck-photo-padding-x,var(--rik-slide-padding-x));width:100%;height:100%;max-width:100%;box-sizing:border-box;justify-content:var(--_align,center);text-align:var(--_text-align,left);align-items:var(--_text-align-items,flex-start)}.content > *{max-width:var(--deck-photo-content-max-width,36ch)}::slotted(h1){font-family:var(--rik-font-display,var(--rik-font-sans));font-size:clamp(2.5rem,6cqw,5.5rem);font-weight:900;letter-spacing:-0.035em;line-height:1.02;color:var(--deck-photo-text-color,var(--rik-text-inverse));margin:0;text-shadow:0 2px 16px rgba(0,0,0,0.35)}::slotted(h2){font-family:var(--rik-font-display,var(--rik-font-sans));font-size:clamp(1.6rem,3cqw,2.6rem);font-weight:800;letter-spacing:-0.025em;line-height:1.1;color:var(--deck-photo-text-color,var(--rik-text-inverse));margin:0;text-shadow:0 2px 12px rgba(0,0,0,0.35)}::slotted(p),::slotted(.sub){font-size:var(--rik-font-size-lead);color:var(--deck-photo-text-muted,var(--rik-text-inverse--muted));line-height:1.5;margin:0;text-shadow:0 1px 8px rgba(0,0,0,0.35)}::slotted(.kicker){font:700 var(--rik-font-size-xs)/1 var(--rik-font-mono);letter-spacing:0.18em;text-transform:uppercase;color:var(--deck-photo-text-muted,var(--rik-text-inverse--muted));margin:0}`],i([a({type:String})],t.prototype,"src",2),i([a({type:String})],t.prototype,"position",2),i([a({type:Number})],t.prototype,"darken",2),i([a({type:String})],t.prototype,"align",2),i([a({type:String,attribute:"text-align"})],t.prototype,"textAlign",2),t=i([m("deck-photo")],t);export{t as DeckPhoto};
+var g=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var i=(s,e,o,n)=>{for(var r=n>1?void 0:n?f(e,o):e,l=s.length-1,d;l>=0;l--)(d=s[l])&&(r=(n?d(e,o,r):d(r))||r);return n&&r&&g(e,o,r),r};import{LitElement as v,html as k,css as x}from"./vendor/lit.js";import{customElement as h,property as a}from"./vendor/lit.js";import{css as c}from"./vendor/lit.js";var p=c`:host{display:none;position:absolute;inset:0;padding:var(--rik-slide-padding-y) var(--rik-slide-padding-x);flex-direction:column;overflow:hidden;background:var(--rik-surface-page);font-family:var(--rik-font-sans);color:var(--rik-text-default)}:host([active]){display:flex}.body,.col{justify-content:var(--_spread,var(--rik-slide-spread,center))}:host([fill]) .body > ::slotted(*),:host([fill]) .col > ::slotted(*){flex:1 1 0;min-height:0}:host([fill]) .body,:host([fill]) .col{justify-content:stretch}@media print{:host{display:flex;position:relative;inset:auto;width:calc(var(--deck-canvas-w,1920) * 1px);height:calc(var(--deck-canvas-h,1080) * 1px);break-inside:avoid;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}:host(:last-child){break-after:auto}}`,u=c`h1{font-size:var(--rik-font-size-h1);font-weight:700;color:var(--rik-text-default);letter-spacing:-0.022em;line-height:1.15;margin-bottom:var(--rik-space-4);padding-bottom:var(--rik-space-2);border-bottom:3px solid var(--rik-accent);display:inline-block;align-self:flex-start;flex:0 0 auto}h1 .accent{color:var(--rik-accent)}::slotted(p),p{font-size:var(--rik-font-size-body);line-height:1.65;color:var(--rik-text-default--muted);margin:0}::slotted(strong),strong{color:var(--rik-text-default);font-weight:700}::slotted(code),code{font-family:var(--rik-font-mono);font-size:var(--rik-font-size-mono-sm);background:rgba(0,0,0,0.06);padding:2px 6px;border-radius:var(--rik-radius-sm);color:var(--rik-text-default)}`,y=c`.lbl{display:inline-block;padding:var(--deck-eyebrow-padding-y,0) var(--deck-eyebrow-padding-x,0);background:var(--deck-eyebrow-bg,transparent);color:var(--deck-eyebrow-color,var(--rik-accent__text));border-radius:var(--deck-eyebrow-radius,0);font-size:var(--rik-font-size-body);font-weight:600;margin-bottom:var(--rik-space-1);align-self:flex-start}.lead{font-size:var(--rik-font-size-lead);color:var(--rik-text-default--faint);line-height:1.5;margin-bottom:var(--rik-space-4);max-width:75ch;flex:0 0 auto}.kicker{font-size:var(--rik-font-size-xs);font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--rik-text-default--faint);margin-bottom:var(--rik-space-3);display:block}.kicker.on-dark{color:rgba(255,255,255,0.35)}.caption{font-size:var(--rik-font-size-sm);color:var(--rik-text-default--faint);line-height:1.55}.caption.on-dark{color:rgba(255,255,255,0.5)}.col-label{font-size:var(--rik-font-size-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--rik-text-default--faint);margin-bottom:var(--rik-space-2)}`;var t=class extends v{updated(){this.position&&this.style.setProperty("--_pos",this.position),typeof this.darken=="number"&&this.style.setProperty("--_dim",String(this.darken));let e=this.align==="top"?"flex-start":this.align==="bottom"?"flex-end":"center";if(this.style.setProperty("--_align",e),this.textAlign){this.style.setProperty("--_text-align",this.textAlign);let o=this.textAlign==="center"?"center":this.textAlign==="right"?"flex-end":"flex-start";this.style.setProperty("--_text-align-items",o)}}render(){let e=this.src?`background-image: url("${this.src.replace(/"/g,"%22")}")`:"";return k`<div class="bg" part="bg" style=${e}></div> <div class="overlay" part="overlay"></div> <div class="content" part="content"><slot></slot></div>`}};t.styles=[p,x`:host{padding:0;color:var(--deck-photo-text-color,var(--rik-text-inverse));overflow:hidden}.bg{position:absolute;inset:0;background-size:cover;background-position:var(--_pos,center);background-repeat:no-repeat}.overlay{position:absolute;inset:0;background:var(--deck-photo-overlay-color,rgba(0,0,0,var(--_dim,0.35)))}.content{position:relative;z-index:1;display:flex;flex-direction:column;gap:var(--rik-space-3);padding:var(--deck-photo-padding-y,var(--rik-slide-padding-y)) var(--deck-photo-padding-x,var(--rik-slide-padding-x));width:100%;height:100%;max-width:100%;box-sizing:border-box;justify-content:var(--_align,center);text-align:var(--_text-align,left);align-items:var(--_text-align-items,flex-start)}.content > *{max-width:var(--deck-photo-content-max-width,36ch)}::slotted(h1){font-family:var(--rik-font-display,var(--rik-font-sans));font-size:clamp(2.5rem,6cqw,5.5rem);font-weight:900;letter-spacing:-0.035em;line-height:1.02;color:var(--deck-photo-text-color,var(--rik-text-inverse));margin:0;text-shadow:0 2px 16px rgba(0,0,0,0.35)}::slotted(h2){font-family:var(--rik-font-display,var(--rik-font-sans));font-size:clamp(1.6rem,3cqw,2.6rem);font-weight:800;letter-spacing:-0.025em;line-height:1.1;color:var(--deck-photo-text-color,var(--rik-text-inverse));margin:0;text-shadow:0 2px 12px rgba(0,0,0,0.35)}::slotted(p),::slotted(.sub){font-size:var(--rik-font-size-lead);color:var(--deck-photo-text-muted,var(--rik-text-inverse--muted));line-height:1.5;margin:0;text-shadow:0 1px 8px rgba(0,0,0,0.35)}::slotted(.kicker){font:700 var(--rik-font-size-xs)/1 var(--rik-font-mono);letter-spacing:0.18em;text-transform:uppercase;color:var(--deck-photo-text-muted,var(--rik-text-inverse--muted));margin:0}`],i([a({type:String})],t.prototype,"src",2),i([a({type:String})],t.prototype,"position",2),i([a({type:Number})],t.prototype,"darken",2),i([a({type:String})],t.prototype,"align",2),i([a({type:String,attribute:"text-align"})],t.prototype,"textAlign",2),t=i([h("deck-photo")],t);export{t as DeckPhoto};

package/dist/deck-point.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export type DeckPointAlign = 'start' | 'center' | 'end' | 'stretch';
+export declare class DeckPoint extends LitElement {
+    static styles: import("lit").CSSResult;
+    span?: string;
+    col?: string;
+    row?: string;
+    align?: DeckPointAlign;
+    tone?: string;
+    /** How many bands this point borrows from its bento · written by deck-bento,
+     *  never by an author. Declared rather than read off the attribute so Lit
+     *  re-runs updated() when the parent sets it; an undeclared attribute would
+     *  change the CSS and leave the point spanning one band instead of all. */
+    banded?: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'deck-point': DeckPoint;
+    }
+}

package/dist/deck-point.js

@@ -0,0 +1 @@
+var p=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var n=(e,r,a,d)=>{for(var o=d>1?void 0:d?u(r,a):r,l=e.length-1,c;l>=0;l--)(c=e[l])&&(o=(d?c(r,a,o):c(o))||o);return d&&o&&p(r,a,o),o};import{LitElement as b,css as f,html as k}from"./vendor/lit.js";import{customElement as m,property as i}from"./vendor/lit.js";function s(e){if(!e)return"auto";let r=e.trim();return/^\d+$/.test(r)?`span ${r}`:r}function g(e){if(!e)return{col:"auto",row:"auto"};let[r,a]=e.toLowerCase().split("x");return{col:s(r),row:s(a)}}var h={start:"start",center:"center",end:"end",stretch:"stretch"},t=class extends b{updated(){let r=g(this.span);this.style.setProperty("--_col",this.col?s(this.col):r.col),this.style.setProperty("--_row",this.banded?`span ${this.banded}`:this.row?s(this.row):r.row),this.align&&this.style.setProperty("--_align",h[this.align]??this.align)}render(){return k`<slot></slot>`}};t.styles=f`:host{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:min-content;row-gap:var(--deck-cell-gap,var(--rik-space-2));justify-items:var(--_align,stretch);grid-column:var(--_col,auto);grid-row:var(--_row,auto);min-width:0;box-sizing:border-box;padding:var(--deck-cell-padding-y,var(--rik-space-3)) var(--deck-cell-padding-x,var(--rik-space-4));background:var(--deck-cell-bg,var(--rik-surface-raised--strong));border:1px solid var(--deck-cell-border,var(--rik-border-default));border-radius:var(--deck-cell-radius,var(--rik-radius-lg));font-family:var(--rik-font-sans);color:var(--rik-text-default--muted)}:host([banded]){grid-template-rows:subgrid;grid-auto-rows:initial;row-gap:0}:host([banded]) ::slotted(*){align-self:start}:host([tone="info"]){background:var(--deck-cell-bg,var(--rik-status-info__bg));border-color:var(--deck-cell-border,var(--rik-status-info__border))}:host([tone="warn"]){background:var(--deck-cell-bg,var(--rik-status-warn__bg));border-color:var(--deck-cell-border,var(--rik-status-warn__border))}:host([tone="ok"]){background:var(--deck-cell-bg,var(--rik-status-success__bg));border-color:var(--deck-cell-border,var(--rik-status-success__border))}:host([tone="danger"]){background:var(--deck-cell-bg,var(--rik-status-danger__bg));border-color:var(--deck-cell-border,var(--rik-status-danger__border))}:host([plain]){background:none;border-color:transparent;border-radius:0}:host([flat]){border:none}::slotted(h3){font-family:var(--rik-font-display,var(--rik-font-sans));font-size:var(--rik-font-size-h2);font-weight:700;color:var(--rik-text-default);letter-spacing:-0.01em;line-height:1.2;margin:0}::slotted(p){font-size:var(--rik-font-size-body);line-height:1.5;margin:0}`,n([i({type:String})],t.prototype,"span",2),n([i({type:String})],t.prototype,"col",2),n([i({type:String})],t.prototype,"row",2),n([i({type:String})],t.prototype,"align",2),n([i({type:String})],t.prototype,"tone",2),n([i({type:String,reflect:!0})],t.prototype,"banded",2),t=n([m("deck-point")],t);export{t as DeckPoint};