@puckeditor/core 0.22.1 → 0.23.0-canary.4bf6887d

package/dist/{chunk-6PIQFZBM.mjs → chunk-D6RLJXOY.mjs}

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-VOB4L2BJ.mjs";
+} from "./chunk-WABMBXFK.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -13,7 +13,7 @@ import {
 } from "./chunk-FKYOVZNF.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-73XKHVBN.mjs";
+} from "./chunk-OI2LQGRV.mjs";
 import {
   ActionBar,
   ChevronDown,
@@ -63,12 +63,13 @@ import {
   useAppStore,
   useAppStoreApi,
   useHotkey,
+  useMessage,
   useMonitorHotkeys,
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-54LFCIWQ.mjs";
+} from "./chunk-2KHLVDRT.mjs";
 import {
   generateId,
   getItem,
@@ -263,11 +264,12 @@ var FieldLabel = ({
   className
 }) => {
   const El = el;
+  const readOnlyLabel = useMessage("field-readonly");
   return /* @__PURE__ */ jsxs2(El, { className, children: [
     /* @__PURE__ */ jsxs2("div", { className: getClassName2("label"), children: [
       icon ? /* @__PURE__ */ jsx2("div", { className: getClassName2("labelIcon"), children: icon }) : /* @__PURE__ */ jsx2(Fragment, {}),
       label,
-      readOnly && /* @__PURE__ */ jsx2("div", { className: getClassName2("disabledIcon"), title: "Read-only", children: /* @__PURE__ */ jsx2(Lock, { size: "12" }) })
+      readOnly && /* @__PURE__ */ jsx2("div", { className: getClassName2("disabledIcon"), title: readOnlyLabel, children: /* @__PURE__ */ jsx2(Lock, { size: "12" }) })
     ] }),
     children
   ] });
@@ -956,12 +958,15 @@ var ItemSummaryInner = ({
     const path = `${[name]}[${index}]`;
     return getDeep(s, path);
   });
+  const fallbackSummary = useMessage("field-arrayitem-summary", {
+    index: originalIndex
+  });
   const itemSummary = useMemo3(() => {
     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 = memo2(ItemSummaryInner);
@@ -1183,6 +1188,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;
   }
@@ -1294,7 +1301,7 @@ var ArrayField = ({
                               existingValue.splice(index, 0, newItem);
                               updateValue(existingValue);
                             },
-                            title: "Duplicate",
+                            title: duplicateLabel,
                             children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
                           }
                         ) }),
@@ -1310,7 +1317,7 @@ var ArrayField = ({
                               existingValue.splice(index, 1);
                               updateValue(existingValue);
                             },
-                            title: "Delete",
+                            title: deleteLabel,
                             children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
                           }
                         ) })
@@ -1532,6 +1539,11 @@ init_react_import();
 import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var getClassName8 = get_class_name_factory_default("ExternalInput", styles_module_default4);
 var getClassNameModal = get_class_name_factory_default("ExternalInputModal", styles_module_default4);
