@thanh01.pmt/presentation-kit 0.2.13 → 0.2.15

package/dist/react/index.d.cts

@@ -186,6 +186,8 @@ interface HtmlSlideViewerProps {
     className?: string;
     /** Callback fired when active slide index changes */
     onSlideChange?: (current: number, total: number) => void;
+    /** Callback fired when slide deck is exported or saved from inline editor */
+    onSaveHtml?: (savedHtml: string) => void;
     /** Show top control bar */
     showTopBar?: boolean;
 }

package/dist/react/index.d.ts

@@ -186,6 +186,8 @@ interface HtmlSlideViewerProps {
     className?: string;
     /** Callback fired when active slide index changes */
     onSlideChange?: (current: number, total: number) => void;
+    /** Callback fired when slide deck is exported or saved from inline editor */
+    onSaveHtml?: (savedHtml: string) => void;
     /** Show top control bar */
     showTopBar?: boolean;
 }

package/dist/react/index.js

@@ -1,6 +1,6 @@
 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, compileHtmlDeck } from '../chunk-3VGV5KYZ.js';
+import { SLIDE_LAYOUT_PRESETS, updateSlideLayoutInMarkdown, compileHtmlDeck } from '../chunk-YPYAP4TF.js';
 import React2, { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -625,7 +625,10 @@ function PresenterNotesDrawer({
                     borderRadius: "4px"
                   },
                   title: "\u0110\xF3ng ghi ch\xFA",
-                  children: "\u2715"
+                  children: /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                  ] })
                 }
               )
             ]
@@ -1602,6 +1605,7 @@ var HtmlSlideViewer = ({
   title: propTitle,
   className = "",
   onSlideChange,
+  onSaveHtml,
   showTopBar = true
 }) => {
   const iframeRef = useRef(null);
@@ -1628,11 +1632,15 @@ var HtmlSlideViewer = ({
         if (onSlideChange) {
           onSlideChange(cur, tot);
         }
+      } else if (e.data.type === "SLIDE_HTML_SAVED") {
+        if (onSaveHtml && typeof e.data.html === "string") {
+          onSaveHtml(e.data.html);
+        }
       }
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
-  }, [onSlideChange]);
+  }, [onSlideChange, onSaveHtml]);
   useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(Boolean(document.fullscreenElement));
@@ -1645,6 +1653,14 @@ var HtmlSlideViewer = ({
       iframeRef.current.contentWindow.postMessage(msg, "*");
     }
   }, []);
+  useEffect(() => {
+    if (!containerRef.current || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      sendIframeMessage({ type: "RESIZE" });
+    });
+    ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [sendIframeMessage]);
   const handleNext = () => sendIframeMessage({ type: "NEXT_SLIDE" });
   const handlePrev = () => sendIframeMessage({ type: "PREV_SLIDE" });
   const handleToggleFullscreen = () => {
@@ -1673,27 +1689,27 @@ var HtmlSlideViewer = ({
     "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}`,
+      className: `relative flex flex-col w-full h-full bg-card text-txt-pri rounded-xl overflow-hidden border border-border/80 shadow-xs ${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: [
+        showTopBar && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-panel/90 backdrop-blur border-b border-border/80 text-meta 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__ */ jsx("span", { className: "w-2 h-2 rounded-full bg-primary inline-block shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-txt-pri", 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__ */ jsxs("div", { className: "inline-flex items-center gap-1 bg-card px-2 py-0.5 rounded-lg border border-border/80 font-mono text-meta text-txt-sec h-7.5", children: [
               /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: handlePrev,
                   disabled: currentSlide <= 0,
-                  className: "hover:text-white disabled:opacity-40 p-0.5",
-                  title: "Previous Slide",
-                  children: "\u25C0"
+                  className: "hover:text-txt-pri disabled:opacity-30 p-1 text-txt-sec cursor-pointer transition-colors flex items-center justify-center rounded",
+                  title: "Previous Slide (\u2190)",
+                  children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" }) })
                 }
               ),
-              /* @__PURE__ */ jsxs("span", { className: "px-1 font-semibold text-neutral-200", children: [
+              /* @__PURE__ */ jsxs("span", { className: "px-1.5 font-semibold text-txt-pri text-center min-w-[45px]", children: [
                 String(currentSlide + 1).padStart(2, "0"),
                 " / ",
                 String(totalSlides).padStart(2, "0")
@@ -1703,9 +1719,9 @@ var HtmlSlideViewer = ({
                 {
                   onClick: handleNext,
                   disabled: currentSlide >= totalSlides - 1,
-                  className: "hover:text-white disabled:opacity-40 p-0.5",
-                  title: "Next Slide",
-                  children: "\u25B6"
+                  className: "hover:text-txt-pri disabled:opacity-30 p-1 text-txt-sec cursor-pointer transition-colors flex items-center justify-center rounded",
+                  title: "Next Slide (\u2192)",
+                  children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" }) })
                 }
               )
             ] }),
@@ -1713,10 +1729,10 @@ var HtmlSlideViewer = ({
               "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",
+                className: "flex items-center gap-1.5 h-7.5 px-2.5 rounded-lg bg-panel hover:bg-txt-pri/5 text-txt-pri border border-border/80 text-meta font-medium transition-colors cursor-pointer shadow-2xs leading-none shrink-0",
                 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__ */ jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" })
@@ -1729,9 +1745,9 @@ var HtmlSlideViewer = ({
               "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",
+                className: "h-7.5 px-2 rounded-lg bg-panel hover:bg-txt-pri/5 text-txt-pri border border-border/80 text-meta transition-colors cursor-pointer shadow-2xs flex items-center justify-center shrink-0",
                 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" }) })
+                children: /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" }) })
               }
             )
           ] })
@@ -1743,7 +1759,10 @@ var HtmlSlideViewer = ({
             srcDoc: fullHtml,
             title: deckTitle,
             sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
-            className: "w-full h-full border-0 block"
+            className: "w-full h-full border-0 block",
+            onLoad: () => {
+              sendIframeMessage({ type: "RESIZE" });
+            }
           }
         ) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center text-neutral-500 text-sm", children: "No slide deck content loaded." }) })
       ]