@gpichot/spectacle-deck 1.13.0 → 1.14.0

package/components/FilePane.d.ts

@@ -3,7 +3,7 @@ declare function FilePane({ name, children, priority, minWidth, ...divProps }: R
     name: string;
     priority?: number;
     minWidth?: string;
-}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | import("react/jsx-runtime").JSX.Element;
+}): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>;
 declare namespace FilePane {
     var mdxType: string;
 }

package/components/map.d.ts

@@ -1,21 +1,3 @@
 import React from "react";
-import CodeStepper from "./CodeStepper/CodeStepper";
-import { Image } from "./styled";
-declare const componentsMap: {
-    readonly inlineCode: (props: React.ComponentPropsWithoutRef<"code">) => import("react/jsx-runtime").JSX.Element;
-    readonly table: (props: React.ComponentPropsWithoutRef<"table">) => import("react/jsx-runtime").JSX.Element;
-    readonly tr: (props: React.ComponentPropsWithoutRef<"tr">) => import("react/jsx-runtime").JSX.Element;
-    readonly td: (props: React.ComponentPropsWithoutRef<"td">) => import("react/jsx-runtime").JSX.Element;
-    readonly h1: (props: React.ComponentProps<"h1">) => import("react/jsx-runtime").JSX.Element;
-    readonly h2: (props: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
-    readonly h3: (props: React.ComponentPropsWithoutRef<"h3">) => import("react/jsx-runtime").JSX.Element;
-    readonly img: (props: React.ComponentProps<typeof Image>) => import("react/jsx-runtime").JSX.Element;
-    readonly pre: typeof CodeStepper;
-    readonly li: (props: React.ComponentProps<"li">) => import("react/jsx-runtime").JSX.Element;
-    readonly Side: (props: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-    readonly p: (props: React.ComponentProps<"p">) => import("react/jsx-runtime").JSX.Element;
-    readonly blockquote: (props: React.ComponentProps<"blockquote">) => import("react/jsx-runtime").JSX.Element;
-    readonly a: ({ children, ...props }: React.ComponentProps<"a">) => import("react/jsx-runtime").JSX.Element;
-    readonly directive: (props: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-};
+declare const componentsMap: Record<string, React.ComponentType<any>>;
 export default componentsMap;

package/components/styled.d.ts

@@ -1,12 +1,11 @@
 import type React from "react";
-import { Image as SpectacleImage } from "spectacle";
 export declare const Link: (props: {
     href: string;
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const Image: (props: React.ComponentProps<typeof SpectacleImage>) => import("react/jsx-runtime").JSX.Element;
-export declare const CustomHeading: import("styled-components/dist/types").IStyledComponentBase<"web", any> & (string | (string & Omit<styled_components.StyledComponent<"div", any, any, never>, keyof React.Component<any, {}, any>>));
-export declare const CustomQuote: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.BlockquoteHTMLAttributes<HTMLQuoteElement>, HTMLQuoteElement>, never>> & string;
-export declare const InlineCode: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
-export declare const HeadingTwo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const HeadingThree: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const Image: (props: React.ComponentProps<"img">) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomHeading: (props: React.ComponentProps<"h1">) => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingTwo: (props: React.ComponentProps<"h2">) => import("react/jsx-runtime").JSX.Element;
+export declare const HeadingThree: (props: React.ComponentProps<"h3">) => import("react/jsx-runtime").JSX.Element;
+export declare const CustomQuote: (props: React.ComponentProps<"blockquote">) => import("react/jsx-runtime").JSX.Element;
+export declare const InlineCode: (props: React.ComponentProps<"code">) => import("react/jsx-runtime").JSX.Element;

package/engine/CommandPalette.d.ts

@@ -0,0 +1,10 @@
+export interface Command {
+    id: string;
+    label: string;
+    shortcut?: string;
+    action: () => void;
+}
+export declare function CommandPalette({ commands, onClose, }: {
+    commands: Command[];
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/engine/Deck.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { type LayoutComponent } from "../context";
+export type SlideType = {
+    metadata: Record<string, unknown> & {
+        layout?: string;
+        transition?: string;
+    };
+    slideComponent: React.ElementType<unknown>;
+};
+export type DeckType = {
+    metadata: Record<string, unknown>;
+    slides: SlideType[];
+};
+interface ThemeOptions {
+    themeTokens: {
+        colors: Record<string, string>;
+        fonts?: {
+            header?: string;
+            text?: string;
+        };
+    };
+}
+export declare function Deck({ deck, theme, layouts, transition, }: {
+    deck: DeckType;
+    theme: ThemeOptions;
+    layouts?: Record<string, LayoutComponent>;
+    /** Default slide transition name: "fade", "slide", "drop", "morph", "none" */
+    transition?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/engine/DeckContext.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+export interface DeckState {
+    /** Current slide index (0-based) */
+    slideIndex: number;
+    /** Current step index within the slide (0-based, 0 = no steps revealed) */
+    stepIndex: number;
+    /** Total number of slides */
+    slideCount: number;
+    /** Total steps for the current slide (registered by Stepper components) */
+    stepCount: number;
+    /** Navigate to the next step or slide */
+    stepForward: () => void;
+    /** Navigate to the previous step or slide */
+    stepBackward: () => void;
+    /** Jump to a specific slide (optionally a specific step) */
+    skipTo: (target: {
+        slideIndex: number;
+        stepIndex?: number;
+    }) => void;
+    /** Direction of the last navigation ("forward" | "backward") */
+    direction: "forward" | "backward";
+    /** Theme colors and fonts */
+    theme: {
+        colors: Record<string, string>;
+        fonts?: {
+            header?: string;
+            text?: string;
+        };
+    };
+    /** Register steps for a Stepper component within the current slide */
+    registerStepper: (id: string, count: number) => void;
+    /** Unregister a Stepper (on unmount) */
+    unregisterStepper: (id: string) => void;
+}
+export declare const DeckContext: React.Context<DeckState>;
+export declare function useDeck(): DeckState;

package/engine/ExportMode.d.ts

@@ -0,0 +1,7 @@
+import type { SlideType } from "./Deck";
+export type ExportModeVariant = "export" | "print";
+export declare function ExportMode({ slides, variant, onClose, }: {
+    slides: SlideType[];
+    variant: ExportModeVariant;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/engine/Morph.d.ts

@@ -0,0 +1,51 @@
+import type React from "react";
+export interface MorphProps {
+    /**
+     * A unique name for this morphable element. Elements with the same `name`
+     * on different slides will morph (animate position, size, shape) during
+     * view transitions.
+     *
+     * Uses React's <ViewTransition> component which coordinates with the
+     * browser's View Transitions API automatically via startTransition.
+     * Names must be unique within a single slide.
+     */
+    name: string;
+    /** HTML tag to render. Defaults to "div". */
+    as?: keyof React.JSX.IntrinsicElements;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+    /** Additional CSS class */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Morph — marks an element for cross-slide morphing via React ViewTransition.
+ *
+ * Usage in MDX:
+ * ```mdx
+ * <Morph name="title">
+ *   # My Title
+ * </Morph>
+ * ```
+ *
+ * On the next slide, use the same name:
+ * ```mdx
+ * <Morph name="title" style={{ fontSize: "0.5em" }}>
+ *   # My Title
+ * </Morph>
+ * ```
+ *
+ * The browser will automatically animate the element's position, size,
+ * and visual properties between the two slides.
+ */
+export declare function Morph({ name, as: Tag, style, className, children, }: MorphProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * MorphImage — a convenience wrapper for images that should morph between slides.
+ */
+export declare function MorphImage({ name, src, alt, style, className, }: {
+    name: string;
+    src: string;
+    alt?: string;
+    style?: React.CSSProperties;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/engine/OverviewMode.d.ts

@@ -0,0 +1,6 @@
+import type { SlideType } from "./Deck";
+export declare function OverviewMode({ slides, onSelectSlide, onClose, }: {
+    slides: SlideType[];
+    onSelectSlide: (index: number) => void;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/engine/SectionTitle.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Displays the current section title as a sticky header at the top of the slide.
+ *
+ * The section title is derived from the `section` frontmatter field.
+ * Once set on a slide, it persists on subsequent slides until changed or
+ * explicitly cleared (by setting `section: ""` or `section: false`).
+ */
+export declare function SectionTitle({ title }: {
+    title: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Compute the current section title for a given slide index.
+ * Walks backward through slides to find the most recent `section` frontmatter.
+ * A falsy value (empty string, false) explicitly clears the section.
+ */
+export declare function getCurrentSection(slides: {
+    metadata: Record<string, unknown>;
+}[], slideIndex: number): string;

package/engine/Stepper.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface StepperProps<T = unknown> {
+    /** Array of values to step through */
+    values: T[];
+    /** Render function: (currentValue, stepIndex, isActive) => ReactNode */
+    children: (value: T | null, step: number, isActive: boolean) => React.ReactNode;
+    /** If true, render even when no step is active (step = -1) */
+    alwaysVisible?: boolean;
+    /** Priority for ordering multiple steppers (not yet used, reserved) */
+    priority?: number;
+    /** Style applied when the stepper is active (compat with Spectacle API) */
+    activeStyle?: React.CSSProperties;
+    /** Style applied when the stepper is inactive (compat with Spectacle API) */
+    inactiveStyle?: React.CSSProperties;
+    /** Additional props spread onto the wrapper (e.g. from Timeline) */
+    [key: string]: unknown;
+}
+/**
+ * Stepper component — replaces Spectacle's Stepper.
+ *
+ * Registers its step count with the deck and renders children
+ * based on the current step index. Steps are 0-indexed in the deck,
+ * but the stepper maps them to values.
+ *
+ * Step 0 in the deck = "no step active" (renders with alwaysVisible).
+ * Step 1..N = values[0]..values[N-1].
+ */
+export declare function Stepper<T>({ values, children, alwaysVisible, priority: _priority, activeStyle, inactiveStyle, ...rest }: StepperProps<T>): import("react/jsx-runtime").JSX.Element;

package/engine/Template.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Slide template overlay: progress bar + fullscreen button + controls.
+ * Pure HTML/CSS — no Spectacle dependency.
+ */
+export declare function Template({ slideNumber, numberOfSlides, onToggleExport, onTogglePrint, onToggleCommandPalette, }: {
+    slideNumber: number;
+    numberOfSlides: number;
+    onToggleExport?: () => void;
+    onTogglePrint?: () => void;
+    onToggleCommandPalette?: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/engine/dom-helpers.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Get or create a <style> element by ID in the document head.
+ */
+export declare function getOrCreateStyleElement(id: string): HTMLStyleElement;
+/**
+ * Toggle fullscreen on the document element.
+ */
+export declare function toggleFullscreen(): void;

package/engine/global.css.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Injects global CSS (theme variables, base styles) into the document.
+ * Replaces styled-components' createGlobalStyle.
+ */
+export declare function injectGlobalStyles(options: {
+    cssVariables: string;
+    fontFamily: string;
+    fontSize: string;
+    backgroundColor: string;
+    color: string;
+}): void;

package/engine/index.d.ts

@@ -0,0 +1,19 @@
+export type { Command } from "./CommandPalette";
+export { CommandPalette } from "./CommandPalette";
+export type { DeckType, SlideType } from "./Deck";
+export { Deck } from "./Deck";
+export type { DeckState } from "./DeckContext";
+export { DeckContext, useDeck } from "./DeckContext";
+export type { ExportModeVariant } from "./ExportMode";
+export { ExportMode } from "./ExportMode";
+export type { MorphProps } from "./Morph";
+export { Morph, MorphImage } from "./Morph";
+export { OverviewMode } from "./OverviewMode";
+export { getCurrentSection, SectionTitle } from "./SectionTitle";
+export type { StepperProps } from "./Stepper";
+export { Stepper } from "./Stepper";
+export { Template } from "./Template";
+export type { SlideTransition } from "./transitions";
+export { dropTransition, fadeTransition, morphTransition, noneTransition, resolveTransition, slideTransition, } from "./transitions";
+export { useKeyboard } from "./useKeyboard";
+export { useNavigation } from "./useNavigation";

package/engine/transitions.d.ts

@@ -0,0 +1,35 @@
+/**
+ * CSS-based slide transition definitions for the View Transitions API.
+ *
+ * Each transition defines keyframes for `::view-transition-old(slide)`
+ * and `::view-transition-new(slide)` pseudo-elements.
+ *
+ * The View Transitions API captures the old DOM as an image, updates
+ * the DOM, then animates from old to new using these keyframes.
+ */
+export interface SlideTransition {
+    /** A unique name for this transition */
+    name: string;
+    /** Duration in ms */
+    duration?: number;
+    /** CSS easing function */
+    easing?: string;
+    /** CSS for the old slide (exiting) — a CSS keyframes body */
+    oldKeyframes: Keyframe[];
+    /** CSS for the new slide (entering) — a CSS keyframes body */
+    newKeyframes: Keyframe[];
+}
+export declare const fadeTransition: SlideTransition;
+export declare const slideTransition: SlideTransition;
+export declare const dropTransition: SlideTransition;
+export declare const noneTransition: SlideTransition;
+export declare const morphTransition: SlideTransition;
+/**
+ * Resolve a transition name string to a SlideTransition object.
+ */
+export declare function resolveTransition(name: string | undefined): SlideTransition | undefined;
+/**
+ * Inject a <style> element with view transition keyframes into the document.
+ * Called once when the Deck mounts.
+ */
+export declare function injectTransitionStyles(transition: SlideTransition, direction: "forward" | "backward"): void;

package/engine/useKeyboard.d.ts

@@ -0,0 +1,7 @@
+type KeyBindings = Record<string, () => void>;
+/**
+ * Simple keyboard shortcut hook. Replaces Spectacle's useMousetrap.
+ * Supports key names like "ArrowRight", "Shift+ArrowRight", "PageUp", etc.
+ */
+export declare function useKeyboard(bindings: KeyBindings): void;
+export {};

package/engine/useNavigation.d.ts

@@ -0,0 +1,25 @@
+interface NavigationOptions {
+    slideCount: number;
+    onSlideChange?: (index: number, direction: "forward" | "backward") => void;
+}
+/**
+ * Core navigation state machine for the deck.
+ * Manages slide index, step index, and step registration.
+ * Uses React.startTransition so that <ViewTransition> components
+ * automatically animate during slide and step changes.
+ */
+export declare function useNavigation({ slideCount, onSlideChange, }: NavigationOptions): {
+    slideIndex: number;
+    stepIndex: number;
+    stepCount: number;
+    direction: "forward" | "backward";
+    stepForward: () => void;
+    stepBackward: () => void;
+    skipTo: (target: {
+        slideIndex: number;
+        stepIndex?: number;
+    }) => void;
+    registerStepper: (id: string, count: number) => void;
+    unregisterStepper: (id: string) => void;
+};
+export {};