@thanh01.pmt/presentation-kit 0.2.9 → 0.2.11

package/dist/react/index.d.cts

@@ -1,7 +1,7 @@
 import React$1 from 'react';
-import { B as BuiltInTheme, c as SlideTheme, e as SlideRenderResult, b as SlideLayoutData, L as LayoutBoxConfig } from '../types-C1121XLt.cjs';
-export { M as MermaidBlock, f as SlideRenderAsyncResult, d as SlideRenderOptions, T as ThemeTokens } from '../types-C1121XLt.cjs';
-export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, d as defineTheme, i as extractMaxClicks, j as generateClickCss, h as postprocessClicks, p as preprocessClicks, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from '../click-css-BP9oqy_1.cjs';
+import { B as BuiltInTheme, h as SlideTheme, j as SlideRenderResult, f as HtmlDeckData, b as SlideLayoutData, L as LayoutBoxConfig } from '../types-8AVYoEUn.cjs';
+export { M as MermaidBlock, k as SlideRenderAsyncResult, i as SlideRenderOptions, T as ThemeTokens } from '../types-8AVYoEUn.cjs';
+export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, d as defineTheme, i as extractMaxClicks, j as generateClickCss, h as postprocessClicks, p as preprocessClicks, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from '../click-css-Ch_jyWaw.cjs';
 
 /** View mode for slide display */
 type SlideViewMode = 'presentation' | 'deck';
