@thanh01.pmt/presentation-kit 0.2.4 → 0.2.5

package/dist/ai/index.d.cts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
-import { c as SlideLayoutCategory } from '../presets-JpoJbNKE.cjs';
-import { b as SlideLayoutData } from '../types-DnR81ReX.cjs';
+import { c as SlideLayoutCategory } from '../presets-BIw_4ZXR.cjs';
+import { b as SlideLayoutData } from '../types-C1121XLt.cjs';
 
 declare const listSlidePresetsSchema: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["all", "cover", "content", "split", "code", "metrics", "diagram", "quote", "assessment"]>>;

package/dist/ai/index.d.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
-import { c as SlideLayoutCategory } from '../presets-B1N2_jKl.js';
-import { b as SlideLayoutData } from '../types-DnR81ReX.js';
+import { c as SlideLayoutCategory } from '../presets-B_TY4i2a.js';
+import { b as SlideLayoutData } from '../types-C1121XLt.js';
 
 declare const listSlidePresetsSchema: z.ZodObject<{
     category: z.ZodOptional<z.ZodEnum<["all", "cover", "content", "split", "code", "metrics", "diagram", "quote", "assessment"]>>;

package/dist/{click-css-BGZI3XKk.d.cts → click-css-BP9oqy_1.d.cts}

@@ -1,4 +1,4 @@
-import { d as SlideRenderOptions, e as SlideRenderResult, f as SlideRenderAsyncResult, T as ThemeTokens, c as SlideTheme, B as BuiltInTheme } from './types-DnR81ReX.cjs';
+import { d as SlideRenderOptions, e as SlideRenderResult, f as SlideRenderAsyncResult, T as ThemeTokens, c as SlideTheme, B as BuiltInTheme } from './types-C1121XLt.cjs';
 
 interface RenderMarpResult {
     html: string;

package/dist/{click-css-eWONB-hS.d.ts → click-css-BbhqdtGr.d.ts}

@@ -1,4 +1,4 @@
-import { d as SlideRenderOptions, e as SlideRenderResult, f as SlideRenderAsyncResult, T as ThemeTokens, c as SlideTheme, B as BuiltInTheme } from './types-DnR81ReX.js';
+import { d as SlideRenderOptions, e as SlideRenderResult, f as SlideRenderAsyncResult, T as ThemeTokens, c as SlideTheme, B as BuiltInTheme } from './types-C1121XLt.js';
 
 interface RenderMarpResult {
     html: string;

package/dist/index.d.cts

@@ -1,8 +1,8 @@
-export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, c as countSlides, d as defineTheme, i as extractMaxClicks, j as generateClickCss, f as generateScopedCss, g as getThemeTokens, h as postprocessClicks, p as preprocessClicks, b as renderMarp, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from './click-css-BGZI3XKk.cjs';
-import { S as SlideEngineConfig, a as SlideEngine, T as ThemeTokens, M as MermaidBlock, b as SlideLayoutData } from './types-DnR81ReX.cjs';
-export { B as BuiltInTheme, L as LayoutBoxConfig, f as SlideRenderAsyncResult, d as SlideRenderOptions, e as SlideRenderResult, c as SlideTheme } from './types-DnR81ReX.cjs';
+export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, c as countSlides, d as defineTheme, i as extractMaxClicks, j as generateClickCss, f as generateScopedCss, g as getThemeTokens, h as postprocessClicks, p as preprocessClicks, b as renderMarp, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from './click-css-BP9oqy_1.cjs';
+import { S as SlideEngineConfig, a as SlideEngine, T as ThemeTokens, M as MermaidBlock, b as SlideLayoutData } from './types-C1121XLt.cjs';
+export { B as BuiltInTheme, L as LayoutBoxConfig, f as SlideRenderAsyncResult, d as SlideRenderOptions, e as SlideRenderResult, c as SlideTheme } from './types-C1121XLt.cjs';
 import { Highlighter } from 'shiki';
-export { S as SLIDE_LAYOUT_PRESETS, c as SlideLayoutCategory, b as SlideLayoutPreset, g as getSlideLayoutPresetById, a as getSlideLayoutPresetsByCategory } from './presets-JpoJbNKE.cjs';
+export { S as SLIDE_LAYOUT_PRESETS, c as SlideLayoutCategory, b as SlideLayoutPreset, g as getSlideLayoutPresetById, a as getSlideLayoutPresetsByCategory } from './presets-BIw_4ZXR.cjs';
 
 /**
  * Create a slide engine instance with default configuration.

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, c as countSlides, d as defineTheme, i as extractMaxClicks, j as generateClickCss, f as generateScopedCss, g as getThemeTokens, h as postprocessClicks, p as preprocessClicks, b as renderMarp, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from './click-css-eWONB-hS.js';
-import { S as SlideEngineConfig, a as SlideEngine, T as ThemeTokens, M as MermaidBlock, b as SlideLayoutData } from './types-DnR81ReX.js';
-export { B as BuiltInTheme, L as LayoutBoxConfig, f as SlideRenderAsyncResult, d as SlideRenderOptions, e as SlideRenderResult, c as SlideTheme } from './types-DnR81ReX.js';
+export { l as ClickCssOptions, k as ClickPostprocessResult, C as ClickPreprocessResult, c as countSlides, d as defineTheme, i as extractMaxClicks, j as generateClickCss, f as generateScopedCss, g as getThemeTokens, h as postprocessClicks, p as preprocessClicks, b as renderMarp, r as renderSlide, a as renderSlideAsync, e as resolveTheme } from './click-css-BbhqdtGr.js';
+import { S as SlideEngineConfig, a as SlideEngine, T as ThemeTokens, M as MermaidBlock, b as SlideLayoutData } from './types-C1121XLt.js';
+export { B as BuiltInTheme, L as LayoutBoxConfig, f as SlideRenderAsyncResult, d as SlideRenderOptions, e as SlideRenderResult, c as SlideTheme } from './types-C1121XLt.js';
 import { Highlighter } from 'shiki';
-export { S as SLIDE_LAYOUT_PRESETS, c as SlideLayoutCategory, b as SlideLayoutPreset, g as getSlideLayoutPresetById, a as getSlideLayoutPresetsByCategory } from './presets-B1N2_jKl.js';
+export { S as SLIDE_LAYOUT_PRESETS, c as SlideLayoutCategory, b as SlideLayoutPreset, g as getSlideLayoutPresetById, a as getSlideLayoutPresetsByCategory } from './presets-B_TY4i2a.js';
 
 /**
  * Create a slide engine instance with default configuration.

package/dist/{presets-JpoJbNKE.d.cts → presets-BIw_4ZXR.d.cts}

@@ -1,4 +1,4 @@
-import { b as SlideLayoutData } from './types-DnR81ReX.cjs';
+import { b as SlideLayoutData } from './types-C1121XLt.cjs';
 
 type SlideLayoutCategory = 'cover' | 'content' | 'split' | 'code' | 'metrics' | 'diagram' | 'quote' | 'assessment';
 interface SlideLayoutPreset {

package/dist/{presets-B1N2_jKl.d.ts → presets-B_TY4i2a.d.ts}

@@ -1,4 +1,4 @@
-import { b as SlideLayoutData } from './types-DnR81ReX.js';
+import { b as SlideLayoutData } from './types-C1121XLt.js';
 
 type SlideLayoutCategory = 'cover' | 'content' | 'split' | 'code' | 'metrics' | 'diagram' | 'quote' | 'assessment';
 interface SlideLayoutPreset {

package/dist/react/index.cjs

@@ -592,6 +592,7 @@ function SlideDesignOverlay({
   if (!isActive) return null;
   const [boxes, setBoxes] = react.useState(layout?.boxes ?? []);
   const [selectedId, setSelectedId] = react.useState(null);
+  const [editingId, setEditingId] = react.useState(null);
   const containerRef = react.useRef(null);
   react.useEffect(() => {
     setBoxes(layout?.boxes ?? []);
@@ -674,16 +675,21 @@ function SlideDesignOverlay({
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
   const addNewBox = (targetTag) => {
+    const isH1 = targetTag === "h1";
     const newId = `box-${Date.now().toString(36)}`;
     const newBox = {
       id: newId,
       target: targetTag,
-      pos: [100, 200, 500, 100],
-      fontSize: targetTag === "h1" ? "2.5rem" : "1.2rem"
+      content: isH1 ? "Ti\xEAu \u0111\u1EC1 b\xE0i gi\u1EA3ng" : "Nh\u1EADp n\u1ED9i dung \u0111o\u1EA1n v\u0103n t\u1EA1i \u0111\xE2y...",
+      pos: [100, isH1 ? 160 : 300, isH1 ? 700 : 600, isH1 ? 90 : 120],
+      fontSize: isH1 ? "2.5rem" : "1.2rem",
+      color: isLight ? "#0f172a" : "#f8fafc",
+      textAlign: "left"
     };
     const updated = [...boxes, newBox];
     setBoxes(updated);
     setSelectedId(newId);
+    setEditingId(newId);
     onLayoutChange({ boxes: updated });
   };
   const updateSelectedBox = (partial) => {
@@ -825,12 +831,86 @@ function SlideDesignOverlay({
                 height: `${heightPercent}%`,
                 border: isSelected ? isLight ? "2px solid #0284c7" : "2px solid #38bdf8" : isLight ? "1.5px dashed rgba(2, 132, 199, 0.5)" : "1.5px dashed rgba(56, 189, 248, 0.5)",
                 backgroundColor: isSelected ? isLight ? "rgba(2, 132, 199, 0.08)" : "rgba(56, 189, 248, 0.08)" : isLight ? "rgba(2, 132, 199, 0.02)" : "rgba(56, 189, 248, 0.03)",
-                cursor: "move",
-                userSelect: "none",
+                cursor: editingId === box.id ? "default" : "move",
+                userSelect: editingId === box.id ? "text" : "none",
                 boxSizing: "border-box",
-                zIndex: isSelected ? 40 : 20
+                zIndex: isSelected ? 40 : 20,
+                display: "flex",
+                alignItems: "center",
+                overflow: "visible"
               },
               children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      width: "100%",
+                      height: "100%",
+                      padding: "4px 8px",
+                      boxSizing: "border-box",
+                      display: "flex",
+                      alignItems: "center",
+                      overflow: "hidden"
+                    },
+                    children: editingId === box.id ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "textarea",
+                      {
+                        autoFocus: true,
+                        value: box.content ?? "",
+                        placeholder: box.target === "h1" ? "Nh\u1EADp ti\xEAu \u0111\u1EC1..." : "Nh\u1EADp n\u1ED9i dung...",
+                        onChange: (e) => updateSelectedBox({ content: e.target.value }),
+                        onBlur: () => setEditingId(null),
+                        onKeyDown: (e) => {
+                          if (e.key === "Escape") setEditingId(null);
+                        },
+                        onClick: (e) => e.stopPropagation(),
+                        onMouseDown: (e) => e.stopPropagation(),
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          background: "transparent",
+                          border: "none",
+                          outline: "none",
+                          resize: "none",
+                          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,
+                          padding: 0,
+                          margin: 0
+                        }
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        onDoubleClick: (e) => {
+                          e.stopPropagation();
+                          setSelectedId(box.id);
+                          setEditingId(box.id);
+                        },
+                        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"
+                        },
+                        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)..." })
+                      }
+                    )
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsxs(
                   "div",
                   {
@@ -883,7 +963,7 @@ function SlideDesignOverlay({
               pointerEvents: "auto",
               display: "flex",
               alignItems: "center",
-              gap: "12px",
+              gap: "10px",
               padding: "8px 16px",
               backgroundColor: toolbarBg,
               backdropFilter: "blur(12px)",
@@ -901,16 +981,54 @@ function SlideDesignOverlay({
                 "Khung: ",
                 selectedBox.target
               ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: subtextColor, fontSize: "11px" }, children: "Ch\u1EEF:" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "text",
+                    value: selectedBox.content ?? "",
+                    placeholder: "Nh\u1EADp n\u1ED9i dung...",
+                    onChange: (e) => updateSelectedBox({ content: e.target.value }),
+                    style: {
+                      width: "130px",
+                      padding: "2px 8px",
+                      borderRadius: "4px",
+                      border: isLight ? "1px solid #cbd5e1" : "1px solid #334155",
+                      backgroundColor: isLight ? "#f8fafc" : "#0f172a",
+                      color: isLight ? "#0f172a" : "#f8fafc",
+                      fontSize: "11px"
+                    }
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => setEditingId(selectedBox.id),
+                  style: {
+                    ...btnStyle,
+                    backgroundColor: editingId === selectedBox.id ? "#0284c7" : isLight ? "rgba(0,0,0,0.05)" : "rgba(255,255,255,0.05)",
+                    color: editingId === selectedBox.id ? "#ffffff" : isLight ? "#0f172a" : "#e2e8f0",
+                    height: "24px",
+                    padding: "0 8px"
+                  },
+                  title: "S\u1EEDa ch\u1EEF tr\u1EF1c ti\u1EBFp trong khung",
+                  children: "S\u1EEDa ch\u1EEF"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "1px", height: "14px", backgroundColor: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.15)" } }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: subtextColor, fontSize: "11px" }, children: "Size:" }),
-                /* @__PURE__ */ jsxRuntime.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: isLight ? "1px solid #cbd5e1" : "1px solid #334155", backgroundColor: isLight ? "#f8fafc" : "#0f172a", color: isLight ? "#0f172a" : "#f8fafc", fontSize: "11px" } })
+                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: selectedBox.fontSize ?? "1.5rem", onChange: (e) => updateSelectedBox({ fontSize: e.target.value }), style: { width: "55px", padding: "2px 6px", borderRadius: "4px", border: isLight ? "1px solid #cbd5e1" : "1px solid #334155", backgroundColor: isLight ? "#f8fafc" : "#0f172a", color: isLight ? "#0f172a" : "#f8fafc", fontSize: "11px" } })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: subtextColor, fontSize: "11px" }, children: "Color:" }),
-                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "color", value: selectedBox.color ?? (isLight ? "#0f172a" : "#38bdf8"), onChange: (e) => updateSelectedBox({ color: e.target.value }), style: { width: "24px", height: "24px", padding: "0", border: "none", borderRadius: "4px", cursor: "pointer", backgroundColor: "transparent" } })
+                /* @__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 8px", height: "24px" }, 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: "24px" }, 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("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" })
             ]
           }
         )