@thanh01.pmt/presentation-kit 0.2.8 → 0.2.10

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkVLAPHJOC_cjs = require('./chunk-VLAPHJOC.cjs');
-var chunkIGCFC6GI_cjs = require('./chunk-IGCFC6GI.cjs');
+var chunkTGI6YSZP_cjs = require('./chunk-TGI6YSZP.cjs');
+var chunk3Q4RMZVQ_cjs = require('./chunk-3Q4RMZVQ.cjs');
 
 // src/engine.ts
 function createEngine(config = {}) {
@@ -18,14 +18,14 @@ function createEngine(config = {}) {
   }
   return {
     render: (markdown, options) => {
-      return chunkVLAPHJOC_cjs.renderSlide(markdown, mergeOptions(options));
+      return chunkTGI6YSZP_cjs.renderSlide(markdown, mergeOptions(options));
     },
     renderAsync: async (markdown, options) => {
-      return chunkVLAPHJOC_cjs.renderSlideAsync(markdown, mergeOptions(options));
+      return chunkTGI6YSZP_cjs.renderSlideAsync(markdown, mergeOptions(options));
     },
     getThemeCss: (theme, containerId) => {
-      const resolved = chunkVLAPHJOC_cjs.resolveTheme(theme);
-      return chunkVLAPHJOC_cjs.generateScopedCss2(resolved, containerId);
+      const resolved = chunkTGI6YSZP_cjs.resolveTheme(theme);
+      return chunkTGI6YSZP_cjs.generateScopedCss2(resolved, containerId);
     }
   };
 }
@@ -101,8 +101,8 @@ async function convertMarkdownToPptx(markdown, options) {
   pptx.layout = "LAYOUT_WIDE";
   if (options?.title) pptx.title = options.title;
   if (options?.author) pptx.author = options.author;
-  const renderResult = chunkVLAPHJOC_cjs.renderSlide(markdown);
-  const { slides } = chunkIGCFC6GI_cjs.splitMarkdownSlides(markdown);
+  const renderResult = chunkTGI6YSZP_cjs.renderSlide(markdown);
+  const { slides } = chunk3Q4RMZVQ_cjs.splitMarkdownSlides(markdown);
   const isDark = options?.theme !== "light";
   const defaultBg = isDark ? "14151B" : "FFFFFF";
   const defaultText = isDark ? "F1F5F9" : "1E293B";
@@ -201,143 +201,147 @@ async function convertMarkdownToPptx(markdown, options) {
 
 Object.defineProperty(exports, "convertTextArrows", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.convertTextArrows; }
+  get: function () { return chunkTGI6YSZP_cjs.convertTextArrows; }
 });
 Object.defineProperty(exports, "countSlides", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.countSlides; }
+  get: function () { return chunkTGI6YSZP_cjs.countSlides; }
 });
 Object.defineProperty(exports, "darkThemeTokens", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.darkThemeTokens; }
+  get: function () { return chunkTGI6YSZP_cjs.darkThemeTokens; }
 });
 Object.defineProperty(exports, "defineTheme", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.defineTheme; }
+  get: function () { return chunkTGI6YSZP_cjs.defineTheme; }
 });
 Object.defineProperty(exports, "detectMermaidBlocks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.detectMermaidBlocks; }
+  get: function () { return chunkTGI6YSZP_cjs.detectMermaidBlocks; }
 });
 Object.defineProperty(exports, "extractLayoutsAndNotes", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.extractLayoutsAndNotes; }
+  get: function () { return chunkTGI6YSZP_cjs.extractLayoutsAndNotes; }
 });
 Object.defineProperty(exports, "extractMarpSource", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.extractMarpSource; }
+  get: function () { return chunkTGI6YSZP_cjs.extractMarpSource; }
 });
 Object.defineProperty(exports, "extractMaxClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.extractMaxClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.extractMaxClicks; }
 });
 Object.defineProperty(exports, "filterPresenterNotes", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.filterPresenterNotes; }
+  get: function () { return chunkTGI6YSZP_cjs.filterPresenterNotes; }
 });
 Object.defineProperty(exports, "generateClickCss", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.generateClickCss; }