@@ -80,6 +80,10 @@ interface DeckViewProps {
     slideCount: number;
     /** Container CSS class */
     className?: string;
+    /** Presenter notes per slide (optional) */
+    notes?: string[][];
+    /** Whether to render speaker notes below each slide in deck mode */
+    showNotes?: boolean;
 }
 /** Props for ThemeSwitcher */
 interface ThemeSwitcherProps {
@@ -171,6 +175,22 @@ interface SlideActions {
  */
 declare function SlideViewer({ markdown, initialTheme, initialMode, className, showThemeSwitcher, showNavigation, enableKeyboard, enableClicks, fullscreen, showNotes, showDesignMode, themeOptions, onThemeChange, onSlideChange, onModeChange, onRenderComplete, onSaveMarkdown, }: SlideViewerProps): React$1.JSX.Element;
 
+interface HtmlSlideViewerProps {
+    /** Pre-compiled HTML string. If provided, used directly */
+    htmlContent?: string;
+    /** Structured deck data. If provided without htmlContent, compiled automatically */
+    deckData?: HtmlDeckData;
+    /** Deck title displayed on header / download file name */
+    title?: string;
+    /** Extra CSS classes for wrapper */
+    className?: string;
+    /** Callback fired when active slide index changes */
+    onSlideChange?: (current: number, total: number) => void;
+    /** Show top control bar */
+    showTopBar?: boolean;
+}
+declare const HtmlSlideViewer: React$1.FC<HtmlSlideViewerProps>;
+
 /**
  * PresentationView — Renders a single slide at a time.
  *
@@ -205,7 +225,7 @@ declare function PresentationView({ html, css, themeCss, layoutCss, currentIndex
  * />
  * ```
  */
-declare function DeckView({ html, css, themeCss, layoutCss, slideCount, className, }: DeckViewProps): React$1.JSX.Element;
+declare function DeckView({ html, css, themeCss, layoutCss, slideCount, className, notes, showNotes, }: DeckViewProps): React$1.JSX.Element;
 
 /**
  * ThemeSwitcher — Renders a row of theme toggle buttons.
@@ -321,4 +341,4 @@ interface UseSlideStateReturn {
  */
 declare function useSlideState(options: UseSlideStateOptions): UseSlideStateReturn;
 
-export { BuiltInTheme, DeckView, type DeckViewProps, NavigationBar, type NavigationBarProps, PresentationView, type PresentationViewProps, PresenterNotesDrawer, type PresenterNotesDrawerProps, type SlideActions, SlideDesignOverlay, type SlideDesignOverlayProps, SlideRenderResult, type SlideState, SlideTheme, type SlideViewMode, SlideViewer, type SlideViewerProps, type ThemeOption, ThemeSwitcher, type ThemeSwitcherProps, type UseSlideStateOptions, type UseSlideStateReturn, useSlideState };
+export { BuiltInTheme, DeckView, type DeckViewProps, HtmlSlideViewer, type HtmlSlideViewerProps, NavigationBar, type NavigationBarProps, PresentationView, type PresentationViewProps, PresenterNotesDrawer, type PresenterNotesDrawerProps, type SlideActions, SlideDesignOverlay, type SlideDesignOverlayProps, SlideRenderResult, type SlideState, SlideTheme, type SlideViewMode, SlideViewer, type SlideViewerProps, type ThemeOption, ThemeSwitcher, type ThemeSwitcherProps, type UseSlideStateOptions, type UseSlideStateReturn, useSlideState };

package/dist/react/index.d.ts

@@ -1,7 +1,7 @@
 import React$1 from 'react';
-import { B as BuiltInTheme, c as SlideTheme, e as SlideRenderResult, b as SlideLayoutData, L as LayoutBoxConfig } from '../types-C1121XLt.js';
-export { M as MermaidBlock, f as SlideRenderAsyncResult, d as SlideRenderOptions, T as ThemeTokens } from '../types-C1121XLt.js';
-export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, d as defineTheme, i as extractMaxClicks, j as generateClickCss, h as postprocessClicks, p as preprocessClicks, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from '../click-css-BbhqdtGr.js';
+import { B as BuiltInTheme, h as SlideTheme, j as SlideRenderResult, f as HtmlDeckData, b as SlideLayoutData, L as LayoutBoxConfig } from '../types-8AVYoEUn.js';
+export { M as MermaidBlock, k as SlideRenderAsyncResult, i as SlideRenderOptions, T as ThemeTokens } from '../types-8AVYoEUn.js';
+export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, d as defineTheme, i as extractMaxClicks, j as generateClickCss, h as postprocessClicks, p as preprocessClicks, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from '../click-css-CktIYP3H.js';
 
 /** View mode for slide display */
 type SlideViewMode = 'presentation' | 'deck';
@@ -80,6 +80,10 @@ interface DeckViewProps {
     slideCount: number;
     /** Container CSS class */
     className?: string;
+    /** Presenter notes per slide (optional) */
+    notes?: string[][];
+    /** Whether to render speaker notes below each slide in deck mode */
+    showNotes?: boolean;
 }
 /** Props for ThemeSwitcher */
 interface ThemeSwitcherProps {
@@ -171,6 +175,22 @@ interface SlideActions {
  */
 declare function SlideViewer({ markdown, initialTheme, initialMode, className, showThemeSwitcher, showNavigation, enableKeyboard, enableClicks, fullscreen, showNotes, showDesignMode, themeOptions, onThemeChange, onSlideChange, onModeChange, onRenderComplete, onSaveMarkdown, }: SlideViewerProps): React$1.JSX.Element;
 
+interface HtmlSlideViewerProps {
+    /** Pre-compiled HTML string. If provided, used directly */
+    htmlContent?: string;
+    /** Structured deck data. If provided without htmlContent, compiled automatically */
+    deckData?: HtmlDeckData;
+    /** Deck title displayed on header / download file name */
+    title?: string;
+    /** Extra CSS classes for wrapper */
+    className?: string;
+    /** Callback fired when active slide index changes */
+    onSlideChange?: (current: number, total: number) => void;
+    /** Show top control bar */
+    showTopBar?: boolean;
+}
+declare const HtmlSlideViewer: React$1.FC<HtmlSlideViewerProps>;
+
 /**
  * PresentationView — Renders a single slide at a time.
  *
@@ -205,7 +225,7 @@ declare function PresentationView({ html, css, themeCss, layoutCss, currentIndex
  * />
  * ```
  */
-declare function DeckView({ html, css, themeCss, layoutCss, slideCount, className, }: DeckViewProps): React$1.JSX.Element;
+declare function DeckView({ html, css, themeCss, layoutCss, slideCount, className, notes, showNotes, }: DeckViewProps): React$1.JSX.Element;
 
 /**
  * ThemeSwitcher — Renders a row of theme toggle buttons.
@@ -321,4 +341,4 @@ interface UseSlideStateReturn {
  */
 declare function useSlideState(options: UseSlideStateOptions): UseSlideStateReturn;
 
-export { BuiltInTheme, DeckView, type DeckViewProps, NavigationBar, type NavigationBarProps, PresentationView, type PresentationViewProps, PresenterNotesDrawer, type PresenterNotesDrawerProps, type SlideActions, SlideDesignOverlay, type SlideDesignOverlayProps, SlideRenderResult, type SlideState, SlideTheme, type SlideViewMode, SlideViewer, type SlideViewerProps, type ThemeOption, ThemeSwitcher, type ThemeSwitcherProps, type UseSlideStateOptions, type UseSlideStateReturn, useSlideState };
+export { BuiltInTheme, DeckView, type DeckViewProps, HtmlSlideViewer, type HtmlSlideViewerProps, NavigationBar, type NavigationBarProps, PresentationView, type PresentationViewProps, PresenterNotesDrawer, type PresenterNotesDrawerProps, type SlideActions, SlideDesignOverlay, type SlideDesignOverlayProps, SlideRenderResult, type SlideState, SlideTheme, type SlideViewMode, SlideViewer, type SlideViewerProps, type ThemeOption, ThemeSwitcher, type ThemeSwitcherProps, type UseSlideStateOptions, type UseSlideStateReturn, useSlideState };

package/dist/react/index.js

@@ -1,7 +1,7 @@
 import { renderSlide, renderMermaidDiagrams } from '../chunk-NYLDRVHZ.js';
 export { defineTheme, extractMaxClicks, generateClickCss, postprocessClicks, preprocessClicks, renderSlide, renderSlideAsync, resolveTheme } from '../chunk-NYLDRVHZ.js';
-import { SLIDE_LAYOUT_PRESETS, updateSlideLayoutInMarkdown } from '../chunk-ZPASRL75.js';
-import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
+import { SLIDE_LAYOUT_PRESETS, updateSlideLayoutInMarkdown, compileHtmlDeck } from '../chunk-3VGV5KYZ.js';
+import React2, { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function useSlideState(options) {
@@ -410,8 +410,45 @@ function DeckView({
   themeCss,
   layoutCss,
   slideCount,
-  className
+  className,
+  notes,
+  showNotes = false
 }) {
+  const hostRef = React2.useRef(null);
+  React2.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;
@@ -451,6 +488,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__ */ jsxs("div", { className, style: { width: "100%" }, children: [
     /* @__PURE__ */ jsx("style", { children: css }),
@@ -460,6 +537,7 @@ function DeckView({
     /* @__PURE__ */ jsx(
       "div",
       {
+        ref: hostRef,
         className: "slide-deck-host",
         dangerouslySetInnerHTML: { __html: html }
       }
@@ -610,10 +688,12 @@ function SlideDesignOverlay({
     setBoxes(layout?.boxes ?? []);
   }, [layout, slideIndex]);
   const selectedBox = boxes.find((b) => b.id === selectedId) ?? null;
+  const hasMovedRef = useRef(false);
   const [dragging, setDragging] = useState(null);
   const handleMouseDown = (e, box, type) => {
     e.preventDefault();
     e.stopPropagation();
+    hasMovedRef.current = false;
     setSelectedId(box.id);
     setDragging({
       type,
@@ -630,6 +710,9 @@ function SlideDesignOverlay({
     const scaleY = 720 / rect.height;
     const dx = (e.clientX - dragging.startX) * scaleX;
     const dy = (e.clientY - dragging.startY) * scaleY;
+    if (Math.abs(dx) > 1 || Math.abs(dy) > 1) {
+      hasMovedRef.current = true;
+    }
     const [origX, origY, origW, origH] = dragging.startPos;
     setBoxes((prev) => {
       const updated = prev.map((b) => {
@@ -682,9 +765,10 @@ function SlideDesignOverlay({
     });
   }, [dragging, onLayoutChange]);
   const handleMouseUp = useCallback(() => {
-    if (dragging && onSave) {
+    if (dragging && hasMovedRef.current && onSave) {
       onSave({ boxes });
     }
+    hasMovedRef.current = false;
     setDragging(null);
   }, [dragging, boxes, onSave]);
   useEffect(() => {
@@ -913,8 +997,9 @@ function SlideDesignOverlay({
                         style: {
                           width: "100%",
                           height: "100%",
-                          background: "transparent",
-                          border: "none",
+                          backgroundColor: isLight ? "#ffffff" : isNavy ? "#0b132b" : "#181920",
+                          border: isLight ? "1px solid #0284c7" : "1px solid #38bdf8",
+                          borderRadius: "4px",
                           outline: "none",
                           resize: "none",
                           fontSize: box.fontSize ?? (box.target === "h1" ? "2.2rem" : "1.1rem"),
@@ -923,8 +1008,9 @@ function SlideDesignOverlay({
                           fontFamily: "Inter, sans-serif",
                           fontWeight: box.target === "h1" ? 700 : 400,
                           lineHeight: 1.25,
-                          padding: 0,
-                          margin: 0
+                          padding: "4px 6px",
+                          margin: 0,
+                          boxShadow: "0 4px 16px rgba(0,0,0,0.25)"
                         }
                       }
                     ) : /* @__PURE__ */ jsx(
@@ -938,20 +1024,9 @@ function SlideDesignOverlay({
                         style: {
                           width: "100%",
                           height: "100%",
-                          fontSize: box.fontSize ?? (box.target === "h1" ? "2.2rem" : "1.1rem"),
-                          color: box.color ?? (isLight ? "#0f172a" : "#f8fafc"),
-                          textAlign: box.textAlign ?? "left",
-                          fontFamily: "Inter, sans-serif",
-                          fontWeight: box.target === "h1" ? 700 : 400,
-                          lineHeight: 1.25,
-                          wordBreak: "break-word",
-                          userSelect: "none",
-                          cursor: "pointer",
-                          display: "flex",
-                          alignItems: "center"
+                          cursor: "pointer"
                         },
-                        title: "Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa ch\u1EEF",
-                        children: box.content ? /* @__PURE__ */ jsx("span", { children: box.content }) : /* @__PURE__ */ jsx("span", { style: { opacity: 0.45, fontStyle: "italic", fontSize: "12px" }, children: box.target === "h1" ? "Ti\xEAu \u0111\u1EC1 (Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa)..." : "N\u1ED9i dung (Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa)..." })
+                        title: "Click \u0111\xFAp \u0111\u1EC3 s\u1EEDa ch\u1EEF"
                       }
                     )
                   }
@@ -1222,6 +1297,13 @@ function SlideViewer({
             setIsFullscreen((prev) => !prev);
           }
           break;
+        case "p":
+        case "P":
+          if (showNotes) {
+            e.preventDefault();
+            setShowNotesDrawer((prev) => !prev);
+          }
+          break;
       }
     };
     window.addEventListener("keydown", handleKey);
@@ -1443,45 +1525,62 @@ function SlideViewer({
             transition: "width 0.2s ease"
           } }) })
         ] }),
-        /* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%" }, children: mode === "presentation" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            PresentationView,
-            {
-              html: result.html,
-              css: result.css,
-              themeCss: result.themeCss,
-              layoutCss: result.layoutCss,
-              currentIndex,
-              slideCount
-            }
-          ),
-          isDesignMode && /* @__PURE__ */ jsx(
-            SlideDesignOverlay,
-            {
-              slideIndex: currentIndex,
-              layout: liveLayout ?? result.layouts?.[currentIndex] ?? null,
-              onLayoutChange: setLiveLayout,
-              onSave: (layout) => {
-                setLiveLayout(layout);
-                if (onSaveMarkdown) {
-                  const updated = updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
-                  onSaveMarkdown(updated);
-                }
-              },
-              onClose: () => setIsDesignMode(false),
-              isActive: isDesignMode
-            }
-          )
-        ] }) : /* @__PURE__ */ jsx(
-          DeckView,
+        /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                PresentationView,
+                {
+                  html: result.html,
+                  css: result.css,
+                  themeCss: result.themeCss,
+                  layoutCss: result.layoutCss,
+                  currentIndex,
+                  slideCount
+                }
+              ),
+              isDesignMode && /* @__PURE__ */ jsx(
+                SlideDesignOverlay,
+                {
+                  slideIndex: currentIndex,
+                  layout: liveLayout ?? result.layouts?.[currentIndex] ?? null,
+                  onLayoutChange: setLiveLayout,
+                  onSave: (layout) => {
+                    setLiveLayout(layout);
+                    if (onSaveMarkdown) {
+                      const updated = updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
+                      onSaveMarkdown(updated);
+                    }
+                  },
+                  onClose: () => setIsDesignMode(false),
+                  isActive: isDesignMode
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
+              DeckView,
+              {
+                html: result.html,
+                css: result.css,
+                themeCss: result.themeCss,
+                layoutCss: result.layoutCss,
+                slideCount,
+                notes: result.notes,
+                showNotes: showNotesDrawer
+              }
+            )
           }
-        ) }),
+        ),
         showNotes && /* @__PURE__ */ jsx(
           PresenterNotesDrawer,
           {
@@ -1497,7 +1596,161 @@ function SlideViewer({
     }
   );
 }
+var HtmlSlideViewer = ({
+  htmlContent: initialHtml,
+  deckData,
+  title: propTitle,
+  className = "",
+  onSlideChange,
+  showTopBar = true
+}) => {
+  const iframeRef = useRef(null);
+  const containerRef = useRef(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [totalSlides, setTotalSlides] = useState(deckData?.slides?.length || 1);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const fullHtml = useMemo(() => {
+    if (initialHtml) return initialHtml;
+    if (deckData) {
+      return compileHtmlDeck(deckData).html;
+    }
+    return "";
+  }, [initialHtml, deckData]);
+  const deckTitle = propTitle || deckData?.title || "Presentation";
+  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]);
+  useEffect(() => {
+    const onFsChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", onFsChange);
+    return () => document.removeEventListener("fullscreenchange", onFsChange);
+  }, []);
+  const sendIframeMessage = 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 font-medium truncate max-w-md", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-blue-500 inline-block" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-neutral-200", children: deckTitle })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ 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__ */ jsx(
+                "button",
+                {
+                  onClick: handlePrev,
+                  disabled: currentSlide <= 0,
+                  className: "hover:text-white disabled:opacity-40 p-0.5",
+                  title: "Previous Slide",
+                  children: "\u25C0"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "px-1 font-semibold text-neutral-200", children: [
+                String(currentSlide + 1).padStart(2, "0"),
+                " / ",
+                String(totalSlides).padStart(2, "0")
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleNext,
+                  disabled: currentSlide >= totalSlides - 1,
+                  className: "hover:text-white disabled:opacity-40 p-0.5",
+                  title: "Next Slide",
+                  children: "\u25B6"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ 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__ */ jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "7 10 12 15 17 10" }),
+                    /* @__PURE__ */ jsx("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { children: "Export HTML" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ 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__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: isFullscreen ? /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: "relative flex-1 w-full h-full min-h-0 bg-black", children: fullHtml ? /* @__PURE__ */ 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__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-neutral-500 text-sm", children: "No slide deck content loaded." }) })
+      ]
+    }
+  );
+};
 
-export { DeckView, NavigationBar, PresentationView, PresenterNotesDrawer, SlideDesignOverlay, SlideViewer, ThemeSwitcher, useSlideState };
+export { DeckView, HtmlSlideViewer, NavigationBar, PresentationView, PresenterNotesDrawer, SlideDesignOverlay, SlideViewer, ThemeSwitcher, useSlideState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map