@thanh01.pmt/presentation-kit 0.1.1 → 0.2.0

package/dist/react/index.js

@@ -1,5 +1,5 @@
-import { renderSlide, renderMermaidDiagrams } from '../chunk-RCHOTRWI.js';
-export { defineTheme, extractMaxClicks, generateClickCss, postprocessClicks, preprocessClicks, renderSlide, renderSlideAsync, resolveTheme } from '../chunk-RCHOTRWI.js';
+import { renderSlide, renderMermaidDiagrams, updateSlideLayoutInMarkdown } from '../chunk-FATGZ25L.js';
+export { defineTheme, extractMaxClicks, generateClickCss, postprocessClicks, preprocessClicks, renderSlide, renderSlideAsync, resolveTheme } from '../chunk-FATGZ25L.js';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -348,6 +348,7 @@ function PresentationView({
   html,
   css,
   themeCss,
+  layoutCss,
   currentIndex,
   slideCount,
   className
@@ -390,6 +391,7 @@ function PresentationView({
   return /* @__PURE__ */ jsxs("div", { className, style: { width: "100%" }, children: [
     /* @__PURE__ */ jsx("style", { children: css }),
     /* @__PURE__ */ jsx("style", { children: themeCss }),
+    layoutCss && /* @__PURE__ */ jsx("style", { children: layoutCss }),
     /* @__PURE__ */ jsx("style", { children: presentationCss }),
     /* @__PURE__ */ jsx(
       "div",
@@ -405,6 +407,7 @@ function DeckView({
   html,
   css,
   themeCss,
+  layoutCss,
   slideCount,
   className
 }) {
@@ -451,6 +454,7 @@ function DeckView({
   return /* @__PURE__ */ jsxs("div", { className, style: { width: "100%" }, children: [
     /* @__PURE__ */ jsx("style", { children: css }),
     /* @__PURE__ */ jsx("style", { children: themeCss }),
+    layoutCss && /* @__PURE__ */ jsx("style", { children: layoutCss }),
     /* @__PURE__ */ jsx("style", { children: deckCss }),
     /* @__PURE__ */ jsx(
       "div",
@@ -461,6 +465,593 @@ function DeckView({
     )
   ] });
 }
+function PresenterNotesDrawer({
+  notes,
+  currentIndex,
+  slideCount,
+  isOpen,
+  onClose,
+  isDark = true
+}) {
+  if (!isOpen) return null;
+  const bg = isDark ? "#181920" : "#ffffff";
+  const border = isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.12)";
+  const textColor = isDark ? "#f1f5f9" : "#1e293b";
+  const mutedColor = isDark ? "#94a3b8" : "#64748b";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        marginTop: "12px",
+        padding: "16px 20px",
+        borderRadius: "10px",
+        backgroundColor: bg,
+        border: `1px solid ${border}`,
+        color: textColor,
+        boxShadow: isDark ? "0 4px 20px rgba(0, 0, 0, 0.4)" : "0 4px 20px rgba(0, 0, 0, 0.08)",
+        display: "flex",
+        flexDirection: "column",
+        gap: "10px",
+        transition: "all 0.2s ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              borderBottom: `1px solid ${border}`,
+              paddingBottom: "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: "13px", letterSpacing: "0.02em" }, children: "Ghi ch\xFA Gi\u1EA3ng vi\xEAn" }),
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      padding: "2px 8px",
+                      borderRadius: "12px",
+                      backgroundColor: isDark ? "rgba(56, 189, 248, 0.15)" : "rgba(2, 132, 199, 0.1)",
+                      color: isDark ? "#38bdf8" : "#0284c7",
+                      fontWeight: 500
+                    },
+                    children: [
+                      "Slide ",
+                      currentIndex + 1,
+                      " / ",
+                      slideCount
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  style: {
+                    background: "none",
+                    border: "none",
+                    color: mutedColor,
+                    cursor: "pointer",
+                    fontSize: "16px",
+                    padding: "4px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "4px"
+                  },
+                  title: "\u0110\xF3ng ghi ch\xFA",
+                  children: "\u2715"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              maxHeight: "180px",
+              overflowY: "auto",
+              fontSize: "13px",
+              lineHeight: "1.6"
+            },
+            children: notes.length > 0 ? notes.map((note, idx) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  marginBottom: idx < notes.length - 1 ? "8px" : "0",
+                  whiteSpace: "pre-wrap"
+                },
+                children: note
+              },
+              idx
+            )) : /* @__PURE__ */ jsx("div", { style: { color: mutedColor, fontStyle: "italic", fontSize: "12px" }, children: "Kh\xF4ng c\xF3 ghi ch\xFA cho slide n\xE0y." })
+          }
+        )
+      ]
+    }
+  );
+}
+function SlideDesignOverlay({
+  slideIndex,
+  layout,
+  onLayoutChange,
+  onSave,
+  onClose,
+  isActive
+}) {
+  if (!isActive) return null;
+  const [boxes, setBoxes] = useState(layout?.boxes ?? []);
+  const [selectedId, setSelectedId] = useState(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    setBoxes(layout?.boxes ?? []);
+  }, [layout, slideIndex]);
+  const selectedBox = boxes.find((b) => b.id === selectedId) ?? null;
+  const [dragging, setDragging] = useState(null);
+  const handleMouseDown = (e, box, type) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setSelectedId(box.id);
+    setDragging({
+      type,
+      boxId: box.id,
+      startX: e.clientX,
+      startY: e.clientY,
+      startPos: [...box.pos]
+    });
+  };
+  const handleMouseMove = useCallback((e) => {
+    if (!dragging || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const scaleX = 1280 / rect.width;
+    const scaleY = 720 / rect.height;
+    const dx = (e.clientX - dragging.startX) * scaleX;
+    const dy = (e.clientY - dragging.startY) * scaleY;
+    const [origX, origY, origW, origH] = dragging.startPos;
+    setBoxes((prev) => {
+      const updated = prev.map((b) => {
+        if (b.id !== dragging.boxId) return b;
+        let [newX, newY, newW, newH] = [origX, origY, origW, origH];
+        switch (dragging.type) {
+          case "move":
+            newX = Math.max(0, Math.min(1280 - origW, origX + dx));
+            newY = Math.max(0, Math.min(720 - origH, origY + dy));
+            break;
+          case "se":
+            newW = Math.max(50, origW + dx);
+            newH = Math.max(30, origH + dy);
+            break;
+          case "e":
+            newW = Math.max(50, origW + dx);
+            break;
+          case "s":
+            newH = Math.max(30, origH + dy);
+            break;
+          case "sw":
+            newX = Math.min(origX + origW - 50, origX + dx);
+            newW = Math.max(50, origW - dx);
+            newH = Math.max(30, origH + dy);
+            break;
+          case "ne":
+            newY = Math.min(origY + origH - 30, origY + dy);
+            newW = Math.max(50, origW + dx);
+            newH = Math.max(30, origH - dy);
+            break;
+          case "nw":
+            newX = Math.min(origX + origW - 50, origX + dx);
+            newY = Math.min(origY + origH - 30, origY + dy);
+            newW = Math.max(50, origW - dx);
+            newH = Math.max(30, origH - dy);
+            break;
+        }
+        return {
+          ...b,
+          pos: [Math.round(newX), Math.round(newY), Math.round(newW), Math.round(newH)]
+        };
+      });
+      onLayoutChange({ boxes: updated });
+      return updated;
+    });
+  }, [dragging, onLayoutChange]);
+  const handleMouseUp = useCallback(() => {
+    setDragging(null);
+  }, []);
+  useEffect(() => {
+    if (dragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+      return () => {
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
+      };
+    }
+  }, [dragging, handleMouseMove, handleMouseUp]);
+  const addNewBox = (targetTag) => {
+    const newBox = {
+      id: `box-${Date.now().toString(36)}`,
+      target: targetTag,
+      pos: [100, 120 + boxes.length * 80, 600, 100],
+      fontSize: targetTag === "h1" ? "2.5rem" : "1.2rem",
+      color: targetTag === "h1" ? "#38bdf8" : "#e2e8f0",
+      textAlign: "left"
+    };
+    const updated = [...boxes, newBox];
+    setBoxes(updated);
+    setSelectedId(newBox.id);
+    onLayoutChange({ boxes: updated });
+  };
+  const updateSelectedBox = (updates) => {
+    if (!selectedId) return;
+    setBoxes((prev) => {
+      const updated = prev.map((b) => b.id === selectedId ? { ...b, ...updates } : b);
+      onLayoutChange({ boxes: updated });
+      return updated;
+    });
+  };
+  const removeSelectedBox = () => {
+    if (!selectedId) return;
+    setBoxes((prev) => {
+      const updated = prev.filter((b) => b.id !== selectedId);
+      onLayoutChange({ boxes: updated });
+      return updated;
+    });
+    setSelectedId(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 50,
+        pointerEvents: "none"
+        // Allow passing through to children that have pointerEvents: 'auto'
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "12px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              zIndex: 60,
+              pointerEvents: "auto",
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "6px 14px",
+              backgroundColor: "#1e1f29",
+              border: "1px solid rgba(56, 189, 248, 0.4)",
+              borderRadius: "24px",
+              boxShadow: "0 8px 30px rgba(0, 0, 0, 0.5)",
+              color: "#f8fafc",
+              fontSize: "12px",
+              fontFamily: "Inter, sans-serif"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "#38bdf8" }, children: "Design Canvas:" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => addNewBox("h1"),
+                  style: toolbarButtonStyle,
+                  title: "Th\xEAm khung v\u1ECB tr\xED Ti\xEAu \u0111\u1EC1",
+                  children: "+ Ti\xEAu \u0111\u1EC1 (H1)"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => addNewBox("p"),
+                  style: toolbarButtonStyle,
+                  title: "Th\xEAm khung v\u1ECB tr\xED \u0110o\u1EA1n v\u0103n",
+                  children: "+ \u0110o\u1EA1n v\u0103n (P)"
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { width: "1px", height: "16px", backgroundColor: "rgba(255,255,255,0.2)" } }),
+              onSave && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onSave({ boxes }),
+                  style: {
+                    ...toolbarButtonStyle,
+                    backgroundColor: "#0284c7",
+                    color: "#ffffff",
+                    fontWeight: 600
+                  },
+                  children: "L\u01B0u b\u1ED1 c\u1EE5c"
+                }
+              ),
+              onClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  style: {
+                    ...toolbarButtonStyle,
+                    backgroundColor: "transparent",
+                    color: "#94a3b8"
+                  },
+                  children: "\u0110\xF3ng"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            style: {
+              position: "absolute",
+              inset: 0,
+              pointerEvents: "auto"
+            },
+            onClick: () => setSelectedId(null),
+            children: boxes.map((box) => {
+              const [x, y, w, h] = box.pos;
+              const isSelected = box.id === selectedId;
+              const leftPercent = x / 1280 * 100;
+              const topPercent = y / 720 * 100;
+              const widthPercent = w / 1280 * 100;
+              const heightPercent = h / 720 * 100;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setSelectedId(box.id);
+                  },
+                  onMouseDown: (e) => handleMouseDown(e, box, "move"),
+                  style: {
+                    position: "absolute",
+                    left: `${leftPercent}%`,
+                    top: `${topPercent}%`,
+                    width: `${widthPercent}%`,
+                    height: `${heightPercent}%`,
+                    border: isSelected ? "2px solid #38bdf8" : "1px dashed rgba(56, 189, 248, 0.5)",
+                    backgroundColor: isSelected ? "rgba(56, 189, 248, 0.08)" : "rgba(56, 189, 248, 0.03)",
+                    cursor: "move",
+                    userSelect: "none",
+                    boxSizing: "border-box",
+                    zIndex: isSelected ? 40 : 20
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        style: {
+                          position: "absolute",
+                          top: "-18px",
+                          left: "0",
+                          fontSize: "10px",
+                          fontWeight: 600,
+                          color: isSelected ? "#38bdf8" : "rgba(56, 189, 248, 0.7)",
+                          backgroundColor: "rgba(0,0,0,0.8)",
+                          padding: "1px 6px",
+                          borderRadius: "3px",
+                          whiteSpace: "nowrap"
+                        },
+                        children: [
+                          box.target || box.id,
+                          " (",
+                          Math.round(x),
+                          ", ",
+                          Math.round(y),
+                          ")"
+                        ]
+                      }
+                    ),
+                    isSelected && /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: handleStyle("se"),
+                          onMouseDown: (e) => handleMouseDown(e, box, "se")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: handleStyle("e"),
+                          onMouseDown: (e) => handleMouseDown(e, box, "e")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: handleStyle("s"),
+                          onMouseDown: (e) => handleMouseDown(e, box, "s")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: handleStyle("sw"),
+                          onMouseDown: (e) => handleMouseDown(e, box, "sw")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: handleStyle("ne"),
+                          onMouseDown: (e) => handleMouseDown(e, box, "ne")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: handleStyle("nw"),
+                          onMouseDown: (e) => handleMouseDown(e, box, "nw")
+                        }
+                      )
+                    ] })
+                  ]
+                },
+                box.id
+              );
+            })
+          }
+        ),
+        selectedBox && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "24px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              zIndex: 60,
+              pointerEvents: "auto",
+              display: "flex",
+              alignItems: "center",
+              gap: "12px",
+              padding: "8px 16px",
+              backgroundColor: "#181920",
+              border: "1px solid rgba(255,255,255,0.15)",
+              borderRadius: "12px",
+              boxShadow: "0 10px 30px rgba(0,0,0,0.6)",
+              color: "#f8fafc",
+              fontSize: "12px",
+              fontFamily: "Inter, sans-serif"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: "#38bdf8" }, children: [
+                "Khung: ",
+                selectedBox.target
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: "11px" }, children: "Size:" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: selectedBox.fontSize ?? "1.5rem",
+                    onChange: (e) => updateSelectedBox({ fontSize: e.target.value }),
+                    style: {
+                      width: "60px",
+                      padding: "2px 6px",
+                      borderRadius: "4px",
+                      border: "1px solid #334155",
+                      backgroundColor: "#0f172a",
+                      color: "#f8fafc",
+                      fontSize: "11px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: "11px" }, children: "Color:" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "color",
+                    value: selectedBox.color ?? "#38bdf8",
+                    onChange: (e) => updateSelectedBox({ color: e.target.value }),
+                    style: {
+                      width: "24px",
+                      height: "24px",
+                      padding: "0",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      backgroundColor: "transparent"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px" }, children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => updateSelectedBox({ textAlign: align }),
+                  style: {
+                    ...toolbarButtonStyle,
+                    backgroundColor: selectedBox.textAlign === align ? "#0284c7" : "rgba(255,255,255,0.05)",
+                    textTransform: "capitalize",
+                    fontSize: "11px",
+                    padding: "2px 8px"
+                  },
+                  children: align
+                },
+                align
+              )) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: removeSelectedBox,
+                  style: {
+                    ...toolbarButtonStyle,
+                    backgroundColor: "rgba(239, 68, 68, 0.2)",
+                    color: "#f87171",
+                    borderColor: "rgba(239, 68, 68, 0.4)"
+                  },
+                  title: "X\xF3a \u0111\u1ECBnh v\u1ECB t\u1EF1 do (tr\u1EDF v\u1EC1 lu\u1ED3ng b\xECnh th\u01B0\u1EDDng)",
+                  children: "Tr\u1EDF v\u1EC1 lu\u1ED3ng m\u1EB7c \u0111\u1ECBnh"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var toolbarButtonStyle = {
+  height: "26px",
+  padding: "0 10px",
+  borderRadius: "14px",
+  fontSize: "11px",
+  fontFamily: "inherit",
+  border: "1px solid rgba(255, 255, 255, 0.1)",
+  backgroundColor: "rgba(255, 255, 255, 0.08)",
+  color: "#e2e8f0",
+  cursor: "pointer",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "all 0.15s ease"
+};
+function handleStyle(pos) {
+  const size = 10;
+  const base = {
+    position: "absolute",
+    width: `${size}px`,
+    height: `${size}px`,
+    backgroundColor: "#ffffff",
+    border: "2px solid #0284c7",
+    borderRadius: "2px",
+    boxSizing: "border-box",
+    zIndex: 50
+  };
+  switch (pos) {
+    case "se":
+      return { ...base, right: `-${size / 2}px`, bottom: `-${size / 2}px`, cursor: "se-resize" };
+    case "e":
+      return { ...base, right: `-${size / 2}px`, top: `calc(50% - ${size / 2}px)`, cursor: "e-resize" };
+    case "s":
+      return { ...base, bottom: `-${size / 2}px`, left: `calc(50% - ${size / 2}px)`, cursor: "s-resize" };
+    case "sw":
+      return { ...base, left: `-${size / 2}px`, bottom: `-${size / 2}px`, cursor: "sw-resize" };
+    case "ne":
+      return { ...base, right: `-${size / 2}px`, top: `-${size / 2}px`, cursor: "ne-resize" };
+    case "nw":
+      return { ...base, left: `-${size / 2}px`, top: `-${size / 2}px`, cursor: "nw-resize" };
+  }
+}
 var DEFAULT_THEME_OPTIONS = [
   { id: "dark", label: "Dark" },
   { id: "navy", label: "Navy" },
@@ -476,13 +1067,19 @@ function SlideViewer({
   enableKeyboard = true,
   enableClicks = false,
   fullscreen = false,
+  showNotes = true,
+  showDesignMode = false,
   themeOptions = DEFAULT_THEME_OPTIONS,
   onThemeChange,
   onSlideChange,
   onModeChange,
-  onRenderComplete
+  onRenderComplete,
+  onSaveMarkdown
 }) {
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [showNotesDrawer, setShowNotesDrawer] = useState(false);
+  const [isDesignMode, setIsDesignMode] = useState(false);
+  const [liveLayout, setLiveLayout] = useState(null);
   const state = useSlideState({
     markdown,
     initialTheme,
@@ -684,6 +1281,54 @@ function SlideViewer({
                 markdown
               }
             ),
+            showNotes && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowNotesDrawer((prev) => !prev),
+                style: {
+                  height: "28px",
+                  padding: "0 10px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  fontFamily: "inherit",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "5px",
+                  border: showNotesDrawer ? "1px solid #0284c7" : "1px solid transparent",
+                  cursor: "pointer",
+                  backgroundColor: showNotesDrawer ? "rgba(2, 132, 199, 0.15)" : "transparent",
+                  color: showNotesDrawer ? "#38bdf8" : isFullscreen ? "#fff" : "rgba(128,128,128,0.7)",
+                  transition: "all 0.15s ease"
+                },
+                title: "Ghi ch\xFA cho Gi\u1EA3ng vi\xEAn",
+                children: "Notes"
+              }
+            ),
+            showDesignMode && mode === "presentation" && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsDesignMode((prev) => !prev),
+                style: {
+                  height: "28px",
+                  padding: "0 10px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  fontFamily: "inherit",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "5px",
+                  border: isDesignMode ? "1px solid #38bdf8" : "1px solid transparent",
+                  cursor: "pointer",
+                  backgroundColor: isDesignMode ? "rgba(56, 189, 248, 0.15)" : "transparent",
+                  color: isDesignMode ? "#38bdf8" : isFullscreen ? "#fff" : "rgba(128,128,128,0.7)",
+                  transition: "all 0.15s ease"
+                },
+                title: "Ch\u1EBF \u0111\u1ED9 ch\u1EC9nh s\u1EEDa b\u1ED1 c\u1EE5c (Google Slides-style)",
+                children: "Design"
+              }
+            ),
             fullscreen && /* @__PURE__ */ jsx(
               "button",
               {
@@ -736,22 +1381,54 @@ function SlideViewer({
             transition: "width 0.2s ease"
           } }) })
         ] }),
-        mode === "presentation" ? /* @__PURE__ */ jsx(
-          PresentationView,
+        /* @__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,
           {
             html: result.html,
             css: result.css,
             themeCss: result.themeCss,
-            currentIndex,
+            layoutCss: result.layoutCss,
             slideCount
           }
-        ) : /* @__PURE__ */ jsx(
-          DeckView,
+        ) }),
+        showNotes && /* @__PURE__ */ jsx(
+          PresenterNotesDrawer,
           {
-            html: result.html,
-            css: result.css,
-            themeCss: result.themeCss,
-            slideCount
+            notes: result.notes?.[currentIndex] ?? [],
+            currentIndex,
+            slideCount,
+            isOpen: showNotesDrawer,
+            onClose: () => setShowNotesDrawer(false),
+            isDark: themeName !== "light"
           }
         )
       ]
@@ -759,6 +1436,6 @@ function SlideViewer({
   );
 }
 
-export { DeckView, NavigationBar, PresentationView, SlideViewer, ThemeSwitcher, useSlideState };
+export { DeckView, NavigationBar, PresentationView, PresenterNotesDrawer, SlideDesignOverlay, SlideViewer, ThemeSwitcher, useSlideState };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map