@thanh01.pmt/presentation-kit 0.2.10 → 0.2.11

package/dist/react/index.cjs

@@ -1,10 +1,14 @@
 'use strict';
 
 var chunkTGI6YSZP_cjs = require('../chunk-TGI6YSZP.cjs');
-var chunk3Q4RMZVQ_cjs = require('../chunk-3Q4RMZVQ.cjs');
-var react = require('react');
+var chunk53GLUCYC_cjs = require('../chunk-53GLUCYC.cjs');
+var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
+
 function useSlideState(options) {
   const {
     markdown,
@@ -13,12 +17,12 @@ function useSlideState(options) {
     containerId,
     enableClicks = false
   } = options;
-  const [currentIndex, setCurrentIndex] = react.useState(0);
-  const [mode, setMode] = react.useState(initialMode);
-  const [theme, setTheme] = react.useState(initialTheme);
-  const [currentClick, setCurrentClick] = react.useState(0);
-  const renderCountRef = react.useRef(0);
-  const result = react.useMemo(() => {
+  const [currentIndex, setCurrentIndex] = React2.useState(0);
+  const [mode, setMode] = React2.useState(initialMode);
+  const [theme, setTheme] = React2.useState(initialTheme);
+  const [currentClick, setCurrentClick] = React2.useState(0);
+  const renderCountRef = React2.useRef(0);
+  const result = React2.useMemo(() => {
     if (!markdown || !markdown.trim()) return null;
     renderCountRef.current++;
     return chunkTGI6YSZP_cjs.renderSlide(markdown, {
@@ -31,49 +35,49 @@ function useSlideState(options) {
   const slideCount = result?.slideCount ?? 1;
   const maxClicks = result?.maxClicks ?? 0;
   const isReady = result !== null;
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (result && currentIndex >= result.slideCount) {
       setCurrentIndex(Math.max(0, result.slideCount - 1));
     }
   }, [result?.slideCount, currentIndex]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     setCurrentClick(0);
   }, [currentIndex]);
-  react.useCallback(
+  React2.useCallback(
     (index) => {
       setCurrentIndex(Math.max(0, Math.min(index, slideCount - 1)));
     },
     [slideCount]
   );
-  react.useCallback(() => {
+  React2.useCallback(() => {
     setCurrentIndex((prev) => Math.min(prev + 1, slideCount - 1));
   }, [slideCount]);
-  react.useCallback(() => {
+  React2.useCallback(() => {
     setCurrentIndex((prev) => Math.max(prev - 1, 0));
   }, []);
-  const nextClick = react.useCallback(() => {
+  const nextClick = React2.useCallback(() => {
     setCurrentClick((prev) => Math.min(prev + 1, maxClicks));
   }, [maxClicks]);
-  const prevClick = react.useCallback(() => {
+  const prevClick = React2.useCallback(() => {
     setCurrentClick((prev) => Math.max(prev - 1, 0));
   }, []);
-  const resetClicks = react.useCallback(() => {
+  const resetClicks = React2.useCallback(() => {
     setCurrentClick(0);
   }, []);
-  const setClickIndex = react.useCallback(
+  const setClickIndex = React2.useCallback(
     (index) => {
       setCurrentClick(Math.max(0, Math.min(index, maxClicks)));
     },
     [maxClicks]
   );
-  const goToSlideWithReset = react.useCallback(
+  const goToSlideWithReset = React2.useCallback(
     (index) => {
       setCurrentClick(0);
       setCurrentIndex(Math.max(0, Math.min(index, slideCount - 1)));
     },
     [slideCount]
   );
-  const nextWithClick = react.useCallback(() => {
+  const nextWithClick = React2.useCallback(() => {
     if (currentClick < maxClicks) {
       setCurrentClick((prev) => prev + 1);
     } else {
@@ -81,14 +85,14 @@ function useSlideState(options) {
       setCurrentIndex((prev) => Math.min(prev + 1, slideCount - 1));
     }
   }, [currentClick, maxClicks, slideCount]);
-  const prevWithClick = react.useCallback(() => {
+  const prevWithClick = React2.useCallback(() => {
     if (currentClick > 0) {
       setCurrentClick((prev) => prev - 1);
     } else {
       setCurrentIndex((prev) => Math.max(prev - 1, 0));
     }
   }, [currentClick]);
-  const rerender = react.useCallback(() => {
+  const rerender = React2.useCallback(() => {
     setCurrentIndex((prev) => prev);
   }, []);
   return {
@@ -228,8 +232,8 @@ function NavigationBar({
   showCopy = true,
   markdown
 }) {
-  const [copied, setCopied] = react.useState(false);
-  const handleCopy = react.useCallback(async () => {
+  const [copied, setCopied] = React2.useState(false);
+  const handleCopy = React2.useCallback(async () => {
     if (!markdown) return;
     try {
       await navigator.clipboard.writeText(markdown);
@@ -411,8 +415,45 @@ function DeckView({
   themeCss,
   layoutCss,
   slideCount,
-  className
+  className,
+  notes,
+  showNotes = false
 }) {
+  const hostRef = React2__default.default.useRef(null);
+  React2__default.default.useEffect(() => {
+    if (!hostRef.current) return;
+    hostRef.current.querySelectorAll(".deck-slide-note-item").forEach((el) => el.remove());
+    if (!showNotes || !notes || notes.length === 0) return;
+    const svgs = hostRef.current.querySelectorAll("svg[data-marpit-svg], svg");
+    svgs.forEach((svg, idx) => {
+      const slideNotes = notes[idx];
+      if (slideNotes && slideNotes.length > 0) {
+        const noteBox = document.createElement("div");
+        noteBox.className = "deck-slide-note-item";
+        noteBox.style.cssText = `
+          width: 100%;
+          max-width: 960px;
+          margin: -16px auto 32px auto;
+          background: rgba(24, 24, 32, 0.85);
+          border: 1px solid rgba(255, 255, 255, 0.12);
+          border-left: 4px solid #0284c7;
+          border-radius: 8px;
+          padding: 14px 18px;
+          color: #e4e4e7;
+          font-size: 14px;
+          line-height: 1.6;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+        `;
+        noteBox.innerHTML = `
+          <div style="font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #38bdf8; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;">
+            <span>\u{1F4DD}</span><span>Presenter Notes (Slide ${idx + 1})</span>
+          </div>
+          <div style="white-space: pre-wrap; font-size: 13px; line-height: 1.6; color: inherit;">${slideNotes.join("\n")}</div>
+        `;
+        svg.after(noteBox);
+      }
+    });
+  }, [html, notes, showNotes]);
   const deckCss = `
     .slide-deck-host {
       display: flex !important;
@@ -452,6 +493,46 @@ function DeckView({
       transform: translateY(-2px);
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
     }
+
+    @media print {
+      @page {
+        size: landscape;
+        margin: 0;
+      }
+      body {
+        background: #ffffff !important;
+        color: #000000 !important;
+      }
+      .slide-deck-host {
+        padding: 0 !important;
+      }
+      .slide-deck-host #marp-container svg[data-marpit-svg],
+      .slide-deck-host #marp-container > svg,
+      .slide-deck-host > div > svg {
+        width: 100vw !important;
+        max-width: none !important;
+        height: 56.25vw !important;
+        page-break-inside: avoid !important;
+        break-inside: avoid !important;
+        page-break-after: always !important;
+        break-after: page !important;
+        margin: 0 auto !important;
+        box-shadow: none !important;
+        border-radius: 0 !important;
+      }
+      .deck-slide-note-item {
+        page-break-after: always !important;
+        break-after: page !important;
+        background: #f8fafc !important;
+        border: 1px solid #cbd5e1 !important;
+        border-left: 4px solid #2563eb !important;
+        color: #1e293b !important;
+        padding: 12px 18px !important;
+        margin: 12px auto 32px auto !important;
+        width: 90vw !important;
+        font-size: 11pt !important;
+      }
+    }
   `;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { width: "100%" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: css }),
@@ -461,6 +542,7 @@ function DeckView({
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref: hostRef,
         className: "slide-deck-host",
         dangerouslySetInnerHTML: { __html: html }
       }
@@ -594,25 +676,25 @@ function SlideDesignOverlay({
   onSelectBoxId
 }) {
   if (!isActive) return null;
-  const [boxes, setBoxes] = react.useState(layout?.boxes ?? []);
-  const [selectedId, setSelectedIdState] = react.useState(selectedBoxId ?? null);
-  const [editingId, setEditingId] = react.useState(null);
-  const containerRef = react.useRef(null);
-  const setSelectedId = react.useCallback((id) => {
+  const [boxes, setBoxes] = React2.useState(layout?.boxes ?? []);
+  const [selectedId, setSelectedIdState] = React2.useState(selectedBoxId ?? null);
+  const [editingId, setEditingId] = React2.useState(null);
+  const containerRef = React2.useRef(null);
+  const setSelectedId = React2.useCallback((id) => {
     setSelectedIdState(id);
     if (onSelectBoxId) onSelectBoxId(id);
   }, [onSelectBoxId]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (selectedBoxId !== void 0) {
       setSelectedIdState(selectedBoxId);
     }
   }, [selectedBoxId]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     setBoxes(layout?.boxes ?? []);
   }, [layout, slideIndex]);
   const selectedBox = boxes.find((b) => b.id === selectedId) ?? null;
-  const hasMovedRef = react.useRef(false);
-  const [dragging, setDragging] = react.useState(null);
+  const hasMovedRef = React2.useRef(false);
+  const [dragging, setDragging] = React2.useState(null);
   const handleMouseDown = (e, box, type) => {
     e.preventDefault();
     e.stopPropagation();
@@ -626,7 +708,7 @@ function SlideDesignOverlay({
       startPos: [...box.pos]
     });
   };
-  const handleMouseMove = react.useCallback((e) => {
+  const handleMouseMove = React2.useCallback((e) => {
     if (!dragging || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const scaleX = 1280 / rect.width;
@@ -687,14 +769,14 @@ function SlideDesignOverlay({
       return updated;
     });
   }, [dragging, onLayoutChange]);
-  const handleMouseUp = react.useCallback(() => {
+  const handleMouseUp = React2.useCallback(() => {
     if (dragging && hasMovedRef.current && onSave) {
       onSave({ boxes });
     }
     hasMovedRef.current = false;
     setDragging(null);
   }, [dragging, boxes, onSave]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (dragging) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -704,7 +786,7 @@ function SlideDesignOverlay({
       };
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
-  const removeSelectedBox = react.useCallback(() => {
+  const removeSelectedBox = React2.useCallback(() => {
     if (!selectedId) return;
     const boxToRemove = boxes.find((b) => b.id === selectedId);
     setBoxes((prev) => {
@@ -718,7 +800,7 @@ function SlideDesignOverlay({
       onDeleteBox(boxToRemove);
     }
   }, [selectedId, boxes, onLayoutChange, onSave, onDeleteBox, setSelectedId]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     const handleKeyDown = (e) => {
       if (editingId) return;
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -829,7 +911,7 @@ function SlideDesignOverlay({
                 "select",
                 {
                   onChange: (e) => {
-                    const preset = chunk3Q4RMZVQ_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
+                    const preset = chunk53GLUCYC_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
                     if (preset) {
                       const clonedBoxes = JSON.parse(JSON.stringify(preset.layout.boxes));
                       setBoxes(clonedBoxes);
@@ -849,7 +931,7 @@ function SlideDesignOverlay({
                   title: "\xC1p d\u1EE5ng m\u1EABu b\u1ED1 c\u1EE5c c\xF3 s\u1EB5n",
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: subtextColor }, children: "M\u1EABu b\u1ED1 c\u1EE5c (Presets)..." }),
-                    chunk3Q4RMZVQ_cjs.SLIDE_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: isLight ? "#0f172a" : "#f8fafc" }, children: p.name }, p.id))
+                    chunk53GLUCYC_cjs.SLIDE_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: isLight ? "#0f172a" : "#f8fafc" }, children: p.name }, p.id))
                   ]
                 }
               ),
@@ -1136,10 +1218,10 @@ function SlideViewer({
   onRenderComplete,
   onSaveMarkdown
 }) {
-  const [isFullscreen, setIsFullscreen] = react.useState(false);
-  const [showNotesDrawer, setShowNotesDrawer] = react.useState(false);
-  const [isDesignMode, setIsDesignMode] = react.useState(false);
-  const [liveLayout, setLiveLayout] = react.useState(null);
+  const [isFullscreen, setIsFullscreen] = React2.useState(false);
+  const [showNotesDrawer, setShowNotesDrawer] = React2.useState(false);
+  const [isDesignMode, setIsDesignMode] = React2.useState(false);
+  const [liveLayout, setLiveLayout] = React2.useState(null);
   const state = useSlideState({
     markdown,
     initialTheme,
@@ -1163,19 +1245,19 @@ function SlideViewer({
     prevClick,
     resetClicks
   } = state;
-  react.useEffect(() => {
+  React2.useEffect(() => {
     onThemeChange?.(theme);
   }, [theme, onThemeChange]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     onSlideChange?.(currentIndex);
   }, [currentIndex, onSlideChange]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     onModeChange?.(mode);
   }, [mode, onModeChange]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (result) onRenderComplete?.(result);
   }, [result, onRenderComplete]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!enableKeyboard) return;
     const handleKey = (e) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
@@ -1220,12 +1302,19 @@ function SlideViewer({
             setIsFullscreen((prev) => !prev);
           }
           break;
+        case "p":
+        case "P":
+          if (showNotes) {
+            e.preventDefault();
+            setShowNotesDrawer((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]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!enableClicks || !result || mode !== "presentation") return;
     const timer = setTimeout(() => {
       const container = document.querySelector(".slide-presentation-host > div");
@@ -1238,7 +1327,7 @@ function SlideViewer({
     }, 50);
     return () => clearTimeout(timer);
   }, [enableClicks, currentClick, result, currentIndex, mode]);
-  react.useEffect(() => {
+  React2.useEffect(() => {
     if (!result || result.mermaidBlocks.length === 0) return;
     const timer = setTimeout(() => {
       const containers = document.querySelectorAll(".slide-presentation-host > div, .slide-deck-host > div");
@@ -1252,13 +1341,13 @@ function SlideViewer({
     }, 100);
     return () => clearTimeout(timer);
   }, [result, theme, currentIndex, mode]);
-  const handleThemeChange = react.useCallback(
+  const handleThemeChange = React2.useCallback(
     (themeId) => {
       setTheme(themeId);
     },
     [setTheme]
   );
-  const toggleFullscreen = react.useCallback(() => {
+  const toggleFullscreen = React2.useCallback(() => {
     setIsFullscreen((prev) => !prev);
   }, []);
   if (!result) {
@@ -1441,45 +1530,62 @@ function SlideViewer({
             transition: "width 0.2s ease"
           } }) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "relative", width: "100%" }, children: mode === "presentation" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            PresentationView,
-            {
-              html: result.html,
-              css: result.css,
-              themeCss: result.themeCss,
-              layoutCss: result.layoutCss,
-              currentIndex,
-              slideCount
-            }
-          ),
-          isDesignMode && /* @__PURE__ */ jsxRuntime.jsx(
-            SlideDesignOverlay,
-            {
-              slideIndex: currentIndex,
-              layout: liveLayout ?? result.layouts?.[currentIndex] ?? null,
-              onLayoutChange: setLiveLayout,
-              onSave: (layout) => {
-                setLiveLayout(layout);
-                if (onSaveMarkdown) {
-                  const updated = chunk3Q4RMZVQ_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
-                  onSaveMarkdown(updated);
-                }
-              },
-              onClose: () => setIsDesignMode(false),
-              isActive: isDesignMode
-            }
-          )
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
-          DeckView,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            html: result.html,
-            css: result.css,
-            themeCss: result.themeCss,
-            layoutCss: result.layoutCss,
-            slideCount
+            style: { position: "relative", width: "100%" },
+            onClick: (e) => {
+              if (mode !== "presentation" || isDesignMode) return;
+              if (e.target.closest("button, a, input, select, textarea, [contenteditable], .slide-design-overlay")) return;
+              if (enableClicks && currentClick < maxClicks) {
+                nextClick();
+              } else {
+                nextSlide();
+              }
+            },
+            children: mode === "presentation" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PresentationView,
+                {
+                  html: result.html,
+                  css: result.css,
+                  themeCss: result.themeCss,
+                  layoutCss: result.layoutCss,
+                  currentIndex,
+                  slideCount
+                }
+              ),
+              isDesignMode && /* @__PURE__ */ jsxRuntime.jsx(
+                SlideDesignOverlay,
+                {
+                  slideIndex: currentIndex,
+                  layout: liveLayout ?? result.layouts?.[currentIndex] ?? null,
+                  onLayoutChange: setLiveLayout,
+                  onSave: (layout) => {
+                    setLiveLayout(layout);
+                    if (onSaveMarkdown) {
+                      const updated = chunk53GLUCYC_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
+                      onSaveMarkdown(updated);
+                    }
+                  },
+                  onClose: () => setIsDesignMode(false),
+                  isActive: isDesignMode
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+              DeckView,
+              {
+                html: result.html,
+                css: result.css,
+                themeCss: result.themeCss,
+                layoutCss: result.layoutCss,
+                slideCount,
+                notes: result.notes,
+                showNotes: showNotesDrawer
+              }
+            )
           }
-        ) }),
+        ),
         showNotes && /* @__PURE__ */ jsxRuntime.jsx(
           PresenterNotesDrawer,
           {
@@ -1495,6 +1601,160 @@ function SlideViewer({
     }
   );
 }
+var HtmlSlideViewer = ({
+  htmlContent: initialHtml,
+  deckData,
+  title: propTitle,
+  className = "",
+  onSlideChange,
+  showTopBar = true
+}) => {
+  const iframeRef = React2.useRef(null);
+  const containerRef = React2.useRef(null);
+  const [currentSlide, setCurrentSlide] = React2.useState(0);
+  const [totalSlides, setTotalSlides] = React2.useState(deckData?.slides?.length || 1);
+  const [isFullscreen, setIsFullscreen] = React2.useState(false);
+  const fullHtml = React2.useMemo(() => {
+    if (initialHtml) return initialHtml;
+    if (deckData) {
+      return chunk53GLUCYC_cjs.compileHtmlDeck(deckData).html;
+    }
+    return "";
+  }, [initialHtml, deckData]);
+  const deckTitle = propTitle || deckData?.title || "Presentation";
+  React2.useEffect(() => {
+    const handleMessage = (e) => {
+      if (!e.data || typeof e.data !== "object") return;
+      if (e.data.type === "PRESENTATION_SLIDE_CHANGE") {
+        const cur = Number(e.data.currentIndex) || 0;
+        const tot = Number(e.data.totalSlides) || 1;
+        setCurrentSlide(cur);
+        setTotalSlides(tot);
+        if (onSlideChange) {
+          onSlideChange(cur, tot);
+        }
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onSlideChange]);
+  React2.useEffect(() => {
+    const onFsChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  const sendIframeMessage = React2.useCallback((msg) => {
+    if (iframeRef.current?.contentWindow) {
+      iframeRef.current.contentWindow.postMessage(msg, "*");
+    }
+  }, []);
+  const handleNext = () => sendIframeMessage({ type: "NEXT_SLIDE" });
+  const handlePrev = () => sendIframeMessage({ type: "PREV_SLIDE" });
+  const handleToggleFullscreen = () => {
+    if (!containerRef.current) return;
+    if (!document.fullscreenElement) {
+      containerRef.current.requestFullscreen().catch(() => {
+      });
+    } else {
+      document.exitFullscreen().catch(() => {
+      });
+    }
+  };
+  const handleDownloadHtml = () => {
+    if (!fullHtml) return;
+    const blob = new Blob([fullHtml], { type: "text/html;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${deckTitle.toLowerCase().replace(/[^a-z0-9]/g, "-") || "slide-deck"}.html`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `relative flex flex-col w-full h-full bg-neutral-950 text-neutral-100 rounded-xl overflow-hidden shadow-2xl ${className}`,
+      style: { minHeight: "480px" },
+      children: [
+        showTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-neutral-900/90 backdrop-blur border-b border-neutral-800 text-xs select-none z-20", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 font-medium truncate max-w-md", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-neutral-200", children: deckTitle })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 bg-neutral-800/80 px-2 py-1 rounded border border-neutral-700 font-mono text-[11px]", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handlePrev,
+                  disabled: currentSlide <= 0,
+                  className: "hover:text-white disabled:opacity-40 p-0.5",
+                  title: "Previous Slide",
+                  children: "\u25C0"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 font-semibold text-neutral-200", children: [
+                String(currentSlide + 1).padStart(2, "0"),
+                " / ",
+                String(totalSlides).padStart(2, "0")
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleNext,
+                  disabled: currentSlide >= totalSlides - 1,
+                  className: "hover:text-white disabled:opacity-40 p-0.5",
+                  title: "Next Slide",
+                  children: "\u25B6"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: handleDownloadHtml,
+                className: "flex items-center gap-1 px-2.5 py-1 rounded bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white border border-neutral-700 transition-colors",
+                title: "Download standalone offline HTML file",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "7 10 12 15 17 10" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Export HTML" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: handleToggleFullscreen,
+                className: "p-1 rounded bg-neutral-800 hover:bg-neutral-700 text-neutral-300 hover:text-white border border-neutral-700 transition-colors",
+                title: "Toggle Fullscreen (F)",
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex-1 w-full h-full min-h-0 bg-black", children: fullHtml ? /* @__PURE__ */ jsxRuntime.jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            srcDoc: fullHtml,
+            title: deckTitle,
+            sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+            className: "w-full h-full border-0 block"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center text-neutral-500 text-sm", children: "No slide deck content loaded." }) })
+      ]
+    }
+  );
+};
 
 Object.defineProperty(exports, "defineTheme", {
   enumerable: true,
@@ -1529,6 +1789,7 @@ Object.defineProperty(exports, "resolveTheme", {
   get: function () { return chunkTGI6YSZP_cjs.resolveTheme; }
 });
 exports.DeckView = DeckView;
+exports.HtmlSlideViewer = HtmlSlideViewer;
 exports.NavigationBar = NavigationBar;
 exports.PresentationView = PresentationView;
 exports.PresenterNotesDrawer = PresenterNotesDrawer;