@puckeditor/core 0.22.2 → 0.23.0-canary.20671fd7

package/dist/no-external.js

@@ -3143,7 +3143,7 @@ var init_fields = __esm({
           const componentData = node == null ? void 0 : node.data;
           const parentNode = (node == null ? void 0 : node.parentId) ? nodes[node.parentId] : null;
           const parent = (parentNode == null ? void 0 : parentNode.data) || null;
-          const { getComponentConfig, state } = appStore.getState();
+          const { getComponentConfig, state, config } = appStore.getState();
           const componentConfig = getComponentConfig(componentData == null ? void 0 : componentData.type);
           if (!componentData || !componentConfig) return;
           const defaultFields2 = componentConfig.fields || {};
@@ -3176,6 +3176,9 @@ var init_fields = __esm({
             if (((_b = appStore.getState().selectedItem) == null ? void 0 : _b.props.id) !== id) {
               return;
             }
+            if (appStore.getState().config !== config) {
+              return;
+            }
             appStore.setState({
               fields: {
                 fields: newFields,
@@ -3194,10 +3197,18 @@ var init_fields = __esm({
       );
       (0, import_react10.useEffect)(() => {
         resolveFields(true);
-        return appStore.subscribe(
+        const unsubscribeData = appStore.subscribe(
           (s) => s.state.indexes.nodes[id || "root"],
           () => resolveFields()
         );
+        const unsubscribeConfig = appStore.subscribe(
+          (s) => s.config,
+          () => resolveFields(true)
+        );
+        return () => {
+          unsubscribeData();
+          unsubscribeConfig();
+        };
       }, [id]);
     };
   }
@@ -3404,6 +3415,7 @@ var init_store = __esm({
           _experimentalFullScreenCanvas: false,
           _experimentalVirtualization: false,
           metadata: {},
+          dictionary: {},
           fieldTransforms: {}
         }, initialAppStore), {
           fields: createFieldsSlice(set, get),
@@ -3798,6 +3810,118 @@ var init_styles_module2 = __esm({
   }
 });
 
+// lib/dictionary.ts
+var defaultDictionary, interpolate, getMessage;
+var init_dictionary = __esm({
+  "lib/dictionary.ts"() {
+    "use strict";
+    init_react_import();
+    defaultDictionary = {
+      // Header
+      "header-publish": "Publish",
+      "header-undo": "undo",
+      "header-redo": "redo",
+      "header-toggle-leftsidebar": "Toggle left sidebar",
+      "header-toggle-rightsidebar": "Toggle right sidebar",
+      "header-toggle-menubar": "Toggle menu bar",
+      // Component action bar
+      "action-selectparent": "Select parent",
+      "action-duplicate": "Duplicate",
+      "action-delete": "Delete",
+      // Fallback labels — shared by the breadcrumbs, fields panel and header
+      "label-page": "Page",
+      "label-component": "Component",
+      // Outline
+      "outline-empty": "No items",
+      "outline-collapse": "Collapse",
+      "outline-expand": "Expand",
+      // Drawer (component list)
+      "drawer-category-collapse": "Collapse {title}",
+      "drawer-category-expand": "Expand {title}",
+      "drawer-category-other": "Other",
+      // Canvas
+      "canvas-noconfig": "No configuration for {type}",
+      // Fields
+      "field-readonly": "Read-only",
+      "field-arrayitem-summary": "Item #{index}",
+      "field-arrayitem-duplicate": "Duplicate",
+      "field-arrayitem-delete": "Delete",
+      "field-external-selectdata": "Select data",
+      "field-external-search": "Search",
+      "field-external-togglefilters": "Toggle filters",
+      "field-external-item": "External item",
+      "field-external-result-singular": "{count} result",
+      "field-external-result-plural": "{count} results",
+      // Rich text field
+      "field-richtext-bold": "Bold",
+      "field-richtext-italic": "Italic",
+      "field-richtext-underline": "Underline",
+      "field-richtext-strikethrough": "Strikethrough",
+      "field-richtext-blockquote": "Blockquote",
+      "field-richtext-code-inline": "Inline code",
+      "field-richtext-code-block": "Code block",
+      "field-richtext-list-bullet": "Bullet list",
+      "field-richtext-list-ordered": "Ordered list",
+      "field-richtext-horizontalrule": "Horizontal rule",
+      "field-richtext-align-left": "Align left",
+      "field-richtext-align-center": "Align center",
+      "field-richtext-align-right": "Align right",
+      "field-richtext-align-justify": "Justify",
+      "field-richtext-select": "Select",
+      "field-richtext-headingselect-1": "Heading 1",
+      "field-richtext-headingselect-2": "Heading 2",
+      "field-richtext-headingselect-3": "Heading 3",
+      "field-richtext-headingselect-4": "Heading 4",
+      "field-richtext-headingselect-5": "Heading 5",
+      "field-richtext-headingselect-6": "Heading 6",
+      "field-richtext-alignselect-left": "Left",
+      "field-richtext-alignselect-center": "Center",
+      "field-richtext-alignselect-right": "Right",
+      "field-richtext-alignselect-justify": "Justify",
+      "field-richtext-listselect-bullet": "Bullet list",
+      "field-richtext-listselect-ordered": "Ordered list",
+      // Viewport controls
+      "viewport-zoom-in": "Zoom viewport in",
+      "viewport-zoom-out": "Zoom viewport out",
+      "viewport-zoom-auto": "{zoom}% (Auto)",
+      "viewport-toggle-menu": "Toggle viewport menu",
+      "viewport-switch": "Switch to {label} viewport",
+      "viewport-switch-default": "Switch viewport",
+      // Plugin bar
+      "plugin-blocks": "Blocks",
+      "plugin-outline": "Outline",
+      "plugin-fields": "Fields",
+      "plugin-components": "Components",
+      // Layout
+      "layout-maximize": "maximize",
+      "layout-minimize": "minimize",
+      // Loader
+      "loader-loading": "loading"
+    };
+    interpolate = (template, params) => template.replace(
+      /\{(\w+)\}/g,
+      (match, key) => params[key] !== void 0 ? String(params[key]) : match
+    );
+    getMessage = (dictionary, key, params) => {
+      var _a;
+      const message = (_a = dictionary[key]) != null ? _a : defaultDictionary[key];
+      return params ? interpolate(message, params) : message;
+    };
+  }
+});
+
+// lib/use-message.ts
+var useMessage;
+var init_use_message = __esm({
+  "lib/use-message.ts"() {
+    "use strict";
+    init_react_import();
+    init_store();
+    init_dictionary();
+    useMessage = (key, params) => useAppStore((s) => getMessage(s.dictionary, key, params));
+  }
+});
+
 // components/Loader/index.tsx
 var import_jsx_runtime3, getClassName2, Loader;
 var init_Loader = __esm({
@@ -3806,6 +3930,7 @@ var init_Loader = __esm({
     init_react_import();
     init_lib();
     init_styles_module2();
+    init_use_message();
     import_jsx_runtime3 = require("react/jsx-runtime");
     getClassName2 = get_class_name_factory_default("Loader", styles_module_default4);
     Loader = (_a) => {
@@ -3816,6 +3941,7 @@ var init_Loader = __esm({
         "color",
         "size"
       ]);
+      const loadingLabel = useMessage("loader-loading");
       return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "span",
         __spreadValues({
@@ -3825,7 +3951,7 @@ var init_Loader = __esm({
             height: size,
             color
           },
-          "aria-label": "loading"
+          "aria-label": loadingLabel
         }, props)
       );
     };
@@ -4020,6 +4146,7 @@ var init_Control = __esm({
 // components/RichTextMenu/controls/AlignLeft.tsx
 function AlignLeft2() {
   const { editor, editorState } = useControlContext();
+  const alignLeftLabel = useMessage("field-richtext-align-left");
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Control,
     {
@@ -4030,7 +4157,7 @@ function AlignLeft2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignLeft),
       active: editorState == null ? void 0 : editorState.isAlignLeft,
-      title: "Align left"
+      title: alignLeftLabel
     }
   );
 }
@@ -4041,6 +4168,7 @@ var init_AlignLeft = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime20 = require("react/jsx-runtime");
   }
@@ -4049,6 +4177,7 @@ var init_AlignLeft = __esm({
 // components/RichTextMenu/controls/AlignCenter.tsx
 function AlignCenter2() {
   const { editor, editorState } = useControlContext();
+  const alignCenterLabel = useMessage("field-richtext-align-center");
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Control,
     {
@@ -4059,7 +4188,7 @@ function AlignCenter2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignCenter),
       active: editorState == null ? void 0 : editorState.isAlignCenter,
-      title: "Align center"
+      title: alignCenterLabel
     }
   );
 }
@@ -4070,6 +4199,7 @@ var init_AlignCenter = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime21 = require("react/jsx-runtime");
   }
@@ -4078,6 +4208,7 @@ var init_AlignCenter = __esm({
 // components/RichTextMenu/controls/AlignRight.tsx
 function AlignRight2() {
   const { editor, editorState } = useControlContext();
+  const alignRightLabel = useMessage("field-richtext-align-right");
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     Control,
     {
@@ -4088,7 +4219,7 @@ function AlignRight2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignRight),
       active: editorState == null ? void 0 : editorState.isAlignRight,
-      title: "Align right"
+      title: alignRightLabel
     }
   );
 }
@@ -4099,6 +4230,7 @@ var init_AlignRight = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime22 = require("react/jsx-runtime");
   }
@@ -4107,6 +4239,7 @@ var init_AlignRight = __esm({
 // components/RichTextMenu/controls/AlignJustify.tsx
 function AlignJustify2() {
   const { editor, editorState } = useControlContext();
+  const alignJustifyLabel = useMessage("field-richtext-align-justify");
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Control,
     {
@@ -4117,7 +4250,7 @@ function AlignJustify2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canAlignJustify),
       active: editorState == null ? void 0 : editorState.isAlignJustify,
-      title: "Justify"
+      title: alignJustifyLabel
     }
   );
 }
@@ -4128,6 +4261,7 @@ var init_AlignJustify = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime23 = require("react/jsx-runtime");
   }
@@ -4163,6 +4297,7 @@ var init_Select = __esm({
     init_lib();
     init_IconButton2();
     init_ActionBar();
+    init_use_message();
     import_jsx_runtime24 = require("react/jsx-runtime");
     getClassName15 = get_class_name_factory_default("Select", styles_module_default11);
     getItemClassName = get_class_name_factory_default("SelectItem", styles_module_default11);
@@ -4183,6 +4318,7 @@ var init_Select = __esm({
       disabled = false
     }) => {
       const [open, setOpen] = (0, import_react25.useState)(false);
+      const selectLabel = useMessage("field-richtext-select");
       const hasOptions = options.length > 0;
       const isDisabled = disabled || !hasOptions;
       const buttonInner = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: getClassName15("buttonInner"), children: [
@@ -4192,7 +4328,7 @@ var init_Select = __esm({
       const trigger = mode === "actionBar" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Action, { active: value !== defaultValue, disabled: isDisabled, children: buttonInner }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         IconButton,
         {
-          title: "Select",
+          title: selectLabel,
           active: value !== defaultValue,
           disabled: isDisabled,
           children: buttonInner
@@ -4275,21 +4411,32 @@ var init_SelectControl = __esm({
 });
 
 // components/RichTextMenu/controls/AlignSelect/use-options.ts
-var import_react27, optionNodes, useAlignOptions;
+var import_react27, optionIcons, useAlignOptions;
 var init_use_options = __esm({
   "components/RichTextMenu/controls/AlignSelect/use-options.ts"() {
     "use strict";
     init_react_import();
     import_react27 = require("react");
     init_lucide_react();
-    optionNodes = {
-      left: { label: "Left", icon: AlignLeft },
-      center: { label: "Center", icon: AlignCenter },
-      right: { label: "Right", icon: AlignRight },
-      justify: { label: "Justify", icon: AlignJustify }
+    init_use_message();
+    optionIcons = {
+      left: AlignLeft,
+      center: AlignCenter,
+      right: AlignRight,
+      justify: AlignJustify
     };
     useAlignOptions = (fieldOptions) => {
       var _a;
+      const leftString = useMessage("field-richtext-alignselect-left");
+      const centerString = useMessage("field-richtext-alignselect-center");
+      const rightString = useMessage("field-richtext-alignselect-right");
+      const justifyString = useMessage("field-richtext-alignselect-justify");
+      const optionLabels = {
+        left: leftString,
+        center: centerString,
+        right: rightString,
+        justify: justifyString
+      };
       let blockOptions = [];
       if ((fieldOptions == null ? void 0 : fieldOptions.textAlign) !== false) {
         if (!((_a = fieldOptions == null ? void 0 : fieldOptions.textAlign) == null ? void 0 : _a.alignments)) {
@@ -4312,10 +4459,10 @@ var init_use_options = __esm({
       return (0, import_react27.useMemo)(
         () => blockOptions.map((item) => ({
           value: item,
-          label: optionNodes[item].label,
-          icon: optionNodes[item].icon
+          label: optionLabels[item],
+          icon: optionIcons[item]
         })),
-        [blockOptions]
+        [blockOptions, optionLabels]
       );
     };
   }
@@ -4424,6 +4571,7 @@ var init_AlignSelect = __esm({
 // components/RichTextMenu/controls/Bold.tsx
 function Bold2() {
   const { editor, editorState } = useControlContext();
+  const boldLabel = useMessage("field-richtext-bold");
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     Control,
     {
@@ -4434,7 +4582,7 @@ function Bold2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canBold),
       active: editorState == null ? void 0 : editorState.isBold,
-      title: "Bold"
+      title: boldLabel
     }
   );
 }
@@ -4445,6 +4593,7 @@ var init_Bold = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime29 = require("react/jsx-runtime");
   }
@@ -4453,6 +4602,7 @@ var init_Bold = __esm({
 // components/RichTextMenu/controls/Italic.tsx
 function Italic2() {
   const { editor, editorState } = useControlContext();
+  const italicLabel = useMessage("field-richtext-italic");
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     Control,
     {
@@ -4463,7 +4613,7 @@ function Italic2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canItalic),
       active: editorState == null ? void 0 : editorState.isItalic,
-      title: "Italic"
+      title: italicLabel
     }
   );
 }
@@ -4474,6 +4624,7 @@ var init_Italic = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime30 = require("react/jsx-runtime");
   }
@@ -4482,6 +4633,7 @@ var init_Italic = __esm({
 // components/RichTextMenu/controls/Underline.tsx
 function Underline2() {
   const { editor, editorState } = useControlContext();
+  const underlineLabel = useMessage("field-richtext-underline");
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     Control,
     {
@@ -4492,7 +4644,7 @@ function Underline2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canUnderline),
       active: editorState == null ? void 0 : editorState.isUnderline,
-      title: "Underline"
+      title: underlineLabel
     }
   );
 }
@@ -4503,6 +4655,7 @@ var init_Underline = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime31 = require("react/jsx-runtime");
   }
@@ -4511,6 +4664,7 @@ var init_Underline = __esm({
 // components/RichTextMenu/controls/Strikethrough.tsx
 function Strikethrough2() {
   const { editor, editorState } = useControlContext();
+  const strikethroughLabel = useMessage("field-richtext-strikethrough");
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Control,
     {
@@ -4521,7 +4675,7 @@ function Strikethrough2() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canStrike),
       active: editorState == null ? void 0 : editorState.isStrike,
-      title: "Strikethrough"
+      title: strikethroughLabel
     }
   );
 }
@@ -4532,6 +4686,7 @@ var init_Strikethrough = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime32 = require("react/jsx-runtime");
   }
@@ -4540,6 +4695,7 @@ var init_Strikethrough = __esm({
 // components/RichTextMenu/controls/InlineCode.tsx
 function InlineCode() {
   const { editor, editorState } = useControlContext();
+  const inlineCodeLabel = useMessage("field-richtext-code-inline");
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Control,
     {
@@ -4550,7 +4706,7 @@ function InlineCode() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canInlineCode),
       active: editorState == null ? void 0 : editorState.isInlineCode,
-      title: "Inline code"
+      title: inlineCodeLabel
     }
   );
 }
@@ -4561,6 +4717,7 @@ var init_InlineCode = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime33 = require("react/jsx-runtime");
   }
@@ -4569,6 +4726,7 @@ var init_InlineCode = __esm({
 // components/RichTextMenu/controls/BulletList.tsx
 function BulletList() {
   const { editor, editorState } = useControlContext();
+  const bulletListLabel = useMessage("field-richtext-list-bullet");
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Control,
     {
@@ -4579,7 +4737,7 @@ function BulletList() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canBulletList),
       active: editorState == null ? void 0 : editorState.isBulletList,
-      title: "Bullet list"
+      title: bulletListLabel
     }
   );
 }
@@ -4590,6 +4748,7 @@ var init_BulletList = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime34 = require("react/jsx-runtime");
   }
@@ -4598,6 +4757,7 @@ var init_BulletList = __esm({
 // components/RichTextMenu/controls/OrderedList.tsx
 function OrderedList() {
   const { editor, editorState } = useControlContext();
+  const orderedListLabel = useMessage("field-richtext-list-ordered");
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Control,
     {
@@ -4608,7 +4768,7 @@ function OrderedList() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canOrderedList),
       active: editorState == null ? void 0 : editorState.isOrderedList,
-      title: "Ordered list"
+      title: orderedListLabel
     }
   );
 }
@@ -4619,6 +4779,7 @@ var init_OrderedList = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime35 = require("react/jsx-runtime");
   }
@@ -4627,6 +4788,7 @@ var init_OrderedList = __esm({
 // components/RichTextMenu/controls/CodeBlock.tsx
 function CodeBlock() {
   const { editor, editorState } = useControlContext();
+  const codeBlockLabel = useMessage("field-richtext-code-block");
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Control,
     {
@@ -4637,7 +4799,7 @@ function CodeBlock() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canCodeBlock),
       active: editorState == null ? void 0 : editorState.isCodeBlock,
-      title: "Code block"
+      title: codeBlockLabel
     }
   );
 }
@@ -4648,6 +4810,7 @@ var init_CodeBlock = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime36 = require("react/jsx-runtime");
   }
@@ -4656,6 +4819,7 @@ var init_CodeBlock = __esm({
 // components/RichTextMenu/controls/Blockquote.tsx
 function Blockquote() {
   const { editor, editorState } = useControlContext();
+  const blockquoteLabel = useMessage("field-richtext-blockquote");
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Control,
     {
@@ -4666,7 +4830,7 @@ function Blockquote() {
       },
       disabled: !(editorState == null ? void 0 : editorState.canBlockquote),
       active: editorState == null ? void 0 : editorState.isBlockquote,
-      title: "Blockquote"
+      title: blockquoteLabel
     }
   );
 }
@@ -4677,6 +4841,7 @@ var init_Blockquote = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime37 = require("react/jsx-runtime");
   }
@@ -4685,6 +4850,7 @@ var init_Blockquote = __esm({
 // components/RichTextMenu/controls/HorizontalRule.tsx
 function HorizontalRule() {
   const { editor, editorState } = useControlContext();
+  const horizontalRuleLabel = useMessage("field-richtext-horizontalrule");
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Control,
     {
@@ -4694,7 +4860,7 @@ function HorizontalRule() {
         editor == null ? void 0 : editor.chain().focus().setHorizontalRule().run();
       },
       disabled: !(editorState == null ? void 0 : editorState.canHorizontalRule),
-      title: "Horizontal rule"
+      title: horizontalRuleLabel
     }
   );
 }
@@ -4705,29 +4871,45 @@ var init_HorizontalRule = __esm({
     init_react_import();
     init_lucide_react();
     init_Control();
+    init_use_message();
     init_use_control_context();
     import_jsx_runtime38 = require("react/jsx-runtime");
   }
 });
 
 // components/RichTextMenu/controls/HeadingSelect/use-options.ts
-var import_react30, optionNodes2, useHeadingOptions;
+var import_react30, optionIcons2, useHeadingOptions;
 var init_use_options2 = __esm({
   "components/RichTextMenu/controls/HeadingSelect/use-options.ts"() {
     "use strict";
     init_react_import();
     import_react30 = require("react");
     init_lucide_react();
-    optionNodes2 = {
-      h1: { label: "Heading 1", icon: Heading1 },
-      h2: { label: "Heading 2", icon: Heading2 },
-      h3: { label: "Heading 3", icon: Heading3 },
-      h4: { label: "Heading 4", icon: Heading4 },
-      h5: { label: "Heading 5", icon: Heading5 },
-      h6: { label: "Heading 6", icon: Heading6 }
+    init_use_message();
+    optionIcons2 = {
+      h1: Heading1,
+      h2: Heading2,
+      h3: Heading3,
+      h4: Heading4,
+      h5: Heading5,
+      h6: Heading6
     };
     useHeadingOptions = (fieldOptions) => {
       var _a;
+      const h1String = useMessage("field-richtext-headingselect-1");
+      const h2String = useMessage("field-richtext-headingselect-2");
+      const h3String = useMessage("field-richtext-headingselect-3");
+      const h4String = useMessage("field-richtext-headingselect-4");
+      const h5String = useMessage("field-richtext-headingselect-5");
+      const h6String = useMessage("field-richtext-headingselect-6");
+      const optionLabels = {
+        h1: h1String,
+        h2: h2String,
+        h3: h3String,
+        h4: h4String,
+        h5: h5String,
+        h6: h6String
+      };
       let blockOptions = [];
       if ((fieldOptions == null ? void 0 : fieldOptions.heading) !== false) {
         if (!((_a = fieldOptions == null ? void 0 : fieldOptions.heading) == null ? void 0 : _a.levels)) {
@@ -4756,10 +4938,10 @@ var init_use_options2 = __esm({
       return (0, import_react30.useMemo)(
         () => blockOptions.map((item) => ({
           value: item,
-          label: optionNodes2[item].label,
-          icon: optionNodes2[item].icon
+          label: optionLabels[item],
+          icon: optionIcons2[item]
         })),
-        [blockOptions]
+        [blockOptions, optionLabels]
       );
     };
   }
@@ -4869,18 +5051,25 @@ var init_HeadingSelect = __esm({
 });
 
 // components/RichTextMenu/controls/ListSelect/use-options.ts
-var import_react33, optionNodes3, useListOptions;
+var import_react33, optionIcons3, useListOptions;
 var init_use_options3 = __esm({
   "components/RichTextMenu/controls/ListSelect/use-options.ts"() {
     "use strict";
     init_react_import();
     import_react33 = require("react");
     init_lucide_react();
-    optionNodes3 = {
-      ul: { label: "Bullet list", icon: List },
-      ol: { label: "Numbered list", icon: ListOrdered }
+    init_use_message();
+    optionIcons3 = {
+      ul: List,
+      ol: ListOrdered
     };
     useListOptions = (fieldOptions) => {
+      const ulString = useMessage("field-richtext-listselect-bullet");
+      const olString = useMessage("field-richtext-listselect-ordered");
+      const optionLabels = {
+        ul: ulString,
+        ol: olString
+      };
       let blockOptions = [];
       if ((fieldOptions == null ? void 0 : fieldOptions.listItem) !== false) {
         blockOptions = ["ul", "ol"];
@@ -4888,10 +5077,10 @@ var init_use_options3 = __esm({
       return (0, import_react33.useMemo)(
         () => blockOptions.map((item) => ({
           value: item,
-          label: optionNodes3[item].label,
-          icon: optionNodes3[item].icon
+          label: optionLabels[item],
+          icon: optionIcons3[item]
         })),
-        [blockOptions]
+        [blockOptions, optionLabels]
       );
     };
   }
@@ -6447,6 +6636,7 @@ function setDeep(node, path, newVal) {
 }
 
 // components/AutoField/fields/ArrayField/index.tsx
+init_use_message();
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var getClassName5 = get_class_name_factory_default("ArrayField", styles_module_default3);
 var getClassNameItem = get_class_name_factory_default("ArrayFieldItem", styles_module_default3);
@@ -6460,12 +6650,15 @@ var ItemSummaryInner = ({
     const path = `${[name]}[${index}]`;
     return getDeep(s, path);
   });
+  const fallbackSummary = useMessage("field-arrayitem-summary", {
+    index: originalIndex
+  });
   const itemSummary = (0, import_react18.useMemo)(() => {
     if (data && field.getItemSummary) {
       return field.getItemSummary(data, index);
     }
-    return `Item #${originalIndex}`;
-  }, [data, field, originalIndex, index]);
+    return fallbackSummary;
+  }, [data, field, originalIndex, index, fallbackSummary]);
   return itemSummary;
 };
 var ItemSummary = (0, import_react18.memo)(ItemSummaryInner);
@@ -6687,6 +6880,8 @@ var ArrayField = ({
     const newArrayState = regenerateArrayState(getValue());
     setUi(mapArrayStateToUi(newArrayState), false);
   }, [numItems]);
+  const duplicateLabel = useMessage("field-arrayitem-duplicate");
+  const deleteLabel = useMessage("field-arrayitem-delete");
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
@@ -6798,7 +6993,7 @@ var ArrayField = ({
                               existingValue.splice(index, 0, newItem);
                               updateValue(existingValue);
                             },
-                            title: "Duplicate",
+                            title: duplicateLabel,
                             children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Copy, { size: 16 })
                           }
                         ) }),
@@ -6814,7 +7009,7 @@ var ArrayField = ({
                               existingValue.splice(index, 1);
                               updateValue(existingValue);
                             },
-                            title: "Delete",
+                            title: deleteLabel,
                             children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Trash, { size: 16 })
                           }
                         ) })
@@ -7134,9 +7329,15 @@ var Button = (_a) => {
 
 // components/ExternalInput/index.tsx
 init_IconButton2();
+init_use_message();
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var getClassName10 = get_class_name_factory_default("ExternalInput", styles_module_default6);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default6);
+var DefaultFooter = ({ count }) => {
+  const singular = useMessage("field-external-result-singular", { count });
+  const plural = useMessage("field-external-result-plural", { count });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: getClassNameModal("footer"), children: count === 1 ? singular : plural });
+};
 var dataCache = {};
 var ExternalInput = ({
   field,
@@ -7195,16 +7396,16 @@ var ExternalInput = ({
     [id, field]
   );
   const Footer = (0, import_react22.useCallback)(
-    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: getClassNameModal("footer"), children: [
-      props.items.length,
-      " result",
-      props.items.length === 1 ? "" : "s"
-    ] }),
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DefaultFooter, { count: props.items.length }),
     [field.renderFooter]
   );
   (0, import_react22.useEffect)(() => {
     search(searchQuery, filters);
   }, []);
+  const externalItemLabel = useMessage("field-external-item");
+  const searchLabel = useMessage("field-external-search");
+  const toggleFiltersLabel = useMessage("field-external-togglefilters");
+  const selectDataLabel = useMessage("field-external-selectdata");
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {
@@ -7223,7 +7424,7 @@ var ExternalInput = ({
               onClick: () => setOpen(true),
               className: getClassName10("button"),
               disabled: readOnly,
-              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : externalItemLabel : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Link, { size: "16" }),
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: field.placeholder })
               ] })
@@ -7259,7 +7460,7 @@ var ExternalInput = ({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("searchForm"), children: [
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: getClassNameModal("searchIconText"), children: searchLabel }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Search, { size: "18" }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     "input",
@@ -7277,12 +7478,12 @@ var ExternalInput = ({
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { type: "submit", loading: isLoading, fullWidth: true, children: searchLabel }),
                   hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                     IconButton,
                     {
                       type: "button",
-                      title: "Toggle filters",
+                      title: toggleFiltersLabel,
                       onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -7292,7 +7493,7 @@ var ExternalInput = ({
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading7, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Heading7, { rank: "2", size: "xs", children: field.placeholder || selectDataLabel }) }),
               /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: getClassNameModal("grid"), children: [
                 hasFilterFields && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
@@ -7362,6 +7563,7 @@ var ExternalInput = ({
 
 // components/AutoField/fields/ExternalField/index.tsx
 init_lucide_react();
+init_use_message();
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var ExternalField = ({
   field,
@@ -7377,6 +7579,7 @@ var ExternalField = ({
   const value = useDeepField(name);
   const validField = field;
   const deprecatedField = field;
+  const selectDataLabel = useMessage("field-external-selectdata");
   (0, import_react23.useEffect)(() => {
     if (deprecatedField.adaptor) {
       console.error(
@@ -7399,7 +7602,7 @@ var ExternalField = ({
           name,
           field: __spreadProps(__spreadValues({}, validField), {
             // DEPRECATED
-            placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || "Select data",
+            placeholder: ((_a = deprecatedField.adaptor) == null ? void 0 : _a.name) ? `Select from ${deprecatedField.adaptor.name}` : validField.placeholder || selectDataLabel,
             mapProp: ((_b = deprecatedField.adaptor) == null ? void 0 : _b.mapProp) || validField.mapProp,
             mapRow: validField.mapRow,
             fetchList: ((_c = deprecatedField.adaptor) == null ? void 0 : _c.fetchList) ? () => __async(null, null, function* () {
@@ -7742,6 +7945,7 @@ init_get_class_name_factory();
 var import_react48 = require("react");
 init_lucide_react();
 init_store();
+init_use_message();
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var getClassName19 = get_class_name_factory_default("Input", styles_module_default2);
 var FieldLabel = ({
@@ -7753,11 +7957,12 @@ var FieldLabel = ({
   className
 }) => {
   const El = el;
+  const readOnlyLabel = useMessage("field-readonly");
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(El, { className, children: [
     /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: getClassName19("label"), children: [
       icon ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getClassName19("labelIcon"), children: icon }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, {}),
       label,
-      readOnly && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getClassName19("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: getClassName19("disabledIcon"), title: readOnlyLabel, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Lock, { size: "12" }) })
     ] }),
     children
   ] });
@@ -8140,6 +8345,7 @@ function assignRefs(refs, node) {
 }
 
 // components/DraggableComponent/index.tsx
+init_use_message();
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var getClassName21 = get_class_name_factory_default("DraggableComponent", styles_module_default15);
 var DEBUG2 = false;
@@ -8628,9 +8834,12 @@ var DraggableComponent = ({
     }
     setDragAxis(autoDragAxis);
   }, [ref, userDragAxis, autoDragAxis]);
+  const selectParentLabel = useMessage("action-selectparent");
+  const duplicateLabel = useMessage("action-duplicate");
+  const deleteLabel = useMessage("action-delete");
   const parentAction = (0, import_react52.useMemo)(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CornerLeftUp, { size: 16 }) }),
-    [ctx == null ? void 0 : ctx.areaId]
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActionBar.Action, { onClick: onSelectParent, label: selectParentLabel, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CornerLeftUp, { size: 16 }) }),
+    [ctx == null ? void 0 : ctx.areaId, selectParentLabel]
   );
   const nextContextValue = (0, import_react52.useMemo)(
     () => __spreadProps(__spreadValues({}, ctx), {
@@ -8710,8 +8919,15 @@ var DraggableComponent = ({
                             ),
                             hasNormalActions && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActionBar.Separator, {})
                           ] }),
-                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Copy, { className: getClassName21("actionsAction") }) }),
-                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Trash, { className: getClassName21("actionsAction") }) })
+                          permissions.duplicate && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                            ActionBar.Action,
+                            {
+                              onClick: onDuplicate,
+                              label: duplicateLabel,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Copy, { className: getClassName21("actionsAction") })
+                            }
+                          ),
+                          permissions.delete && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ActionBar.Action, { onClick: onDelete, label: deleteLabel, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Trash, { className: getClassName21("actionsAction") }) })
                         ]
                       }
                     )
@@ -9292,6 +9508,9 @@ function useFieldTransformsTracked(config, item, transforms, readOnly, forceRead
   return mergedProps;
 }
 
+// components/DropZone/index.tsx
+init_use_message();
+
 // lib/field-transforms/default-transforms/inline-text-transform.tsx
 init_react_import();
 
@@ -9917,7 +10136,7 @@ var DropZoneChild = ({
   inDroppableZone,
   itemRef
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const metadata = useAppStore((s) => s.metadata);
   const ctx = (0, import_react68.useContext)(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
@@ -9985,7 +10204,11 @@ var DropZoneChild = ({
       return ((_a2 = s.selectedItem) == null ? void 0 : _a2.props.id) === componentId || false;
     }
   );
-  let label = (_b = (_a = componentConfig == null ? void 0 : componentConfig.label) != null ? _a : item == null ? void 0 : item.type.toString()) != null ? _b : "Component";
+  const componentLabel = useMessage("label-component");
+  const noConfigMessage = useMessage("canvas-noconfig", {
+    type: (_b = (_a = item == null ? void 0 : item.type) == null ? void 0 : _a.toString()) != null ? _b : ""
+  });
+  let label = (_d = (_c = componentConfig == null ? void 0 : componentConfig.label) != null ? _c : item == null ? void 0 : item.type.toString()) != null ? _d : componentLabel;
   const defaultsProps = (0, import_react68.useMemo)(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
@@ -10019,10 +10242,7 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { style: { padding: 48, textAlign: "center" }, children: [
-    "No configuration for ",
-    item.type
-  ] });
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { style: { padding: 48, textAlign: "center" }, children: noConfigMessage });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -11475,6 +11695,7 @@ var styles_module_default19 = { "ComponentList": "_ComponentList_htktj_1", "Comp
 init_get_class_name_factory();
 var import_react75 = require("react");
 init_store();
+init_use_message();
 init_lucide_react();
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var getClassName28 = get_class_name_factory_default("ComponentList", styles_module_default19);
@@ -11508,6 +11729,12 @@ var ComponentList = ({
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
   const contentId = `puck-drawer-category-${id}`;
+  const collapseTitle = useMessage("drawer-category-collapse", {
+    title: title != null ? title : ""
+  });
+  const expandTitle = useMessage("drawer-category-expand", {
+    title: title != null ? title : ""
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: getClassName28({ isExpanded: expanded }), children: [
     title && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       "button",
@@ -11523,7 +11750,7 @@ var ComponentList = ({
             })
           })
         }),
-        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
+        title: expanded ? collapseTitle : expandTitle,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: getClassName28("titleIcon"), children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronUp, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronDown, { size: 12 }) })
@@ -11547,11 +11774,13 @@ ComponentList.Item = ComponentListItem;
 
 // lib/use-component-list.tsx
 init_store();
+init_use_message();
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var useComponentList = () => {
   const [componentList, setComponentList] = (0, import_react76.useState)();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
+  const otherLabel = useMessage("drawer-category-other");
   (0, import_react76.useEffect)(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
@@ -11559,6 +11788,7 @@ var useComponentList = () => {
       let _componentList;
       _componentList = Object.entries(uiComponentList).map(
         ([categoryKey, category]) => {
+          var _a2, _b2;
           if (!category.components) {
             return null;
           }
@@ -11572,14 +11802,14 @@ var useComponentList = () => {
             ComponentList,
             {
               id: categoryKey,
-              title: category.title || categoryKey,
+              title: ((_b2 = (_a2 = config.categories) == null ? void 0 : _a2[categoryKey]) == null ? void 0 : _b2.title) || category.title || categoryKey,
               children: category.components.map((componentName, i) => {
-                var _a2;
+                var _a3;
                 const componentConf = config.components[componentName] || {};
                 return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                   ComponentList.Item,
                   {
-                    label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
+                    label: (_a3 = componentConf["label"]) != null ? _a3 : componentName,
                     name: componentName,
                     index: i
                   },
@@ -11600,7 +11830,7 @@ var useComponentList = () => {
             ComponentList,
             {
               id: "other",
-              title: ((_c = uiComponentList.other) == null ? void 0 : _c.title) || "Other",
+              title: ((_c = uiComponentList.other) == null ? void 0 : _c.title) || otherLabel,
               children: remainingComponents.map((componentName, i) => {
                 var _a2;
                 const componentConf = config.components[componentName] || {};
@@ -11621,7 +11851,7 @@ var useComponentList = () => {
       }
       setComponentList(_componentList);
     }
-  }, [config.categories, config.components, uiComponentList]);
+  }, [config.categories, config.components, uiComponentList, otherLabel]);
   return componentList;
 };
 
@@ -15056,6 +15286,7 @@ init_lucide_react();
 init_root_droppable_id();
 var import_react81 = require("react");
 init_store();
+init_use_message();
 var import_react_virtual2 = require("@tanstack/react-virtual");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var getClassName30 = get_class_name_factory_default("LayerTree", styles_module_default21);
@@ -15091,11 +15322,12 @@ var buildLayerNode = ({
   nodes,
   zoneCompound,
   zones,
-  zonesByParent
+  zonesByParent,
+  componentFallbackLabel = "Component"
 }) => {
   var _a, _b, _c;
   const nodeData = nodes[itemId];
-  const componentType = ((_a = nodeData == null ? void 0 : nodeData.data.type) == null ? void 0 : _a.toString()) || "Component";
+  const componentType = ((_a = nodeData == null ? void 0 : nodeData.data.type) == null ? void 0 : _a.toString()) || componentFallbackLabel;
   const label = (_c = (_b = config.components[componentType]) == null ? void 0 : _b.label) != null ? _c : componentType;
   const childZoneCompounds = zonesByParent[itemId] || [];
   return {
@@ -15105,7 +15337,8 @@ var buildLayerNode = ({
         nodes,
         zoneCompound: childZoneCompound,
         zones,
-        zonesByParent
+        zonesByParent,
+        componentFallbackLabel
       })
     ),
     componentType,
@@ -15121,7 +15354,8 @@ var buildLayerTree = ({
   nodes,
   zoneCompound,
   zones,
-  zonesByParent = getZonesByParent(zones)
+  zonesByParent = getZonesByParent(zones),
+  componentFallbackLabel = "Component"
 }) => {
   var _a, _b;
   const contentIds = (_b = (_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [];
@@ -15134,7 +15368,8 @@ var buildLayerTree = ({
         nodes,
         zoneCompound,
         zones,
-        zonesByParent
+        zonesByParent,
+        componentFallbackLabel
       })
     ),
     label: getZoneLabel(zoneCompound, nodes, config, label),
@@ -15179,6 +15414,8 @@ var Layer = (0, import_react81.forwardRef)(function Layer2({
     (s) => s.hoveringComponent === node.itemId
   );
   const containsZone = node.childZones.length > 0;
+  const collapseLabel = useMessage("outline-collapse");
+  const expandLabel = useMessage("outline-expand");
   const setItemSelector = (0, import_react81.useCallback)(
     (itemSelector) => {
       dispatch({ type: "setUi", ui: { itemSelector } });
@@ -15228,7 +15465,7 @@ var Layer = (0, import_react81.forwardRef)(function Layer2({
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
-                  title: isSelected ? "Collapse" : "Expand",
+                  title: isSelected ? collapseLabel : expandLabel,
                   children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ChevronDown, { size: "12" })
                 }
               ),
@@ -15296,8 +15533,9 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
+  const noItemsLabel = useMessage("outline-empty");
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("ul", { className: getClassName30(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("helper"), children: noItemsLabel }),
     tree.items.map((node) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       Layer,
       {
@@ -15319,6 +15557,7 @@ var VirtualizedLayerTreeItems = ({
   tree
 }) => {
   const listRef = (0, import_react81.useRef)(null);
+  const noItemsLabel = useMessage("outline-empty");
   const virtualizer = (0, import_react_virtual2.useVirtualizer)({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -15387,7 +15626,7 @@ var VirtualizedLayerTreeItems = ({
     );
   }
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("ul", { className: getClassName30(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("helper"), children: "No items" }),
+    tree.items.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: getClassName30("helper"), children: noItemsLabel }),
     renderedItems
   ] });
 };
@@ -15410,6 +15649,7 @@ var LayerTree = ({
 
 // components/Puck/components/Outline/index.tsx
 init_store();
+init_use_message();
 var import_react82 = require("react");
 
 // lib/data/find-zones-for-area.ts
@@ -15432,6 +15672,7 @@ var Outline = () => {
     var _a;
     return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) || null;
   });
+  const componentFallbackLabel = useMessage("label-component");
   const rootZones = useAppStore(
     (0, import_shallow8.useShallow)((s) => findZonesForArea(s.state, "root"))
   );
@@ -15449,10 +15690,11 @@ var Outline = () => {
         label: rootZones.length === 1 ? "" : zoneCompound.split(":")[1],
         nodes,
         zoneCompound,
-        zones
+        zones,
+        componentFallbackLabel
       })
     ),
-    [config, nodes, rootZones, zones]
+    [config, nodes, rootZones, zones, componentFallbackLabel]
   );
   const Wrapper = (0, import_react82.useMemo)(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Wrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
@@ -15626,7 +15868,8 @@ var generateUsePuck = (store, getState) => {
       const parentNode = store.state.indexes.nodes[parentId];
       if (!parentNode) return;
       return parentNode.data;
-    }
+    },
+    dictionary: store.dictionary
   };
   storeData.__private = {
     appState: store.state
@@ -15643,7 +15886,8 @@ var convertToPickedStore = (store) => {
     dispatch: store.dispatch,
     permissions: store.permissions,
     history: store.history,
-    selectedItem: store.selectedItem
+    selectedItem: store.selectedItem,
+    dictionary: store.dictionary
   };
 };
 var useRegisterUsePuckStore = (appStore) => {
@@ -15711,6 +15955,7 @@ var styles_module_default22 = { "Puck": "_Puck_mr27u_19", "Puck-portal": "_Puck-
 
 // components/Puck/components/Layout/index.tsx
 init_store();
+init_use_message();
 
 // components/DefaultOverride/index.tsx
 init_react_import();
@@ -15759,6 +16004,7 @@ var styles_module_default23 = { "MenuBar": "_MenuBar_1hxnj_1", "MenuBar--menuOpe
 
 // components/MenuBar/index.tsx
 init_store();
+init_use_message();
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var getClassName31 = get_class_name_factory_default("MenuBar", styles_module_default23);
 function MenuBar({
@@ -15770,6 +16016,8 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
+  const undoLabel = useMessage("header-undo");
+  const redoLabel = useMessage("header-redo");
   return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "div",
     {
@@ -15790,7 +16038,7 @@ function MenuBar({
             IconButton,
             {
               type: "button",
-              title: "undo",
+              title: undoLabel,
               disabled: !hasPast,
               onClick: back,
               children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Undo2, { size: 21 })
@@ -15800,7 +16048,7 @@ function MenuBar({
             IconButton,
             {
               type: "button",
-              title: "redo",
+              title: redoLabel,
               disabled: !hasFuture,
               onClick: forward,
               children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Redo2, { size: 21 })
@@ -15815,6 +16063,7 @@ function MenuBar({
 
 // components/Puck/components/Header/index.tsx
 init_lib();
+init_use_message();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
 init_react_import();
@@ -15895,6 +16144,11 @@ var HeaderInner = ({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
+  const publishLabel = useMessage("header-publish");
+  const pageLabel = useMessage("label-page");
+  const toggleLeftLabel = useMessage("header-toggle-leftsidebar");
+  const toggleRightLabel = useMessage("header-toggle-rightsidebar");
+  const toggleMenuLabel = useMessage("header-toggle-menubar");
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     CustomHeader,
     {
@@ -15906,7 +16160,7 @@ var HeaderInner = ({
             onPublish && onPublish(data);
           },
           icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Globe, { size: "14px" }),
-          children: "Publish"
+          children: publishLabel
         }
       ) }) }),
       children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -15926,7 +16180,7 @@ var HeaderInner = ({
                   onClick: () => {
                     toggleSidebars("left");
                   },
-                  title: "Toggle left sidebar",
+                  title: toggleLeftLabel,
                   children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PanelLeft, { focusable: "false" })
                 }
               ) }),
@@ -15937,13 +16191,13 @@ var HeaderInner = ({
                   onClick: () => {
                     toggleSidebars("right");
                   },
-                  title: "Toggle right sidebar",
+                  title: toggleRightLabel,
                   children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: getClassName32("title"), children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(Heading7, { rank: "2", size: "xs", children: [
-              headerTitle || rootTitle || "Page",
+              headerTitle || rootTitle || pageLabel,
               headerPath && /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
                 " ",
                 /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("code", { className: getClassName32("path"), children: headerPath })
@@ -15957,7 +16211,7 @@ var HeaderInner = ({
                   onClick: () => {
                     return setMenuOpen(!menuOpen);
                   },
-                  title: "Toggle menu bar",
+                  title: toggleMenuLabel,
                   children: menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronDown, { focusable: "false" })
                 }
               ) }),
@@ -15975,7 +16229,7 @@ var HeaderInner = ({
                         onPublish && onPublish(data);
                       },
                       icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Globe, { size: "14px" }),
-                      children: "Publish"
+                      children: publishLabel
                     }
                   ) }),
                   setMenuOpen
@@ -16016,6 +16270,7 @@ init_lucide_react();
 init_react_import();
 var import_react87 = require("react");
 init_store();
+init_use_message();
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -16027,13 +16282,15 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
+  const pageLabel = useMessage("label-page");
+  const componentLabel = useMessage("label-component");
   return (0, import_react87.useMemo)(() => {
     const breadcrumbs = (path == null ? void 0 : path.map((zoneCompound) => {
       var _a, _b, _c, _d;
       const [componentId] = zoneCompound.split(":");
       if (componentId === "root") {
         return {
-          label: ((_a = config == null ? void 0 : config.root) == null ? void 0 : _a.label) || "Page",
+          label: ((_a = config == null ? void 0 : config.root) == null ? void 0 : _a.label) || pageLabel,
           selector: null
         };
       }
@@ -16041,7 +16298,7 @@ var useBreadcrumbs = (renderCount) => {
       const parentId = node.path[node.path.length - 1];
       const contentIds = ((_b = appStore.getState().state.indexes.zones[parentId]) == null ? void 0 : _b.contentIds) || [];
       const index = contentIds.indexOf(componentId);
-      const label = node ? (_d = (_c = config.components[node.data.type]) == null ? void 0 : _c.label) != null ? _d : node.data.type : "Component";
+      const label = node ? (_d = (_c = config.components[node.data.type]) == null ? void 0 : _c.label) != null ? _d : node.data.type : componentLabel;
       return {
         label,
         selector: node ? {
@@ -16054,7 +16311,7 @@ var useBreadcrumbs = (renderCount) => {
       return breadcrumbs.slice(breadcrumbs.length - renderCount);
     }
     return breadcrumbs;
-  }, [path, renderCount]);
+  }, [path, renderCount, pageLabel, componentLabel]);
 };
 
 // components/Breadcrumbs/index.tsx
@@ -16116,6 +16373,7 @@ init_react_import();
 init_lucide_react();
 init_IconButton2();
 init_store();
+init_use_message();
 var import_react88 = require("react");
 init_lib();
 
@@ -16161,6 +16419,26 @@ var defaultZoomOptions = [
   { label: "150%", value: 1.5 },
   { label: "200%", value: 2 }
 ];
+var ViewportButton = ({
+  viewport,
+  isActive,
+  onClick
+}) => {
+  var _a;
+  const switchTitle = useMessage("viewport-switch", {
+    label: (_a = viewport.label) != null ? _a : ""
+  });
+  const switchDefaultTitle = useMessage("viewport-switch-default");
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    ActionButton,
+    {
+      title: viewport.label ? switchTitle : switchDefaultTitle,
+      onClick,
+      isActive,
+      children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
+    }
+  );
+};
 var ViewportControls = ({
   autoZoom,
   zoom,
@@ -16174,17 +16452,20 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
+  const autoZoomLabel = useMessage("viewport-zoom-auto", {
+    zoom: (autoZoom * 100).toFixed(0)
+  });
   const zoomOptions = (0, import_react88.useMemo)(
     () => [
       ...defaultZoomOptions,
       ...defaultsContainAutoZoom ? [] : [
         {
           value: autoZoom,
-          label: `${(autoZoom * 100).toFixed(0)}% (Auto)`
+          label: autoZoomLabel
         }
       ]
     ].filter((a) => a.value <= autoZoom).sort((a, b) => a.value > b.value ? 1 : -1),
-    [autoZoom]
+    [autoZoom, autoZoomLabel]
   );
   const [activeViewport, setActiveViewport] = (0, import_react88.useState)(
     uiViewports.current.width
@@ -16193,6 +16474,9 @@ var ViewportControls = ({
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current]);
   const [isExpanded, setIsExpanded] = (0, import_react88.useState)(false);
+  const zoomOutLabel = useMessage("viewport-zoom-out");
+  const zoomInLabel = useMessage("viewport-zoom-in");
+  const toggleMenuLabel = useMessage("viewport-toggle-menu");
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
@@ -16201,15 +16485,14 @@ var ViewportControls = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: getClassName35("actions"), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: getClassName35("actionsInner"), children: [
           viewports.map((viewport, i) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-            ActionButton,
+            ViewportButton,
             {
-              title: viewport.label ? `Switch to ${viewport.label} viewport` : "Switch viewport",
+              viewport,
               onClick: () => {
                 setActiveViewport(viewport.width);
                 onViewportChange(viewport);
               },
-              isActive: activeViewport === viewport.width,
-              children: typeof viewport.icon === "string" ? icons[viewport.icon] || viewport.icon : viewport.icon || icons.Smartphone
+              isActive: activeViewport === viewport.width
             },
             i
           )),
@@ -16217,7 +16500,7 @@ var ViewportControls = ({
           /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             ActionButton,
             {
-              title: "Zoom viewport out",
+              title: zoomOutLabel,
               disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
               onClick: (e) => {
                 e.stopPropagation();
@@ -16234,7 +16517,7 @@ var ViewportControls = ({
           /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             ActionButton,
             {
-              title: "Zoom viewport in",
+              title: zoomInLabel,
               disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
               onClick: (e) => {
                 e.stopPropagation();
@@ -16277,7 +16560,7 @@ var ViewportControls = ({
           "button",
           {
             className: getClassName35("toggleButton"),
-            title: "Toggle viewport menu",
+            title: toggleMenuLabel,
             onClick: () => setIsExpanded((s) => !s),
             children: isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(X, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Monitor, { size: 16 })
           }
@@ -16884,12 +17167,15 @@ var styles_module_default32 = { "BlocksPlugin": "_BlocksPlugin_9af19_1" };
 init_lib();
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var getClassName40 = get_class_name_factory_default("BlocksPlugin", styles_module_default32);
-var blocksPlugin = () => ({
-  name: "blocks",
-  label: "Blocks",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Components, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Hammer, {})
-});
+var blocksPlugin = (props = {}) => {
+  var _a, _b;
+  return {
+    name: "blocks",
+    label: (_a = props.label) != null ? _a : "Blocks",
+    render: () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: getClassName40(), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Components, {}) }),
+    icon: (_b = props.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Hammer, {})
+  };
+};
 
 // plugins/outline/index.tsx
 init_react_import();
@@ -16903,17 +17189,21 @@ var styles_module_default33 = { "OutlinePlugin": "_OutlinePlugin_16k03_1" };
 init_lib();
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var getClassName41 = get_class_name_factory_default("OutlinePlugin", styles_module_default33);
-var outlinePlugin = () => ({
-  name: "outline",
-  label: "Outline",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Outline, {}) }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Layers, {})
-});
+var outlinePlugin = (props = {}) => {
+  var _a, _b;
+  return {
+    name: "outline",
+    label: (_a = props.label) != null ? _a : "Outline",
+    render: () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: getClassName41(), children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Outline, {}) }),
+    icon: (_b = props.icon) != null ? _b : /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Layers, {})
+  };
+};
 
 // plugins/fields/index.tsx
 init_react_import();
 init_lucide_react();
 init_store();
+init_use_message();
 
 // css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
@@ -16924,21 +17214,22 @@ init_lib();
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var getClassName42 = get_class_name_factory_default("FieldsPlugin", styles_module_default34);
 var CurrentTitle = () => {
+  const pageLabel = useMessage("label-page");
   const label = useAppStore((s) => {
     var _a, _b;
     const selectedItem = s.selectedItem;
-    return selectedItem ? (_b = (_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.label) != null ? _b : selectedItem.type : "Page";
+    return selectedItem ? (_b = (_a = s.config.components[selectedItem.type]) == null ? void 0 : _a.label) != null ? _b : selectedItem.type : null;
   });
-  return label;
+  return label != null ? label : pageLabel;
 };
-var fieldsPlugin = ({ desktopSideBar = "right" } = {}) => ({
+var fieldsPlugin = ({ desktopSideBar = "right", label, icon } = {}) => ({
   name: "fields",
-  label: "Fields",
+  label: label != null ? label : "Fields",
   render: () => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: getClassName42(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: getClassName42("header"), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(CurrentTitle, {}) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(RectangleEllipsis, {}),
+  icon: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
@@ -16957,13 +17248,14 @@ var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_mod
 var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default22);
 var useBrowserLayoutEffect = typeof window === "undefined" ? import_react94.useEffect : import_react94.useLayoutEffect;
 var FieldSideBar = () => {
+  const pageLabel = useMessage("label-page");
   const title = useAppStore(
     (s) => {
       var _a, _b, _c;
-      return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : ((_c = s.config.root) == null ? void 0 : _c.label) || "Page";
+      return s.selectedItem ? (_b = (_a = s.config.components[s.selectedItem.type]) == null ? void 0 : _a["label"]) != null ? _b : s.selectedItem.type.toString() : (_c = s.config.root) == null ? void 0 : _c.label;
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Fields, {}) });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title: title || pageLabel, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Fields, {}) });
 };
 var PluginTab = ({
   children,
@@ -17065,16 +17357,22 @@ var Layout = ({ children }) => {
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
+  const blocksLabel = useMessage("plugin-blocks");
+  const outlineLabel = useMessage("plugin-outline");
+  const fieldsLabel = useMessage("plugin-fields");
   const pluginItems = (0, import_react94.useMemo)(() => {
     const details = {};
-    const defaultPlugins = [blocksPlugin(), outlinePlugin()];
+    const defaultPlugins = [
+      blocksPlugin({ label: blocksLabel }),
+      outlinePlugin({ label: outlineLabel })
+    ];
     const isLegacy = (plugin) => plugin.name === "legacy-side-bar" ? -1 : 0;
     const combinedPlugins = [
       ...defaultPlugins,
       ...plugins != null ? plugins : []
     ].sort((a, b) => isLegacy(a) - isLegacy(b));
     if (!(plugins == null ? void 0 : plugins.some((p) => p.name === "fields"))) {
-      combinedPlugins.push(fieldsPlugin());
+      combinedPlugins.push(fieldsPlugin({ label: fieldsLabel }));
     }
     combinedPlugins == null ? void 0 : combinedPlugins.forEach((plugin) => {
       var _a, _b;
@@ -17111,7 +17409,15 @@ var Layout = ({ children }) => {
       }
     });
     return details;
-  }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
+  }, [
+    plugins,
+    currentPlugin,
+    appStoreApi,
+    leftSideBarVisible,
+    blocksLabel,
+    outlineLabel,
+    fieldsLabel
+  ]);
   (0, import_react94.useEffect)(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
@@ -17125,6 +17431,8 @@ var Layout = ({ children }) => {
       return (_a = s.state.ui.mobilePanelExpanded) != null ? _a : false;
     }
   );
+  const maximizeLabel = useMessage("layout-maximize");
+  const minimizeLabel = useMessage("layout-minimize");
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "div",
     {
@@ -17161,7 +17469,7 @@ var Layout = ({ children }) => {
                         IconButton,
                         {
                           type: "button",
-                          title: "maximize",
+                          title: mobilePanelExpanded ? minimizeLabel : maximizeLabel,
                           onClick: () => {
                             setUi({
                               mobilePanelExpanded: !mobilePanelExpanded
@@ -17236,6 +17544,7 @@ function PuckProvider({ children }) {
     iframe: _iframe,
     initialHistory: _initialHistory,
     metadata,
+    dictionary,
     onAction,
     fieldTransforms,
     _experimentalFullScreenCanvas,
@@ -17333,6 +17642,7 @@ function PuckProvider({ children }) {
         _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
+        dictionary: dictionary || {},
         fieldTransforms: loadedFieldTransforms
       };
     },
@@ -17348,6 +17658,7 @@ function PuckProvider({ children }) {
       _experimentalVirtualization,
       onAction,
       metadata,
+      dictionary,
       loadedFieldTransforms
     ]
   );
@@ -17660,13 +17971,30 @@ init_walk_tree();
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
+init_use_message();
 var import_jsx_runtime95 = require("react/jsx-runtime");
-var legacySideBarPlugin = () => ({
+var LegacySideBar = ({
+  outlineLabel,
+  componentsLabel
+}) => {
+  const componentsLabelMessage = useMessage("plugin-components");
+  const outlineLabelMessage = useMessage("plugin-outline");
+  const resolvedComponentsLabel = componentsLabel != null ? componentsLabel : componentsLabelMessage;
+  const resolvedOutlineLabel = outlineLabel != null ? outlineLabel : outlineLabelMessage;
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: resolvedComponentsLabel, noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: resolvedOutlineLabel, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Outline, {}) })
+  ] });
+};
+var legacySideBarPlugin = (props = {}) => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Components, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SidebarSection, { title: "Outline", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Outline, {}) })
-  ] })
+  render: () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    LegacySideBar,
+    {
+      outlineLabel: props.outlineLabel,
+      componentsLabel: props.componentsLabel
+    }
+  )
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {