@thanh01.pmt/presentation-kit 0.2.3 → 0.2.5

package/dist/react/index.cjs

@@ -586,11 +586,13 @@ function SlideDesignOverlay({
   onLayoutChange,
   onSave,
   onClose,
-  isActive
+  isActive,
+  theme = "dark"
 }) {
   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 ?? []);
@@ -623,40 +625,37 @@ function SlideDesignOverlay({
         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));
+            newX = Math.round(Math.max(0, Math.min(1280 - origW, origX + dx)));
+            newY = Math.round(Math.max(0, Math.min(720 - origH, origY + dy)));
             break;
           case "se":
-            newW = Math.max(50, origW + dx);
-            newH = Math.max(30, origH + dy);
+            newW = Math.round(Math.max(100, Math.min(1280 - origX, origW + dx)));
+            newH = Math.round(Math.max(40, Math.min(720 - origY, origH + dy)));
             break;
           case "e":
-            newW = Math.max(50, origW + dx);
+            newW = Math.round(Math.max(100, Math.min(1280 - origX, origW + dx)));
             break;
           case "s":
-            newH = Math.max(30, origH + dy);
+            newH = Math.round(Math.max(40, Math.min(720 - origY, 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);
+            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));
             break;
           case "ne":
-            newY = Math.min(origY + origH - 30, origY + dy);
-            newW = Math.max(50, origW + dx);
-            newH = Math.max(30, origH - dy);
+            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));
             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);
+            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));
             break;
         }
-        return {
-          ...b,
-          pos: [Math.round(newX), Math.round(newY), Math.round(newW), Math.round(newH)]
-        };
+        return { ...b, pos: [newX, newY, newW, newH] };
       });
       onLayoutChange({ boxes: updated });
       return updated;
