rikiki-deck 0.4.0 → 0.6.0

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

@@ -1,4 +1,39 @@
-import { LitElement } from 'lit';
+import { LitElement, type PropertyValues } from 'lit';
+type Slide = HTMLElement & {
+    applyStep?: (step: number) => void;
+    render?: () => unknown;
+};
+/** The stable surface a plugin may touch · deliberately small so plugins never
+ *  reach into the engine's private internals (the old approach monkey-patched
+ *  the prototype's private methods, which broke silently on any rename). */
+export interface DeckContext {
+    /** The deck-root element · for ad-hoc first-party coordination markers. */
+    readonly host: DeckRoot;
+    readonly current: number;
+    readonly step: number;
+    readonly slides: readonly Slide[];
+    requestUpdate(): void;
+}
+/** A deck-root extension. Register one with `deckRoot.use(plugin)` · the engine
+ *  calls the optional hooks at the matching points. All hooks are optional so a
+ *  plugin implements only what it needs. */
+export interface DeckPlugin {
+    /** Unique name · registration is idempotent by this. */
+    name: string;
+    /** Run once on registration · may return a teardown run on unregister. */
+    setup?(ctx: DeckContext): void | (() => void);
+    /** Contribute to the active slide's step count · combined with the engine's
+     *  own count (and other plugins') as a maximum. Must not call back into the
+     *  engine's step count. */
+    steps?(slide: Slide, ctx: DeckContext): number;
+    /** React after the engine applied a step to the active slide. */
+    applyStep?(step: number, slide: Slide, ctx: DeckContext): void;
+    /** Around-advice for navigation · call `proceed()` to run the real navigation
+     *  (optionally wrapped, e.g. inside a View Transition). Return a truthy value
+     *  when handled · otherwise the engine navigates normally. Only the first
+     *  registered plugin with a `navigate` hook owns navigation. */
+    navigate?(to: number, ctx: DeckContext, proceed: () => void): boolean | void;
+}
 export declare class DeckRoot extends LitElement {
     static styles: import("lit").CSSResult;
     current: number;
@@ -6,20 +41,35 @@ export declare class DeckRoot extends LitElement {
     /** When non-null, a full-screen overlay covers the deck (clicker B/./W/,
      *  keys). Pressing any key dismisses it · same convention as PowerPoint. */
     blank: 'black' | 'white' | null;
+    /** Set by the presenter plugin while the speaker popup is open. The main
+     *  window is then the projected one, so its key-hint chips and nav arrows are
+     *  noise · hide them until the popup closes (issue #6). */
+    presenterActive: boolean;
     overview: boolean;
-    /** Fixed-viewport mode · the deck renders into a fixed-aspect canvas that is
-     *  letterboxed to fit any screen, so layouts never reflow between displays.
-     *  Opt-in · the default stays fluid (100vw × 100vh). */
-    fixed: boolean;
-    /** Logical canvas size for fixed mode · defaults to 1920 × 1080 (16:9).
-     *  Only the ratio and the rem baseline depend on these · the canvas is then
-     *  scaled by CSS to fill the window. */
+    /** 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;
+    /** Hide the bottom-right slide counter (`n / total`) · used by the presenter
+     *  preview, which already shows the count in its own chrome. */
+    noCounter: boolean;
+    /** Passive-render mode · the deck still scales/letterboxes but wires NO
+     *  keyboard, mouse, autoplay or presenter handlers. Used by the presenter
+     *  preview iframes, which must not hijack keys or open a nested presenter on
+     *  the shared BroadcastChannel · the speaker drives the real deck instead. */
+    preview: boolean;
+    /** Disable slide zoom (Ctrl/⌘+wheel, pinch, +/-/0) · on by default. */
+    noZoom: 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. */
@@ -54,7 +104,30 @@ export declare class DeckRoot extends LitElement {
     private _navDownY;
     private _wheelAccum;
     private _wheelLockUntil;
+    private _zoom;
+    private _panX;
+    private _panY;
+    private static readonly ZOOM_MAX;
+    private static readonly ZOOM_STEP;
+    private static readonly ZOOM_WHEEL_SENSITIVITY;
+    private _plugins;
+    private _ctx;
+    /** Build (once) the stable context object plugins receive · live getters so a
+     *  plugin always sees the engine's current position (the object itself is
+     *  cached, not frozen). */
+    private _context;
+    /** Register a plugin · idempotent by name. Returns an unregister function that
+     *  runs the plugin's teardown and detaches its hooks. A freshly registered
+     *  plugin may change step counts or element visibility, so the active slide is
+     *  re-applied immediately (this also covers plugins attached after the deck
+     *  has already rendered). */
+    use(plugin: DeckPlugin): () => void;
     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
@@ -62,9 +135,68 @@ export declare class DeckRoot extends LitElement {
      *  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[fixed])` font-size rule and the shadow `#stage`
-     *  (via custom-property inheritance) size against the same numbers. */
+     *  `html:has(deck-root)` rem-baseline rule and the shadow `#stage` (via
+     *  custom-property inheritance) size against the same numbers. */
+    /** True when the whole deck is fluid, or the active slide opts out of the
+     *  fixed canvas via its own `fluid` attribute · a per-slide viewport escape
+     *  (issue #4). It drives the canvas vars, scale and letterbox exactly like
+     *  the deck-wide `fluid` flag, just for that one slide. */
+    private _effectiveFluid;
+    /** Reflect the active slide's per-slide fluid escape on the host · the
+     *  `unfixed` marker that the stage CSS and the injected rem baseline key on ·
+     *  then re-apply the canvas vars and scale for the new effective mode. Called
+     *  on every slide change · a no-op for a deck that never uses per-slide fluid. */
+    private _applySlideFluid;
     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;
+    /** Zoom is live only in the fixed canvas and outside overlays. */
+    private _zoomEnabled;
+    /** Publish zoom + pan as custom props the #stage transform reads. */
+    private _applyZoom;
+    /** Keep the pan within bounds so the magnified stage always covers the
+     *  viewport (no gaps); at fit (zoom 1) it forces re-centring. */
+    private _clampPan;
+    /** Zoom by a factor, keeping the point at viewport (cx, cy) fixed. */
+    private _zoomAt;
+    private _resetZoom;
+    private _panBy;
+    private _panning;
+    private _panLastX;
+    private _panLastY;
+    private _onPanDown;
+    private _onPanMove;
+    private _onPanUp;
+    /** 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 `[unfixed]` rule (set while the active slide opts out via its
+     *  own `fluid` attribute) borrows that same viewport baseline for that one
+     *  slide · it comes last so it wins the equal-specificity tie with the
+     *  `:not([fluid])` rule. The `height:100%` pair backs the 100% `:host`
+     *  sizing. */
+    private static _injectGlobals;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     private _startAutoplay;
     private _stopAutoplay;
@@ -111,14 +243,23 @@ export declare class DeckRoot extends LitElement {
     /** Lazy-import the overview module the first time the user opens it. */
     private _renderOverviewIfActive;
     private _maxSteps;
+    /** The engine's own step count for the active slide · `steps`/`data-steps`
+     *  attribute, or a `deck-code[step-groups]` group count. Plugins extend this
+     *  through their `steps` hook (see _maxSteps). */
+    private _baseMaxSteps;
     private _advance;
     private _back;
     private _goTo;
+    private _goToNow;
     private _goToCoords;
     private _applyActive;
     private _applyStep;
+    /** The bottom-right slide counter is noise in modes where it shouldn't show:
+     *  the overview grid, a black/white blanked screen, and the cover slide (the
+     *  title slide has no business carrying a page number). */
+    private _counterHidden;
     private _updateUI;
-    updated(): void;
+    updated(changed: PropertyValues<this>): void;
     private _navArrows;
     render(): unknown;
 }
@@ -127,3 +268,4 @@ declare global {
         'deck-root': DeckRoot;
     }
 }
+export {};

package/dist/shiki.js

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