rikiki-deck 0.3.1 → 0.5.0

package/dist/runtime/deck-root.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
 export declare class DeckRoot extends LitElement {
     static styles: import("lit").CSSResult;
     current: number;
@@ -7,6 +7,20 @@ export declare class DeckRoot extends LitElement {
      *  keys). Pressing any key dismisses it · same convention as PowerPoint. */
     blank: 'black' | 'white' | null;
     overview: boolean;
+    /** Fluid rendering · the deck fills its box and reflows like a web page
+     *  (no logical canvas, no zoom-to-fit scale, no letterbox). Opt-in · the
+     *  default stays the uniform zoom-to-fit canvas. Toggleable at runtime ·
+     *  flipping it re-applies the canvas vars, scale and letterbox both ways. */
+    fluid: boolean;
+    /** Logical canvas size · defaults to 1920 × 1080 (16:9). Only the ratio and
+     *  the rem baseline depend on these · the canvas is then scaled uniformly to
+     *  fill the window (see _applyScale). */
+    width: number;
+    height: number;
+    /** Hide the bottom-left keyboard-hint chip (the ←/→ · O · P · ? row). */
+    noHint: boolean;
+    /** Hide the bottom-right on-screen previous/next navigation arrows. */
+    noArrows: boolean;
     /** Optional slide transition · "slide" | "fade" | "zoom". When set, the
      *  deck-transition.js plugin is fetched on first navigation. Per-slide
      *  override available via `data-transition` on the slide host. */
@@ -42,6 +56,49 @@ export declare class DeckRoot extends LitElement {
     private _wheelAccum;
     private _wheelLockUntil;
     firstUpdated(): void;
+    /** Canvas vars, scale and every listener the deck needs while connected.
+     *  Mirror of the disconnectedCallback teardown · runs from firstUpdated on
+     *  the initial connect, and again from connectedCallback on a re-attach
+     *  (firstUpdated only ever runs once per element). */
+    private _installRuntime;
+    /** Confine author `<style scoped>` blocks to their own slide. A light-DOM
+     *  <style> is a global stylesheet by default, so a per-slide tweak would
+     *  bleed across the whole deck. Wrapping its body in a native @scope rule
+     *  (whose implicit root is the style's parent slide) limits it to that slide
+     *  with no selector rewriting · plain CSS inside keeps working unchanged. */
+    private _scopeSlideStyles;
+    /** Publish the logical canvas size on the document root so both the
+     *  `html:has(deck-root)` rem-baseline rule and the shadow `#stage` (via
+     *  custom-property inheritance) size against the same numbers. */
+    private _applyCanvasVars;
+    /** Uniform zoom-to-fit · scale the fixed logical canvas to the largest size
+     *  that still fits the host's own box (the viewport for a full-window deck,
+     *  the container for an embedded one). Driven by a ResizeObserver. */
+    private _applyScale;
+    private _resizeObserver;
+    /** Make the letterbox bands match the active slide's background, so a scaled
+     *  deck blends seamlessly into the bands instead of sitting on a contrasting
+     *  frame. A slide with no background of its own (transparent) shows the page
+     *  surface · removing the override lets the bands fall back to that same
+     *  surface, which stays seamless too. */
+    private _applyLetterbox;
+    /** The scaling baseline is a framework concern, not a theme one: inject it
+     *  globally so any theme (or none) gets it. The rem unit tracks the logical
+     *  canvas height · the #stage transform does the responsive scaling · and the
+     *  page never scrolls (so the letterbox is the only thing outside a slide).
+     *  Guarded by the element id (not a static) so separately-bundled copies of
+     *  this class on one page share the same once-per-document semantics.
+     *
+     *  Every rule is scoped with `:has(> body > deck-root)`, so it is inert
+     *  unless a deck is a direct <body> child · i.e. a full-page deck. An
+     *  embedded deck (sitting in some container) never matches, so it leaves the
+     *  host page's scroll and rem baseline alone.
+     *
+     *  The `:not([fluid])` rule carries the zoom-to-fit canvas baseline; the
+     *  `[fluid]` rule gives a fluid deck the viewport-relative rem baseline
+     *  instead. The `height:100%` pair backs the 100% `:host` sizing. */
+    private static _injectGlobals;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private _startAutoplay;
     private _stopAutoplay;
@@ -95,7 +152,7 @@ export declare class DeckRoot extends LitElement {
     private _applyActive;
     private _applyStep;
     private _updateUI;
-    updated(): void;
+    updated(changed: PropertyValues<this>): void;
     private _navArrows;
     render(): unknown;
 }

package/dist/shared-styles.js

@@ -1 +1 @@
-import{css as r}from"https://cdn.jsdelivr.net/npm/lit@3/+esm";var e=r`: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}`,t=r`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)}`,a=r`.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)}`,i=[e,t,a];export{a as helpers,i as slideBase,e as slideShell,t as typo};
+import{css as r}from"./vendor/lit.js";var e=r`: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}`,t=r`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)}`,a=r`.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)}`,i=[e,t,a];export{a as helpers,i as slideBase,e as slideShell,t as typo};

package/dist/shiki.js

@@ -1 +1 @@
-var i=null,l="one-dark-pro";async function c(t){if(i)return i;let{createHighlighter:n}=await import(`${t.cdn}shiki@1.24.0`);return i=await n({themes:[t.theme],langs:t.langs}),i}function d(t){return t.replace(/ style="[^"]*"/g,"")}async function u(t={}){let n={theme:t.theme??"one-dark-pro",langs:t.langs??["ts","js","html","css","json"],cdn:t.cdn??"https://esm.sh/"};l=n.theme;let o=await c(n),r=customElements.get("deck-code");if(!r){console.warn("[rikiki/shiki] <deck-code> is not defined yet \xB7 import rikiki first");return}let s=r.prototype,h=s._highlight;s._highlight=function(){let e=this,g=e.textContent??"";try{let a=o.codeToHtml(g,{lang:e.lang||"txt",theme:l}).replace(/^<pre[^>]*><code[^>]*>/,"").replace(/<\/code><\/pre>$/,"");e._html=d(a)}catch{h.call(this)}},document.querySelectorAll("deck-code").forEach(e=>{e._highlight?.(),e.requestUpdate?.()})}export{u as installShiki};
+var i=null,s="one-dark-pro";async function c(t){return i||(i=await(globalThis.__rikikiShiki??(await import(new URL("./vendor/shiki.js",import.meta.url).href)).createHighlighter)({themes:[t.theme],langs:t.langs}),i)}function d(t){return t.replace(/ style="[^"]*"/g,"")}async function u(t={}){let n={theme:t.theme??"one-dark-pro",langs:t.langs??["ts","js","html","css","json"]};s=n.theme;let r=await c(n),o=customElements.get("deck-code");if(!o){console.warn("[rikiki/shiki] <deck-code> is not defined yet \xB7 import rikiki first");return}let l=o.prototype,h=l._highlight;l._highlight=function(){let e=this,g=e.textContent??"";try{let a=r.codeToHtml(g,{lang:e.lang||"txt",theme:s}).replace(/^<pre[^>]*><code[^>]*>/,"").replace(/<\/code><\/pre>$/,"");e._html=d(a)}catch{h.call(this)}},document.querySelectorAll("deck-code").forEach(e=>{e._highlight?.(),e.requestUpdate?.()})}export{u as installShiki};