npm - @agent-native/core - Versions diffs - 0.77.3 → 0.77.4 - Mend

@agent-native/core 0.77.3 → 0.77.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1993) hide show

package/corpus/templates/design/app/components/design/DesignCanvas.tsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { agentChat } from "@agent-native/core";
-import { usePinchZoom } from "@agent-native/core/client";
+import { usePinchZoom, useT } from "@agent-native/core/client";
 import { useRef, useEffect, useCallback, useMemo } from "react";
 // NOTE: This wires up the NEW shared visual-editor DrawOverlay + comment-pin
@@ -378,6 +378,7 @@ export function DesignCanvas({
   commentContextLabel,
   onPrototypeNavigate,
 }: DesignCanvasProps) {
+  const t = useT();
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const zoomRef = useRef(zoom);
@@ -402,10 +403,10 @@ export function DesignCanvas({
       NAV_BRIDGE_SCRIPT +
       (editMode ? EDIT_BRIDGE_SCRIPT : "");
     if (content.includes("</body>")) {
-      return content.replace("</body>", bridgeToInject + "</body>");
+      return content.replace("</body>", bridgeToInject + "</body>"); // i18n-ignore generated iframe HTML injection
     }
     if (content.includes("</html>")) {
-      return content.replace("</html>", bridgeToInject + "</html>");
+      return content.replace("</html>", bridgeToInject + "</html>"); // i18n-ignore generated iframe HTML injection
     }
     // No body/html tags — wrap it
     return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head><body>${content}${bridgeToInject}</body></html>`;
@@ -564,8 +565,9 @@ export function DesignCanvas({
         ref={iframeRef}
         srcDoc={srcdoc}
         sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"
+        data-design-preview-iframe
         className="border-0 bg-white block w-full h-full"
-        title="Design Preview"
+        title={t("designEditor.designPreview")}
       />
       {/* Draw-to-prompt overlay — sits over the iframe, NOT inside it. */}
       <SharedDrawOverlay

package/corpus/templates/design/app/components/design/DesignToolbar.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ShareButton } from "@agent-native/core/client";
+import { ShareButton, useT } from "@agent-native/core/client";
 import {
   IconArrowLeft,
   IconAdjustments,
@@ -64,25 +64,29 @@ interface DesignToolbarProps {
 const MODE_ITEMS: {
   mode: EditorMode;
   icon: typeof IconMessage;
-  label: string;
+  labelKey: string;
 }[] = [
-  { mode: "comment", icon: IconMessage, label: "Comment" },
-  { mode: "edit", icon: IconPointer, label: "Edit" },
-  { mode: "draw", icon: IconPencil, label: "Draw" },
+  {
+    mode: "comment",
+    icon: IconMessage,
+    labelKey: "designEditor.modes.comment",
+  },
+  { mode: "edit", icon: IconPointer, labelKey: "designEditor.modes.edit" },
+  { mode: "draw", icon: IconPencil, labelKey: "designEditor.modes.draw" },
 ];
 const EXPORT_FORMATS = [
-  { value: "zip", label: "Download ZIP" },
-  { value: "svg", label: "Download SVG" },
-  { value: "pdf", label: "Export PDF" },
-  { value: "html", label: "Export HTML" },
-  { value: "coding-handoff", label: "Copy coding handoff" },
+  { value: "zip", labelKey: "designEditor.downloadZip" },
+  { value: "svg", labelKey: "designEditor.downloadSvg" },
+  { value: "pdf", labelKey: "designEditor.exportPdf" },
+  { value: "html", labelKey: "designEditor.exportHtml" },
+  { value: "coding-handoff", labelKey: "designEditor.copyCodingHandoff" },
 ];
 const PRESENT_MODES = [
-  { value: "tab", label: "In this tab" },
-  { value: "fullscreen", label: "Fullscreen" },
-  { value: "new-tab", label: "New tab" },
+  { value: "tab", labelKey: "designEditor.presentInThisTab" },
+  { value: "fullscreen", labelKey: "designEditor.presentFullscreen" },
+  { value: "new-tab", labelKey: "designEditor.presentNewTab" },
 ];
 export function DesignToolbar({
@@ -106,6 +110,7 @@ export function DesignToolbar({
   pinMode,
   onTogglePinMode,
 }: DesignToolbarProps) {
+  const t = useT();
   const [editingTitle, setEditingTitle] = useState(false);
   const [titleDraft, setTitleDraft] = useState(title);
   const zoomLabel = `${Math.round(zoom)}%`;
@@ -198,7 +203,7 @@ export function DesignToolbar({
                       "relative h-8 w-8",
                       anyToolActive && "bg-muted text-foreground",
                     )}
-                    aria-label="Design tools"
+                    aria-label={t("designEditor.designTools")}
                   >
                     <IconWand className="h-4 w-4" />
                     {anyToolActive && (
@@ -207,7 +212,7 @@ export function DesignToolbar({
                   </Button>
                 </DropdownMenuTrigger>
               </TooltipTrigger>
-              <TooltipContent>Design tools</TooltipContent>
+              <TooltipContent>{t("designEditor.designTools")}</TooltipContent>
             </Tooltip>
             <DropdownMenuContent align="end" className="w-48">
               <DropdownMenuItem
@@ -215,7 +220,7 @@ export function DesignToolbar({
                 className={cn(tweaksVisible && "bg-accent/50")}
               >
                 <IconAdjustments className="h-4 w-4 mr-2" />
-                Tweaks
+                {t("designEditor.tweaks")}
               </DropdownMenuItem>
               {onToggleDrawMode && (
                 <DropdownMenuItem
@@ -224,7 +229,7 @@ export function DesignToolbar({
                   className={cn(drawMode && "bg-accent/50")}
                 >
                   <IconPencilPlus className="h-4 w-4 mr-2" />
-                  Draw on canvas
+                  {t("designEditor.drawOnCanvas")}
                 </DropdownMenuItem>
               )}
               {onTogglePinMode && (
@@ -234,7 +239,7 @@ export function DesignToolbar({
                   className={cn(pinMode && "bg-accent/50")}
                 >
                   <IconPin className="h-4 w-4 mr-2" />
-                  Drop comment pin
+                  {t("designEditor.dropCommentPin")}
                 </DropdownMenuItem>
               )}
             </DropdownMenuContent>
@@ -244,7 +249,7 @@ export function DesignToolbar({
       {/* Mode switcher */}
       <div className="flex overflow-hidden rounded-md border border-border">
-        {MODE_ITEMS.map(({ mode: m, icon: Icon, label }) => (
+        {MODE_ITEMS.map(({ mode: m, icon: Icon, labelKey }) => (
           <Tooltip key={m}>
             <TooltipTrigger asChild>
               <button
@@ -259,7 +264,7 @@ export function DesignToolbar({
                 <Icon className="h-3.5 w-3.5" />
               </button>
             </TooltipTrigger>
-            <TooltipContent>{label}</TooltipContent>
+            <TooltipContent>{t(labelKey)}</TooltipContent>
           </Tooltip>
         ))}
       </div>
@@ -302,7 +307,7 @@ export function DesignToolbar({
               key={pm.value}
               onClick={() => onPresent(pm.value)}
             >
-              {pm.label}
+              {t(pm.labelKey)}
             </DropdownMenuItem>
           ))}
         </DropdownMenuContent>
@@ -324,7 +329,7 @@ export function DesignToolbar({
               key={fmt.value}
               onClick={() => onExport(fmt.value)}
             >
-              {fmt.label}
+              {t(fmt.labelKey)}
             </DropdownMenuItem>
           ))}
         </DropdownMenuContent>

package/corpus/templates/design/app/components/design/DrawOverlay.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconEraser,
   IconArrowBackUp,
@@ -50,6 +51,7 @@ interface Stroke {
 }
 export function DrawOverlay({ visible, onQueue, onSend }: DrawOverlayProps) {
+  const t = useT();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [color, setColor] = useState(PRESET_COLORS[0].color);
   const [lineWidth, setLineWidth] = useState(LINE_WIDTHS[1].value);
@@ -271,7 +273,7 @@ export function DrawOverlay({ visible, onQueue, onSend }: DrawOverlayProps) {
             }}
             className="h-7 w-48 border-primary bg-background text-sm"
             autoFocus
-            placeholder="Type annotation..."
+            placeholder={t("visualEditor.typeAnnotation")}
           />
         </div>
       )}
@@ -343,7 +345,7 @@ export function DrawOverlay({ visible, onQueue, onSend }: DrawOverlayProps) {
               <IconCursorText className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Type anywhere</TooltipContent>
+          <TooltipContent>{t("visualEditor.typeAnywhere")}</TooltipContent>
         </Tooltip>
         {/* Undo */}

package/corpus/templates/design/app/components/design/EditPanel.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPointer } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
@@ -113,6 +114,7 @@ function ColorInput({
   value: string;
   onChange: (value: string) => void;
 }) {
+  const t = useT();
   const [draft, setDraft] = useState(value);
   useEffect(() => {
@@ -132,7 +134,7 @@ function ColorInput({
       <div className="flex items-center gap-1.5 flex-1">
         <input
           type="color"
-          aria-label={`${label} color`}
+          aria-label={`${label} ${t("editPanel.colorInputLabel")}`}
           value={toColorInputValue(draft)}
           onChange={(e) => setNext(e.target.value)}
           className="h-6 w-6 shrink-0 cursor-pointer rounded border border-border bg-transparent p-0"
@@ -303,31 +305,32 @@ function FourSideInput({
   values: { top: string; right: string; bottom: string; left: string };
   onChange: (side: string, value: string) => void;
 }) {
+  const t = useT();
   return (
     <div className="space-y-1.5">
       <Label className="text-xs text-muted-foreground">{label}</Label>
       <div className="grid grid-cols-4 gap-1">
         <FourSideCell
           side="Top"
-          placeholder="T"
+          placeholder={t("editPanel.sidePlaceholders.top")}
           value={values.top}
           onChange={onChange}
         />
         <FourSideCell
           side="Right"
-          placeholder="R"
+          placeholder={t("editPanel.sidePlaceholders.right")}
           value={values.right}
           onChange={onChange}
         />
         <FourSideCell
           side="Bottom"
-          placeholder="B"
+          placeholder={t("editPanel.sidePlaceholders.bottom")}
           value={values.bottom}
           onChange={onChange}
         />
         <FourSideCell
           side="Left"
-          placeholder="L"
+          placeholder={t("editPanel.sidePlaceholders.left")}
           value={values.left}
           onChange={onChange}
         />
@@ -336,59 +339,56 @@ function FourSideInput({
   );
 }
-const FONT_FAMILIES = [
-  { value: "inherit", label: "Inherit" },
-  { value: "sans-serif", label: "Sans Serif" },
-  { value: "serif", label: "Serif" },
-  { value: "monospace", label: "Monospace" },
-  { value: "'Inter', sans-serif", label: "Inter" },
-  { value: "'Poppins', sans-serif", label: "Poppins" },
-  { value: "'Playfair Display', serif", label: "Playfair Display" },
-  { value: "'JetBrains Mono', monospace", label: "JetBrains Mono" },
-];
-const FONT_WEIGHTS = [
-  { value: "100", label: "Thin" },
-  { value: "200", label: "Extra Light" },
-  { value: "300", label: "Light" },
-  { value: "400", label: "Regular" },
-  { value: "500", label: "Medium" },
-  { value: "600", label: "Semi Bold" },
-  { value: "700", label: "Bold" },
-  { value: "800", label: "Extra Bold" },
-  { value: "900", label: "Black" },
-];
-const TEXT_ALIGNS = [
-  { value: "left", label: "Left" },
-  { value: "center", label: "Center" },
-  { value: "right", label: "Right" },
-  { value: "justify", label: "Justify" },
-];
-const FLEX_DIRECTIONS = [
-  { value: "row", label: "Row" },
-  { value: "column", label: "Column" },
-  { value: "row-reverse", label: "Row Reverse" },
-  { value: "column-reverse", label: "Column Reverse" },
-];
+const FONT_FAMILY_OPTIONS = [
+  { value: "inherit", key: "inherit" },
+  { value: "sans-serif", key: "sansSerif" },
+  { value: "serif", key: "serif" },
+  { value: "monospace", key: "monospace" },
+  { value: "'Inter', sans-serif", key: "inter" },
+  { value: "'Poppins', sans-serif", key: "poppins" },
+  { value: "'Playfair Display', serif", key: "playfairDisplay" },
+  { value: "'JetBrains Mono', monospace", key: "jetBrainsMono" },
+] as const;
+const FONT_WEIGHT_OPTIONS = [
+  { value: "100", key: "thin" },
+  { value: "200", key: "extraLight" },
+  { value: "300", key: "light" },
+  { value: "400", key: "regular" },
+  { value: "500", key: "medium" },
+  { value: "600", key: "semiBold" },
+  { value: "700", key: "bold" },
+  { value: "800", key: "extraBold" },
+  { value: "900", key: "black" },
+] as const;
+const TEXT_ALIGN_OPTIONS = [
+  { value: "left", key: "left" },
+  { value: "center", key: "center" },
+  { value: "right", key: "right" },
+  { value: "justify", key: "justify" },
+] as const;
+const FLEX_DIRECTION_OPTIONS = [
+  { value: "row", key: "row" },
+  { value: "column", key: "column" },
+  { value: "row-reverse", key: "rowReverse" },
+  { value: "column-reverse", key: "columnReverse" },
+] as const;
 const JUSTIFY_OPTIONS = [
-  { value: "flex-start", label: "Start" },
-  { value: "center", label: "Center" },
-  { value: "flex-end", label: "End" },
-  { value: "space-between", label: "Between" },
-  { value: "space-around", label: "Around" },
-  { value: "space-evenly", label: "Evenly" },
-];
+  { value: "flex-start", key: "start" },
+  { value: "center", key: "center" },
+  { value: "flex-end", key: "end" },
+  { value: "space-between", key: "between" },
+  { value: "space-around", key: "around" },
+  { value: "space-evenly", key: "evenly" },
+] as const;
 const ALIGN_OPTIONS = [
-  { value: "flex-start", label: "Start" },
-  { value: "center", label: "Center" },
-  { value: "flex-end", label: "End" },
-  { value: "stretch", label: "Stretch" },
-  { value: "baseline", label: "Baseline" },
-];
+  { value: "flex-start", key: "start" },
+  { value: "center", key: "center" },
+  { value: "flex-end", key: "end" },
+  { value: "stretch", key: "stretch" },
+  { value: "baseline", key: "baseline" },
+] as const;
 function parseNumericValue(value: string): number {
   return parseFloat(value) || 0;
@@ -402,7 +402,12 @@ function PageProperties({
   styles: Record<string, string>;
   onStyleChange: (property: string, value: string) => void;
 }) {
-  const fontFamily = FONT_FAMILIES.some(
+  const t = useT();
+  const fontFamilyOptions = FONT_FAMILY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.fontFamilies.${option.key}`),
+  }));
+  const fontFamily = FONT_FAMILY_OPTIONS.some(
     (option) => option.value === styles.fontFamily,
   )
     ? styles.fontFamily