@@ -676,23 +675,27 @@ function SlideDesignOverlay({
     }
   }, [dragging, handleMouseMove, handleMouseUp]);
   const addNewBox = (targetTag) => {
+    const isH1 = targetTag === "h1";
+    const newId = `box-${Date.now().toString(36)}`;
     const newBox = {
-      id: `box-${Date.now().toString(36)}`,
+      id: newId,
       target: targetTag,
-      pos: [100, 120 + boxes.length * 80, 600, 100],
-      fontSize: targetTag === "h1" ? "2.5rem" : "1.2rem",
-      color: targetTag === "h1" ? "#38bdf8" : "#e2e8f0",
+      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(newBox.id);
+    setSelectedId(newId);
+    setEditingId(newId);
     onLayoutChange({ boxes: updated });
   };
-  const updateSelectedBox = (updates) => {
+  const updateSelectedBox = (partial) => {
     if (!selectedId) return;
     setBoxes((prev) => {
-      const updated = prev.map((b) => b.id === selectedId ? { ...b, ...updates } : b);
+      const updated = prev.map((b) => b.id === selectedId ? { ...b, ...partial } : b);
       onLayoutChange({ boxes: updated });
       return updated;
     });
@@ -706,6 +709,32 @@ function SlideDesignOverlay({
     });
     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)";
+  const toolbarBorder = isLight ? "1px solid rgba(0, 0, 0, 0.12)" : isNavy ? "1px solid rgba(56, 189, 248, 0.35)" : "1px solid rgba(255, 255, 255, 0.15)";
+  const toolbarColor = isLight ? "#0f172a" : "#f8fafc";
+  const toolbarShadow = isLight ? "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)" : "0 12px 30px rgba(0, 0, 0, 0.6)";
+  const brandColor = isLight ? "#0284c7" : "#38bdf8";
+  const subtextColor = isLight ? "#64748b" : "#94a3b8";
+  const btnStyle = {
+    height: "28px",
+    padding: "0 12px",
+    borderRadius: "14px",
+    fontSize: "11px",
+    fontWeight: 500,
+    fontFamily: "inherit",
+    border: isLight ? "1px solid rgba(0, 0, 0, 0.1)" : "1px solid rgba(255, 255, 255, 0.15)",
+    backgroundColor: isLight ? "rgba(0, 0, 0, 0.04)" : "rgba(255, 255, 255, 0.08)",
+    color: isLight ? "#0f172a" : "#f1f5f9",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    whiteSpace: "nowrap",
+    flexShrink: 0,
+    transition: "all 0.15s ease"
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -714,7 +743,6 @@ function SlideDesignOverlay({
         inset: 0,
         zIndex: 50,
         pointerEvents: "none"
-        // Allow passing through to children that have pointerEvents: 'auto'
       },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -731,36 +759,21 @@ function SlideDesignOverlay({
               alignItems: "center",
               gap: "8px",
               padding: "6px 14px",
-              backgroundColor: "#1e1f29",
-              border: "1px solid rgba(56, 189, 248, 0.4)",
+              backgroundColor: toolbarBg,
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              border: toolbarBorder,
               borderRadius: "24px",
-              boxShadow: "0 8px 30px rgba(0, 0, 0, 0.5)",
-              color: "#f8fafc",
+              boxShadow: toolbarShadow,
+              color: toolbarColor,
               fontSize: "12px",
-              fontFamily: "Inter, sans-serif"
+              fontFamily: "Inter, sans-serif",
+              whiteSpace: "nowrap"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: "#38bdf8" }, children: "Design Canvas:" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, color: brandColor, whiteSpace: "nowrap" }, children: "Design Canvas:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => addNewBox("h1"), style: btnStyle, title: "Th\xEAm khung v\u1ECB tr\xED Ti\xEAu \u0111\u1EC1", children: "+ Ti\xEAu \u0111\u1EC1 (H1)" }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => addNewBox("p"), style: btnStyle, title: "Th\xEAm khung v\u1ECB tr\xED \u0110o\u1EA1n v\u0103n", children: "+ \u0110o\u1EA1n v\u0103n (P)" }),
               /* @__PURE__ */ jsxRuntime.jsxs(
                 "select",
                 {
@@ -774,263 +787,248 @@ function SlideDesignOverlay({
                   },
                   defaultValue: "",
                   style: {
-                    ...toolbarButtonStyle,
+                    ...btnStyle,
                     cursor: "pointer",
                     outline: "none",
-                    color: "#f8fafc",
-                    border: "1px solid rgba(56, 189, 248, 0.3)"
+                    color: isLight ? "#0f172a" : "#f8fafc",
+                    backgroundColor: isLight ? "#ffffff" : "#1e1f29",
+                    border: isLight ? "1px solid rgba(0, 0, 0, 0.15)" : "1px solid rgba(56, 189, 248, 0.3)",
+                    maxWidth: "180px"
                   },
                   title: "\xC1p d\u1EE5ng m\u1EABu b\u1ED1 c\u1EE5c c\xF3 s\u1EB5n",
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, style: { backgroundColor: "#1e1f29", color: "#94a3b8" }, children: "M\u1EABu b\u1ED1 c\u1EE5c (Presets)..." }),
-                    chunkO5MCKVEA_cjs.SLIDE_LAYOUT_PRESETS.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, style: { backgroundColor: "#1e1f29", color: "#f8fafc" }, children: p.name }, p.id))
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, style: { backgroundColor: isLight ? "#ffffff" : "#1e1f29", color: subtextColor }, children: "M\u1EABu b\u1ED1 c\u1EE5c (Presets)..." }),
+                    chunkO5MCKVEA_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))
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "1px", height: "16px", backgroundColor: "rgba(255,255,255,0.2)" } }),
-              onSave && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onSave({ boxes }),
-                  style: {
-                    ...toolbarButtonStyle,
-                    backgroundColor: "#0284c7",
-                    color: "#ffffff",
-                    fontWeight: 600
-                  },
-                  children: "L\u01B0u b\u1ED1 c\u1EE5c"
-                }
-              ),
-              onClose && /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: onClose,
-                  style: {
-                    ...toolbarButtonStyle,
-                    backgroundColor: "transparent",
-                    color: "#94a3b8"
-                  },
-                  children: "\u0110\xF3ng"
-                }
-              )
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: "1px", height: "16px", backgroundColor: isLight ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.2)" } }),
+              onSave && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => onSave({ boxes }), style: { ...btnStyle, backgroundColor: "#0284c7", color: "#ffffff", fontWeight: 600, border: "none" }, children: "L\u01B0u b\u1ED1 c\u1EE5c" }),
+              onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClose, style: { ...btnStyle, backgroundColor: "transparent", border: "none", color: subtextColor }, children: "\u0110\xF3ng" })
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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 ? 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: editingId === box.id ? "default" : "move",
+                userSelect: editingId === box.id ? "text" : "none",
+                boxSizing: "border-box",
+                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: {
-                          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"
+                          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"
                         },
-                        children: [
-                          box.target || box.id,
-                          " (",
-                          Math.round(x),
-                          ", ",
-                          Math.round(y),
-                          ")"
-                        ]
+                        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)..." })
                       }
