@thanh01.pmt/presentation-kit 0.2.8 → 0.2.10

package/dist/react/index.d.cts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { B as BuiltInTheme, c as SlideTheme, e as SlideRenderResult, b as SlideLayoutData } from '../types-C1121XLt.cjs';
+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';
 
@@ -256,16 +256,24 @@ interface SlideDesignOverlayProps {
     layout: SlideLayoutData | null;
     /** Callback when layout changes in real-time */
     onLayoutChange: (layout: SlideLayoutData) => void;
-    /** Callback when user explicitly clicks Save */
+    /** Callback when user explicitly clicks Save or finishes drag/resize */
     onSave?: (layout: SlideLayoutData) => void;
+    /** Callback when an item is deleted */
+    onDeleteBox?: (box: LayoutBoxConfig) => void;
+    /** Callback when a new box is added */
+    onAddBox?: (box: LayoutBoxConfig) => void;
     /** Callback when user cancels or closes design mode */
     onClose?: () => void;
     /** Whether design mode is active */
     isActive: boolean;
     /** Active theme (dark, light, navy) */
     theme?: BuiltInTheme;
+    /** External selected box ID control */
+    selectedBoxId?: string | null;
+    /** Callback when box selection changes */
+    onSelectBoxId?: (id: string | null) => void;
 }
