themed-markdown 0.1.35 → 0.1.36

package/dist/index.d.ts

@@ -2,10 +2,14 @@ export { IndustryMarkdownSlide } from './industryMarkdown/components/IndustryMar
 export type { IndustryMarkdownSlideProps } from './industryMarkdown/components/IndustryMarkdownSlide';
 export { SlidePresentation } from './industryMarkdown/components/SlidePresentation';
 export type { SlidePresentationProps } from './industryMarkdown/components/SlidePresentation';
+export { SlidePresentationBook } from './industryMarkdown/components/SlidePresentationBook';
+export type { SlidePresentationBookProps } from './industryMarkdown/components/SlidePresentationBook';
 export { DocumentView } from './industryMarkdown/components/DocumentView';
 export type { DocumentViewProps } from './industryMarkdown/components/DocumentView';
-export { IndustryEditableMarkdownSlide } from './industryMarkdown/components/IndustryEditableMarkdownSlide';
-export type { IndustryEditableMarkdownSlideProps } from './industryMarkdown/components/IndustryEditableMarkdownSlide';
+export { SlideNavigationHeader } from './industryMarkdown/components/SlideNavigationHeader';
+export type { SlideNavigationHeaderProps } from './industryMarkdown/components/SlideNavigationHeader';
+export { SlideSearchBar } from './industryMarkdown/components/SlideSearchBar';
+export type { SlideSearchBarProps, SearchResult } from './industryMarkdown/components/SlideSearchBar';
 export { createIndustryMarkdownComponents } from './industryMarkdown/components/IndustryMarkdownComponents';
 export { IndustryHtmlModal, useIndustryHtmlModal } from './industryMarkdown/components/IndustryHtmlModal';
 export { IndustryPlaceholderModal } from './industryMarkdown/components/IndustryPlaceholderModal';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAC5F,YAAY,EAAE,0BAA0B,EAAE,MAAM,qDAAqD,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,YAAY,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AAE9F,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,YAAY,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,6BAA6B,EAAE,MAAM,6DAA6D,CAAC;AAC5G,YAAY,EAAE,kCAAkC,EAAE,MAAM,6DAA6D,CAAC;AAEtH,OAAO,EAAE,gCAAgC,EAAE,MAAM,0DAA0D,CAAC;AAG5G,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAC1G,OAAO,EAAE,wBAAwB,EAAE,MAAM,wDAAwD,CAAC;AAClG,OAAO,EAAE,oBAAoB,EAAE,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAE,0BAA0B,EAAE,MAAM,0DAA0D,CAAC;AACtG,OAAO,EAAE,8BAA8B,EAAE,MAAM,8DAA8D,CAAC;AAG9G,OAAO,EACL,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uCAAuC,EACvC,sBAAsB,EACtB,iBAAiB,EACjB,kCAAkC,EAClC,0BAA0B,EAC1B,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAG7E,YAAY,EACV,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,qBAAqB,GACtB,MAAM,uCAAuC,CAAC;AAE/C,YAAY,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,SAAS,GACV,MAAM,+CAA+C,CAAC;AAGvD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,SAAS,EACV,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACf,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACX,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAC5F,YAAY,EAAE,0BAA0B,EAAE,MAAM,qDAAqD,CAAC;AAEtG,OAAO,EAAE,iBAAiB,EAAE,MAAM,iDAAiD,CAAC;AACpF,YAAY,EAAE,sBAAsB,EAAE,MAAM,iDAAiD,CAAC;AAE9F,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAC5F,YAAY,EAAE,0BAA0B,EAAE,MAAM,qDAAqD,CAAC;AAEtG,OAAO,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAC1E,YAAY,EAAE,iBAAiB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,qBAAqB,EAAE,MAAM,qDAAqD,CAAC;AAC5F,YAAY,EAAE,0BAA0B,EAAE,MAAM,qDAAqD,CAAC;AAEtG,OAAO,EAAE,cAAc,EAAE,MAAM,8CAA8C,CAAC;AAC9E,YAAY,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAC;AAEtG,OAAO,EAAE,gCAAgC,EAAE,MAAM,0DAA0D,CAAC;AAG5G,OAAO,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,iDAAiD,CAAC;AAC1G,OAAO,EAAE,wBAAwB,EAAE,MAAM,wDAAwD,CAAC;AAClG,OAAO,EAAE,oBAAoB,EAAE,MAAM,oDAAoD,CAAC;AAC1F,OAAO,EAAE,0BAA0B,EAAE,MAAM,0DAA0D,CAAC;AACtG,OAAO,EAAE,8BAA8B,EAAE,MAAM,8DAA8D,CAAC;AAG9G,OAAO,EACL,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uCAAuC,EACvC,sBAAsB,EACtB,iBAAiB,EACjB,kCAAkC,EAClC,0BAA0B,EAC1B,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,4CAA4C,CAAC;AAEpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAG7E,YAAY,EACV,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,qBAAqB,GACtB,MAAM,uCAAuC,CAAC;AAE/C,YAAY,EACV,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,SAAS,GACV,MAAM,+CAA+C,CAAC;AAGvD,YAAY,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EACL,aAAa,EACb,QAAQ,EACR,SAAS,EACV,MAAM,+BAA+B,CAAC;AACvC,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACf,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,kBAAkB,EAClB,UAAU,EACX,MAAM,wBAAwB,CAAC"}

