@braincrew-lab/langchain-canvas 0.2.0 → 0.3.0

package/dist/{SlidesRenderer-6ZGHXTQX.js → SlidesRenderer-JNPXNTNJ.js}

@@ -1,15 +1,25 @@
 import { resolveElements } from './chunk-6L3AL6W4.js';
-import { useArtifactPatch } from './chunk-UL5F66PN.js';
-import './chunk-S54GJDSJ.js';
+import { useArtifactPatch } from './chunk-FSFOURG5.js';
+import './chunk-ZLXAWRUP.js';
+import { useT } from './chunk-QMOJEGRH.js';
 import { useState, useRef, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function shapeStyle(el) {
-  const fill = el.fill ?? "currentColor";
-  if (el.shape === "ellipse") return { width: "100%", height: "100%", background: fill, borderRadius: "50%" };
-  if (el.shape === "line") return { width: "100%", height: "100%", background: fill, borderRadius: 2 };
-  return { width: "100%", height: "100%", background: fill, borderRadius: 8 };
+  if (el.shape === "line") return { width: "100%", height: "100%", background: el.fill ?? "currentColor", borderRadius: 2 };
+  const borderRadius = el.shape === "ellipse" ? "50%" : el.radius ?? 8;
+  if (!el.fill) {
+    return { width: "100%", height: "100%", background: "transparent", border: "1.5px solid currentColor", borderRadius, boxSizing: "border-box" };
+  }
+  return { width: "100%", height: "100%", background: el.fill, borderRadius };
+}
+function rotateStyle(el) {
+  return el.rotate ? { transform: `rotate(${el.rotate}deg)` } : {};
 }
+var normalizeDeg = (deg) => {
+  const d = (deg % 360 + 360) % 360;
+  return d === 0 ? void 0 : d;
+};
 var clamp = (v, min, max) => Math.max(min, Math.min(max, v));
 var dupSeq = 0;
 var dupId = (base) => `${base}_c${Date.now().toString(36)}${dupSeq++}`;
@@ -40,6 +50,7 @@ function boundsOf(els) {
   return { x1, y1, x2, y2 };
 }
 function FreeSlide({ elements, onChange, padding }) {
+  const t = useT();
   const slideRef = useRef(null);
   const [els, setEls] = useState(elements);
   const [selected, setSelected] = useState([]);
@@ -297,8 +308,8 @@ function FreeSlide({ elements, onChange, padding }) {
   };
   const onKeyDown = (e) => {
     if (editingId) return;
-    const t = e.target;
-    if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) return;
+    const t2 = e.target;
+    if (t2.tagName === "INPUT" || t2.tagName === "TEXTAREA" || t2.isContentEditable) return;
     const meta = e.metaKey || e.ctrlKey;
     if (e.key === "Escape") {
       setSelected([]);
@@ -380,7 +391,7 @@ function FreeSlide({ elements, onChange, padding }) {
           "div",
           {
             className: `cv-free__el ${selectedSet.has(el.id) ? "is-selected cv-free__el--selected" : ""}`,
-            style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` },
+            style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, ...rotateStyle(el) },
             onPointerDown: (e) => onDown(e, el, "move"),
             onDoubleClick: (e) => {
               if (el.type === "text") {
@@ -397,7 +408,9 @@ function FreeSlide({ elements, onChange, padding }) {
                   contentEditable: editingId === el.id,
                   suppressContentEditableWarning: true,
                   style: {
-                    fontSize: el.fontSize ?? 24,
+                    // px at the 1280-wide design → cqw, so type scales with the slide
+                    // (12.8px of design width per 1cqw).
+                    fontSize: `${((el.fontSize ?? 24) / 12.8).toFixed(3)}cqw`,
                     fontWeight: el.bold ? 700 : 400,
                     color: el.color,
                     textAlign: el.align ?? "left"
@@ -408,9 +421,18 @@ function FreeSlide({ elements, onChange, padding }) {
                   },
                   children: el.text
                 }
-              ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) : /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "", draggable: false }),
+              ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) : /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: "cv-free__img",
+                  src: el.src,
+                  alt: "",
+                  draggable: false,
+                  style: { objectFit: el.fit ?? "contain", ...el.radius ? { borderRadius: el.radius } : {} }
+                }
+              ),
               soloId === el.id && el.type === "text" && /* @__PURE__ */ jsxs("div", { className: `cv-free__fmt ${el.y < 16 ? "cv-free__fmt--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), onClick: (e) => e.stopPropagation(), children: [
-                /* @__PURE__ */ jsx("button", { className: el.bold ? "is-on" : "", onClick: () => updateEl(el.id, { bold: !el.bold }), title: "Bold", children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
+                /* @__PURE__ */ jsx("button", { className: el.bold ? "is-on" : "", onClick: () => updateEl(el.id, { bold: !el.bold }), title: t("bold"), children: /* @__PURE__ */ jsx("b", { children: "B" }) }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -419,42 +441,94 @@ function FreeSlide({ elements, onChange, padding }) {
                     max: 120,
                     value: el.fontSize ?? 24,
                     onChange: (e) => updateEl(el.id, { fontSize: Number(e.target.value) }),
-                    title: "Font size"
+                    title: t("fontSize")
                   }
                 ),
-                /* @__PURE__ */ jsx("input", { type: "color", value: el.color ?? "#1f2328", onChange: (e) => updateEl(el.id, { color: e.target.value }), title: "Text color" }),
-                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "left" }), title: "Align left", children: "\u27F8" }),
-                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "center" }), title: "Align center", children: "\u2261" }),
-                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "right" }), title: "Align right", children: "\u27F9" })
+                /* @__PURE__ */ jsx("input", { type: "color", value: el.color ?? "#1f2328", onChange: (e) => updateEl(el.id, { color: e.target.value }), title: t("textColor") }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "left" }), title: t("alignLeft"), children: "\u27F8" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "center" }), title: t("alignCenter"), children: "\u2261" }),
+                /* @__PURE__ */ jsx("button", { onClick: () => updateEl(el.id, { align: "right" }), title: t("alignRight"), children: "\u27F9" })
               ] }),
               soloId === el.id && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { className: "cv-free__resize", title: "Resize (hold Shift to lock aspect)", onPointerDown: (e) => onDown(e, el, "resize") }),
