@thanh01.pmt/presentation-kit 0.2.13 → 0.2.15

package/dist/react/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkTGI6YSZP_cjs = require('../chunk-TGI6YSZP.cjs');
-var chunk53GLUCYC_cjs = require('../chunk-53GLUCYC.cjs');
+var chunkSUGKWGJJ_cjs = require('../chunk-SUGKWGJJ.cjs');
 var React2 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -630,7 +630,10 @@ function PresenterNotesDrawer({
                     borderRadius: "4px"
                   },
                   title: "\u0110\xF3ng ghi ch\xFA",
-                  children: "\u2715"
+                  children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+                  ] })
                 }
               )
             ]
@@ -911,7 +914,7 @@ function SlideDesignOverlay({
                 "select",
                 {
                   onChange: (e) => {
-                    const preset = chunk53GLUCYC_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
+                    const preset = chunkSUGKWGJJ_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
                     if (preset) {
                       const clonedBoxes = JSON.parse(JSON.stringify(preset.layout.boxes));
                       setBoxes(clonedBoxes);
@@ -931,7 +934,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)..." }),
-                    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))
+                    chunkSUGKWGJJ_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))
                   ]
                 }
               ),
@@ -1564,7 +1567,7 @@ function SlideViewer({
                   onSave: (layout) => {
                     setLiveLayout(layout);
                     if (onSaveMarkdown) {
-                      const updated = chunk53GLUCYC_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
+                      const updated = chunkSUGKWGJJ_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
                       onSaveMarkdown(updated);
                     }
                   },
@@ -1607,6 +1610,7 @@ var HtmlSlideViewer = ({
   title: propTitle,
   className = "",
   onSlideChange,
+  onSaveHtml,
   showTopBar = true
 }) => {
   const iframeRef = React2.useRef(null);
@@ -1617,7 +1621,7 @@ var HtmlSlideViewer = ({
   const fullHtml = React2.useMemo(() => {
     if (initialHtml) return initialHtml;
     if (deckData) {
-      return chunk53GLUCYC_cjs.compileHtmlDeck(deckData).html;
+      return chunkSUGKWGJJ_cjs.compileHtmlDeck(deckData).html;
     }
     return "";
   }, [initialHtml, deckData]);
@@ -1633,11 +1637,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]);
   React2.useEffect(() => {
     const onFsChange = () => {
       setIsFullscreen(Boolean(document.fullscreenElement));
@@ -1650,6 +1658,14 @@ var HtmlSlideViewer = ({
       iframeRef.current.contentWindow.postMessage(msg, "*");
     }
   }, []);
+  React2.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 = () => {
@@ -1678,27 +1694,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__ */ 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: [
+        showTopBar && /* @__PURE__ */ jsxRuntime.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__ */ 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.jsx("span", { className: "w-2 h-2 rounded-full bg-primary inline-block shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate text-txt-pri", 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.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 18 9 12 15 6" }) })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-1 font-semibold text-neutral-200", children: [
+              /* @__PURE__ */ jsxRuntime.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")
@@ -1708,9 +1724,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__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) })
                 }
               )
             ] }),
@@ -1718,10 +1734,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__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" })
@@ -1734,9 +1750,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__ */ 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" }) })
+                children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", 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" }) })
               }
             )
           ] })
@@ -1748,7 +1764,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__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center text-neutral-500 text-sm", children: "No slide deck content loaded." }) })
       ]