package/dist/index.mjs

@@ -4705,8 +4705,517 @@ var SlidePresentation = ({
     onClear: clearSearch
   }));
 };
+// industryMarkdown/components/SlidePresentationBook.tsx
+import React16, { useState as useState11, useCallback as useCallback3, useRef as useRef10, useEffect as useEffect10 } from "react";
+var SlidePresentationBook = ({
+  slides,
+  initialSlide = 0,
+  onSlideChange,
+  onCheckboxChange,
+  showNavigation = true,
+  showSlideCounter = true,
+  showFullscreenButton = false,
+  containerHeight = "100%",
+  viewMode = "single",
+  slideIdPrefix = "slide",
+  enableHtmlPopout = true,
+  enableKeyboardScrolling = true,
+  onLinkClick,
+  handleRunBashCommand,
+  handlePromptCopy,
+  fontSizeScale
+}) => {
+  const adjustedInitialSlide = viewMode === "book" ? Math.floor(initialSlide / 2) * 2 : initialSlide;
+  const [currentSlide, setCurrentSlide] = useState11(adjustedInitialSlide);
+  const [isFullscreen, setIsFullscreen] = useState11(false);
+  const [showTOC, setShowTOC] = useState11(false);
+  const [showSearch, setShowSearch] = useState11(false);
+  const [searchQuery, setSearchQuery] = useState11("");
+  const [searchResults, setSearchResults] = useState11([]);
+  const [currentSearchResult, setCurrentSearchResult] = useState11(-1);
+  const [searchStartSlide, setSearchStartSlide] = useState11(0);
+  const containerRef = useRef10(null);
+  const { theme: theme2 } = useTheme();
+  const slideTitles = extractAllSlideTitles(slides);
+  const stepSize = viewMode === "book" ? 2 : 1;
+  const navigateToSlide = useCallback3((slideIndex) => {
+    const targetSlide = viewMode === "book" ? Math.floor(slideIndex / 2) * 2 : slideIndex;
+    if (targetSlide >= 0 && targetSlide < slides.length) {
+      setCurrentSlide(targetSlide);
+      onSlideChange?.(targetSlide);
+      setShowTOC(false);
+    }
+  }, [slides.length, onSlideChange, viewMode]);
+  useEffect10(() => {
+    if (!searchQuery.trim()) {
+      setSearchResults([]);
+      setCurrentSearchResult(-1);
+      return;
+    }
+    const query = searchQuery.toLowerCase();
+    const results = [];
+    slides.forEach((slide, index) => {
+      const slideText = slide.toLowerCase();
+      const matches = slideText.split(query).length - 1;
+      if (matches > 0) {
+        results.push({ slideIndex: index, count: matches });
+      }
+    });
+    setSearchResults(results);
+    setCurrentSearchResult(-1);
+  }, [searchQuery, slides]);
+  const navigateToSearchResult = useCallback3((resultIndex) => {
+    if (searchResults.length === 0)
+      return;
+    let newIndex = resultIndex;
+    if (currentSearchResult === -1) {
+      newIndex = resultIndex < 0 ? searchResults.length - 1 : 0;
+    } else {
+      newIndex = (resultIndex % searchResults.length + searchResults.length) % searchResults.length;
+    }
+    setCurrentSearchResult(newIndex);
+    const targetSlide = searchResults[newIndex].slideIndex;
+    if (targetSlide !== currentSlide) {
+      navigateToSlide(targetSlide);
+    }
+  }, [searchResults, navigateToSlide, currentSlide, currentSearchResult]);
+  const closeSearch = useCallback3(() => {
+    setShowSearch(false);
+  }, []);
+  const clearSearch = useCallback3(() => {
+    setSearchQuery("");
+    setSearchResults([]);
+    setCurrentSearchResult(-1);
+    setSearchStartSlide(0);
+  }, []);
+  const goToPreviousSlide = useCallback3(() => {
+    navigateToSlide(currentSlide - stepSize);
+  }, [currentSlide, navigateToSlide, stepSize]);
+  const goToNextSlide = useCallback3(() => {
+    navigateToSlide(currentSlide + stepSize);
+  }, [currentSlide, navigateToSlide, stepSize]);
+  const toggleFullscreen = useCallback3(() => {
+    if (!containerRef.current)
+      return;
+    if (!isFullscreen) {
+      containerRef.current.requestFullscreen?.();
+      setIsFullscreen(true);
+    } else {
+      document.exitFullscreen?.();
+      setIsFullscreen(false);
+    }
+  }, [isFullscreen]);
+  useEffect10(() => {
+    const handleKeyDown = (event) => {
+      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        if (showSearch && (event.key === "Tab" || event.key === "Enter" || event.key === "Escape")) {} else {
+          return;
+        }
+      }
+      if ((event.metaKey || event.ctrlKey) && (event.key === "f" || event.key === "F")) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!showSearch) {
+          setSearchStartSlide(currentSlide);
+          setShowSearch(true);
+        } else {
+          closeSearch();
+        }
+        return;
+      }
+      if (showSearch) {
+        switch (event.key) {
+          case "Escape":
+            event.preventDefault();
+            closeSearch();
+            return;
+          case "Tab":
+            event.preventDefault();
+            if (event.shiftKey) {
+              navigateToSearchResult(currentSearchResult - 1);
+            } else {
+              navigateToSearchResult(currentSearchResult + 1);
+            }
+            return;
+          case "Enter":
+            event.preventDefault();
+            if (currentSearchResult >= 0 && currentSearchResult < searchResults.length) {
+              const targetSlide = searchResults[currentSearchResult].slideIndex;
+              if (targetSlide !== currentSlide) {
+                navigateToSlide(targetSlide);
+              }
+            }
+            closeSearch();
+            return;
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          goToPreviousSlide();
+          break;
+        case "ArrowRight":
+          event.preventDefault();
+          goToNextSlide();
+          break;
+        case " ":
+          event.preventDefault();
+          goToNextSlide();
+          break;
+        case "Enter":
+          event.preventDefault();
+          goToNextSlide();
+          break;
+        case "Backspace":
+          event.preventDefault();
+          goToPreviousSlide();
+          break;
+        case "Home":
+          event.preventDefault();
+          navigateToSlide(0);
+          break;
+        case "End":
+          event.preventDefault();
+          navigateToSlide(slides.length - 1);
+          break;
+        case "f":
+        case "F":
+          if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+            toggleFullscreen();
+          }
+          break;
+        case "Escape":
+          if (showTOC) {
+            event.preventDefault();
+            setShowTOC(false);
+          }
+          break;
+        case "t":
+        case "T":
+          if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+            event.preventDefault();
+            setShowTOC((prev) => !prev);
+          }
+          break;
+      }
+      if (!event.ctrlKey && !event.metaKey && !event.altKey) {
+        const num = parseInt(event.key);
+        if (num >= 1 && num <= 9 && num <= slides.length) {
+          event.preventDefault();
+          navigateToSlide(num - 1);
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [goToPreviousSlide, goToNextSlide, navigateToSlide, slides.length, toggleFullscreen, showTOC, showSearch, closeSearch, navigateToSearchResult, currentSearchResult, searchResults]);
+  useEffect10(() => {
+    if (currentSlide >= slides.length && slides.length > 0) {
+      setCurrentSlide(slides.length - 1);
+    }
+  }, [slides.length, currentSlide]);
+  const leftSlideIndex = currentSlide;
+  const rightSlideIndex = viewMode === "book" ? currentSlide + 1 : -1;
+  return /* @__PURE__ */ React16.createElement("div", {
+    ref: containerRef,
+    style: {
+      height: containerHeight,
+      display: "flex",
+      flexDirection: "column",
+      backgroundColor: theme2.colors.background,
+      position: "relative"
+    }
+  }, showNavigation && /* @__PURE__ */ React16.createElement(SlideNavigationHeader, {
+    currentSlide,
+    totalSlides: slides.length,
+    showTOC,
+    isFullscreen,
+    showSlideCounter,
+    showFullscreenButton,
+    theme: theme2,
+    onPrevious: goToPreviousSlide,
+    onNext: goToNextSlide,
+    onToggleTOC: () => setShowTOC((prev) => !prev),
+    onToggleFullscreen: toggleFullscreen
+  }), /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: "hidden",
+      position: "relative",
+      display: "flex"
+    }
+  }, /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      bottom: 0,
+      width: "300px",
+      backgroundColor: theme2.colors.backgroundSecondary,
+      borderRight: `1px solid ${theme2.colors.border}`,
+      transform: showTOC ? "translateX(0)" : "translateX(-100%)",
+      transition: "transform 0.3s ease",
+      zIndex: 10,
+      overflowY: "auto",
+      overflowX: "hidden"
+    }
+  }, /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      padding: theme2.space[3],
+      borderBottom: `1px solid ${theme2.colors.border}`,
+      backgroundColor: theme2.colors.background,
+      position: "sticky",
+      top: 0,
+      zIndex: 1
+    }
+  }, /* @__PURE__ */ React16.createElement("h3", {
+    style: {
+      margin: 0,
+      fontSize: theme2.fontSizes[3],
+      fontFamily: theme2.fonts.heading,
+      color: theme2.colors.text,
+      fontWeight: 600
+    }
+  }, "Table of Contents"), /* @__PURE__ */ React16.createElement("p", {
+    style: {
+      margin: `${theme2.space[1]}px 0 0 0`,
+      fontSize: theme2.fontSizes[0],
+      color: theme2.colors.textSecondary,
+      fontFamily: theme2.fonts.body
+    }
+  }, slides.length, " ", slides.length === 1 ? "slide" : "slides")), /* @__PURE__ */ React16.createElement("div", {
+    style: { padding: theme2.space[2] }
+  }, slideTitles.map((title, index) => {
+    const isCurrentPage = viewMode === "book" ? index === leftSlideIndex || index === rightSlideIndex : index === currentSlide;
+    return /* @__PURE__ */ React16.createElement("button", {
+      key: index,
+      onClick: () => navigateToSlide(index),
+      style: {
+        display: "block",
+        width: "100%",
+        padding: `${theme2.space[2]}px ${theme2.space[3]}px`,
+        marginBottom: theme2.space[1],
+        backgroundColor: isCurrentPage ? theme2.colors.primary : "transparent",
+        border: "none",
+        borderRadius: theme2.radii[1],
+        color: isCurrentPage ? theme2.colors.background : theme2.colors.text,
+        fontSize: theme2.fontSizes[1],
+        fontFamily: theme2.fonts.body,
+        textAlign: "left",
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        position: "relative"
+      },
+      onMouseOver: (e) => {
+        if (!isCurrentPage) {
+          e.currentTarget.style.backgroundColor = theme2.colors.backgroundHover;
+        }
+      },
+      onMouseOut: (e) => {
+        if (!isCurrentPage) {
+          e.currentTarget.style.backgroundColor = "transparent";
+        }
+      }
+    }, /* @__PURE__ */ React16.createElement("div", {
+      style: { display: "flex", alignItems: "center", gap: theme2.space[2] }
+    }, /* @__PURE__ */ React16.createElement("span", {
+      style: {
+        display: "inline-block",
+        minWidth: "24px",
+        fontSize: theme2.fontSizes[0],
+        fontFamily: theme2.fonts.monospace,
+        opacity: 0.6
+      }
+    }, index + 1, "."), /* @__PURE__ */ React16.createElement("span", {
+      style: {
+        flex: 1,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap"
+      }
+    }, title)), isCurrentPage && /* @__PURE__ */ React16.createElement("div", {
+      style: {
+        position: "absolute",
+        left: 0,
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "3px",
+        height: "60%",
+        backgroundColor: isCurrentPage ? theme2.colors.background : theme2.colors.primary,
+        borderRadius: "0 2px 2px 0"
+      }
+    }));
+  }))), showTOC && /* @__PURE__ */ React16.createElement("div", {
+    onClick: () => setShowTOC(false),
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(0, 0, 0, 0.3)",
+      zIndex: 9,
+      cursor: "pointer"
+    }
+  }), /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      flex: 1,
+      position: "relative",
+      display: "flex",
+      gap: 0,
+      padding: 0,
+      backgroundColor: theme2.colors.background
+    }
+  }, slides.length > 0 ? /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      flex: 1,
+      backgroundColor: "transparent",
+      borderRadius: 0,
+      boxShadow: "none",
+      overflowY: "auto",
+      overflowX: "hidden",
+      position: "relative"
+    }
+  }, /* @__PURE__ */ React16.createElement(IndustryMarkdownSlide, {
+    content: slides[leftSlideIndex] || "",
+    slideIdPrefix: `${slideIdPrefix}-${leftSlideIndex}`,
+    slideIndex: leftSlideIndex,
+    isVisible: true,
+    theme: theme2,
+    onCheckboxChange,
+    enableHtmlPopout,
+    enableKeyboardScrolling,
+    onLinkClick,
+    handleRunBashCommand,
+    handlePromptCopy,
+    fontSizeScale,
+    searchQuery: showSearch ? searchQuery : undefined,
+    transparentBackground: viewMode === "book",
+    additionalPadding: viewMode === "book" ? {
+      left: `${theme2.space[4]}px`,
+      right: `${theme2.space[2]}px`
+    } : undefined,
+    disableScroll: viewMode === "book"
+  }), viewMode === "book" && /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      position: "absolute",
+      top: 0,
+      right: `${Math.floor(theme2.space[2] / 2)}px`,
+      bottom: 0,
+      width: "1px",
+      backgroundColor: theme2.colors.border
+    }
+  })), viewMode === "book" && rightSlideIndex < slides.length && /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      flex: 1,
+      backgroundColor: "transparent",
+      borderRadius: 0,
+      boxShadow: "none",
+      overflowY: "auto",
+      overflowX: "hidden",
+      position: "relative"
+    }
+  }, /* @__PURE__ */ React16.createElement(IndustryMarkdownSlide, {
+    content: slides[rightSlideIndex] || "",
+    slideIdPrefix: `${slideIdPrefix}-${rightSlideIndex}`,
+    slideIndex: rightSlideIndex,
+    isVisible: true,
+    theme: theme2,
+    onCheckboxChange,
+    enableHtmlPopout,
+    enableKeyboardScrolling,
+    onLinkClick,
+    handleRunBashCommand,
+    handlePromptCopy,
+    fontSizeScale,
+    searchQuery: showSearch ? searchQuery : undefined,
+    transparentBackground: true,
+    additionalPadding: {
+      left: `${theme2.space[2]}px`,
+      right: `${theme2.space[4]}px`
+    },
+    disableScroll: true
+  })), viewMode === "book" && rightSlideIndex >= slides.length && /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      flex: 1,
+      backgroundColor: "transparent",
+      borderRadius: 0,
+      boxShadow: "none",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: theme2.colors.muted,
+      fontSize: theme2.fontSizes[1],
+      fontFamily: theme2.fonts.body,
+      fontStyle: "italic",
+      padding: `0 ${theme2.space[4]}px 0 ${theme2.space[2]}px`
+    }
+  }, "End of presentation")) : /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      color: theme2.colors.muted,
+      fontSize: theme2.fontSizes[2],
+      fontFamily: theme2.fonts.body
+    }
+  }, "No slides available")), viewMode === "book" && slides.length > 0 && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: theme2.space[3],
+      left: theme2.space[3],
+      fontSize: theme2.fontSizes[0],
+      color: theme2.colors.textSecondary,
+      fontFamily: theme2.fonts.monospace
+    }
+  }, leftSlideIndex + 1), rightSlideIndex < slides.length && /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: theme2.space[3],
+      right: theme2.space[3],
+      fontSize: theme2.fontSizes[0],
+      color: theme2.colors.textSecondary,
+      fontFamily: theme2.fonts.monospace
+    }
+  }, rightSlideIndex + 1))), showNavigation && slides.length > 1 && /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      height: "2px",
+      backgroundColor: theme2.colors.border,
+      opacity: 0.3
+    }
+  }, /* @__PURE__ */ React16.createElement("div", {
+    style: {
+      height: "100%",
+      width: `${(currentSlide + stepSize) / slides.length * 100}%`,
+      backgroundColor: theme2.colors.primary,
+      transition: "width 0.3s ease"
+    }
+  })), /* @__PURE__ */ React16.createElement(SlideSearchBar, {
+    showSearch,
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    currentSearchResult,
+    searchStartSlide,
+    slideTitles,
+    theme: theme2,
+    onResultClick: (index, slideIndex) => {
+      setCurrentSearchResult(index);
+      navigateToSlide(slideIndex);
+    },
+    onClose: closeSearch,
+    onClear: clearSearch
+  }));
+};
 // industryMarkdown/components/DocumentView.tsx