+                /* @__PURE__ */ jsx("span", { className: "cv-free__resize", title: t("resizeTip"), onPointerDown: (e) => onDown(e, el, "resize") }),
                 /* @__PURE__ */ jsxs("div", { className: `cv-free__ctl ${el.y < 16 ? "cv-free__ctl--below" : ""}`, onPointerDown: (e) => e.stopPropagation(), children: [
-                  el.type === "shape" && /* @__PURE__ */ jsx("input", { className: "cv-free__ctl-fill", type: "color", value: el.fill ?? "#5b5bd6", onChange: (e) => updateEl(el.id, { fill: e.target.value }), onClick: (e) => e.stopPropagation(), title: "Fill color" }),
+                  el.type === "shape" && /* @__PURE__ */ jsx("input", { className: "cv-free__ctl-fill", type: "color", value: el.fill ?? "#5b5bd6", onChange: (e) => updateEl(el.id, { fill: e.target.value }), onClick: (e) => e.stopPropagation(), title: t("fillColor") }),
+                  el.type === "image" && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: el.fit === "cover" ? "is-on" : "",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        updateEl(el.id, { fit: el.fit === "cover" ? void 0 : "cover" });
+                      },
+                      title: t("fitToggle"),
+                      children: "\u26F6"
+                    }
+                  ),
+                  (el.type === "image" || el.shape === "rect") && /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "cv-free__ctl-radius",
+                      type: "number",
+                      min: 0,
+                      max: 32,
+                      value: el.radius ?? (el.type === "shape" ? 8 : 0),
+                      onChange: (e) => updateEl(el.id, { radius: clamp(Number(e.target.value) || 0, 0, 32) }),
+                      onClick: (e) => e.stopPropagation(),
+                      title: t("cornerRadius")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        updateEl(el.id, { rotate: normalizeDeg((el.rotate ?? 0) + (e.shiftKey ? -15 : 15)) });
+                      },
+                      title: t("rotateStep"),
+                      children: "\u27F3"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      className: "cv-free__ctl-rot",
+                      type: "number",
+                      min: -360,
+                      max: 360,
+                      value: Math.round(el.rotate ?? 0),
+                      onChange: (e) => {
+                        const deg = Number(e.target.value);
+                        updateEl(el.id, { rotate: Number.isFinite(deg) && deg !== 0 ? clamp(deg, -360, 360) : void 0 });
+                      },
+                      onClick: (e) => e.stopPropagation(),
+                      title: t("rotationDeg")
+                    }
+                  ),
                   /* @__PURE__ */ jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     duplicateSelection();