+var DefaultFooter = ({ count }) => {
+  const singular = useMessage("field-external-result-singular", { count });
+  const plural = useMessage("field-external-result-plural", { count });
+  return /* @__PURE__ */ jsx12("span", { className: getClassNameModal("footer"), children: count === 1 ? singular : plural });
+};
 var dataCache = {};
 var ExternalInput = ({
   field,
@@ -1590,16 +1602,16 @@ var ExternalInput = ({
     [id, field]
   );
   const Footer = useCallback3(
-    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsxs5("span", { className: getClassNameModal("footer"), children: [
-      props.items.length,
-      " result",
-      props.items.length === 1 ? "" : "s"
-    ] }),
+    (props) => field.renderFooter ? field.renderFooter(props) : /* @__PURE__ */ jsx12(DefaultFooter, { count: props.items.length }),
     [field.renderFooter]
   );
   useEffect5(() => {
     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__ */ jsxs5(
     "div",
     {
@@ -1618,7 +1630,7 @@ var ExternalInput = ({
               onClick: () => setOpen(true),
               className: getClassName8("button"),
               disabled: readOnly,
-              children: value ? field.getItemSummary ? field.getItemSummary(value) : "External item" : /* @__PURE__ */ jsxs5(Fragment4, { children: [
+              children: value ? field.getItemSummary ? field.getItemSummary(value) : externalItemLabel : /* @__PURE__ */ jsxs5(Fragment4, { children: [
                 /* @__PURE__ */ jsx12(Link, { size: "16" }),
                 /* @__PURE__ */ jsx12("span", { children: field.placeholder })
               ] })
@@ -1654,7 +1666,7 @@ var ExternalInput = ({
             children: [
               /* @__PURE__ */ jsx12("div", { className: getClassNameModal("masthead"), children: field.showSearch ? /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("searchForm"), children: [
                 /* @__PURE__ */ jsxs5("label", { className: getClassNameModal("search"), children: [
-                  /* @__PURE__ */ jsx12("span", { className: getClassNameModal("searchIconText"), children: "Search" }),
+                  /* @__PURE__ */ jsx12("span", { className: getClassNameModal("searchIconText"), children: searchLabel }),
                   /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchIcon"), children: /* @__PURE__ */ jsx12(Search, { size: "18" }) }),
                   /* @__PURE__ */ jsx12(
                     "input",
@@ -1672,12 +1684,12 @@ var ExternalInput = ({
                   )
                 ] }),
                 /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("searchActions"), children: [
-                  /* @__PURE__ */ jsx12(Button, { type: "submit", loading: isLoading, fullWidth: true, children: "Search" }),
+                  /* @__PURE__ */ jsx12(Button, { type: "submit", loading: isLoading, fullWidth: true, children: searchLabel }),
                   hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("searchActionIcon"), children: /* @__PURE__ */ jsx12(
                     IconButton,
                     {
                       type: "button",
-                      title: "Toggle filters",
+                      title: toggleFiltersLabel,
                       onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -1687,7 +1699,7 @@ var ExternalInput = ({
                     }
                   ) })
                 ] })
-              ] }) : /* @__PURE__ */ jsx12(Heading, { rank: "2", size: "xs", children: field.placeholder || "Select data" }) }),
+              ] }) : /* @__PURE__ */ jsx12(Heading, { rank: "2", size: "xs", children: field.placeholder || selectDataLabel }) }),
               /* @__PURE__ */ jsxs5("div", { className: getClassNameModal("grid"), children: [
                 hasFilterFields && /* @__PURE__ */ jsx12("div", { className: getClassNameModal("filters"), children: hasFilterFields && Object.keys(filterFields).map((fieldName) => {
                   const filterField = filterFields[fieldName];
@@ -1771,6 +1783,7 @@ var ExternalField = ({
   const value = useDeepField(name);
   const validField = field;
   const deprecatedField = field;
+  const selectDataLabel = useMessage("field-external-selectdata");
   useEffect6(() => {
     if (deprecatedField.adaptor) {
       console.error(
@@ -1793,7 +1806,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* () {
@@ -1999,7 +2012,7 @@ EditorFallback.displayName = "EditorFallback";
 // components/AutoField/fields/RichtextField/index.tsx
 import { Fragment as Fragment5, jsx as jsx18 } from "react/jsx-runtime";
 var Editor = lazy(
-  () => import("./Editor-MXSH3OSX.mjs").then((m) => ({
+  () => import("./Editor-V2RQPQAL.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2944,9 +2957,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 = useMemo7(
-    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onSelectParent, label: "Select parent", children: /* @__PURE__ */ jsx22(CornerLeftUp, { size: 16 }) }),
-    [ctx == null ? void 0 : ctx.areaId]
+    () => (ctx == null ? void 0 : ctx.areaId) && (ctx == null ? void 0 : ctx.areaId) !== "root" && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onSelectParent, label: selectParentLabel, children: /* @__PURE__ */ jsx22(CornerLeftUp, { size: 16 }) }),
+    [ctx == null ? void 0 : ctx.areaId, selectParentLabel]
   );
   const nextContextValue = useMemo7(
     () => __spreadProps(__spreadValues({}, ctx), {
@@ -3026,8 +3042,15 @@ var DraggableComponent = ({
                             ),
                             hasNormalActions && /* @__PURE__ */ jsx22(ActionBar.Separator, {})
                           ] }),
-                          permissions.duplicate && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDuplicate, label: "Duplicate", children: /* @__PURE__ */ jsx22(Copy, { className: getClassName14("actionsAction") }) }),
-                          permissions.delete && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDelete, label: "Delete", children: /* @__PURE__ */ jsx22(Trash, { className: getClassName14("actionsAction") }) })
+                          permissions.duplicate && /* @__PURE__ */ jsx22(
+                            ActionBar.Action,
+                            {
+                              onClick: onDuplicate,
+                              label: duplicateLabel,
+                              children: /* @__PURE__ */ jsx22(Copy, { className: getClassName14("actionsAction") })
+                            }
+                          ),
+                          permissions.delete && /* @__PURE__ */ jsx22(ActionBar.Action, { onClick: onDelete, label: deleteLabel, children: /* @__PURE__ */ jsx22(Trash, { className: getClassName14("actionsAction") }) })
                         ]
                       }
                     )
@@ -4499,7 +4522,7 @@ import {
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-MXSH3OSX.mjs").then((m) => ({
+  () => import("./Editor-V2RQPQAL.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4868,7 +4891,7 @@ var VirtualizedDropZone = ({
 };
 
 // components/DropZone/index.tsx
-import { Fragment as Fragment9, jsx as jsx31, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx31 } from "react/jsx-runtime";
 var getClassName17 = get_class_name_factory_default("DropZone", styles_module_default9);
 var getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;
 var RENDER_DEBUG = false;
@@ -4895,7 +4918,7 @@ var DropZoneChild = ({
   inDroppableZone,
   itemRef
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const metadata = useAppStore((s) => s.metadata);
   const ctx = useContext9(dropZoneContext);
   const { depth = 1 } = ctx != null ? ctx : {};
@@ -4963,7 +4986,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 = useMemo12(
     () => __spreadProps(__spreadValues(__spreadValues({}, componentConfig == null ? void 0 : componentConfig.defaultProps), item == null ? void 0 : item.props), {
       puck: puckProps,
@@ -4997,10 +5024,7 @@ var DropZoneChild = ({
     isLoading
   );
   if (!item) return;
-  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsxs10("div", { style: { padding: 48, textAlign: "center" }, children: [
-    "No configuration for ",
-    item.type
-  ] });
+  const Render2 = componentConfig ? componentConfig.render : () => /* @__PURE__ */ jsx31("div", { style: { padding: 48, textAlign: "center" }, children: noConfigMessage });
   let componentType = item.type;
   const isInserting = "previewType" in item ? item.previewType === "insert" : false;
   return /* @__PURE__ */ jsx31(
@@ -5492,7 +5516,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
@@ -5509,7 +5534,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) => {
@@ -5579,7 +5605,7 @@ var styles_module_default12 = { "ComponentList": "_ComponentList_htktj_1", "Comp
 
 // components/ComponentList/index.tsx
 import { useEffect as useEffect18 } from "react";
-import { jsx as jsx33, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs10 } from "react/jsx-runtime";
 var getClassName18 = get_class_name_factory_default("ComponentList", styles_module_default12);
 var ComponentListItem = ({
   name,
@@ -5611,8 +5637,14 @@ var ComponentList = ({
   const componentList = useAppStore((s) => s.state.ui.componentList);
   const { expanded = true } = componentList[id] || {};
   const contentId = `puck-drawer-category-${id}`;
-  return /* @__PURE__ */ jsxs11("div", { className: getClassName18({ isExpanded: expanded }), children: [
-    title && /* @__PURE__ */ jsxs11(
+  const collapseTitle = useMessage("drawer-category-collapse", {
+    title: title != null ? title : ""
+  });
+  const expandTitle = useMessage("drawer-category-expand", {
+    title: title != null ? title : ""
+  });
+  return /* @__PURE__ */ jsxs10("div", { className: getClassName18({ isExpanded: expanded }), children: [
+    title && /* @__PURE__ */ jsxs10(
       "button",
       {
         type: "button",
@@ -5626,7 +5658,7 @@ var ComponentList = ({
             })
           })
         }),
-        title: expanded ? `Collapse${title ? ` ${title}` : ""}` : `Expand${title ? ` ${title}` : ""}`,
+        title: expanded ? collapseTitle : expandTitle,
         children: [
           /* @__PURE__ */ jsx33("div", { children: title }),
           /* @__PURE__ */ jsx33("div", { className: getClassName18("titleIcon"), children: expanded ? /* @__PURE__ */ jsx33(ChevronUp, { size: 12 }) : /* @__PURE__ */ jsx33(ChevronDown, { size: 12 }) })
@@ -5654,6 +5686,7 @@ var useComponentList = () => {
   const [componentList, setComponentList] = useState17();
   const config = useAppStore((s) => s.config);
   const uiComponentList = useAppStore((s) => s.state.ui.componentList);
+  const otherLabel = useMessage("drawer-category-other");
   useEffect19(() => {
     var _a, _b, _c;
     if (Object.keys(uiComponentList).length > 0) {
@@ -5661,6 +5694,7 @@ var useComponentList = () => {
       let _componentList;
       _componentList = Object.entries(uiComponentList).map(
         ([categoryKey, category]) => {
+          var _a2, _b2;
           if (!category.components) {
             return null;
           }
@@ -5674,14 +5708,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__ */ jsx34(
                   ComponentList.Item,
                   {
-                    label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
+                    label: (_a3 = componentConf["label"]) != null ? _a3 : componentName,
                     name: componentName,
                     index: i
                   },
@@ -5702,7 +5736,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] || {};
@@ -5723,7 +5757,7 @@ var useComponentList = () => {
       }
       setComponentList(_componentList);
     }
-  }, [config.categories, config.components, uiComponentList]);
+  }, [config.categories, config.components, uiComponentList, otherLabel]);
   return componentList;
 };
 
@@ -5751,12 +5785,15 @@ var styles_module_default13 = { "BlocksPlugin": "_BlocksPlugin_9af19_1" };
 // plugins/blocks/index.tsx
 import { jsx as jsx36 } from "react/jsx-runtime";
 var getClassName19 = get_class_name_factory_default("BlocksPlugin", styles_module_default13);
-var blocksPlugin = () => ({
-  name: "blocks",
-  label: "Blocks",
-  render: () => /* @__PURE__ */ jsx36("div", { className: getClassName19(), children: /* @__PURE__ */ jsx36(Components, {}) }),
-  icon: /* @__PURE__ */ jsx36(Hammer, {})
-});
+var blocksPlugin = (props = {}) => {
+  var _a, _b;
+  return {
+    name: "blocks",
+    label: (_a = props.label) != null ? _a : "Blocks",
+    render: () => /* @__PURE__ */ jsx36("div", { className: getClassName19(), children: /* @__PURE__ */ jsx36(Components, {}) }),
+    icon: (_b = props.icon) != null ? _b : /* @__PURE__ */ jsx36(Hammer, {})
+  };
+};
 
 // plugins/outline/index.tsx
 init_react_import();
@@ -5779,7 +5816,7 @@ import {
   useRef as useRef10
 } from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx37, jsxs as jsxs11 } from "react/jsx-runtime";
 var getClassName20 = get_class_name_factory_default("LayerTree", styles_module_default14);
 var getClassNameLayer = get_class_name_factory_default("Layer", styles_module_default14);
 var DEFAULT_LAYER_ROW_HEIGHT = 32;
@@ -5813,11 +5850,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 {
@@ -5827,7 +5865,8 @@ var buildLayerNode = ({
         nodes,
         zoneCompound: childZoneCompound,
         zones,
-        zonesByParent
+        zonesByParent,
+        componentFallbackLabel
       })
     ),
     componentType,
@@ -5843,7 +5882,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 : [];
@@ -5856,7 +5896,8 @@ var buildLayerTree = ({
         nodes,
         zoneCompound,
         zones,
-        zonesByParent
+        zonesByParent,
+        componentFallbackLabel
       })
     ),
     label: getZoneLabel(zoneCompound, nodes, config, label),
@@ -5901,6 +5942,8 @@ var Layer = forwardRef2(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 = useCallback14(
     (itemSelector) => {
       dispatch({ type: "setUi", ui: { itemSelector } });
@@ -5908,7 +5951,7 @@ var Layer = forwardRef2(function Layer2({
     [dispatch]
   );
   const shouldRenderChildren = isSelected || childIsSelected;
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs11(
     "li",
     {
       ref,
@@ -5921,7 +5964,7 @@ var Layer = forwardRef2(function Layer2({
       "data-index": dataIndex,
       "data-puck-layer-tree-id": node.itemId,
       children: [
-        /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs12(
+        /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs11(
           "button",
           {
             type: "button",
@@ -5950,11 +5993,11 @@ var Layer = forwardRef2(function Layer2({
                 "div",
                 {
                   className: getClassNameLayer("chevron"),
-                  title: isSelected ? "Collapse" : "Expand",
+                  title: isSelected ? collapseLabel : expandLabel,
                   children: /* @__PURE__ */ jsx37(ChevronDown, { size: "12" })
                 }
               ),
-              /* @__PURE__ */ jsxs12("div", { className: getClassNameLayer("title"), children: [
+              /* @__PURE__ */ jsxs11("div", { className: getClassNameLayer("title"), children: [
                 /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("icon"), children: node.componentType === "Text" || node.componentType === "Heading" ? /* @__PURE__ */ jsx37(Type, { size: "16" }) : /* @__PURE__ */ jsx37(LayoutGrid, { size: "16" }) }),
                 /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("name"), children: node.label })
               ] })
@@ -5988,8 +6031,8 @@ var LayerTreeZone = ({
   tree
 }) => {
   const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
-  return /* @__PURE__ */ jsxs12(Fragment10, { children: [
-    tree.label && /* @__PURE__ */ jsxs12("div", { className: getClassName20("zoneTitle"), children: [
+  return /* @__PURE__ */ jsxs11(Fragment10, { children: [
+    tree.label && /* @__PURE__ */ jsxs11("div", { className: getClassName20("zoneTitle"), children: [
       /* @__PURE__ */ jsx37("div", { className: getClassName20("zoneIcon"), children: /* @__PURE__ */ jsx37(Layers, { size: "16" }) }),
       tree.label
     ] }),
@@ -6018,8 +6061,9 @@ var StaticLayerTreeItems = ({
   selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ jsxs12("ul", { className: getClassName20(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: "No items" }),
+  const noItemsLabel = useMessage("outline-empty");
+  return /* @__PURE__ */ jsxs11("ul", { className: getClassName20(), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: noItemsLabel }),
     tree.items.map((node) => /* @__PURE__ */ jsx37(
       Layer,
       {
@@ -6041,6 +6085,7 @@ var VirtualizedLayerTreeItems = ({
   tree
 }) => {
   const listRef = useRef10(null);
+  const noItemsLabel = useMessage("outline-empty");
   const virtualizer = useVirtualizer2({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
@@ -6108,8 +6153,8 @@ var VirtualizedLayerTreeItems = ({
       )
     );
   }
-  return /* @__PURE__ */ jsxs12("ul", { className: getClassName20(), ref: listRef, children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: "No items" }),
+  return /* @__PURE__ */ jsxs11("ul", { className: getClassName20(), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: noItemsLabel }),
     renderedItems
   ] });
 };
@@ -6153,6 +6198,7 @@ var Outline = () => {
     var _a;
     return ((_a = s.selectedItem) == null ? void 0 : _a.props.id) || null;
   });
+  const componentFallbackLabel = useMessage("label-component");
   const rootZones = useAppStore(
     useShallow7((s) => findZonesForArea(s.state, "root"))
   );
@@ -6170,10 +6216,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 = useMemo15(() => outlineOverride || "div", [outlineOverride]);
   return /* @__PURE__ */ jsx38(Wrapper, { children: /* @__PURE__ */ jsx38(
@@ -6193,12 +6240,15 @@ var styles_module_default15 = { "OutlinePlugin": "_OutlinePlugin_16k03_1" };
 // plugins/outline/index.tsx
 import { jsx as jsx39 } from "react/jsx-runtime";
 var getClassName21 = get_class_name_factory_default("OutlinePlugin", styles_module_default15);
-var outlinePlugin = () => ({
-  name: "outline",
-  label: "Outline",
-  render: () => /* @__PURE__ */ jsx39("div", { className: getClassName21(), children: /* @__PURE__ */ jsx39(Outline, {}) }),
-  icon: /* @__PURE__ */ jsx39(Layers, {})
-});
+var outlinePlugin = (props = {}) => {
+  var _a, _b;
+  return {
+    name: "outline",
+    label: (_a = props.label) != null ? _a : "Outline",
+    render: () => /* @__PURE__ */ jsx39("div", { className: getClassName21(), children: /* @__PURE__ */ jsx39(Outline, {}) }),
+    icon: (_b = props.icon) != null ? _b : /* @__PURE__ */ jsx39(Layers, {})
+  };
+};
 
 // plugins/fields/index.tsx
 init_react_import();
@@ -6224,13 +6274,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 useMemo16(() => {
     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
         };
       }
@@ -6238,7 +6290,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 ? {
@@ -6251,11 +6303,11 @@ var useBreadcrumbs = (renderCount) => {
       return breadcrumbs.slice(breadcrumbs.length - renderCount);
     }
     return breadcrumbs;
-  }, [path, renderCount]);
+  }, [path, renderCount, pageLabel, componentLabel]);
 };
 
 // components/Breadcrumbs/index.tsx
-import { jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs12 } from "react/jsx-runtime";
 var getClassName22 = get_class_name_factory_default("Breadcrumbs", styles_module_default16);
 var Breadcrumbs = ({
   children,
@@ -6263,8 +6315,8 @@ var Breadcrumbs = ({
 }) => {
   const setUi = useAppStore((s) => s.setUi);
   const breadcrumbs = useBreadcrumbs(numParents);
-  return /* @__PURE__ */ jsxs13("div", { className: getClassName22(), children: [
-    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs13("div", { className: getClassName22("breadcrumb"), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: getClassName22(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs12("div", { className: getClassName22("breadcrumb"), children: [
       /* @__PURE__ */ jsx40(
         "button",
         {
@@ -6296,7 +6348,7 @@ import {
   useMemo as useMemo17
 } from "react";
 import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs13 } from "react/jsx-runtime";
 var getClassName23 = get_class_name_factory_default("PuckFields", styles_module_default17);
 var DefaultFields = ({
   children
@@ -6427,7 +6479,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   );
   const isLoading = fieldsLoading || componentResolving;
   const Wrapper = useMemo17(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs13(
     "form",
     {
       className: getClassName23({ wrapFields }),
@@ -6448,24 +6500,25 @@ init_react_import();
 var styles_module_default18 = { "FieldsPlugin": "_FieldsPlugin_18cj3_1", "FieldsPlugin-header": "_FieldsPlugin-header_18cj3_7" };
 
 // plugins/fields/index.tsx
-import { jsx as jsx42, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs14 } from "react/jsx-runtime";
 var getClassName24 = get_class_name_factory_default("FieldsPlugin", styles_module_default18);
 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",
-  render: () => /* @__PURE__ */ jsxs15("div", { className: getClassName24(), children: [
+  label: label != null ? label : "Fields",
+  render: () => /* @__PURE__ */ jsxs14("div", { className: getClassName24(), children: [
     /* @__PURE__ */ jsx42("div", { className: getClassName24("header"), children: /* @__PURE__ */ jsx42(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx42(CurrentTitle, {}) }) }),
     /* @__PURE__ */ jsx42(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx42(RectangleEllipsis, {}),
+  icon: icon != null ? icon : /* @__PURE__ */ jsx42(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
@@ -9980,7 +10033,7 @@ init_react_import();
 var styles_module_default21 = { "MenuBar": "_MenuBar_1hxnj_1", "MenuBar--menuOpen": "_MenuBar--menuOpen_1hxnj_14", "MenuBar-inner": "_MenuBar-inner_1hxnj_29", "MenuBar-history": "_MenuBar-history_1hxnj_45" };
 
 // components/MenuBar/index.tsx
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs15 } from "react/jsx-runtime";
 var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
 function MenuBar({
   menuOpen = false,
@@ -9991,6 +10044,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__ */ jsx46(
     "div",
     {
@@ -10005,13 +10060,13 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs16("div", { className: getClassName26("inner"), children: [
-        /* @__PURE__ */ jsxs16("div", { className: getClassName26("history"), children: [
+      children: /* @__PURE__ */ jsxs15("div", { className: getClassName26("inner"), children: [
+        /* @__PURE__ */ jsxs15("div", { className: getClassName26("history"), children: [
           /* @__PURE__ */ jsx46(
             IconButton,
             {
               type: "button",
-              title: "undo",
+              title: undoLabel,
               disabled: !hasPast,
               onClick: back,
               children: /* @__PURE__ */ jsx46(Undo2, { size: 21 })
@@ -10021,7 +10076,7 @@ function MenuBar({
             IconButton,
             {
               type: "button",
-              title: "redo",
+              title: redoLabel,
               disabled: !hasFuture,
               onClick: forward,
               children: /* @__PURE__ */ jsx46(Redo2, { size: 21 })
@@ -10039,7 +10094,7 @@ init_react_import();
 var styles_module_default22 = { "PuckHeader": "_PuckHeader_c2nei_1", "PuckHeader--hidePlugins": "_PuckHeader--hidePlugins_c2nei_21", "PuckHeader-inner": "_PuckHeader-inner_c2nei_26", "PuckHeader-toggle": "_PuckHeader-toggle_c2nei_46", "PuckHeader-rightSideBarToggle": "_PuckHeader-rightSideBarToggle_c2nei_52", "PuckHeader-leftSideBarToggle": "_PuckHeader-leftSideBarToggle_c2nei_53", "PuckHeader-title": "_PuckHeader-title_c2nei_64", "PuckHeader-path": "_PuckHeader-path_c2nei_68", "PuckHeader-tools": "_PuckHeader-tools_c2nei_75", "PuckHeader-menuButton": "_PuckHeader-menuButton_c2nei_81", "PuckHeader--menuOpen": "_PuckHeader--menuOpen_c2nei_86" };
 
 // components/Puck/components/Header/index.tsx
-import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
 var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
 var HeaderInner = ({
   hidePlugins
@@ -10113,6 +10168,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__ */ jsx47(
     CustomHeader,
     {
@@ -10124,7 +10184,7 @@ var HeaderInner = ({
             onPublish && onPublish(data);
           },
           icon: /* @__PURE__ */ jsx47(Globe, { size: "14px" }),
-          children: "Publish"
+          children: publishLabel
         }
       ) }) }),
       children: /* @__PURE__ */ jsx47(
@@ -10135,8 +10195,8 @@ var HeaderInner = ({
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ jsxs17("div", { className: getClassName27("inner"), children: [
-            /* @__PURE__ */ jsxs17("div", { className: getClassName27("toggle"), children: [
+          children: /* @__PURE__ */ jsxs16("div", { className: getClassName27("inner"), children: [
+            /* @__PURE__ */ jsxs16("div", { className: getClassName27("toggle"), children: [
               /* @__PURE__ */ jsx47("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx47(
                 IconButton,
                 {
@@ -10144,7 +10204,7 @@ var HeaderInner = ({
                   onClick: () => {
                     toggleSidebars("left");
                   },
-                  title: "Toggle left sidebar",
+                  title: toggleLeftLabel,
                   children: /* @__PURE__ */ jsx47(PanelLeft, { focusable: "false" })
                 }
               ) }),
@@ -10155,19 +10215,19 @@ var HeaderInner = ({
                   onClick: () => {
                     toggleSidebars("right");
                   },
-                  title: "Toggle right sidebar",
+                  title: toggleRightLabel,
                   children: /* @__PURE__ */ jsx47(PanelRight, { focusable: "false" })
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx47("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs17(Heading, { rank: "2", size: "xs", children: [
-              headerTitle || rootTitle || "Page",
-              headerPath && /* @__PURE__ */ jsxs17(Fragment16, { children: [
+            /* @__PURE__ */ jsx47("div", { className: getClassName27("title"), children: /* @__PURE__ */ jsxs16(Heading, { rank: "2", size: "xs", children: [
+              headerTitle || rootTitle || pageLabel,
+              headerPath && /* @__PURE__ */ jsxs16(Fragment16, { children: [
                 " ",
                 /* @__PURE__ */ jsx47("code", { className: getClassName27("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxs17("div", { className: getClassName27("tools"), children: [
+            /* @__PURE__ */ jsxs16("div", { className: getClassName27("tools"), children: [
               /* @__PURE__ */ jsx47("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx47(
                 IconButton,
                 {
@@ -10175,7 +10235,7 @@ var HeaderInner = ({
                   onClick: () => {
                     return setMenuOpen(!menuOpen);
                   },
-                  title: "Toggle menu bar",
+                  title: toggleMenuLabel,
                   children: menuOpen ? /* @__PURE__ */ jsx47(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx47(ChevronDown, { focusable: "false" })
                 }
               ) }),
@@ -10193,7 +10253,7 @@ var HeaderInner = ({
                         onPublish && onPublish(data);
                       },
                       icon: /* @__PURE__ */ jsx47(Globe, { size: "14px" }),
-                      children: "Publish"
+                      children: publishLabel
                     }
                   ) }),
                   setMenuOpen
@@ -10216,7 +10276,7 @@ init_react_import();
 var styles_module_default23 = { "SidebarSection": "_SidebarSection_1uv88_1", "SidebarSection-title": "_SidebarSection-title_1uv88_12", "SidebarSection--noBorderTop": "_SidebarSection--noBorderTop_1uv88_20", "SidebarSection-content": "_SidebarSection-content_1uv88_24", "SidebarSection-breadcrumbLabel": "_SidebarSection-breadcrumbLabel_1uv88_33", "SidebarSection-breadcrumbs": "_SidebarSection-breadcrumbs_1uv88_62", "SidebarSection-breadcrumb": "_SidebarSection-breadcrumb_1uv88_33", "SidebarSection-heading": "_SidebarSection-heading_1uv88_74", "SidebarSection-loadingOverlay": "_SidebarSection-loadingOverlay_1uv88_78" };
 
 // components/SidebarSection/index.tsx
-import { jsx as jsx48, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs17 } from "react/jsx-runtime";
 var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default23);
 var SidebarSection = ({
   children,
@@ -10226,8 +10286,8 @@ var SidebarSection = ({
   noBorderTop,
   isLoading
 }) => {
-  return /* @__PURE__ */ jsxs18("div", { className: getClassName28({ noBorderTop }), style: { background }, children: [
-    /* @__PURE__ */ jsx48("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName28("breadcrumbs"), children: [
+  return /* @__PURE__ */ jsxs17("div", { className: getClassName28({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx48("div", { className: getClassName28("title"), children: /* @__PURE__ */ jsxs17("div", { className: getClassName28("breadcrumbs"), children: [
       showBreadcrumbs && /* @__PURE__ */ jsx48(Breadcrumbs, {}),
       /* @__PURE__ */ jsx48("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx48(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
@@ -10255,7 +10315,7 @@ init_react_import();
 var styles_module_default24 = { "ViewportControls": "_ViewportControls_v26yb_1", "ViewportControls--fullScreen": "_ViewportControls--fullScreen_v26yb_5", "ViewportControls-toggleButton": "_ViewportControls-toggleButton_v26yb_14", "ViewportControls-actions": "_ViewportControls-actions_v26yb_39", "ViewportControls-actionsInner": "_ViewportControls-actionsInner_v26yb_43", "ViewportControls--isExpanded": "_ViewportControls--isExpanded_v26yb_67", "ViewportControls-divider": "_ViewportControls-divider_v26yb_72", "ViewportControls-zoomSelect": "_ViewportControls-zoomSelect_v26yb_79", "ViewportControls-zoom": "_ViewportControls-zoom_v26yb_79", "ViewportButton-inner": "_ViewportButton-inner_v26yb_110", "ViewportButton--isActive": "_ViewportButton--isActive_v26yb_118" };
 
 // components/ViewportControls/index.tsx
-import { jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 var icons = {
   Smartphone: /* @__PURE__ */ jsx49(Smartphone, { size: 16 }),
   Tablet: /* @__PURE__ */ jsx49(Tablet, { size: 16 }),
@@ -10292,6 +10352,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__ */ jsx49(
+    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,
@@ -10305,17 +10385,20 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
+  const autoZoomLabel = useMessage("viewport-zoom-auto", {
+    zoom: (autoZoom * 100).toFixed(0)
+  });
   const zoomOptions = useMemo21(
     () => [
       ...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] = useState20(
     uiViewports.current.width
@@ -10324,23 +10407,25 @@ var ViewportControls = ({
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current]);
   const [isExpanded, setIsExpanded] = useState20(false);
-  return /* @__PURE__ */ jsxs19(
+  const zoomOutLabel = useMessage("viewport-zoom-out");
+  const zoomInLabel = useMessage("viewport-zoom-in");
+  const toggleMenuLabel = useMessage("viewport-toggle-menu");
+  return /* @__PURE__ */ jsxs18(
     "div",
     {
       className: getClassName29({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx49("div", { className: getClassName29("actions"), children: /* @__PURE__ */ jsxs19("div", { className: getClassName29("actionsInner"), children: [
+        /* @__PURE__ */ jsx49("div", { className: getClassName29("actions"), children: /* @__PURE__ */ jsxs18("div", { className: getClassName29("actionsInner"), children: [
           viewports.map((viewport, i) => /* @__PURE__ */ jsx49(
-            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
           )),
@@ -10348,7 +10433,7 @@ var ViewportControls = ({
           /* @__PURE__ */ jsx49(
             ActionButton,
             {
-              title: "Zoom viewport out",
+              title: zoomOutLabel,
               disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
               onClick: (e) => {
                 e.stopPropagation();
@@ -10365,7 +10450,7 @@ var ViewportControls = ({
           /* @__PURE__ */ jsx49(
             ActionButton,
             {
-              title: "Zoom viewport in",
+              title: zoomInLabel,
               disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
               onClick: (e) => {
                 e.stopPropagation();
@@ -10379,7 +10464,7 @@ var ViewportControls = ({
               children: /* @__PURE__ */ jsx49(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs19("div", { className: getClassName29("zoom"), children: [
+          /* @__PURE__ */ jsxs18("div", { className: getClassName29("zoom"), children: [
             /* @__PURE__ */ jsx49("div", { className: getClassName29("divider") }),
             /* @__PURE__ */ jsx49(
               "select",
@@ -10408,7 +10493,7 @@ var ViewportControls = ({
           "button",
           {
             className: getClassName29("toggleButton"),
-            title: "Toggle viewport menu",
+            title: toggleMenuLabel,
             onClick: () => setIsExpanded((s) => !s),
             children: isExpanded ? /* @__PURE__ */ jsx49(X, { size: 16 }) : /* @__PURE__ */ jsx49(Monitor, { size: 16 })
           }
@@ -10456,7 +10541,7 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs19 } from "react/jsx-runtime";
 var getClassName30 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
@@ -10612,7 +10697,7 @@ var Canvas = () => {
     appStoreApi,
     (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
   ]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       className: getClassName30({
@@ -10661,7 +10746,7 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs20("div", { className: getClassName30("inner"), ref: frameRef, children: [
+        /* @__PURE__ */ jsxs19("div", { className: getClassName30("inner"), ref: frameRef, children: [
           /* @__PURE__ */ jsx51(
             "div",
             {
@@ -10856,7 +10941,7 @@ init_react_import();
 var styles_module_default27 = { "Sidebar": "_Sidebar_16oed_1", "Sidebar--isVisible": "_Sidebar--isVisible_16oed_10", "Sidebar--left": "_Sidebar--left_16oed_14", "Sidebar--right": "_Sidebar--right_16oed_34", "Sidebar-resizeHandle": "_Sidebar-resizeHandle_16oed_51" };
 
 // components/Puck/components/Sidebar/index.tsx
-import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx53, jsxs as jsxs20 } from "react/jsx-runtime";
 var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default27);
 var Sidebar = ({
   position,
@@ -10866,7 +10951,7 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs21(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs20(Fragment18, { children: [
     /* @__PURE__ */ jsx53(
       "div",
       {
@@ -10956,7 +11041,7 @@ init_react_import();
 var styles_module_default28 = { "Nav": "_Nav_vll2r_1", "Nav-list": "_Nav-list_vll2r_5", "Nav-mobileActions": "_Nav-mobileActions_vll2r_23", "NavItem-link": "_NavItem-link_vll2r_39", "NavItem": "_NavItem_vll2r_39", "NavItem-linkIcon": "_NavItem-linkIcon_vll2r_90", "NavItem--active": "_NavItem--active_vll2r_100", "NavItem--mobileOnly": "_NavItem--mobileOnly_vll2r_136", "NavItem--desktopOnly": "_NavItem--desktopOnly_vll2r_141" };
 
 // components/Puck/components/Nav/index.tsx
-import { jsx as jsx54, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs21 } from "react/jsx-runtime";
 var getClassName33 = get_class_name_factory_default("Nav", styles_module_default28);
 var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default28);
 var MenuItem = ({
@@ -10975,7 +11060,7 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ jsxs22("div", { className: getClassNameItem3("link"), onClick, children: [
+      children: onClick && /* @__PURE__ */ jsxs21("div", { className: getClassNameItem3("link"), onClick, children: [
         icon && /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkIcon"), children: icon }),
         /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
@@ -10986,7 +11071,7 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ jsxs22("nav", { className: getClassName33(), children: [
+  return /* @__PURE__ */ jsxs21("nav", { className: getClassName33(), children: [
     /* @__PURE__ */ jsx54("ul", { className: getClassName33("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx54(MenuItem, __spreadValues({}, item), key)) }),
     mobileActions && /* @__PURE__ */ jsx54("div", { className: getClassName33("mobileActions"), children: mobileActions })
   ] });
@@ -11001,19 +11086,20 @@ var normalizeIframeConfig = (iframe) => __spreadValues({
 }, iframe);
 
 // components/Puck/components/Layout/index.tsx
-import { jsx as jsx55, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs22 } from "react/jsx-runtime";
 var getClassName34 = get_class_name_factory_default("Puck", styles_module_default20);
 var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default20);
 var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default20);
 var useBrowserLayoutEffect = typeof window === "undefined" ? useEffect28 : useLayoutEffect2;
 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__ */ jsx55(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title, children: /* @__PURE__ */ jsx55(Fields, {}) });
+  return /* @__PURE__ */ jsx55(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title: title || pageLabel, children: /* @__PURE__ */ jsx55(Fields, {}) });
 };
 var PluginTab = ({
   children,
@@ -11115,16 +11201,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 = useMemo24(() => {
     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;
@@ -11161,7 +11253,15 @@ var Layout = ({ children }) => {
       }
     });
     return details;
-  }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
+  }, [
+    plugins,
+    currentPlugin,
+    appStoreApi,
+    leftSideBarVisible,
+    blocksLabel,
+    outlineLabel,
+    fieldsLabel
+  ]);
   useEffect28(() => {
     if (!currentPlugin) {
       const names = Object.keys(pluginItems);
@@ -11175,7 +11275,9 @@ var Layout = ({ children }) => {
       return (_a = s.state.ui.mobilePanelExpanded) != null ? _a : false;
     }
   );
-  return /* @__PURE__ */ jsxs23(
+  const maximizeLabel = useMessage("layout-maximize");
+  const minimizeLabel = useMessage("layout-minimize");
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: `Puck ${getClassName34({
@@ -11196,7 +11298,7 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs23(
+            children: /* @__PURE__ */ jsxs22(
               "div",
               {
                 className: getLayoutClassName("inner"),
@@ -11211,7 +11313,7 @@ var Layout = ({ children }) => {
                         IconButton,
                         {
                           type: "button",
-                          title: "maximize",
+                          title: mobilePanelExpanded ? minimizeLabel : maximizeLabel,
                           onClick: () => {
                             setUi({
                               mobilePanelExpanded: !mobilePanelExpanded
@@ -11286,6 +11388,7 @@ function PuckProvider({ children }) {
     iframe: _iframe,
     initialHistory: _initialHistory,
     metadata,
+    dictionary,
     onAction,
     fieldTransforms,
     _experimentalFullScreenCanvas,
@@ -11383,6 +11486,7 @@ function PuckProvider({ children }) {
         _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
+        dictionary: dictionary || {},
         fieldTransforms: loadedFieldTransforms
       };
     },
@@ -11398,6 +11502,7 @@ function PuckProvider({ children }) {
       _experimentalVirtualization,
       onAction,
       metadata,
+      dictionary,
       loadedFieldTransforms
     ]
   );
@@ -11452,13 +11557,29 @@ Puck.Preview = Preview2;
 
 // plugins/legacy-side-bar/index.tsx
 init_react_import();
-import { jsx as jsx57, jsxs as jsxs24 } from "react/jsx-runtime";
-var legacySideBarPlugin = () => ({
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+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__ */ jsxs23("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx57(SidebarSection, { title: resolvedComponentsLabel, noBorderTop: true, children: /* @__PURE__ */ jsx57(Components, {}) }),
+    /* @__PURE__ */ jsx57(SidebarSection, { title: resolvedOutlineLabel, children: /* @__PURE__ */ jsx57(Outline, {}) })
+  ] });
+};
+var legacySideBarPlugin = (props = {}) => ({
   name: "legacy-side-bar",
-  render: () => /* @__PURE__ */ jsxs24("div", { style: { overflowY: "auto" }, children: [
-    /* @__PURE__ */ jsx57(SidebarSection, { title: "Components", noBorderTop: true, children: /* @__PURE__ */ jsx57(Components, {}) }),
-    /* @__PURE__ */ jsx57(SidebarSection, { title: "Outline", children: /* @__PURE__ */ jsx57(Outline, {}) })
-  ] })
+  render: () => /* @__PURE__ */ jsx57(
+    LegacySideBar,
+    {
+      outlineLabel: props.outlineLabel,
+      componentsLabel: props.componentsLabel
+    }
+  )
 });
 
 // bundle/core.ts