@gpichot/spectacle-deck 1.7.0 → 1.10.1

package/SkipStepsShortcut.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Registers Shift+ArrowRight / Shift+ArrowLeft keyboard shortcuts
+ * to skip all steps within a slide and jump directly to the next/previous slide.
+ */
+export declare function SkipStepsShortcut(): any;

package/index.cjs

@@ -61,9 +61,9 @@ __export(src_exports, {
   noneTransition: () => noneTransition,
   resolveTransition: () => resolveTransition
 });
-var import_react16 = require("@mdx-js/react");
-var import_react17 = __toESM(require("react"));
-var import_spectacle11 = require("spectacle");
+var import_react17 = require("@mdx-js/react");
+var import_react18 = __toESM(require("react"));
+var import_spectacle12 = require("spectacle");
 var import_styled_components20 = require("styled-components");
 
 // src/colors.ts
@@ -1080,7 +1080,7 @@ var Overlay = import_styled_components6.default.div`
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  padding: 4rem 6rem;
+  padding: ${(props) => props.$padding || "4rem 6rem"};
   z-index: 1;
 
   h1,
@@ -1096,7 +1096,11 @@ function FullImageLayout({
   children,
   image,
   position = "bottom",
-  dim = 0.4
+  dim = 0,
+  fit = "cover",
+  backgroundColor,
+  margin,
+  padding
 }) {
   const [images, rest] = getMatchingMdxType(children, "Image");
   const firstImage = images[0];
@@ -1121,12 +1125,15 @@ function FullImageLayout({
               position: "absolute",
               inset: 0,
               backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-              backgroundSize: "cover",
-              backgroundPosition: "center"
+              backgroundSize: fit,
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundColor,
+              margin
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        dim > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             style: {
@@ -1136,7 +1143,14 @@ function FullImageLayout({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Overlay, { style: { justifyContent: justifyMap[position] }, children: firstImage ? rest : children })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          Overlay,
+          {
+            $padding: padding,
+            style: { justifyContent: justifyMap[position] },
+            children: firstImage ? rest : children
+          }
+        )
       ]
     }
   );
@@ -1543,6 +1557,36 @@ var layouts_default = {
   bigNumber: BigNumberLayout
 };
 
+// src/SkipStepsShortcut.tsx
+var import_react9 = require("react");
+var import_spectacle6 = require("spectacle");
+function SkipStepsShortcut() {
+  const {
+    skipTo,
+    activeView: { slideIndex },
+    slideCount
+  } = (0, import_react9.useContext)(import_spectacle6.DeckContext);
+  (0, import_spectacle6.useMousetrap)(
+    {
+      "shift+right": () => {
+        if (slideIndex < slideCount - 1) {
+          skipTo({ slideIndex: slideIndex + 1, stepIndex: 0 });
+        }
+      },
+      "shift+left": () => {
+        if (slideIndex > 0) {
+          skipTo({
+            slideIndex: slideIndex - 1,
+            stepIndex: null
+          });
+        }
+      }
+    },
+    [slideIndex, slideCount, skipTo]
+  );
+  return null;
+}
+
 // src/SlideWrapper.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function SlideWrapper({
@@ -1564,7 +1608,7 @@ function SlideWrapper({
 }
 
 // src/template.tsx
-var import_spectacle6 = require("spectacle");
+var import_spectacle7 = require("spectacle");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var template = ({
   slideNumber,
@@ -1572,7 +1616,7 @@ var template = ({
 }) => {
   const percentage = slideNumber / numberOfSlides * 100;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { position: "absolute", bottom: 0, left: 0, right: 0 }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_spectacle6.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_spectacle6.FullScreen, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_spectacle7.Box, { padding: "0 0 0.5em 0.7em", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_spectacle7.FullScreen, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { width: "100%", height: "4px", background: "#ffffff11" }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
@@ -1616,7 +1660,7 @@ var theme_default = {
 };
 
 // src/transitions.ts
-var import_spectacle7 = require("spectacle");
+var import_spectacle8 = require("spectacle");
 var dropTransition = {
   from: { transform: "translateY(-100%)", opacity: 0 },
   enter: { transform: "translateY(0%)", opacity: 1 },
@@ -1628,8 +1672,8 @@ var noneTransition = {
   leave: { opacity: 0 }
 };
 var transitionMap = {
-  fade: import_spectacle7.fadeTransition,
-  slide: import_spectacle7.slideTransition,
+  fade: import_spectacle8.fadeTransition,
+  slide: import_spectacle8.slideTransition,
   drop: dropTransition,
   none: noneTransition
 };
@@ -1645,11 +1689,11 @@ __reExport(src_exports, require("spectacle"));
 var import_web = require("@react-spring/web");
 
 // src/components/animations/useInView.ts
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 function useInView() {
-  const ref = import_react9.default.useRef(null);
-  const [isInView, setIsInView] = import_react9.default.useState(false);
-  import_react9.default.useEffect(() => {
+  const ref = import_react10.default.useRef(null);
+  const [isInView, setIsInView] = import_react10.default.useState(false);
+  import_react10.default.useEffect(() => {
     const el = ref.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -1847,7 +1891,7 @@ function Spotlight({
 
 // src/components/animations/StaggerChildren.tsx
 var import_web5 = require("@react-spring/web");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function StaggerChildren({
   children,
@@ -1858,7 +1902,7 @@ function StaggerChildren({
   distance = 20
 }) {
   const [ref, isInView] = useInView();
-  const items = import_react10.default.Children.toArray(children);
+  const items = import_react11.default.Children.toArray(children);
   const translateMap = {
     up: `translateY(${distance}px)`,
     down: `translateY(-${distance}px)`,
@@ -1879,14 +1923,14 @@ function StaggerChildren({
 }
 
 // src/components/animations/TypeWriter.tsx
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function extractText(node) {
   if (typeof node === "string") return node;
   if (typeof node === "number") return String(node);
   if (!node) return "";
   if (Array.isArray(node)) return node.map(extractText).join("");
-  if (import_react11.default.isValidElement(node)) {
+  if (import_react12.default.isValidElement(node)) {
     const props = node.props;
     return extractText(props.children);
   }
@@ -1900,9 +1944,9 @@ function TypeWriter({
 }) {
   const text = extractText(children);
   const [ref, isInView] = useInView();
-  const [displayed, setDisplayed] = import_react11.default.useState("");
-  const [done, setDone] = import_react11.default.useState(false);
-  import_react11.default.useEffect(() => {
+  const [displayed, setDisplayed] = import_react12.default.useState("");
+  const [done, setDone] = import_react12.default.useState(false);
+  import_react12.default.useEffect(() => {
     if (!isInView) return;
     let index = 0;
     setDisplayed("");
@@ -2001,7 +2045,7 @@ function DocItem({ label, link }) {
 }
 
 // src/components/FilePane.tsx
-var import_react12 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function FilePane({
   name,
@@ -2010,7 +2054,7 @@ function FilePane({
   minWidth,
   ...divProps
 }) {
-  const content = import_react12.default.isValidElement(children) ? import_react12.default.cloneElement(children, {
+  const content = import_react13.default.isValidElement(children) ? import_react13.default.cloneElement(children, {
     // @ts-expect-error cloning
     priority,
     name
@@ -2024,8 +2068,8 @@ FilePane.mdxType = "FilePane";
 
 // src/components/HorizontalList.tsx
 var import_web6 = require("@react-spring/web");
-var import_react13 = __toESM(require("react"));
-var import_spectacle8 = require("spectacle");
+var import_react14 = __toESM(require("react"));
+var import_spectacle9 = require("spectacle");
 var import_styled_components15 = __toESM(require("styled-components"));
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var Container = import_styled_components15.default.div`
@@ -2036,18 +2080,18 @@ function HorizontalList({
   children,
   columns = 3
 }) {
-  const items = import_react13.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_spectacle8.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const items = import_react14.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_spectacle9.Stepper, { values: items, children: (_, step) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Container,
     {
       style: {
         gridTemplateColumns: `repeat(${columns}, 1fr)`
       },
       children: items.map((item, k) => {
-        if (!import_react13.default.isValidElement(item)) {
+        if (!import_react14.default.isValidElement(item)) {
           return item;
         }
-        return import_react13.default.cloneElement(item, {
+        return import_react14.default.cloneElement(item, {
           // @ts-expect-error cloning
           position: k + 1,
           isVisible: k <= step,
@@ -2185,14 +2229,14 @@ function IconBox({
 
 // src/components/ItemsColumn.tsx
 var import_web7 = require("@react-spring/web");
-var import_react14 = __toESM(require("react"));
-var import_spectacle9 = require("spectacle");
+var import_react15 = __toESM(require("react"));
+var import_spectacle10 = require("spectacle");
 var import_styled_components17 = __toESM(require("styled-components"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 function ItemsColumn(divProps) {
   const { style: style2, children, ...props } = divProps;
-  const childrenArray = import_react14.default.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_spectacle9.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  const childrenArray = import_react15.default.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_spectacle10.Stepper, { values: childrenArray, children: (_value, step) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       style: {
@@ -2207,7 +2251,7 @@ function ItemsColumn(divProps) {
       ...props,
       children: childrenArray.map((child, index) => {
         const isVisible = index <= step;
-        if (!import_react14.default.isValidElement(child)) {
+        if (!import_react15.default.isValidElement(child)) {
           return child;
         }
         return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ItemColumnWrapper, { isVisible, children: child }, index);
@@ -2233,8 +2277,8 @@ function ItemColumnWrapper({
 
 // src/components/Timeline.tsx
 var import_web8 = require("@react-spring/web");
-var import_react15 = __toESM(require("react"));
-var import_spectacle10 = require("spectacle");
+var import_react16 = __toESM(require("react"));
+var import_spectacle11 = require("spectacle");
 var import_styled_components19 = __toESM(require("styled-components"));
 
 // src/components/Timeline.styled.tsx
@@ -2308,13 +2352,13 @@ var style = {
 };
 function Timeline(props) {
   const { activeIndex, ...rest } = props;
-  const children = import_react15.default.Children.toArray(rest.children);
+  const children = import_react16.default.Children.toArray(rest.children);
   if (activeIndex != null) {
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ...rest, style: { ...style, ...rest.style }, children: children.map((child, index) => {
-      if (!import_react15.default.isValidElement(child)) {
+      if (!import_react16.default.isValidElement(child)) {
         return child;
       }
-      return import_react15.default.cloneElement(child, {
+      return import_react16.default.cloneElement(child, {
         // @ts-expect-error cloning
         isPhantom: activeIndex < index,
         isLast: activeIndex === index
@@ -2322,7 +2366,7 @@ function Timeline(props) {
     }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_spectacle10.Stepper,
+    import_spectacle11.Stepper,
     {
       ...rest,
       values: children,
@@ -2330,10 +2374,10 @@ function Timeline(props) {
       inactiveStyle: style,
       children: (_value, step) => {
         return children.map((child, index) => {
-          if (!import_react15.default.isValidElement(child)) {
+          if (!import_react16.default.isValidElement(child)) {
             return child;
           }
-          return import_react15.default.cloneElement(child, {
+          return import_react16.default.cloneElement(child, {
             // @ts-expect-error cloning
             isPhantom: step < index,
             isLast: step === index
@@ -2429,10 +2473,10 @@ function Deck({
   layouts: layouts2 = layouts_default,
   transition
 }) {
-  import_react17.default.useEffect(() => {
+  import_react18.default.useEffect(() => {
     document.title = deck.metadata.title || "Untitled";
   }, [deck.metadata.title]);
-  const mergedTheme = import_react17.default.useMemo(() => {
+  const mergedTheme = import_react18.default.useMemo(() => {
     const fonts = {
       ...theme_default.fonts,
       ...theme.themeTokens.fonts ?? {}
@@ -2443,7 +2487,7 @@ function Deck({
       fonts
     };
   }, [theme]);
-  const GlobalStyle = import_react17.default.useMemo(() => {
+  const GlobalStyle = import_react18.default.useMemo(() => {
     const cssVariables = createCssVariables(theme.themeTokens.colors);
     return import_styled_components20.createGlobalStyle`
       :root {
@@ -2452,21 +2496,24 @@ function Deck({
       }
     `;
   }, [theme, mergedTheme]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react17.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react16.MDXProvider, { components: componentsMap2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react18.default.StrictMode, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react17.MDXProvider, { components: componentsMap2, children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GlobalStyle, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-      import_spectacle11.Deck,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      import_spectacle12.Deck,
       {
         theme: mergedTheme,
         template,
         transition: resolveTransition(transition),
-        children: deck.slides.map((slide, i) => {
-          var _a;
-          const Component = slide.slideComponent;
-          const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
-          const slideTransition2 = resolveTransition(slideTransitionName);
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_spectacle11.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, {}) }, i);
-        })
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SkipStepsShortcut, {}),
+          deck.slides.map((slide, i) => {
+            var _a;
+            const Component = slide.slideComponent;
+            const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
+            const slideTransition2 = resolveTransition(slideTransitionName);
+            return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_spectacle12.Slide, { transition: slideTransition2, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Component, {}) }, i);
+          })
+        ]
       }
     )
   ] }) }) });

package/index.mjs

@@ -1022,7 +1022,7 @@ var Overlay = styled6.div`
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-end;
-  padding: 4rem 6rem;
+  padding: ${(props) => props.$padding || "4rem 6rem"};
   z-index: 1;
 
   h1,
@@ -1038,7 +1038,11 @@ function FullImageLayout({
   children,
   image,
   position = "bottom",
-  dim = 0.4
+  dim = 0,
+  fit = "cover",
+  backgroundColor,
+  margin,
+  padding
 }) {
   const [images, rest] = getMatchingMdxType(children, "Image");
   const firstImage = images[0];
@@ -1063,12 +1067,15 @@ function FullImageLayout({
               position: "absolute",
               inset: 0,
               backgroundImage: backgroundImage ? `url(${backgroundImage})` : void 0,
-              backgroundSize: "cover",
-              backgroundPosition: "center"
+              backgroundSize: fit,
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+              backgroundColor,
+              margin
             }
           }
         ),
-        /* @__PURE__ */ jsx10(
+        dim > 0 && /* @__PURE__ */ jsx10(
           "div",
           {
             style: {
@@ -1078,7 +1085,14 @@ function FullImageLayout({
             }
           }
         ),
-        /* @__PURE__ */ jsx10(Overlay, { style: { justifyContent: justifyMap[position] }, children: firstImage ? rest : children })
+        /* @__PURE__ */ jsx10(
+          Overlay,
+          {
+            $padding: padding,
+            style: { justifyContent: justifyMap[position] },
+            children: firstImage ? rest : children
+          }
+        )
       ]
     }
   );
@@ -1485,6 +1499,36 @@ var layouts_default = {
   bigNumber: BigNumberLayout
 };
 
+// src/SkipStepsShortcut.tsx
+import { useContext as useContext2 } from "react";
+import { DeckContext as DeckContext2, useMousetrap } from "spectacle";
+function SkipStepsShortcut() {
+  const {
+    skipTo,
+    activeView: { slideIndex },
+    slideCount
+  } = useContext2(DeckContext2);
+  useMousetrap(
+    {
+      "shift+right": () => {
+        if (slideIndex < slideCount - 1) {
+          skipTo({ slideIndex: slideIndex + 1, stepIndex: 0 });
+        }
+      },
+      "shift+left": () => {
+        if (slideIndex > 0) {
+          skipTo({
+            slideIndex: slideIndex - 1,
+            stepIndex: null
+          });
+        }
+      }
+    },
+    [slideIndex, slideCount, skipTo]
+  );
+  return null;
+}
+
 // src/SlideWrapper.tsx
 import { Fragment, jsx as jsx18 } from "react/jsx-runtime";
 function SlideWrapper({
@@ -2399,19 +2443,22 @@ function Deck({
   }, [theme, mergedTheme]);
   return /* @__PURE__ */ jsx33(React16.StrictMode, { children: /* @__PURE__ */ jsx33(PestacleProvider, { layouts: layouts2, children: /* @__PURE__ */ jsxs22(MDXProvider, { components: componentsMap2, children: [
     /* @__PURE__ */ jsx33(GlobalStyle, {}),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsxs22(
       SpectacleDeck,
       {
         theme: mergedTheme,
         template,
         transition: resolveTransition(transition),
-        children: deck.slides.map((slide, i) => {
-          var _a;
-          const Component = slide.slideComponent;
-          const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
-          const slideTransition2 = resolveTransition(slideTransitionName);
-          return /* @__PURE__ */ jsx33(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx33(Component, {}) }, i);
-        })
+        children: [
+          /* @__PURE__ */ jsx33(SkipStepsShortcut, {}),
+          deck.slides.map((slide, i) => {
+            var _a;
+            const Component = slide.slideComponent;
+            const slideTransitionName = (_a = slide.metadata) == null ? void 0 : _a.transition;
+            const slideTransition2 = resolveTransition(slideTransitionName);
+            return /* @__PURE__ */ jsx33(Slide, { transition: slideTransition2, children: /* @__PURE__ */ jsx33(Component, {}) }, i);
+          })
+        ]
       }
     )
   ] }) }) });

package/layouts/FullImageLayout.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
-export declare function FullImageLayout({ children, image, position, dim, }: {
+export declare function FullImageLayout({ children, image, position, dim, fit, backgroundColor, margin, padding, }: {
     children: React.ReactNode;
     image?: string;
     position?: "center" | "bottom" | "top";
     dim?: number;
+    fit?: "cover" | "contain";
+    backgroundColor?: string;
+    margin?: string;
+    padding?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gpichot/spectacle-deck",
-  "version": "1.7.0",
+  "version": "1.10.1",
   "license": "MIT",
   "type": "module",
   "main": "index.cjs",
@@ -16,6 +16,14 @@
   "keywords": [
     "spectacle"
   ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gpichot/pestacle.git",
+    "directory": "packages/spectacle-deck"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@fontsource/bitter": "^5.2.10",
     "@mdx-js/react": "^3.1.1",