@@ -417,28 +422,25 @@ function PageProperties({
       <div className="rounded-lg border border-border/70 bg-accent/30 p-3 text-xs text-muted-foreground/90 leading-relaxed">
         <p className="font-medium text-foreground/85 mb-1 flex items-center gap-1.5">
           <IconPointer className="w-3.5 h-3.5" />
-          Click any element on the canvas
-        </p>
-        <p>
-          Edit typography, spacing, sizing, borders and fill for whatever you
-          select. Page defaults below.
+          {t("editPanel.pageHelpTitle")}
         </p>
+        <p>{t("editPanel.pageHelpDescription")}</p>
       </div>
-      <SectionTitle>Page</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.page")}</SectionTitle>
       <ColorInput
-        label="Background"
+        label={t("editPanel.labels.background")}
         value={styles.backgroundColor || ""}
         onChange={(v) => onStyleChange("backgroundColor", v)}
       />
       <PropSelect
-        label="Font"
+        label={t("editPanel.labels.font")}
         value={fontFamily}
         onChange={(v) => onStyleChange("fontFamily", v)}
-        options={FONT_FAMILIES}
+        options={fontFamilyOptions}
       />
       <PropInput
-        label="Base Size"
+        label={t("editPanel.labels.baseSize")}
         value={styles.fontSize || "16px"}
         onChange={(v) => onStyleChange("fontSize", v)}
         placeholder="16px"
@@ -456,49 +458,62 @@ function TextProperties({
   element: ElementInfo;
   onStyleChange: (property: string, value: string) => void;
 }) {
+  const t = useT();
   const styles = element.computedStyles;
+  const fontFamilyOptions = FONT_FAMILY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.fontFamilies.${option.key}`),
+  }));
+  const fontWeightOptions = FONT_WEIGHT_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.fontWeights.${option.key}`),
+  }));
+  const textAlignOptions = TEXT_ALIGN_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.textAligns.${option.key}`),
+  }));
   return (
     <div className="space-y-4">
-      <SectionTitle>Typography</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.typography")}</SectionTitle>
       <PropSelect
-        label="Font"
+        label={t("editPanel.labels.font")}
         value={styles.fontFamily || "sans-serif"}
         onChange={(v) => onStyleChange("fontFamily", v)}
-        options={FONT_FAMILIES}
+        options={fontFamilyOptions}
       />
       <PropInput
-        label="Size"
+        label={t("editPanel.labels.size")}
         value={styles.fontSize || ""}
         onChange={(v) => onStyleChange("fontSize", v)}
         placeholder="16px"
         defaultUnit="px"
       />
       <PropSelect
-        label="Weight"
+        label={t("editPanel.labels.weight")}
         value={styles.fontWeight || "400"}
         onChange={(v) => onStyleChange("fontWeight", v)}
-        options={FONT_WEIGHTS}
+        options={fontWeightOptions}
       />
       <ColorInput
-        label="Color"
+        label={t("editPanel.labels.color")}
         value={styles.color || ""}
         onChange={(v) => onStyleChange("color", v)}
       />
       <PropSelect
-        label="Align"
+        label={t("editPanel.labels.align")}
         value={styles.textAlign || "left"}
         onChange={(v) => onStyleChange("textAlign", v)}
-        options={TEXT_ALIGNS}
+        options={textAlignOptions}
       />
       <PropInput
-        label="Line Height"
+        label={t("editPanel.labels.lineHeight")}
         value={styles.lineHeight || ""}
         onChange={(v) => onStyleChange("lineHeight", v)}
         placeholder="1.5"
       />
       <PropInput
-        label="Tracking"
+        label={t("editPanel.labels.tracking")}
         value={styles.letterSpacing || ""}
         onChange={(v) => onStyleChange("letterSpacing", v)}
         placeholder="0px"
@@ -516,31 +531,44 @@ function FlexProperties({
   element: ElementInfo;
   onStyleChange: (property: string, value: string) => void;
 }) {
+  const t = useT();
   const styles = element.computedStyles;
+  const flexDirectionOptions = FLEX_DIRECTION_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.flexDirections.${option.key}`),
+  }));
+  const justifyOptions = JUSTIFY_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.justifyOptions.${option.key}`),
+  }));
+  const alignOptions = ALIGN_OPTIONS.map((option) => ({
+    value: option.value,
+    label: t(`editPanel.alignOptions.${option.key}`),
+  }));
   return (
     <div className="space-y-4">
-      <SectionTitle>Flex Layout</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.flexLayout")}</SectionTitle>
       <PropSelect
-        label="Direction"
+        label={t("editPanel.labels.direction")}
         value={styles.flexDirection || "row"}
         onChange={(v) => onStyleChange("flexDirection", v)}
-        options={FLEX_DIRECTIONS}
+        options={flexDirectionOptions}
       />
       <PropSelect
-        label="Justify"
+        label={t("editPanel.labels.justify")}
         value={styles.justifyContent || "flex-start"}
         onChange={(v) => onStyleChange("justifyContent", v)}
-        options={JUSTIFY_OPTIONS}
+        options={justifyOptions}
       />
       <PropSelect
-        label="Align"
+        label={t("editPanel.labels.align")}
         value={styles.alignItems || "stretch"}
         onChange={(v) => onStyleChange("alignItems", v)}
-        options={ALIGN_OPTIONS}
+        options={alignOptions}
       />
       <PropInput
-        label="Gap"
+        label={t("editPanel.labels.gap")}
         value={styles.gap || ""}
         onChange={(v) => onStyleChange("gap", v)}
         placeholder="0px"
@@ -558,6 +586,7 @@ function ElementProperties({
   element: ElementInfo;
   onStyleChange: (property: string, value: string) => void;
 }) {
+  const t = useT();
   const styles = element.computedStyles;
   const handlePaddingChange = useCallback(
@@ -576,23 +605,23 @@ function ElementProperties({
   return (
     <div className="space-y-4">
-      <SectionTitle>Layout</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.layout")}</SectionTitle>
       <PropInput
-        label="Width"
+        label={t("editPanel.labels.width")}
         value={styles.width || ""}
         onChange={(v) => onStyleChange("width", v)}
         placeholder="auto"
         defaultUnit="px"
       />
       <PropInput
-        label="Height"
+        label={t("editPanel.labels.height")}
         value={styles.height || ""}
         onChange={(v) => onStyleChange("height", v)}
         placeholder="auto"
         defaultUnit="px"
       />
       <PropSlider
-        label="Opacity"
+        label={t("editPanel.labels.opacity")}
         value={parseNumericValue(styles.opacity || "1") * 100}
         onChange={(v) => onStyleChange("opacity", String(v / 100))}
         min={0}
@@ -603,9 +632,9 @@ function ElementProperties({
       <Separator />
-      <SectionTitle>Spacing</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.spacing")}</SectionTitle>
       <FourSideInput
-        label="Padding"
+        label={t("editPanel.labels.padding")}
         values={{
           top: styles.paddingTop || "0",
           right: styles.paddingRight || "0",
@@ -615,7 +644,7 @@ function ElementProperties({
         onChange={handlePaddingChange}
       />
       <FourSideInput
-        label="Margin"
+        label={t("editPanel.labels.margin")}
         values={{
           top: styles.marginTop || "0",
           right: styles.marginRight || "0",
@@ -627,21 +656,21 @@ function ElementProperties({
       <Separator />
-      <SectionTitle>Border</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.border")}</SectionTitle>
       <PropInput
-        label="Width"
+        label={t("editPanel.labels.width")}
         value={styles.borderWidth || "0"}
         onChange={(v) => onStyleChange("borderWidth", v)}
         placeholder="0px"
         defaultUnit="px"
       />
       <ColorInput
-        label="Color"
+        label={t("editPanel.labels.color")}
         value={styles.borderColor || ""}
         onChange={(v) => onStyleChange("borderColor", v)}
       />
       <PropInput
-        label="Radius"
+        label={t("editPanel.labels.radius")}
         value={styles.borderRadius || "0"}
         onChange={(v) => onStyleChange("borderRadius", v)}
         placeholder="0px"
@@ -650,9 +679,9 @@ function ElementProperties({
       <Separator />
-      <SectionTitle>Fill</SectionTitle>
+      <SectionTitle>{t("editPanel.sections.fill")}</SectionTitle>
       <ColorInput
-        label="Background"
+        label={t("editPanel.labels.background")}
         value={styles.backgroundColor || ""}
         onChange={(v) => onStyleChange("backgroundColor", v)}
       />
@@ -681,6 +710,7 @@ export function EditPanel({
   pageStyles = {},
   onStyleChange,
 }: EditPanelProps) {
+  const t = useT();
   const isTextElement = selectedElement
     ? TEXT_TAGS.has(selectedElement.tagName)
     : false;
@@ -697,7 +727,7 @@ export function EditPanel({
         <h2 className="text-xs font-semibold text-foreground">
           {selectedElement
             ? `<${selectedElement.tagName}>${selectedElement.id ? ` #${selectedElement.id}` : ""}`
-            : "Properties"}
+            : t("editPanel.properties")}
         </h2>
         {selectedElement?.classes.length ? (
           <p className="text-[10px] text-muted-foreground mt-0.5 truncate">