+  get: function () { return chunkTGI6YSZP_cjs.generateClickCss; }
 });
 Object.defineProperty(exports, "generateLayoutCss", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.generateLayoutCss; }
+  get: function () { return chunkTGI6YSZP_cjs.generateLayoutCss; }
 });
 Object.defineProperty(exports, "generateScopedCss", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.generateScopedCss2; }
+  get: function () { return chunkTGI6YSZP_cjs.generateScopedCss2; }
 });
 Object.defineProperty(exports, "generateScopedCssFromTokens", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.generateScopedCss; }
+  get: function () { return chunkTGI6YSZP_cjs.generateScopedCss; }
 });
 Object.defineProperty(exports, "getHighlighter", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.getHighlighter; }
+  get: function () { return chunkTGI6YSZP_cjs.getHighlighter; }
 });
 Object.defineProperty(exports, "getThemeTokens", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.getThemeTokens; }
+  get: function () { return chunkTGI6YSZP_cjs.getThemeTokens; }
 });
 Object.defineProperty(exports, "highlightCodeBlocks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.highlightCodeBlocks; }
+  get: function () { return chunkTGI6YSZP_cjs.highlightCodeBlocks; }
 });
 Object.defineProperty(exports, "isLayoutComment", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.isLayoutComment; }
+  get: function () { return chunkTGI6YSZP_cjs.isLayoutComment; }
 });
 Object.defineProperty(exports, "lightThemeTokens", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.lightThemeTokens; }
+  get: function () { return chunkTGI6YSZP_cjs.lightThemeTokens; }
 });
 Object.defineProperty(exports, "navyThemeTokens", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.navyThemeTokens; }
+  get: function () { return chunkTGI6YSZP_cjs.navyThemeTokens; }
 });
 Object.defineProperty(exports, "parseLayoutFromComment", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.parseLayoutFromComment; }
+  get: function () { return chunkTGI6YSZP_cjs.parseLayoutFromComment; }
 });
 Object.defineProperty(exports, "postprocessClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.postprocessClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.postprocessClicks; }
 });
 Object.defineProperty(exports, "preprocessClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.preprocessClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.preprocessClicks; }
 });
 Object.defineProperty(exports, "renderMarp", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderMarp; }
+  get: function () { return chunkTGI6YSZP_cjs.renderMarp; }
 });
 Object.defineProperty(exports, "renderMermaidDiagrams", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderMermaidDiagrams; }
+  get: function () { return chunkTGI6YSZP_cjs.renderMermaidDiagrams; }
 });
 Object.defineProperty(exports, "renderSlide", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderSlide; }
+  get: function () { return chunkTGI6YSZP_cjs.renderSlide; }
 });
 Object.defineProperty(exports, "renderSlideAsync", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderSlideAsync; }
+  get: function () { return chunkTGI6YSZP_cjs.renderSlideAsync; }
 });
 Object.defineProperty(exports, "resolveTheme", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.resolveTheme; }
+  get: function () { return chunkTGI6YSZP_cjs.resolveTheme; }
 });
 Object.defineProperty(exports, "sanitizeMermaidCode", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.sanitizeMermaidCode; }
+  get: function () { return chunkTGI6YSZP_cjs.sanitizeMermaidCode; }
 });
 Object.defineProperty(exports, "SLIDE_LAYOUT_PRESETS", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.SLIDE_LAYOUT_PRESETS; }
+  get: function () { return chunk3Q4RMZVQ_cjs.SLIDE_LAYOUT_PRESETS; }
 });
 Object.defineProperty(exports, "getSlideLayoutPresetById", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.getSlideLayoutPresetById; }
+  get: function () { return chunk3Q4RMZVQ_cjs.getSlideLayoutPresetById; }
 });
 Object.defineProperty(exports, "getSlideLayoutPresetsByCategory", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.getSlideLayoutPresetsByCategory; }