-                    ),
-                    isSelected && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: handleStyle("se"),
-                          onMouseDown: (e) => handleMouseDown(e, box, "se")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: handleStyle("e"),
-                          onMouseDown: (e) => handleMouseDown(e, box, "e")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: handleStyle("s"),
-                          onMouseDown: (e) => handleMouseDown(e, box, "s")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: handleStyle("sw"),
-                          onMouseDown: (e) => handleMouseDown(e, box, "sw")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: handleStyle("ne"),
-                          onMouseDown: (e) => handleMouseDown(e, box, "ne")
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          style: handleStyle("nw"),
-                          onMouseDown: (e) => handleMouseDown(e, box, "nw")
-                        }
-                      )
-                    ] })
-                  ]
-                },
-                box.id
-              );
-            })
-          }
-        ),
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      top: "-20px",
+                      left: "0",
+                      fontSize: "10px",
+                      fontWeight: 600,
+                      color: isLight ? isSelected ? "#0284c7" : "#475569" : isSelected ? "#38bdf8" : "rgba(56, 189, 248, 0.8)",
+                      backgroundColor: isLight ? "rgba(255,255,255,0.95)" : "rgba(15,23,42,0.9)",
+                      border: isLight ? "1px solid rgba(0,0,0,0.1)" : "1px solid rgba(56,189,248,0.3)",
+                      padding: "1px 6px",
+                      borderRadius: "4px",
+                      whiteSpace: "nowrap",
+                      boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
+                    },
+                    children: [
+                      box.target || box.id,
+                      " (",
+                      Math.round(x),
+                      ", ",
+                      Math.round(y),
+                      ")"
+                    ]
+                  }
+                ),
+                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") })
+                ] })
+              ]
+            },
+            box.id
+          );
+        }) }),
         selectedBox && /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             style: {
               position: "absolute",
-              bottom: "24px",
+              bottom: "20px",
               left: "50%",
               transform: "translateX(-50%)",
               zIndex: 60,
               pointerEvents: "auto",
               display: "flex",
               alignItems: "center",
-              gap: "12px",
+              gap: "10px",
               padding: "8px 16px",
-              backgroundColor: "#181920",
-              border: "1px solid rgba(255,255,255,0.15)",
+              backgroundColor: toolbarBg,
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)",
+              border: toolbarBorder,
               borderRadius: "12px",
-              boxShadow: "0 10px 30px rgba(0,0,0,0.6)",
-              color: "#f8fafc",
+              boxShadow: toolbarShadow,
+              color: toolbarColor,
               fontSize: "12px",
-              fontFamily: "Inter, sans-serif"
+              fontFamily: "Inter, sans-serif",
+              whiteSpace: "nowrap"
             },
             children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, color: "#38bdf8" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, color: brandColor, whiteSpace: "nowrap" }, children: [
                 "Khung: ",
                 selectedBox.target
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#94a3b8", fontSize: "11px" }, children: "Size:" }),
+              /* @__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.fontSize ?? "1.5rem",
-                    onChange: (e) => updateSelectedBox({ fontSize: e.target.value }),
+                    value: selectedBox.content ?? "",
+                    placeholder: "Nh\u1EADp n\u1ED9i dung...",
+                    onChange: (e) => updateSelectedBox({ content: e.target.value }),
                     style: {
-                      width: "60px",
-                      padding: "2px 6px",
+                      width: "130px",
+                      padding: "2px 8px",
                       borderRadius: "4px",
-                      border: "1px solid #334155",
-                      backgroundColor: "#0f172a",
-                      color: "#f8fafc",
+                      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" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#94a3b8", fontSize: "11px" }, children: "Color:" }),
-                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "2px" }, children: ["left", "center", "right"].map((align) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: removeSelectedBox,
+                  onClick: () => setEditingId(selectedBox.id),
                   style: {
-                    ...toolbarButtonStyle,
-                    backgroundColor: "rgba(239, 68, 68, 0.2)",
-                    color: "#f87171",
-                    borderColor: "rgba(239, 68, 68, 0.4)"
+                    ...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: "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"
+                  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: "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: "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" })
             ]
           }
         )
@@ -1038,29 +1036,14 @@ function SlideDesignOverlay({
     }
   );
 }
-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) {
+function handleStyle(pos, isLight = false) {
   const size = 10;
   const base = {
     position: "absolute",
     width: `${size}px`,
     height: `${size}px`,
-    backgroundColor: "#ffffff",
-    border: "2px solid #0284c7",
+    backgroundColor: isLight ? "#ffffff" : "#0f172a",
+    border: isLight ? "2px solid #0284c7" : "2px solid #38bdf8",
     borderRadius: "2px",
     boxSizing: "border-box",
     zIndex: 50