-                  }, title: "Duplicate (\u2318D)", children: "\u29C9" }),
+                  }, title: t("duplicateShort"), children: "\u29C9" }),
                   /* @__PURE__ */ jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     reorderSelection(1, true);
-                  }, title: "Bring to front", children: "\u2912" }),
+                  }, title: t("bringToFront"), children: "\u2912" }),
                   /* @__PURE__ */ jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     reorderSelection(1);
-                  }, title: "Bring forward (\u2318])", children: "\u2191" }),
+                  }, title: t("bringForward"), children: "\u2191" }),
                   /* @__PURE__ */ jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     reorderSelection(-1);
-                  }, title: "Send backward (\u2318[)", children: "\u2193" }),
+                  }, title: t("sendBackward"), children: "\u2193" }),
                   /* @__PURE__ */ jsx("button", { onClick: (e) => {
                     e.stopPropagation();
                     reorderSelection(-1, true);
-                  }, title: "Send to back", children: "\u2913" }),
+                  }, title: t("sendToBack"), children: "\u2913" }),
                   /* @__PURE__ */ jsx("button", { className: "cv-free__ctl-del", onClick: (e) => {
                     e.stopPropagation();
                     deleteSelection();
-                  }, title: "Delete", children: "\xD7" })
+                  }, title: t("delete"), children: "\xD7" })
                 ] })
               ] })
             ]
@@ -472,16 +546,16 @@ function FreeSlide({ elements, onChange, padding }) {
             onPointerDown: (e) => e.stopPropagation(),
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx("button", { onClick: groupSelection, title: "Group (\u2318G)", children: "\u229E" }),
-              /* @__PURE__ */ jsx("button", { onClick: ungroupSelection, disabled: !selEls.some((el) => el.group), title: "Ungroup (\u2318\u21E7G)", children: "\u229F" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("left"), title: "Align left edges", children: "\u21E4" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("center"), title: "Align horizontal centers", children: "\u2194" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("right"), title: "Align right edges", children: "\u21E5" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("top"), title: "Align top edges", children: "\u2912" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("middle"), title: "Align vertical centers", children: "\u2195" }),
-              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("bottom"), title: "Align bottom edges", children: "\u2913" }),
-              /* @__PURE__ */ jsx("button", { onClick: duplicateSelection, title: "Duplicate (\u2318D)", children: "\u29C9" }),
-              /* @__PURE__ */ jsx("button", { className: "cv-free__multibar-del", onClick: deleteSelection, title: "Delete selection", children: "\xD7" })
+              /* @__PURE__ */ jsx("button", { onClick: groupSelection, title: t("groupShort"), children: "\u229E" }),
+              /* @__PURE__ */ jsx("button", { onClick: ungroupSelection, disabled: !selEls.some((el) => el.group), title: t("ungroupShort"), children: "\u229F" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("left"), title: t("alignLeftEdges"), children: "\u21E4" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("center"), title: t("alignHCenters"), children: "\u2194" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("right"), title: t("alignRightEdges"), children: "\u21E5" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("top"), title: t("alignTopEdges"), children: "\u2912" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("middle"), title: t("alignVCenters"), children: "\u2195" }),
+              /* @__PURE__ */ jsx("button", { onClick: () => alignSelection("bottom"), title: t("alignBottomEdges"), children: "\u2913" }),
+              /* @__PURE__ */ jsx("button", { onClick: duplicateSelection, title: t("duplicateShort"), children: "\u29C9" }),
+              /* @__PURE__ */ jsx("button", { className: "cv-free__multibar-del", onClick: deleteSelection, title: t("deleteSelection"), children: "\xD7" })
             ]
           }
         )