+  get: function () { return chunk3Q4RMZVQ_cjs.getSlideLayoutPresetsByCategory; }
+});
+Object.defineProperty(exports, "removeSlideElementFromMarkdown", {
+  enumerable: true,
+  get: function () { return chunk3Q4RMZVQ_cjs.removeSlideElementFromMarkdown; }
 });
 Object.defineProperty(exports, "serializeLayoutToComment", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.serializeLayoutToComment; }
+  get: function () { return chunk3Q4RMZVQ_cjs.serializeLayoutToComment; }
 });
 Object.defineProperty(exports, "splitMarkdownSlides", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.splitMarkdownSlides; }
+  get: function () { return chunk3Q4RMZVQ_cjs.splitMarkdownSlides; }
 });
 Object.defineProperty(exports, "updateSlideLayoutInMarkdown", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.updateSlideLayoutInMarkdown; }
+  get: function () { return chunk3Q4RMZVQ_cjs.updateSlideLayoutInMarkdown; }
 });
 Object.defineProperty(exports, "updateSlideTextInMarkdown", {
   enumerable: true,
-  get: function () { return chunkIGCFC6GI_cjs.updateSlideTextInMarkdown; }
+  get: function () { return chunk3Q4RMZVQ_cjs.updateSlideTextInMarkdown; }
 });
 exports.cleanHexColor = cleanHexColor;
 exports.convertMarkdownToPptx = convertMarkdownToPptx;

package/dist/index.d.cts

