@thanh01.pmt/presentation-kit 0.1.0

package/dist/react/index.js

@@ -0,0 +1,750 @@
+import { renderSlide, renderMermaidDiagrams } from '../chunk-RCHOTRWI.js';
+export { defineTheme, extractMaxClicks, generateClickCss, postprocessClicks, preprocessClicks, renderSlide, renderSlideAsync, resolveTheme } from '../chunk-RCHOTRWI.js';
+import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function useSlideState(options) {
+  const {
+    markdown,
+    initialTheme = "dark",
+    initialMode = "presentation",
+    containerId,
+    enableClicks = false
+  } = options;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [mode, setMode] = useState(initialMode);
+  const [theme, setTheme] = useState(initialTheme);
+  const [currentClick, setCurrentClick] = useState(0);
+  const renderCountRef = useRef(0);
+  const result = useMemo(() => {
+    if (!markdown || !markdown.trim()) return null;
+    renderCountRef.current++;
+    return renderSlide(markdown, {
+      theme,
+      enableMermaid: true,
+      enableClicks,
+      containerId: containerId ?? `slide-container-${renderCountRef.current}`
+    });
+  }, [markdown, theme, containerId, enableClicks]);
+  const slideCount = result?.slideCount ?? 1;
+  const maxClicks = result?.maxClicks ?? 0;
+  const isReady = result !== null;
+  useEffect(() => {
+    if (result && currentIndex >= result.slideCount) {
+      setCurrentIndex(Math.max(0, result.slideCount - 1));
+    }
+  }, [result?.slideCount, currentIndex]);
+  useEffect(() => {
+    setCurrentClick(0);
+  }, [currentIndex]);
+  useCallback(
+    (index) => {
+      setCurrentIndex(Math.max(0, Math.min(index, slideCount - 1)));
+    },
+    [slideCount]
+  );
+  useCallback(() => {
+    setCurrentIndex((prev) => Math.min(prev + 1, slideCount - 1));
+  }, [slideCount]);
+  useCallback(() => {
+    setCurrentIndex((prev) => Math.max(prev - 1, 0));
+  }, []);
+  const nextClick = useCallback(() => {
+    setCurrentClick((prev) => Math.min(prev + 1, maxClicks));
+  }, [maxClicks]);
+  const prevClick = useCallback(() => {
+    setCurrentClick((prev) => Math.max(prev - 1, 0));
+  }, []);
+  const resetClicks = useCallback(() => {
+    setCurrentClick(0);
+  }, []);
+  const setClickIndex = useCallback(
+    (index) => {
+      setCurrentClick(Math.max(0, Math.min(index, maxClicks)));
+    },
+    [maxClicks]
+  );
+  const goToSlideWithReset = useCallback(
+    (index) => {
+      setCurrentClick(0);
+      setCurrentIndex(Math.max(0, Math.min(index, slideCount - 1)));
+    },
+    [slideCount]
+  );
+  const nextWithClick = useCallback(() => {
+    if (currentClick < maxClicks) {
+      setCurrentClick((prev) => prev + 1);
+    } else {
+      setCurrentClick(0);
+      setCurrentIndex((prev) => Math.min(prev + 1, slideCount - 1));
+    }
+  }, [currentClick, maxClicks, slideCount]);
+  const prevWithClick = useCallback(() => {
+    if (currentClick > 0) {
+      setCurrentClick((prev) => prev - 1);
+    } else {
+      setCurrentIndex((prev) => Math.max(prev - 1, 0));
+    }
+  }, [currentClick]);
+  const rerender = useCallback(() => {
+    setCurrentIndex((prev) => prev);
+  }, []);
+  return {
+    // Render
+    result,
+    isReady,
+    // Slide
+    currentIndex,
+    slideCount,
+    mode,
+    theme,
+    // Click
+    currentClick,
+    maxClicks,
+    // Slide actions
+    goToSlide: goToSlideWithReset,
+    nextSlide: nextWithClick,
+    prevSlide: prevWithClick,
+    setMode,
+    setTheme,
+    rerender,
+    // Click actions
+    nextClick,
+    prevClick,
+    resetClicks,
+    setClickIndex
+  };
+}
+var DEFAULT_THEMES = [
+  { id: "dark", label: "Dark" },
+  { id: "navy", label: "Navy" },
+  { id: "light", label: "Light" }
+];
+function ThemeSwitcher({
+  currentTheme,
+  onThemeChange,
+  themes = DEFAULT_THEMES,
+  className
+}) {
+  const currentId = typeof currentTheme === "object" && currentTheme !== null && "name" in currentTheme ? currentTheme.name : String(currentTheme);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "2px",
+        padding: "2px",
+        borderRadius: "8px",
+        border: "1px solid rgba(128, 128, 128, 0.2)",
+        backgroundColor: "rgba(128, 128, 128, 0.05)"
+      },
+      children: themes.map((theme) => {
+        const isActive = currentId === theme.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => onThemeChange(theme.id),
+            title: `Theme: ${theme.label}`,
+            style: {
+              height: "28px",
+              padding: "0 10px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              fontFamily: "inherit",
+              fontWeight: isActive ? 600 : 400,
+              display: "flex",
+              alignItems: "center",
+              gap: "5px",
+              transition: "all 0.15s ease",
+              cursor: "pointer",
+              border: "none",
+              lineHeight: 1,
+              whiteSpace: "nowrap",
+              backgroundColor: isActive ? "rgba(128, 128, 128, 0.15)" : "transparent",
+              color: isActive ? "currentColor" : "rgba(128, 128, 128, 0.7)"
+            },
+            children: [
+              theme.icon && /* @__PURE__ */ jsx("span", { style: { fontSize: "13px" }, children: theme.icon }),
+              /* @__PURE__ */ jsx("span", { children: theme.label })
+            ]
+          },
+          theme.id
+        );
+      })
+    }
+  );
+}
+var btnBase = {
+  height: "28px",
+  borderRadius: "6px",
+  fontSize: "12px",
+  fontFamily: "inherit",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "5px",
+  transition: "all 0.15s ease",
+  cursor: "pointer",
+  border: "none",
+  lineHeight: 1,
+  whiteSpace: "nowrap"
+};
+var btnSecondary = {
+  ...btnBase,
+  padding: "0 10px",
+  backgroundColor: "transparent",
+  color: "rgba(128, 128, 128, 0.7)"
+};
+var btnActive = {
+  ...btnBase,
+  padding: "0 10px",
+  fontWeight: 600,
+  backgroundColor: "rgba(128, 128, 128, 0.15)",
+  color: "currentColor"
+};
+var iconBtn = {
+  ...btnBase,
+  width: "28px",
+  padding: 0,
+  backgroundColor: "transparent",
+  color: "rgba(128, 128, 128, 0.7)"
+};
+var disabledStyle = {
+  opacity: 0.3,
+  cursor: "not-allowed"
+};
+function NavigationBar({
+  currentIndex,
+  slideCount,
+  onNavigate,
+  mode,
+  onModeChange,
+  className,
+  showCopy = true,
+  markdown
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    if (!markdown) return;
+    try {
+      await navigator.clipboard.writeText(markdown);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [markdown]);
+  const isFirst = currentIndex === 0;
+  const isLast = currentIndex >= slideCount - 1;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "8px",
+        padding: "8px 0",
+        borderBottom: "1px solid rgba(128, 128, 128, 0.12)",
+        flexWrap: "wrap"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onModeChange("presentation"),
+              style: mode === "presentation" ? btnActive : btnSecondary,
+              title: "Presentation mode (1 slide)",
+              children: "\u25B6 Presentation"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onModeChange("deck"),
+              style: mode === "deck" ? btnActive : btnSecondary,
+              title: "Deck mode (all slides)",
+              children: "\u2630 Deck"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+          mode === "presentation" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onNavigate(currentIndex - 1),
+                disabled: isFirst,
+                style: { ...iconBtn, ...isFirst ? disabledStyle : {} },
+                title: "Previous slide (\u2190)",
+                children: "\u2039"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: currentIndex,
+                onChange: (e) => onNavigate(Number(e.target.value)),
+                style: {
+                  height: "28px",
+                  padding: "0 6px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  fontFamily: "inherit",
+                  border: "none",
+                  backgroundColor: "transparent",
+                  color: "currentColor",
+                  cursor: "pointer",
+                  outline: "none"
+                },
+                title: "Jump to slide",
+                children: Array.from({ length: slideCount }, (_, i) => /* @__PURE__ */ jsxs("option", { value: i, children: [
+                  "Slide ",
+                  i + 1,
+                  " / ",
+                  slideCount
+                ] }, i))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onNavigate(currentIndex + 1),
+                disabled: isLast,
+                style: { ...iconBtn, ...isLast ? disabledStyle : {} },
+                title: "Next slide (\u2192)",
+                children: "\u203A"
+              }
+            )
+          ] }),
+          mode === "deck" && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "rgba(128, 128, 128, 0.6)", padding: "0 8px" }, children: [
+            slideCount,
+            " slides"
+          ] }),
+          showCopy && markdown && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleCopy,
+              style: btnSecondary,
+              title: "Copy markdown source",
+              children: copied ? "\u2713 Copied" : "\u29C9 Copy"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PresentationView({
+  html,
+  css,
+  themeCss,
+  currentIndex,
+  slideCount,
+  className
+}) {
+  const presentationCss = `
+    .slide-presentation-host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+    .slide-presentation-host > div {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+    }
+    .slide-presentation-host > div > svg {
+      position: absolute;
+      visibility: hidden;
+      opacity: 0;
+      pointer-events: none;
+      width: min(100%, calc((100vh - 120px) * (16 / 9)));
+      max-width: 1400px;
+      height: auto;
+      max-height: calc(100vh - 120px);
+      aspect-ratio: 16 / 9;
+      margin: 0 auto;
+    }
+    .slide-presentation-host > div > svg:nth-child(${currentIndex + 1}) {
+      position: relative;
+      visibility: visible;
+      opacity: 1;
+      pointer-events: auto;
+      display: block;
+    }
+  `;
+  return /* @__PURE__ */ jsxs("div", { className, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx("style", { children: css }),
+    /* @__PURE__ */ jsx("style", { children: themeCss }),
+    /* @__PURE__ */ jsx("style", { children: presentationCss }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "slide-presentation-host",
+        style: { padding: "16px 0" },
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  ] });
+}
+function DeckView({
+  html,
+  css,
+  themeCss,
+  slideCount,
+  className
+}) {
+  const deckCss = `
+    .slide-deck-host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      padding: 16px 0;
+    }
+    .slide-deck-host > div {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+    }
+    .slide-deck-host > div > svg {
+      display: block !important;
+      width: 100% !important;
+      max-width: 960px;
+      height: auto !important;
+      aspect-ratio: 16 / 9;
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
+    .slide-deck-host > div > svg:hover {
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    }
+  `;
+  return /* @__PURE__ */ jsxs("div", { className, style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx("style", { children: css }),
+    /* @__PURE__ */ jsx("style", { children: themeCss }),
+    /* @__PURE__ */ jsx("style", { children: deckCss }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "slide-deck-host",
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    )
+  ] });
+}
+var DEFAULT_THEME_OPTIONS = [
+  { id: "dark", label: "Dark" },
+  { id: "navy", label: "Navy" },
+  { id: "light", label: "Light" }
+];
+function SlideViewer({
+  markdown,
+  initialTheme = "dark",
+  initialMode = "presentation",
+  className,
+  showThemeSwitcher = true,
+  showNavigation = true,
+  enableKeyboard = true,
+  enableClicks = false,
+  fullscreen = false,
+  themeOptions = DEFAULT_THEME_OPTIONS,
+  onThemeChange,
+  onSlideChange,
+  onModeChange,
+  onRenderComplete
+}) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const state = useSlideState({
+    markdown,
+    initialTheme,
+    initialMode,
+    enableClicks
+  });
+  const {
+    currentIndex,
+    mode,
+    theme,
+    result,
+    slideCount,
+    currentClick,
+    maxClicks,
+    goToSlide,
+    nextSlide,
+    prevSlide,
+    setMode,
+    setTheme,
+    nextClick,
+    prevClick,
+    resetClicks
+  } = state;
+  useEffect(() => {
+    onThemeChange?.(theme);
+  }, [theme, onThemeChange]);
+  useEffect(() => {
+    onSlideChange?.(currentIndex);
+  }, [currentIndex, onSlideChange]);
+  useEffect(() => {
+    onModeChange?.(mode);
+  }, [mode, onModeChange]);
+  useEffect(() => {
+    if (result) onRenderComplete?.(result);
+  }, [result, onRenderComplete]);
+  useEffect(() => {
+    if (!enableKeyboard) return;
+    const handleKey = (e) => {
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if (e.key === "Escape" && fullscreen && isFullscreen) {
+        e.preventDefault();
+        setIsFullscreen(false);
+        return;
+      }
+      if (mode !== "presentation") return;
+      switch (e.key) {
+        case "ArrowRight":
+        case "PageDown":
+        case " ":
+          e.preventDefault();
+          if (enableClicks && currentClick < maxClicks) {
+            nextClick();
+          } else {
+            nextSlide();
+          }
+          break;
+        case "ArrowLeft":
+        case "PageUp":
+          e.preventDefault();
+          if (enableClicks && currentClick > 0) {
+            prevClick();
+          } else {
+            prevSlide();
+          }
+          break;
+        case "Home":
+          e.preventDefault();
+          goToSlide(0);
+          break;
+        case "End":
+          e.preventDefault();
+          goToSlide(slideCount - 1);
+          break;
+        case "f":
+        case "F":
+          if (fullscreen) {
+            e.preventDefault();
+            setIsFullscreen((prev) => !prev);
+          }
+          break;
+      }
+    };
+    window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [enableKeyboard, mode, fullscreen, isFullscreen, enableClicks, currentClick, maxClicks, nextClick, prevClick, nextSlide, prevSlide, goToSlide, slideCount]);
+  useEffect(() => {
+    if (!enableClicks || !result || mode !== "presentation") return;
+    const timer = setTimeout(() => {
+      const container = document.querySelector(".slide-presentation-host > div");
+      if (!container) return;
+      container.querySelectorAll("[data-click-group]").forEach((el) => {
+        const group = parseInt(el.getAttribute("data-click-group") ?? "0", 10);
+        const isVisible = group <= currentClick;
+        el.classList.toggle("visible", isVisible);
+      });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [enableClicks, currentClick, result, currentIndex, mode]);
+  useEffect(() => {
+    if (!result || result.mermaidBlocks.length === 0) return;
+    const timer = setTimeout(() => {
+      const containers = document.querySelectorAll(".slide-presentation-host > div, .slide-deck-host > div");
+      containers.forEach((container) => {
+        if (container instanceof HTMLElement) {
+          const themeName2 = typeof theme === "string" ? theme : "dark";
+          renderMermaidDiagrams(container, themeName2).catch(() => {
+          });
+        }
+      });
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [result, theme, currentIndex, mode]);
+  const handleThemeChange = useCallback(
+    (themeId) => {
+      setTheme(themeId);
+    },
+    [setTheme]
+  );
+  const toggleFullscreen = useCallback(() => {
+    setIsFullscreen((prev) => !prev);
+  }, []);
+  if (!result) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className,
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "80px 0",
+          color: "rgba(128, 128, 128, 0.5)",
+          fontSize: "13px",
+          fontFamily: "inherit"
+        },
+        children: "No slide content"
+      }
+    );
+  }
+  const themeName = typeof theme === "string" ? theme : theme.name;
+  const fullscreenCss = fullscreen ? `
+    .slide-viewer-fullscreen {
+      position: fixed !important;
+      inset: 0 !important;
+      z-index: 9999 !important;
+      background: #000 !important;
+      padding: 24px !important;
+      overflow-y: auto !important;
+      display: flex !important;
+      flex-direction: column !important;
+    }
+    .slide-viewer-fullscreen .slide-presentation-host {
+      flex: 1 !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+    }
+  ` : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${className ?? ""} ${isFullscreen ? "slide-viewer-fullscreen" : ""}`.trim(),
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        gap: "12px",
+        fontFamily: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        ...isFullscreen ? { background: "#000", color: "#fff" } : {}
+      },
+      children: [
+        fullscreen && /* @__PURE__ */ jsx("style", { children: fullscreenCss }),
+        enableClicks && mode === "presentation" && result.clickCss && /* @__PURE__ */ jsx("style", { children: result.clickCss }),
+        (showThemeSwitcher || showNavigation || fullscreen) && /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          gap: "12px",
+          flexWrap: "wrap",
+          ...isFullscreen ? { borderBottom: "1px solid rgba(255,255,255,0.1)", paddingBottom: "8px" } : {}
+        }, children: [
+          /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: showThemeSwitcher && /* @__PURE__ */ jsx(
+            ThemeSwitcher,
+            {
+              currentTheme: themeName,
+              onThemeChange: handleThemeChange,
+              themes: themeOptions
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+            showNavigation && /* @__PURE__ */ jsx(
+              NavigationBar,
+              {
+                currentIndex,
+                slideCount,
+                onNavigate: goToSlide,
+                mode,
+                onModeChange: setMode,
+                markdown
+              }
+            ),
+            fullscreen && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: toggleFullscreen,
+                style: {
+                  height: "28px",
+                  padding: "0 10px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  fontFamily: "inherit",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "5px",
+                  border: "none",
+                  cursor: "pointer",
+                  backgroundColor: "transparent",
+                  color: isFullscreen ? "#fff" : "rgba(128,128,128,0.7)",
+                  transition: "all 0.15s ease"
+                },
+                title: isFullscreen ? "Exit fullscreen (ESC)" : "Fullscreen (F)",
+                children: isFullscreen ? "\u22A1 Exit" : "\u229E Fullscreen"
+              }
+            )
+          ] })
+        ] }),
+        enableClicks && maxClicks > 0 && mode === "presentation" && /* @__PURE__ */ jsxs("div", { style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          fontSize: "11px",
+          color: isFullscreen ? "rgba(255,255,255,0.5)" : "rgba(128,128,128,0.5)"
+        }, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Click ",
+            currentClick,
+            " / ",
+            maxClicks
+          ] }),
+          /* @__PURE__ */ jsx("div", { style: {
+            flex: 1,
+            height: "2px",
+            borderRadius: "1px",
+            backgroundColor: isFullscreen ? "rgba(255,255,255,0.1)" : "rgba(128,128,128,0.1)"
+          }, children: /* @__PURE__ */ jsx("div", { style: {
+            height: "100%",
+            borderRadius: "1px",
+            backgroundColor: isFullscreen ? "rgba(255,255,255,0.3)" : "rgba(128,128,128,0.3)",
+            width: `${maxClicks > 0 ? currentClick / maxClicks * 100 : 0}%`,
+            transition: "width 0.2s ease"
+          } }) })
+        ] }),
+        mode === "presentation" ? /* @__PURE__ */ jsx(
+          PresentationView,
+          {
+            html: result.html,
+            css: result.css,
+            themeCss: result.themeCss,
+            currentIndex,
+            slideCount
+          }
+        ) : /* @__PURE__ */ jsx(
+          DeckView,
+          {
+            html: result.html,
+            css: result.css,
+            themeCss: result.themeCss,
+            slideCount
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { DeckView, NavigationBar, PresentationView, SlideViewer, ThemeSwitcher, useSlideState };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map