-declare function SlideDesignOverlay({ slideIndex, layout, onLayoutChange, onSave, onClose, isActive, theme, }: SlideDesignOverlayProps): React$1.JSX.Element | null;
+declare function SlideDesignOverlay({ slideIndex, layout, onLayoutChange, onSave, onDeleteBox, onAddBox, onClose, isActive, theme, selectedBoxId, onSelectBoxId, }: SlideDesignOverlayProps): React$1.JSX.Element | null;
 
 interface UseSlideStateOptions {
     markdown: string;

package/dist/react/index.d.ts

@@ -1,5 +1,5 @@
 import React$1 from 'react';
-import { B as BuiltInTheme, c as SlideTheme, e as SlideRenderResult, b as SlideLayoutData } from '../types-C1121XLt.js';
+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';
 
@@ -256,16 +256,24 @@ interface SlideDesignOverlayProps {
     layout: SlideLayoutData | null;
     /** Callback when layout changes in real-time */
     onLayoutChange: (layout: SlideLayoutData) => void;
-    /** Callback when user explicitly clicks Save */
+    /** Callback when user explicitly clicks Save or finishes drag/resize */
     onSave?: (layout: SlideLayoutData) => void;
+    /** Callback when an item is deleted */
+    onDeleteBox?: (box: LayoutBoxConfig) => void;
+    /** Callback when a new box is added */
+    onAddBox?: (box: LayoutBoxConfig) => void;
     /** Callback when user cancels or closes design mode */
     onClose?: () => void;
     /** Whether design mode is active */
     isActive: boolean;
     /** Active theme (dark, light, navy) */
     theme?: BuiltInTheme;
+    /** External selected box ID control */
+    selectedBoxId?: string | null;
+    /** Callback when box selection changes */
+    onSelectBoxId?: (id: string | null) => void;
 }
-declare function SlideDesignOverlay({ slideIndex, layout, onLayoutChange, onSave, onClose, isActive, theme, }: SlideDesignOverlayProps): React$1.JSX.Element | null;
+declare function SlideDesignOverlay({ slideIndex, layout, onLayoutChange, onSave, onDeleteBox, onAddBox, onClose, isActive, theme, selectedBoxId, onSelectBoxId, }: SlideDesignOverlayProps): React$1.JSX.Element | null;
 
 interface UseSlideStateOptions {
     markdown: string;

package/dist/react/index.js

@@ -1,6 +1,6 @@
-import { renderSlide, renderMermaidDiagrams } from '../chunk-JOW4QWKF.js';
-export { defineTheme, extractMaxClicks, generateClickCss, postprocessClicks, preprocessClicks, renderSlide, renderSlideAsync, resolveTheme } from '../chunk-JOW4QWKF.js';
-import { SLIDE_LAYOUT_PRESETS, updateSlideLayoutInMarkdown } from '../chunk-26ZVUVXF.js';
+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-V6X7D44H.js';
 import { useState, useRef, useMemo, useEffect, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
@@ -584,23 +584,38 @@ function SlideDesignOverlay({
   layout,
   onLayoutChange,
   onSave,
+  onDeleteBox,
+  onAddBox,
   onClose,
   isActive,
-  theme = "dark"
+  theme = "dark",
+  selectedBoxId,
+  onSelectBoxId
 }) {
   if (!isActive) return null;
   const [boxes, setBoxes] = useState(layout?.boxes ?? []);
-  const [selectedId, setSelectedId] = useState(null);
+  const [selectedId, setSelectedIdState] = useState(selectedBoxId ?? null);
   const [editingId, setEditingId] = useState(null);
   const containerRef = useRef(null);
+  const setSelectedId = useCallback((id) => {
+    setSelectedIdState(id);
+    if (onSelectBoxId) onSelectBoxId(id);
+  }, [onSelectBoxId]);
+  useEffect(() => {
+    if (selectedBoxId !== void 0) {
+      setSelectedIdState(selectedBoxId);
+    }
+  }, [selectedBoxId]);
   useEffect(() => {
     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,
@@ -617,6 +632,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) => {
@@ -628,30 +646,38 @@ function SlideDesignOverlay({
             newY = Math.round(Math.max(0, Math.min(720 - origH, origY + dy)));
             break;
           case "se":
-            newW = Math.round(Math.max(100, Math.min(1280 - origX, origW + dx)));
-            newH = Math.round(Math.max(40, Math.min(720 - origY, origH + dy)));
+            newW = Math.round(Math.max(60, Math.min(1280 - origX, origW + dx)));
+            newH = Math.round(Math.max(30, Math.min(720 - origY, origH + dy)));
             break;
           case "e":
-            newW = Math.round(Math.max(100, Math.min(1280 - origX, origW + dx)));
+            newW = Math.round(Math.max(60, Math.min(1280 - origX, origW + dx)));
             break;
           case "s":
-            newH = Math.round(Math.max(40, Math.min(720 - origY, origH + dy)));
+            newH = Math.round(Math.max(30, Math.min(720 - origY, origH + dy)));
             break;
           case "sw":
-            newW = Math.round(Math.max(100, origW - dx));
-            newX = Math.round(Math.min(origX + origW - 100, origX + dx));
-            newH = Math.round(Math.max(40, origH + dy));
+            newW = Math.round(Math.max(60, origW - dx));
+            newX = Math.round(Math.min(origX + origW - 60, origX + dx));
+            newH = Math.round(Math.max(30, origH + dy));
             break;
           case "ne":
-            newW = Math.round(Math.max(100, origW + dx));
-            newH = Math.round(Math.max(40, origH - dy));
-            newY = Math.round(Math.min(origY + origH - 40, origY + dy));
+            newW = Math.round(Math.max(60, origW + dx));
+            newH = Math.round(Math.max(30, origH - dy));
+            newY = Math.round(Math.min(origY + origH - 30, origY + dy));
             break;
           case "nw":
-            newW = Math.round(Math.max(100, origW - dx));
-            newX = Math.round(Math.min(origX + origW - 100, origX + dx));
-            newH = Math.round(Math.max(40, origH - dy));
-            newY = Math.round(Math.min(origY + origH - 40, origY + dy));
+            newW = Math.round(Math.max(60, origW - dx));
+            newX = Math.round(Math.min(origX + origW - 60, origX + dx));
+            newH = Math.round(Math.max(30, origH - dy));
+            newY = Math.round(Math.min(origY + origH - 30, origY + dy));
+            break;
+          case "n":
+            newH = Math.round(Math.max(30, origH - dy));
+            newY = Math.round(Math.min(origY + origH - 30, origY + dy));
+            break;
+          case "w":
+            newW = Math.round(Math.max(60, origW - dx));
+            newX = Math.round(Math.min(origX + origW - 60, origX + dx));
             break;
         }
         return { ...b, pos: [newX, newY, newW, newH] };
@@ -661,8 +687,12 @@ function SlideDesignOverlay({
     });
   }, [dragging, onLayoutChange]);
   const handleMouseUp = useCallback(() => {
+    if (dragging && hasMovedRef.current && onSave) {
+      onSave({ boxes });
+    }
+    hasMovedRef.current = false;
     setDragging(null);
-  }, []);
+  }, [dragging, boxes, onSave]);
   useEffect(() => {
     if (dragging) {
       window.addEventListener("mousemove", handleMouseMove);
@@ -673,6 +703,33 @@ function SlideDesignOverlay({
       };
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
+  const removeSelectedBox = useCallback(() => {
+    if (!selectedId) return;
+    const boxToRemove = boxes.find((b) => b.id === selectedId);
+    setBoxes((prev) => {
+      const updated = prev.filter((b) => b.id !== selectedId);
+      onLayoutChange({ boxes: updated });
+      if (onSave) onSave({ boxes: updated });
+      return updated;
+    });
+    setSelectedId(null);
+    if (boxToRemove && onDeleteBox) {
+      onDeleteBox(boxToRemove);
+    }
+  }, [selectedId, boxes, onLayoutChange, onSave, onDeleteBox, setSelectedId]);
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (editingId) return;
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedId) {
+        e.preventDefault();
+        e.stopPropagation();
+        removeSelectedBox();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedId, editingId, removeSelectedBox]);
   const addNewBox = (targetTag) => {
     const isH1 = targetTag === "h1";
     const newId = `box-${Date.now().toString(36)}`;
@@ -690,6 +747,9 @@ function SlideDesignOverlay({
     setSelectedId(newId);
     setEditingId(newId);
     onLayoutChange({ boxes: updated });
+    if (onAddBox) {
+      onAddBox(newBox);
+    }
   };
   const updateSelectedBox = (partial) => {
     if (!selectedId) return;
@@ -699,15 +759,6 @@ function SlideDesignOverlay({
       return updated;
     });
   };
-  const removeSelectedBox = () => {
-    if (!selectedId) return;
-    setBoxes((prev) => {
-      const updated = prev.filter((b) => b.id !== selectedId);
-      onLayoutChange({ boxes: updated });
-      return updated;
-    });
-    setSelectedId(null);
-  };
   const isLight = theme === "light";
   const isNavy = theme === "navy";
   const toolbarBg = isLight ? "rgba(255, 255, 255, 0.96)" : isNavy ? "rgba(11, 19, 43, 0.95)" : "rgba(24, 25, 32, 0.95)";
@@ -868,8 +919,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"),
@@ -878,8 +930,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(
@@ -893,20 +946,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"
                       }
                     )
                   }
@@ -939,12 +981,14 @@ function SlideDesignOverlay({
                   }
                 ),
                 isSelected && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("div", { style: handleStyle("se", isLight), onMouseDown: (e) => handleMouseDown(e, box, "se") }),
-                  /* @__PURE__ */ jsx("div", { style: handleStyle("e", isLight), onMouseDown: (e) => handleMouseDown(e, box, "e") }),
-                  /* @__PURE__ */ jsx("div", { style: handleStyle("s", isLight), onMouseDown: (e) => handleMouseDown(e, box, "s") }),
-                  /* @__PURE__ */ jsx("div", { style: handleStyle("sw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "sw") }),
-                  /* @__PURE__ */ jsx("div", { style: handleStyle("ne", isLight), onMouseDown: (e) => handleMouseDown(e, box, "ne") }),
-                  /* @__PURE__ */ jsx("div", { style: handleStyle("nw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "nw") })
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("nw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "nw"), title: "K\xE9o g\xF3c tr\xEAn-tr\xE1i" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("n", isLight), onMouseDown: (e) => handleMouseDown(e, box, "n"), title: "K\xE9o c\u1EA1nh tr\xEAn" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("ne", isLight), onMouseDown: (e) => handleMouseDown(e, box, "ne"), title: "K\xE9o g\xF3c tr\xEAn-ph\u1EA3i" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("e", isLight), onMouseDown: (e) => handleMouseDown(e, box, "e"), title: "K\xE9o c\u1EA1nh ph\u1EA3i (Ch\u1EC9nh \u0111\u1ED9 r\u1ED9ng / wrap text)" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("se", isLight), onMouseDown: (e) => handleMouseDown(e, box, "se"), title: "K\xE9o g\xF3c d\u01B0\u1EDBi-ph\u1EA3i (Ch\u1EC9nh k\xEDch th\u01B0\u1EDBc / wrap text)" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("s", isLight), onMouseDown: (e) => handleMouseDown(e, box, "s"), title: "K\xE9o c\u1EA1nh d\u01B0\u1EDBi" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("sw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "sw"), title: "K\xE9o g\xF3c d\u01B0\u1EDBi-tr\xE1i" }),
+                  /* @__PURE__ */ jsx("div", { style: handleStyle("w", isLight), onMouseDown: (e) => handleMouseDown(e, box, "w"), title: "K\xE9o c\u1EA1nh tr\xE1i (Ch\u1EC9nh \u0111\u1ED9 r\u1ED9ng / wrap text)" })
                 ] })
               ]
             },
@@ -1028,7 +1072,7 @@ function SlideDesignOverlay({
                 /* @__PURE__ */ jsx("input", { type: "color", value: selectedBox.color ?? (isLight ? "#0f172a" : "#38bdf8"), onChange: (e) => updateSelectedBox({ color: e.target.value }), style: { width: "22px", height: "22px", padding: "0", border: "none", borderRadius: "4px", cursor: "pointer", backgroundColor: "transparent" } })
               ] }),
               /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => updateSelectedBox({ textAlign: align }), style: { ...btnStyle, backgroundColor: selectedBox.textAlign === align ? "#0284c7" : isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)", color: selectedBox.textAlign === align ? "#ffffff" : isLight ? "#0f172a" : "#e2e8f0", textTransform: "capitalize", fontSize: "11px", padding: "2px 6px", height: "22px" }, children: align }, align)) }),
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: removeSelectedBox, style: { ...btnStyle, backgroundColor: isLight ? "rgba(239, 68, 68, 0.1)" : "rgba(239, 68, 68, 0.2)", color: isLight ? "#dc2626" : "#f87171", border: isLight ? "1px solid rgba(239, 68, 68, 0.3)" : "1px solid rgba(239, 68, 68, 0.4)", fontWeight: 500, height: "22px", padding: "0 8px" }, title: "X\xF3a \u0111\u1ECBnh v\u1ECB t\u1EF1 do c\u1EE7a khung n\xE0y", children: "X\xF3a v\u1ECB tr\xED" })
+              /* @__PURE__ */ jsx("button", { type: "button", onClick: removeSelectedBox, style: { ...btnStyle, backgroundColor: isLight ? "rgba(239, 68, 68, 0.1)" : "rgba(239, 68, 68, 0.2)", color: isLight ? "#dc2626" : "#f87171", border: isLight ? "1px solid rgba(239, 68, 68, 0.3)" : "1px solid rgba(239, 68, 68, 0.4)", fontWeight: 500, height: "22px", padding: "0 8px" }, title: "X\xF3a ph\u1EA7n t\u1EED (ho\u1EB7c nh\u1EA5n Delete tr\xEAn b\xE0n ph\xEDm)", children: "X\xF3a ph\u1EA7n t\u1EED (Del)" })
             ]
           }
         )
@@ -1061,6 +1105,10 @@ function handleStyle(pos, isLight = false) {
       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" };
+    case "n":
+      return { ...base, top: `-${size / 2}px`, left: `calc(50% - ${size / 2}px)`, cursor: "n-resize" };
+    case "w":
+      return { ...base, left: `-${size / 2}px`, top: `calc(50% - ${size / 2}px)`, cursor: "w-resize" };
   }
 }
 var DEFAULT_THEME_OPTIONS = [