@@ -110,6 +110,14 @@ declare function updateSlideLayoutInMarkdown(markdown: string, slideIndex: numbe
  * Replaces oldText with newText within the given slideIndex.
  */
 declare function updateSlideTextInMarkdown(markdown: string, slideIndex: number, oldText: string, newText: string): string;
+/**
+ * Remove an element (line) and its layout box from a specific slide's markdown.
+ */
+declare function removeSlideElementFromMarkdown(markdown: string, slideIndex: number, options: {
+    content?: string;
+    boxId?: string;
+    target?: string;
+}): string;
 
 /**
  * Generate scoped CSS for per-slide layout overrides.
@@ -155,4 +163,4 @@ declare function convertTextArrows(text: string): string;
  */
 declare function extractMarpSource(raw: string): string;
 
-export { MermaidBlock, type PptxExportOptions, SlideEngine, SlideEngineConfig, SlideLayoutData, ThemeTokens, cleanHexColor, convertMarkdownToPptx, convertTextArrows, createEngine, darkThemeTokens, detectMermaidBlocks, extractLayoutsAndNotes, extractMarpSource, filterPresenterNotes, generateLayoutCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, highlightCodeBlocks, isLayoutComment, lightThemeTokens, navyThemeTokens, parseFontSizeToPt, parseLayoutFromComment, renderMermaidDiagrams, sanitizeMermaidCode, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown };
+export { MermaidBlock, type PptxExportOptions, SlideEngine, SlideEngineConfig, SlideLayoutData, ThemeTokens, cleanHexColor, convertMarkdownToPptx, convertTextArrows, createEngine, darkThemeTokens, detectMermaidBlocks, extractLayoutsAndNotes, extractMarpSource, filterPresenterNotes, generateLayoutCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, highlightCodeBlocks, isLayoutComment, lightThemeTokens, navyThemeTokens, parseFontSizeToPt, parseLayoutFromComment, removeSlideElementFromMarkdown, renderMermaidDiagrams, sanitizeMermaidCode, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown };

package/dist/index.d.ts

@@ -110,6 +110,14 @@ declare function updateSlideLayoutInMarkdown(markdown: string, slideIndex: numbe
  * Replaces oldText with newText within the given slideIndex.
  */
 declare function updateSlideTextInMarkdown(markdown: string, slideIndex: number, oldText: string, newText: string): string;
+/**
+ * Remove an element (line) and its layout box from a specific slide's markdown.
+ */
+declare function removeSlideElementFromMarkdown(markdown: string, slideIndex: number, options: {
+    content?: string;
+    boxId?: string;
+    target?: string;
+}): string;
 
 /**
  * Generate scoped CSS for per-slide layout overrides.
@@ -155,4 +163,4 @@ declare function convertTextArrows(text: string): string;
  */
 declare function extractMarpSource(raw: string): string;
 
-export { MermaidBlock, type PptxExportOptions, SlideEngine, SlideEngineConfig, SlideLayoutData, ThemeTokens, cleanHexColor, convertMarkdownToPptx, convertTextArrows, createEngine, darkThemeTokens, detectMermaidBlocks, extractLayoutsAndNotes, extractMarpSource, filterPresenterNotes, generateLayoutCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, highlightCodeBlocks, isLayoutComment, lightThemeTokens, navyThemeTokens, parseFontSizeToPt, parseLayoutFromComment, renderMermaidDiagrams, sanitizeMermaidCode, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown };
+export { MermaidBlock, type PptxExportOptions, SlideEngine, SlideEngineConfig, SlideLayoutData, ThemeTokens, cleanHexColor, convertMarkdownToPptx, convertTextArrows, createEngine, darkThemeTokens, detectMermaidBlocks, extractLayoutsAndNotes, extractMarpSource, filterPresenterNotes, generateLayoutCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, highlightCodeBlocks, isLayoutComment, lightThemeTokens, navyThemeTokens, parseFontSizeToPt, parseLayoutFromComment, removeSlideElementFromMarkdown, renderMermaidDiagrams, sanitizeMermaidCode, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown };

package/dist/index.js

@@ -1,7 +1,7 @@
-import { resolveTheme, generateScopedCss2, renderSlideAsync, renderSlide } from './chunk-JOW4QWKF.js';
-export { convertTextArrows, countSlides, darkThemeTokens, defineTheme, detectMermaidBlocks, extractLayoutsAndNotes, extractMarpSource, extractMaxClicks, filterPresenterNotes, generateClickCss, generateLayoutCss, generateScopedCss2 as generateScopedCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, getThemeTokens, highlightCodeBlocks, isLayoutComment, lightThemeTokens, navyThemeTokens, parseLayoutFromComment, postprocessClicks, preprocessClicks, renderMarp, renderMermaidDiagrams, renderSlide, renderSlideAsync, resolveTheme, sanitizeMermaidCode } from './chunk-JOW4QWKF.js';
-import { splitMarkdownSlides } from './chunk-26ZVUVXF.js';
-export { SLIDE_LAYOUT_PRESETS, getSlideLayoutPresetById, getSlideLayoutPresetsByCategory, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown } from './chunk-26ZVUVXF.js';
+import { resolveTheme, generateScopedCss2, renderSlideAsync, renderSlide } from './chunk-NYLDRVHZ.js';
+export { convertTextArrows, countSlides, darkThemeTokens, defineTheme, detectMermaidBlocks, extractLayoutsAndNotes, extractMarpSource, extractMaxClicks, filterPresenterNotes, generateClickCss, generateLayoutCss, generateScopedCss2 as generateScopedCss, generateScopedCss as generateScopedCssFromTokens, getHighlighter, getThemeTokens, highlightCodeBlocks, isLayoutComment, lightThemeTokens, navyThemeTokens, parseLayoutFromComment, postprocessClicks, preprocessClicks, renderMarp, renderMermaidDiagrams, renderSlide, renderSlideAsync, resolveTheme, sanitizeMermaidCode } from './chunk-NYLDRVHZ.js';
+import { splitMarkdownSlides } from './chunk-V6X7D44H.js';
+export { SLIDE_LAYOUT_PRESETS, getSlideLayoutPresetById, getSlideLayoutPresetsByCategory, removeSlideElementFromMarkdown, serializeLayoutToComment, splitMarkdownSlides, updateSlideLayoutInMarkdown, updateSlideTextInMarkdown } from './chunk-V6X7D44H.js';
 
 // src/engine.ts
 function createEngine(config = {}) {

package/dist/react/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var chunkVLAPHJOC_cjs = require('../chunk-VLAPHJOC.cjs');
-var chunkIGCFC6GI_cjs = require('../chunk-IGCFC6GI.cjs');
+var chunkTGI6YSZP_cjs = require('../chunk-TGI6YSZP.cjs');
+var chunk3Q4RMZVQ_cjs = require('../chunk-3Q4RMZVQ.cjs');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -21,7 +21,7 @@ function useSlideState(options) {
   const result = react.useMemo(() => {
     if (!markdown || !markdown.trim()) return null;
     renderCountRef.current++;
-    return chunkVLAPHJOC_cjs.renderSlide(markdown, {
+    return chunkTGI6YSZP_cjs.renderSlide(markdown, {
       theme,
       enableMermaid: true,
       enableClicks,
@@ -585,23 +585,38 @@ function SlideDesignOverlay({
   layout,
   onLayoutChange,
   onSave,
+  onDeleteBox,
+  onAddBox,
   onClose,
   isActive,
-  theme = "dark"
+  theme = "dark",
+  selectedBoxId,
+  onSelectBoxId
 }) {
   if (!isActive) return null;
   const [boxes, setBoxes] = react.useState(layout?.boxes ?? []);
-  const [selectedId, setSelectedId] = react.useState(null);
+  const [selectedId, setSelectedIdState] = react.useState(selectedBoxId ?? null);
   const [editingId, setEditingId] = react.useState(null);
   const containerRef = react.useRef(null);
+  const setSelectedId = react.useCallback((id) => {
+    setSelectedIdState(id);
+    if (onSelectBoxId) onSelectBoxId(id);
+  }, [onSelectBoxId]);
+  react.useEffect(() => {
+    if (selectedBoxId !== void 0) {
+      setSelectedIdState(selectedBoxId);
+    }
+  }, [selectedBoxId]);
   react.useEffect(() => {
     setBoxes(layout?.boxes ?? []);
   }, [layout, slideIndex]);
   const selectedBox = boxes.find((b) => b.id === selectedId) ?? null;
+  const hasMovedRef = react.useRef(false);
   const [dragging, setDragging] = react.useState(null);
   const handleMouseDown = (e, box, type) => {
     e.preventDefault();
     e.stopPropagation();
+    hasMovedRef.current = false;
     setSelectedId(box.id);
     setDragging({
       type,
@@ -618,6 +633,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) => {
@@ -629,30 +647,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] };
@@ -662,8 +688,12 @@ function SlideDesignOverlay({
     });
   }, [dragging, onLayoutChange]);
   const handleMouseUp = react.useCallback(() => {
+    if (dragging && hasMovedRef.current && onSave) {
+      onSave({ boxes });
+    }
+    hasMovedRef.current = false;
     setDragging(null);
-  }, []);
+  }, [dragging, boxes, onSave]);
   react.useEffect(() => {
     if (dragging) {
       window.addEventListener("mousemove", handleMouseMove);
@@ -674,6 +704,33 @@ function SlideDesignOverlay({
       };
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
+  const removeSelectedBox = react.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]);
+  react.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)}`;
@@ -691,6 +748,9 @@ function SlideDesignOverlay({
     setSelectedId(newId);
     setEditingId(newId);
     onLayoutChange({ boxes: updated });
+    if (onAddBox) {
+      onAddBox(newBox);
+    }
   };
   const updateSelectedBox = (partial) => {
     if (!selectedId) return;
@@ -700,15 +760,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)";
@@ -778,7 +829,7 @@ function SlideDesignOverlay({
                 "select",
                 {
                   onChange: (e) => {
-                    const preset = chunkIGCFC6GI_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
+                    const preset = chunk3Q4RMZVQ_cjs.SLIDE_LAYOUT_PRESETS.find((p) => p.id === e.target.value);
                     if (preset) {
                       const clonedBoxes = JSON.parse(JSON.stringify(preset.layout.boxes));
                       setBoxes(clonedBoxes);
@@ -798,7 +849,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)..." }),
-                    chunkIGCFC6GI_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))
+                    chunk3Q4RMZVQ_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))
                   ]
                 }
               ),
@@ -869,8 +920,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"),
@@ -879,8 +931,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__ */ jsxRuntime.jsx(
@@ -894,20 +947,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__ */ jsxRuntime.jsx("span", { children: box.content }) : /* @__PURE__ */ jsxRuntime.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"
                       }
                     )
                   }
@@ -940,12 +982,14 @@ function SlideDesignOverlay({
                   }
                 ),
                 isSelected && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("se", isLight), onMouseDown: (e) => handleMouseDown(e, box, "se") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("e", isLight), onMouseDown: (e) => handleMouseDown(e, box, "e") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("s", isLight), onMouseDown: (e) => handleMouseDown(e, box, "s") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("sw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "sw") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("ne", isLight), onMouseDown: (e) => handleMouseDown(e, box, "ne") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("nw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "nw") })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("nw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "nw"), title: "K\xE9o g\xF3c tr\xEAn-tr\xE1i" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("n", isLight), onMouseDown: (e) => handleMouseDown(e, box, "n"), title: "K\xE9o c\u1EA1nh tr\xEAn" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("ne", isLight), onMouseDown: (e) => handleMouseDown(e, box, "ne"), title: "K\xE9o g\xF3c tr\xEAn-ph\u1EA3i" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: handleStyle("s", isLight), onMouseDown: (e) => handleMouseDown(e, box, "s"), title: "K\xE9o c\u1EA1nh d\u01B0\u1EDBi" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle("sw", isLight), onMouseDown: (e) => handleMouseDown(e, box, "sw"), title: "K\xE9o g\xF3c d\u01B0\u1EDBi-tr\xE1i" }),
+                  /* @__PURE__ */ jsxRuntime.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)" })
                 ] })
               ]
             },
@@ -1029,7 +1073,7 @@ function SlideDesignOverlay({
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px", whiteSpace: "nowrap" }, children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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)" })
             ]
           }
         )
@@ -1062,6 +1106,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 = [
@@ -1197,7 +1245,7 @@ function SlideViewer({
       containers.forEach((container) => {
         if (container instanceof HTMLElement) {
           const themeName2 = typeof theme === "string" ? theme : "dark";
-          chunkVLAPHJOC_cjs.renderMermaidDiagrams(container, themeName2).catch(() => {
+          chunkTGI6YSZP_cjs.renderMermaidDiagrams(container, themeName2).catch(() => {
           });
         }
       });
@@ -1414,7 +1462,7 @@ function SlideViewer({
               onSave: (layout) => {
                 setLiveLayout(layout);
                 if (onSaveMarkdown) {
-                  const updated = chunkIGCFC6GI_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
+                  const updated = chunk3Q4RMZVQ_cjs.updateSlideLayoutInMarkdown(markdown, currentIndex, layout);
                   onSaveMarkdown(updated);
                 }
               },
@@ -1450,35 +1498,35 @@ function SlideViewer({
 
 Object.defineProperty(exports, "defineTheme", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.defineTheme; }
+  get: function () { return chunkTGI6YSZP_cjs.defineTheme; }
 });
 Object.defineProperty(exports, "extractMaxClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.extractMaxClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.extractMaxClicks; }
 });
 Object.defineProperty(exports, "generateClickCss", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.generateClickCss; }
+  get: function () { return chunkTGI6YSZP_cjs.generateClickCss; }
 });
 Object.defineProperty(exports, "postprocessClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.postprocessClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.postprocessClicks; }
 });
 Object.defineProperty(exports, "preprocessClicks", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.preprocessClicks; }
+  get: function () { return chunkTGI6YSZP_cjs.preprocessClicks; }
 });
 Object.defineProperty(exports, "renderSlide", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderSlide; }
+  get: function () { return chunkTGI6YSZP_cjs.renderSlide; }
 });
 Object.defineProperty(exports, "renderSlideAsync", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.renderSlideAsync; }
+  get: function () { return chunkTGI6YSZP_cjs.renderSlideAsync; }
 });
 Object.defineProperty(exports, "resolveTheme", {
   enumerable: true,
-  get: function () { return chunkVLAPHJOC_cjs.resolveTheme; }
+  get: function () { return chunkTGI6YSZP_cjs.resolveTheme; }
 });
 exports.DeckView = DeckView;
 exports.NavigationBar = NavigationBar;