@@ -567,10 +641,12 @@ var LAYOUTS = {
 var elementSeq = 0;
 var newElementId = () => `el_${Date.now().toString(36)}_${elementSeq++}`;
 function SlidesRenderer({ artifact }) {
+  const t = useT();
   const slides = artifact.data.slides ?? [];
   const patch = useArtifactPatch(artifact.id);
   const [index, setIndex] = useState(0);
   const [dragIndex, setDragIndex] = useState(null);
+  const [dropIndex, setDropIndex] = useState(null);
   const [presenting, setPresenting] = useState(false);
   const imgRef = useRef(null);
   const bgRef = useRef(null);
@@ -702,15 +778,23 @@ function SlidesRenderer({ artifact }) {
       slides.map((s, i) => /* @__PURE__ */ jsx(
         "div",
         {
-          className: `cv-deck__thumb-wrap ${i === at ? "is-active" : ""} ${dragIndex === i ? "is-dragging" : ""}`,
+          className: `cv-deck__thumb-wrap ${i === at ? "is-active" : ""} ${dragIndex === i ? "is-dragging" : ""} ${dragIndex !== null && dropIndex === i && i !== dragIndex ? i < dragIndex ? "cv-deck__thumb-wrap--drop-before" : "cv-deck__thumb-wrap--drop-after" : ""}`,
           draggable: true,
           onDragStart: () => setDragIndex(i),
-          onDragOver: (e) => e.preventDefault(),
+          onDragOver: (e) => {
+            e.preventDefault();
+            if (dragIndex !== null && i !== dragIndex) setDropIndex(i);
+          },
+          onDragLeave: () => setDropIndex((cur) => cur === i ? null : cur),
           onDrop: () => {
             if (dragIndex !== null) reorder(dragIndex, i);
             setDragIndex(null);
+            setDropIndex(null);
+          },
+          onDragEnd: () => {
+            setDragIndex(null);
+            setDropIndex(null);
           },
-          onDragEnd: () => setDragIndex(null),
           children: /* @__PURE__ */ jsxs("button", { className: "cv-deck__thumb", onClick: () => setIndex(i), children: [
             /* @__PURE__ */ jsx("span", { className: "cv-deck__thumb-n", children: i + 1 }),
             /* @__PURE__ */ jsx(
@@ -725,11 +809,11 @@ function SlidesRenderer({ artifact }) {
                   (el) => el.type === "text" ? /* @__PURE__ */ jsx(
                     "span",
                     {
-                      style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: (el.fontSize ?? 24) * 0.12, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "hidden", whiteSpace: "pre-wrap" },
+                      style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, fontSize: `${((el.fontSize ?? 24) / 12.8).toFixed(3)}cqw`, fontWeight: el.bold ? 700 : 400, color: el.color ?? s.textColor, overflow: "visible", whiteSpace: "pre-wrap", ...rotateStyle(el) },
                       children: el.text
                     },
                     el.id
-                  ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: s.textColor, ...shapeStyle(el) } }, el.id) : /* @__PURE__ */ jsx("img", { src: el.src, alt: "", style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, objectFit: "contain" } }, el.id)
+                  ) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: s.textColor, ...rotateStyle(el), ...shapeStyle(el) } }, el.id) : /* @__PURE__ */ jsx("img", { src: el.src, alt: "", style: { position: "absolute", left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, objectFit: el.fit ?? "contain", ...el.radius ? { borderRadius: el.radius } : {}, ...rotateStyle(el) } }, el.id)
                 ) })
               }
             )