-import React16, { useRef as useRef10, useCallback as useCallback3 } from "react";
+import React17, { useRef as useRef11, useCallback as useCallback4 } from "react";
 var DocumentView = ({
   content,
   showSegmented = true,
@@ -4725,10 +5234,10 @@ var DocumentView = ({
   repositoryInfo,
   fontSizeScale
 }) => {
-  const containerRef = useRef10(null);
-  const sectionRefs = useRef10([]);
+  const containerRef = useRef11(null);
+  const sectionRefs = useRef11([]);
   const { theme: theme2 } = useTheme();
-  const scrollToSection = useCallback3((sectionIndex) => {
+  const scrollToSection = useCallback4((sectionIndex) => {
     if (sectionRefs.current[sectionIndex]) {
       sectionRefs.current[sectionIndex]?.scrollIntoView({
         behavior: "smooth",
@@ -4736,12 +5245,12 @@ var DocumentView = ({
       });
     }
   }, []);
-  const handleSectionClick = useCallback3((index) => {
+  const handleSectionClick = useCallback4((index) => {
     scrollToSection(index);
     onSectionClick?.(index);
   }, [scrollToSection, onSectionClick]);
   if (typeof content === "string") {
-    return /* @__PURE__ */ React16.createElement("div", {
+    return /* @__PURE__ */ React17.createElement("div", {
       ref: containerRef,
       style: {
         height: "100%",
@@ -4749,12 +5258,12 @@ var DocumentView = ({
         backgroundColor: theme2.colors.background,
         padding: typeof padding === "number" ? `${padding}px` : padding
       }
-    }, /* @__PURE__ */ React16.createElement("div", {
+    }, /* @__PURE__ */ React17.createElement("div", {
       style: {
         maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
         margin: "0 auto"
       }
-    }, /* @__PURE__ */ React16.createElement(IndustryMarkdownSlide, {
+    }, /* @__PURE__ */ React17.createElement(IndustryMarkdownSlide, {
       content,
       slideIdPrefix,
       slideIndex: 0,
@@ -4776,7 +5285,7 @@ var DocumentView = ({
 ---
 
 `);
-    return /* @__PURE__ */ React16.createElement("div", {
+    return /* @__PURE__ */ React17.createElement("div", {
       ref: containerRef,
       style: {
         height: "100%",
@@ -4784,12 +5293,12 @@ var DocumentView = ({
         backgroundColor: theme2.colors.background,
         padding: typeof padding === "number" ? `${padding}px` : padding
       }
-    }, /* @__PURE__ */ React16.createElement("div", {
+    }, /* @__PURE__ */ React17.createElement("div", {
       style: {
         maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
         margin: "0 auto"
       }
-    }, /* @__PURE__ */ React16.createElement(IndustryMarkdownSlide, {
+    }, /* @__PURE__ */ React17.createElement(IndustryMarkdownSlide, {
       content: fullContent,
       slideIdPrefix,
       slideIndex: 0,
@@ -4805,7 +5314,7 @@ var DocumentView = ({
       repositoryInfo
     })));
   }
-  return /* @__PURE__ */ React16.createElement("div", {
+  return /* @__PURE__ */ React17.createElement("div", {
     ref: containerRef,
     style: {
       height: "100%",
@@ -4813,12 +5322,12 @@ var DocumentView = ({
       backgroundColor: theme2.colors.background,
       padding: typeof padding === "number" ? `${padding}px` : padding
     }
-  }, /* @__PURE__ */ React16.createElement("div", {
+  }, /* @__PURE__ */ React17.createElement("div", {
     style: {
       maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
       margin: "0 auto"
     }
-  }, content.map((slideContent, index) => /* @__PURE__ */ React16.createElement("div", {
+  }, content.map((slideContent, index) => /* @__PURE__ */ React17.createElement("div", {
     key: index,
     ref: (el) => {
       if (el)
@@ -4828,7 +5337,7 @@ var DocumentView = ({
       marginBottom: index < content.length - 1 ? "48px" : "0",
       scrollMarginTop: "20px"
     }
-  }, showSectionHeaders && /* @__PURE__ */ React16.createElement("div", {
+  }, showSectionHeaders && /* @__PURE__ */ React17.createElement("div", {
     onClick: () => handleSectionClick(index),
     style: {
       display: "flex",
@@ -4847,7 +5356,7 @@ var DocumentView = ({
     onMouseOut: (e) => {
       e.currentTarget.style.opacity = "0.7";
     }
-  }, /* @__PURE__ */ React16.createElement("span", {
+  }, /* @__PURE__ */ React17.createElement("span", {
     style: {
       fontSize: "11px",
       fontWeight: 600,
@@ -4855,7 +5364,7 @@ var DocumentView = ({
       textTransform: "uppercase",
       letterSpacing: "0.5px"
     }
-  }, "Section ", index + 1, " of ", content.length)), /* @__PURE__ */ React16.createElement(IndustryMarkdownSlide, {
+  }, "Section ", index + 1, " of ", content.length)), /* @__PURE__ */ React17.createElement(IndustryMarkdownSlide, {
     content: slideContent,
     slideIdPrefix: `${slideIdPrefix}-${index}`,
     slideIndex: index,
@@ -4869,7 +5378,7 @@ var DocumentView = ({
     fontSizeScale,
     handlePromptCopy,
     repositoryInfo
-  }), showSeparators && index < content.length - 1 && /* @__PURE__ */ React16.createElement("div", {
+  }), showSeparators && index < content.length - 1 && /* @__PURE__ */ React17.createElement("div", {
     style: {
       marginTop: "32px",
       marginBottom: "32px",
@@ -4879,221 +5388,6 @@ var DocumentView = ({
     }
   })))));
 };
-// industryMarkdown/components/IndustryEditableMarkdownSlide.tsx
-import { Pencil, Save, X as X3 } from "lucide-react";
-import React17, { useState as useState11, useCallback as useCallback4, useRef as useRef11, useEffect as useEffect10 } from "react";
-var IndustryEditableMarkdownSlide = ({
-  content,
-  onContentChange,
-  onSave,
-  autoSaveDelay = 1000,
-  editable = true,
-  showEditButton = true,
-  theme: themeProp,
-  ...slideProps
-}) => {
-  let contextTheme;
-  try {
-    const themeContext = useTheme();
-    contextTheme = themeContext.theme;
-  } catch {}
-  const theme2 = themeProp || contextTheme;
-  if (!theme2) {
-    throw new Error("IndustryEditableMarkdownSlide: theme must be provided either as a prop or through ThemeProvider");
-  }
-  const [isEditing, setIsEditing] = useState11(false);
-  const [editContent, setEditContent] = useState11(content);
-  const [isSaving, setIsSaving] = useState11(false);
-  const textareaRef = useRef11(null);
-  const saveTimeoutRef = useRef11(undefined);
-  useEffect10(() => {
-    setEditContent(content);
-  }, [content]);
-  useEffect10(() => {
-    if (isEditing && autoSaveDelay && onSave) {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-      }
-      saveTimeoutRef.current = setTimeout(() => {
-        handleSave(false);
-      }, autoSaveDelay);
-    }
-    return () => {
-      if (saveTimeoutRef.current) {
-        clearTimeout(saveTimeoutRef.current);
-      }
-    };
-  }, [editContent, isEditing, autoSaveDelay]);
-  const handleEdit = useCallback4(() => {
-    setIsEditing(true);
-    setTimeout(() => {
-      textareaRef.current?.focus();
-      textareaRef.current?.setSelectionRange(0, 0);
-    }, 100);
-  }, []);
-  const handleCancel = useCallback4(() => {
-    setEditContent(content);
-    setIsEditing(false);
-  }, [content]);
-  const handleSave = useCallback4(async (exitEditMode = true) => {
-    if (onContentChange) {
-      onContentChange(editContent);
-    }
-    if (onSave) {
-      setIsSaving(true);
-      try {
-        await onSave(editContent);
-      } catch (error) {
-        console.error("Failed to save:", error);
-      } finally {
-        setIsSaving(false);
-      }
-    }
-    if (exitEditMode) {
-      setIsEditing(false);
-    }
-  }, [editContent, onContentChange, onSave]);
-  const handleKeyDown = useCallback4((e) => {
-    if (e.key === "Escape") {
-      handleCancel();
-    } else if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-      e.preventDefault();
-      handleSave();
-    }
-  }, [handleCancel, handleSave]);
-  const handleTextareaChange = useCallback4((e) => {
-    const textarea = e.target;
-    setEditContent(textarea.value);
-    textarea.style.height = "auto";
-    textarea.style.height = `${textarea.scrollHeight}px`;
-  }, []);
-  if (isEditing) {
-    return /* @__PURE__ */ React17.createElement("div", {
-      style: {
-        height: "100%",
-        display: "flex",
-        flexDirection: "column",
-        backgroundColor: theme2.colors.background,
-        color: theme2.colors.text
-      }
-    }, /* @__PURE__ */ React17.createElement("div", {
-      style: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        padding: theme2.space[3],
-        borderBottom: `1px solid ${theme2.colors.border}`,
-        backgroundColor: theme2.colors.muted
-      }
-    }, /* @__PURE__ */ React17.createElement("div", {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: theme2.space[2],
-        fontSize: theme2.fontSizes[1],
-        color: theme2.colors.textSecondary
-      }
-    }, /* @__PURE__ */ React17.createElement(Pencil, {
-      size: 16
-    }), /* @__PURE__ */ React17.createElement("span", null, "Editing Mode"), autoSaveDelay && /* @__PURE__ */ React17.createElement("span", null, "(Auto-save enabled)")), /* @__PURE__ */ React17.createElement("div", {
-      style: {
-        display: "flex",
-        gap: theme2.space[2]
-      }
-    }, /* @__PURE__ */ React17.createElement("button", {
-      onClick: () => handleSave(),
-      disabled: isSaving,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: theme2.space[1],
-        padding: `${theme2.space[1]}px ${theme2.space[3]}px`,
-        backgroundColor: theme2.colors.primary,
-        color: theme2.colors.background,
-        border: "none",
-        borderRadius: theme2.radii[1],
-        fontSize: theme2.fontSizes[1],
-        cursor: isSaving ? "not-allowed" : "pointer",
-        opacity: isSaving ? 0.7 : 1
-      }
-    }, /* @__PURE__ */ React17.createElement(Save, {
-      size: 14
-    }), isSaving ? "Saving..." : "Save"), /* @__PURE__ */ React17.createElement("button", {
-      onClick: handleCancel,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: theme2.space[1],
-        padding: `${theme2.space[1]}px ${theme2.space[3]}px`,
-        backgroundColor: theme2.colors.secondary,
-        color: theme2.colors.text,
-        border: "none",
-        borderRadius: theme2.radii[1],
-        fontSize: theme2.fontSizes[1],
-        cursor: "pointer"
-      }
-    }, /* @__PURE__ */ React17.createElement(X3, {
-      size: 14
-    }), "Cancel"))), /* @__PURE__ */ React17.createElement("div", {
-      style: {
-        flex: 1,
-        padding: theme2.space[4],
-        overflow: "auto"
-      }
-    }, /* @__PURE__ */ React17.createElement("textarea", {
-      ref: textareaRef,
-      value: editContent,
-      onChange: handleTextareaChange,
-      onKeyDown: handleKeyDown,
-      style: {
-        width: "100%",
-        minHeight: "100%",
-        padding: theme2.space[3],
-        backgroundColor: theme2.colors.background,
-        color: theme2.colors.text,
-        border: `1px solid ${theme2.colors.border}`,
-        borderRadius: theme2.radii[2],
-        fontFamily: theme2.fonts.monospace,
-        fontSize: theme2.fontSizes[1],
-        lineHeight: theme2.lineHeights.relaxed,
-        resize: "none",
-        outline: "none"
-      },
-      placeholder: "Enter your markdown content here..."
-    })));
-  }
-  return /* @__PURE__ */ React17.createElement("div", {
-    style: { position: "relative", height: "100%" }
-  }, editable && showEditButton && /* @__PURE__ */ React17.createElement("button", {
-    onClick: handleEdit,
-    style: {
-      position: "absolute",
-      top: theme2.space[3],
-      right: theme2.space[3],
-      display: "flex",
-      alignItems: "center",
-      gap: theme2.space[1],
-      padding: `${theme2.space[1]}px ${theme2.space[3]}px`,
-      backgroundColor: theme2.colors.secondary,
-      color: theme2.colors.background,
-      border: "none",
-      borderRadius: theme2.radii[1],
-      fontSize: theme2.fontSizes[1],
-      cursor: "pointer",
-      zIndex: 10,
-      transition: "opacity 0.2s",
-      opacity: 0.8
-    },
-    onMouseEnter: (e) => e.currentTarget.style.opacity = "1",
-    onMouseLeave: (e) => e.currentTarget.style.opacity = "0.8"
-  }, /* @__PURE__ */ React17.createElement(Pencil, {
-    size: 14
-  }), "Edit"), /* @__PURE__ */ React17.createElement(IndustryMarkdownSlide, {
-    ...slideProps,
-    content,
-    theme: theme2
-  }));
-};
 // industryMarkdown/utils/presentationUtils.ts
 var extractSlideTitle3 = extractSlideTitle;
 function parseMarkdownIntoPresentationFromSource(source) {
@@ -5226,13 +5520,15 @@ export {
   createIndustryMarkdownComponents,
   createGithubFileSource,
   ThemeProvider,
+  SlideSearchBar,
+  SlidePresentationBook,
   SlidePresentation,
+  SlideNavigationHeader,
   IndustryZoomableMermaidDiagram,
   IndustryPlaceholderModal,
   IndustryMermaidModal,
   IndustryMarkdownSlide,
   IndustryLazyMermaidDiagram,
   IndustryHtmlModal,
-  IndustryEditableMarkdownSlide,
   DocumentView
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "themed-markdown",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "description": "Industry-themed markdown renderer with presentation capabilities",
   "type": "module",
   "main": "dist/index.mjs",