@@ -741,8 +825,8 @@ function SlidesRenderer({ artifact }) {
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "cv-deck__main", children: [
       /* @__PURE__ */ jsxs("div", { className: "cv-deck__toolbar cv-chrome", children: [
-        /* @__PURE__ */ jsx("button", { onClick: addTextEl, title: "Add text box", children: "+ Text" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => imgRef.current?.click(), title: "Add image", children: "+ Image" }),
+        /* @__PURE__ */ jsx("button", { onClick: addTextEl, title: t("addTextBox"), children: t("addText") }),
+        /* @__PURE__ */ jsx("button", { onClick: () => imgRef.current?.click(), title: t("addImageTip"), children: t("addImage") }),
         /* @__PURE__ */ jsx("input", { ref: imgRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => addImageEl(e.target.files?.[0]) }),
         /* @__PURE__ */ jsx("input", { ref: bgRef, type: "file", accept: "image/*", hidden: true, onChange: (e) => setSlideBgImage(e.target.files?.[0]) }),
         /* @__PURE__ */ jsxs(
@@ -750,13 +834,13 @@ function SlidesRenderer({ artifact }) {
           {
             className: "cv-deck__theme",
             value: "",
-            title: "Add a shape",
+            title: t("addShapeTip"),
             onChange: (e) => {
               if (e.target.value) addShapeEl(e.target.value);
               e.currentTarget.value = "";
             },
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "+ Shape" }),
+              /* @__PURE__ */ jsx("option", { value: "", children: t("addShape") }),
               SHAPES.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.label }, s.id))
             ]
           }
@@ -766,13 +850,13 @@ function SlidesRenderer({ artifact }) {
           {
             className: "cv-deck__theme",
             value: "",
-            title: "Apply a layout",
+            title: t("applyLayout"),
             onChange: (e) => {
               if (e.target.value) applyLayout(e.target.value);
               e.currentTarget.value = "";
             },
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Layout\u2026" }),
+              /* @__PURE__ */ jsx("option", { value: "", children: t("layoutMenu") }),
               Object.entries(LAYOUTS).map(([k, v]) => /* @__PURE__ */ jsx("option", { value: k, children: v.label }, k))
             ]
           }
@@ -782,13 +866,13 @@ function SlidesRenderer({ artifact }) {
           {
             className: "cv-deck__theme",
             value: "",
-            title: "Auto layout \u2014 align & distribute elements",
+            title: t("autoLayoutTip"),
             onChange: (e) => {
               if (e.target.value) arrange(e.target.value);
               e.currentTarget.value = "";
             },
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "\u2922 Arrange\u2026" }),
+              /* @__PURE__ */ jsx("option", { value: "", children: t("arrangeMenu") }),
               /* @__PURE__ */ jsxs("optgroup", { label: "Auto layout", children: [
                 /* @__PURE__ */ jsx("option", { value: "stack-v", children: "Stack vertical" }),
                 /* @__PURE__ */ jsx("option", { value: "stack-h", children: "Stack horizontal" })
@@ -813,30 +897,33 @@ function SlidesRenderer({ artifact }) {
           {
             className: "cv-deck__theme",
             value: "",
-            title: "Theme",
+            title: t("theme"),
             onChange: (e) => {
-              const t = THEMES.find((x) => x.id === e.target.value);
-              if (t) update({ background: t.bg, textColor: t.text, accent: t.accent, fontFamily: t.font });
+              const t2 = THEMES.find((x) => x.id === e.target.value);
+              if (t2) update({ background: t2.bg, textColor: t2.text, accent: t2.accent, fontFamily: t2.font });
               e.currentTarget.value = "";
             },
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Theme\u2026" }),
-              THEMES.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.label }, t.id))
+              /* @__PURE__ */ jsx("option", { value: "", children: t("themeMenu") }),
+              THEMES.map((t2) => /* @__PURE__ */ jsx("option", { value: t2.id, children: t2.label }, t2.id))
             ]
           }
         ),
-        /* @__PURE__ */ jsx("label", { className: "cv-deck__bg", title: "Background color", children: /* @__PURE__ */ jsx("input", { type: "color", value: /^#/.test(slide.background ?? "") ? slide.background : "#ffffff", onChange: (e) => update({ background: e.target.value }) }) }),
-        /* @__PURE__ */ jsx("button", { onClick: () => bgRef.current?.click(), title: "Background image", children: "\u{1F5BC} BG" }),
-        /* @__PURE__ */ jsxs("label", { className: "cv-deck__pad", title: "Content padding (% of slide)", children: [
-          "Pad",
+        /* @__PURE__ */ jsx("label", { className: "cv-deck__bg", title: t("bgColor"), children: /* @__PURE__ */ jsx("input", { type: "color", value: /^#/.test(slide.background ?? "") ? slide.background : "#ffffff", onChange: (e) => update({ background: e.target.value }) }) }),
+        /* @__PURE__ */ jsx("button", { onClick: () => bgRef.current?.click(), title: t("bgImageTip"), children: t("bgImage") }),
+        /* @__PURE__ */ jsxs("label", { className: "cv-deck__pad", title: t("padTip"), children: [
+          t("padding"),
           /* @__PURE__ */ jsx("input", { type: "number", min: 0, max: 20, value: slide.padding ?? 0, onChange: (e) => update({ padding: Number(e.target.value) || void 0 }) })
         ] }),
         /* @__PURE__ */ jsx("span", { className: "cv-deck__spacer" }),
-        /* @__PURE__ */ jsx("button", { className: "cv-deck__present", onClick: () => setPresenting(true), title: "Present (full screen)", children: "\u25B6 Present" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(-1), title: "Move up", disabled: at === 0, children: "\u25B2" }),
-        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(1), title: "Move down", disabled: at === slides.length - 1, children: "\u25BC" }),
-        /* @__PURE__ */ jsx("button", { onClick: duplicateSlide, title: "Duplicate slide", children: "\u29C9" }),
-        /* @__PURE__ */ jsx("button", { onClick: deleteSlide, title: "Delete slide", disabled: slides.length === 1, children: "\u{1F5D1}" })
+        /* @__PURE__ */ jsxs("button", { className: "cv-deck__present", onClick: () => setPresenting(true), title: t("presentTip"), children: [
+          "\u25B6 ",
+          t("present")
+        ] }),
+        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(-1), title: t("moveUp"), disabled: at === 0, children: "\u25B2" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => moveSlide(1), title: t("moveDown"), disabled: at === slides.length - 1, children: "\u25BC" }),
+        /* @__PURE__ */ jsx("button", { onClick: duplicateSlide, title: t("duplicateSlide"), children: "\u29C9" }),
+        /* @__PURE__ */ jsx("button", { onClick: deleteSlide, title: t("deleteSlide"), disabled: slides.length === 1, children: "\u{1F5D1}" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "cv-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx(FreeSlide, { elements: resolveElements(slide), onChange: (elements) => update({ elements }), padding: slide.padding }) }),
       /* @__PURE__ */ jsxs("div", { className: "cv-deck__nav cv-chrome", children: [
@@ -853,14 +940,14 @@ function SlidesRenderer({ artifact }) {
         {
           className: "cv-deck__notes cv-chrome",
           value: slide.notes ?? "",
-          placeholder: "Speaker notes\u2026",
+          placeholder: t("speakerNotes"),
           onChange: (e) => update({ notes: e.target.value })
         }
       )
     ] }),
     presenting && /* @__PURE__ */ jsxs("div", { className: "cv-present", onClick: () => setIndex(Math.min(at + 1, slides.length - 1)), children: [
       /* @__PURE__ */ jsx("div", { className: "cv-present__slide cv-present__fade cv-slide cv-slide--blank", style: slideStyle, children: /* @__PURE__ */ jsx("div", { className: "cv-free", style: slide.padding ? { inset: `${slide.padding}%` } : void 0, children: resolveElements(slide).map(
-        (el) => el.type === "text" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("div", { className: "cv-free__text", style: { fontSize: el.fontSize ?? 24, fontWeight: el.bold ? 700 : 400, color: el.color, textAlign: el.align ?? "left", whiteSpace: "pre-wrap" }, children: el.text }) }, el.id) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: slide.textColor }, children: /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) }, el.id) : /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%` }, children: /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "" }) }, el.id)
+        (el) => el.type === "text" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, ...rotateStyle(el) }, children: /* @__PURE__ */ jsx("div", { className: "cv-free__text", style: { fontSize: el.fontSize ?? 24, fontWeight: el.bold ? 700 : 400, color: el.color, textAlign: el.align ?? "left", whiteSpace: "pre-wrap" }, children: el.text }) }, el.id) : el.type === "shape" ? /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, color: slide.textColor, ...rotateStyle(el) }, children: /* @__PURE__ */ jsx("div", { style: shapeStyle(el) }) }, el.id) : /* @__PURE__ */ jsx("div", { className: "cv-free__el", style: { left: `${el.x}%`, top: `${el.y}%`, width: `${el.w}%`, height: `${el.h}%`, ...rotateStyle(el) }, children: /* @__PURE__ */ jsx("img", { className: "cv-free__img", src: el.src, alt: "", style: { objectFit: el.fit ?? "contain", ...el.radius ? { borderRadius: el.radius } : {} } }) }, el.id)
       ) }) }, at),
       slide.notes ? /* @__PURE__ */ jsx("div", { className: "cv-present__notes", onClick: (e) => e.stopPropagation(), children: slide.notes }) : null,
       /* @__PURE__ */ jsx("div", { className: "cv-present__progress", children: /* @__PURE__ */ jsx("span", { className: "cv-present__progress-fill", style: { width: `${(at + 1) / slides.length * 100}%` } }) }),
@@ -869,7 +956,7 @@ function SlidesRenderer({ artifact }) {
         " / ",
         slides.length
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "cv-present__hint", children: "\u2190 \u2192 to navigate \xB7 Esc to exit" })
+      /* @__PURE__ */ jsx("div", { className: "cv-present__hint", children: t("presentHint") })
     ] })
   ] });
 }