@puckeditor/core 0.22.4 → 0.23.0-canary.026f0300

package/dist/{chunk-WH6PO5ND.mjs → chunk-S3CSGIQ3.mjs}

@@ -1,7 +1,7 @@
 import {
   EditorInner,
   LoadedRichTextMenu
-} from "./chunk-PRZEIT36.mjs";
+} from "./chunk-PJYHZPJK.mjs";
 import {
   RichTextRenderFallback,
   SlotRender,
@@ -10,15 +10,16 @@ import {
   getSlotTransform,
   useRichtextProps,
   useSlots
-} from "./chunk-JNJJ2M57.mjs";
+} from "./chunk-3TERNOIP.mjs";
 import {
   LoadedRichTextMenuInner
-} from "./chunk-25O24MZR.mjs";
+} from "./chunk-3OLRWMRO.mjs";
 import {
   ActionBar,
   ChevronDown,
   ChevronRight,
   ChevronUp,
+  ChevronsDownUp,
   CircleCheckBig,
   Copy,
   CornerLeftUp,
@@ -63,12 +64,13 @@ import {
   useAppStore,
   useAppStoreApi,
   useHotkey,
+  useMessage,
   useMonitorHotkeys,
   useRegisterFieldsSlice,
   useRegisterHistorySlice,
   useRegisterPermissionsSlice,
   useResetAutoZoom
-} from "./chunk-KJQTOPIV.mjs";
+} from "./chunk-DIYX54ZO.mjs";
 import {
   generateId,
   getItem,
@@ -76,11 +78,11 @@ import {
   insertAction,
   makeStatePublic,
   populateIds
-} from "./chunk-25QAPMLH.mjs";
+} from "./chunk-UAWUZ45G.mjs";
 import {
   defaultAppState,
   defaultViewports
-} from "./chunk-WUO7D6OQ.mjs";
+} from "./chunk-NPAYGEG5.mjs";
 import {
   get_class_name_factory_default
 } from "./chunk-Y2EFNT5P.mjs";
@@ -263,11 +265,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
   ] });
@@ -395,6 +398,8 @@ var DragIcon = ({ isDragDisabled }) => /* @__PURE__ */ jsx4("div", { className:
 // components/Sortable/index.tsx
 init_react_import();
 import { DragDropProvider } from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { PointerActivationConstraints as PointerActivationConstraints2 } from "@dnd-kit/dom";
 
 // lib/dnd/use-sensors.ts
 init_react_import();
@@ -755,9 +760,26 @@ var createDynamicCollisionDetector = (dragAxis, midpointOffset = 0.05) => ((inpu
   return null;
 });
 
+// lib/dnd/get-insert-index.ts
+init_react_import();
+var getCollisionPosition = (direction, dir = "ltr") => direction === "up" || dir === "ltr" && direction === "left" || dir === "rtl" && direction === "right" ? "before" : "after";
+var getInsertIndex = ({
+  position,
+  sourceIndex,
+  targetIndex,
+  isSameZone
+}) => {
+  let index = targetIndex;
+  if (isSameZone && index >= sourceIndex) {
+    index = index - 1;
+  }
+  if (position === "after") {
+    index = index + 1;
+  }
+  return index;
+};
+
 // components/Sortable/index.tsx
-import { useSortable } from "@dnd-kit/react/sortable";
-import { PointerActivationConstraints as PointerActivationConstraints2 } from "@dnd-kit/dom";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var SortableProvider = ({
   children,
@@ -782,20 +804,18 @@ var SortableProvider = ({
         const { operation } = event;
         const { source, target } = operation;
         if (!source || !target) return;
-        let sourceIndex = source.data.index;
-        let targetIndex = target.data.index;
+        const sourceIndex = source.data.index;
+        const targetIndex = target.data.index;
         const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
         if (sourceIndex !== targetIndex && source.id !== target.id) {
-          const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" ? "before" : "after";
-          if (targetIndex >= sourceIndex) {
-            targetIndex = targetIndex - 1;
-          }
-          if (collisionPosition === "after") {
-            targetIndex = targetIndex + 1;
-          }
           onMove({
             source: sourceIndex,
-            target: targetIndex
+            target: getInsertIndex({
+              position: getCollisionPosition(collisionData == null ? void 0 : collisionData.direction),
+              sourceIndex,
+              targetIndex,
+              isSameZone: true
+            })
           });
         }
       },
@@ -956,12 +976,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 +1206,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 +1319,7 @@ var ArrayField = ({
                               existingValue.splice(index, 0, newItem);
                               updateValue(existingValue);
                             },
-                            title: "Duplicate",
+                            title: duplicateLabel,
                             children: /* @__PURE__ */ jsx8(Copy, { size: 16 })
                           }
                         ) }),
@@ -1310,7 +1335,7 @@ var ArrayField = ({
                               existingValue.splice(index, 1);
                               updateValue(existingValue);
                             },
-                            title: "Delete",
+                            title: deleteLabel,
                             children: /* @__PURE__ */ jsx8(Trash, { size: 16 })
                           }
                         ) })
@@ -1532,6 +1557,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 +1620,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 +1648,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 +1684,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 +1702,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 +1717,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 +1801,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 +1824,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 +2030,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-MLHOIEVM.mjs").then((m) => ({
+  () => import("./Editor-Z6P5UAVB.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -2944,9 +2975,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 +3060,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") }) })
                         ]
                       }
                     )
@@ -3061,6 +3102,25 @@ var styles_module_default9 = { "DropZone": "_DropZone_ybznu_1", "DropZone--hasCh
 // components/DropZone/index.tsx
 import { useDroppable as useDroppable2 } from "@dnd-kit/react";
 
+// lib/data/is-component-allowed.ts
+init_react_import();
+var isComponentAllowed = (componentType, { allow, disallow }) => {
+  if (!componentType) {
+    return true;
+  }
+  const allowed = new Set(allow);
+  const disallowed = new Set(disallow);
+  if (disallow) {
+    if (disallowed.has(componentType) && allowed.has(componentType)) {
+      disallowed.delete(componentType);
+    }
+    return !disallowed.has(componentType);
+  } else if (allow) {
+    return allowed.has(componentType);
+  }
+  return true;
+};
+
 // components/Drawer/index.tsx
 init_react_import();
 
@@ -3083,10 +3143,7 @@ import {
   useRef as useRef3,
   useState as useState10
 } from "react";
-import {
-  AutoScroller,
-  defaultPreset
-} from "@dnd-kit/dom";
+import { AutoScroller, defaultPreset } from "@dnd-kit/dom";
 
 // lib/dnd/NestedDroppablePlugin.ts
 init_react_import();
@@ -3757,16 +3814,16 @@ var DragDropContextClient = ({
             if (target.type === "component") {
               const targetData = target.data;
               targetZone = targetData.zone;
-              targetIndex = targetData.index;
               const collisionData = (_b = manager.collisionObserver.collisions[0]) == null ? void 0 : _b.data;
-              const dir = getDeepDir(target.element);
-              const collisionPosition = (collisionData == null ? void 0 : collisionData.direction) === "up" || dir === "ltr" && (collisionData == null ? void 0 : collisionData.direction) === "left" || dir === "rtl" && (collisionData == null ? void 0 : collisionData.direction) === "right" ? "before" : "after";
-              if (targetIndex >= sourceIndex && sourceZone === targetZone) {
-                targetIndex = targetIndex - 1;
-              }
-              if (collisionPosition === "after") {
-                targetIndex = targetIndex + 1;
-              }
+              targetIndex = getInsertIndex({
+                position: getCollisionPosition(
+                  collisionData == null ? void 0 : collisionData.direction,
+                  getDeepDir(target.element)
+                ),
+                sourceIndex,
+                targetIndex: targetData.index,
+                isSameZone: sourceZone === targetZone
+              });
             } else {
               targetZone = target.id.toString();
               targetIndex = 0;
@@ -4515,7 +4572,7 @@ import {
 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var Editor2 = lazy2(
-  () => import("./Editor-MLHOIEVM.mjs").then((m) => ({
+  () => import("./Editor-Z6P5UAVB.mjs").then((m) => ({
     default: m.Editor
   }))
 );
@@ -4884,7 +4941,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;
@@ -4911,7 +4968,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 : {};
@@ -4979,7 +5036,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,
@@ -5013,10 +5074,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(
@@ -5136,25 +5194,7 @@ var DropZoneEdit = forwardRef(
     }, [zoneContentIds]);
     const ref = useRef9(null);
     const acceptsTarget = useCallback13(
-      (componentType) => {
-        if (!componentType) {
-          return true;
-        }
-        if (disallow) {
-          const defaultedAllow = allow || [];
-          const filteredDisallow = (disallow || []).filter(
-            (item) => defaultedAllow.indexOf(item) === -1
-          );
-          if (filteredDisallow.indexOf(componentType) !== -1) {
-            return false;
-          }
-        } else if (allow) {
-          if (allow.indexOf(componentType) === -1) {
-            return false;
-          }
-        }
-        return true;
-      },
+      (componentType) => isComponentAllowed(componentType, { allow, disallow }),
       [allow, disallow]
     );
     const targetAccepted = useContextStore(ZoneStoreContext, (s) => {
@@ -5508,7 +5548,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
@@ -5525,7 +5566,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) => {
@@ -5595,7 +5637,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,
@@ -5627,8 +5669,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",
@@ -5642,7 +5690,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 }) })
@@ -5670,6 +5718,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) {
@@ -5677,6 +5726,7 @@ var useComponentList = () => {
       let _componentList;
       _componentList = Object.entries(uiComponentList).map(
         ([categoryKey, category]) => {
+          var _a2, _b2;
           if (!category.components) {
             return null;
           }
@@ -5690,14 +5740,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
                   },
@@ -5718,7 +5768,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] || {};
@@ -5739,7 +5789,7 @@ var useComponentList = () => {
       }
       setComponentList(_componentList);
     }
-  }, [config.categories, config.components, uiComponentList]);
+  }, [config.categories, config.components, uiComponentList, otherLabel]);
   return componentList;
 };
 
@@ -5767,302 +5817,798 @@ 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();
 
 // components/Puck/components/Outline/index.tsx
 init_react_import();
+import { useMemo as useMemo18 } from "react";
+import { useShallow as useShallow8 } from "zustand/react/shallow";
+
+// lib/data/find-zones-for-area.ts
+init_react_import();
+var findZonesForArea = (state, area) => {
+  return Object.keys(state.indexes.zones).filter(
+    (zone) => zone.split(":")[0] === area
+  );
+};
 
 // components/LayerTree/index.tsx
 init_react_import();
 
-// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
+// components/LayerTree/components/layer-tree-zone/index.tsx
 init_react_import();
-var styles_module_default14 = { "LayerTree": "_LayerTree_1vltj_1", "LayerTree-zoneTitle": "_LayerTree-zoneTitle_1vltj_11", "LayerTree-helper": "_LayerTree-helper_1vltj_17", "Layer": "_Layer_1vltj_1", "Layer-inner": "_Layer-inner_1vltj_30", "Layer--containsZone": "_Layer--containsZone_1vltj_37", "Layer-clickable": "_Layer-clickable_1vltj_41", "Layer--isSelected": "_Layer--isSelected_1vltj_63", "Layer-chevron": "_Layer-chevron_1vltj_91", "Layer--childIsSelected": "_Layer--childIsSelected_1vltj_92", "Layer-zones": "_Layer-zones_1vltj_96", "Layer-title": "_Layer-title_1vltj_110", "Layer-name": "_Layer-name_1vltj_119", "Layer-icon": "_Layer-icon_1vltj_125", "Layer-zoneIcon": "_Layer-zoneIcon_1vltj_130" };
 
-// components/LayerTree/index.tsx
-import {
-  forwardRef as forwardRef2,
-  useCallback as useCallback14,
-  useContext as useContext11,
-  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";
-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;
-var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
-var MIN_VIRTUALIZED_LAYER_COUNT = 25;
-var measuredRowHeights = /* @__PURE__ */ new Map();
-var getZonesByParent = (zones) => {
-  return Object.keys(zones).reduce((acc, zone) => {
-    const [parentId] = zone.split(":");
-    acc[parentId] = [...acc[parentId] || [], zone];
-    return acc;
-  }, {});
-};
-var getZoneLabel = (zoneCompound, nodes, config, label) => {
-  var _a, _b, _c, _d;
-  if (label !== void 0) {
-    return label;
+// components/LayerTree/lib/dnd/use-outline-drop-zone.ts
+init_react_import();
+import { useMemo as useMemo15 } from "react";
+import { useDroppable as useDroppable3 } from "@dnd-kit/react";
+
+// components/LayerTree/lib/dnd/compute.ts
+init_react_import();
+
+// lib/data/resolve-zone-constraints.ts
+init_react_import();
+
+// lib/data/get-slot-field.ts
+init_react_import();
+
+// lib/data/get-field-by-path.ts
+init_react_import();
+function getFieldByPath(path, fields) {
+  if (typeof path !== "string") {
+    throw new Error(
+      `Can't get field definition for path (${path}): Path should be a string`
+    );
+  }
+  if (!fields || typeof fields !== "object") {
+    return void 0;
+  }
+  const segments = path.split(/\.|\[\d+\]/).filter(Boolean);
+  let currFields = fields;
+  let currField = void 0;
+  for (let index = 0; index < segments.length; index++) {
+    const currSegment = segments[index];
+    currField = currFields[currSegment];
+    if (index === segments.length - 1) {
+      return currField;
+    }
+    if (!currField) {
+      return;
+    }
+    if ((currField.type !== "object" || !currField.objectFields) && (currField.type !== "array" || !currField.arrayFields))
+      return;
+    if (currField.type === "object") {
+      currFields = currField.objectFields;
+    }
+    if (currField.type === "array") {
+      currFields = currField.arrayFields;
+    }
   }
+}
+
+// lib/data/get-slot-field.ts
+var getSlotField = (zoneCompound, config, nodes) => {
+  var _a;
   const [componentId, slotId] = zoneCompound.split(":");
   if (!slotId) {
     return;
   }
   const componentType = (_a = nodes[componentId]) == null ? void 0 : _a.data.type;
   const configForComponent = componentType && componentType !== rootAreaId ? config.components[componentType] : config.root;
-  return (_d = (_c = (_b = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _b[slotId]) == null ? void 0 : _c.label) != null ? _d : slotId;
-};
-var buildLayerNode = ({
-  config,
-  itemId,
-  index,
-  nodes,
-  zoneCompound,
-  zones,
-  zonesByParent
-}) => {
-  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 label = (_c = (_b = config.components[componentType]) == null ? void 0 : _b.label) != null ? _c : componentType;
-  const childZoneCompounds = zonesByParent[itemId] || [];
-  return {
-    childZones: childZoneCompounds.map(
-      (childZoneCompound) => buildLayerTree({
-        config,
-        nodes,
-        zoneCompound: childZoneCompound,
-        zones,
-        zonesByParent
-      })
-    ),
-    componentType,
-    index,
-    itemId,
-    label,
-    zoneCompound
-  };
-};
-var buildLayerTree = ({
-  config,
-  label,
-  nodes,
-  zoneCompound,
-  zones,
-  zonesByParent = getZonesByParent(zones)
-}) => {
-  var _a, _b;
-  const contentIds = (_b = (_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [];
-  return {
-    items: contentIds.map(
-      (itemId, index) => buildLayerNode({
-        config,
-        itemId,
-        index,
-        nodes,
-        zoneCompound,
-        zones,
-        zonesByParent
-      })
-    ),
-    label: getZoneLabel(zoneCompound, nodes, config, label),
-    zoneCompound
-  };
+  const slotField = getFieldByPath(slotId, configForComponent == null ? void 0 : configForComponent.fields);
+  return slotField;
 };
-var getEstimatedRowHeight = (itemId) => {
+
+// lib/data/resolve-zone-constraints.ts
+var NO_CONSTRAINTS = {};
+var getZoneConstraints = (zoneCompound, config, indexes) => {
   var _a;
-  return (_a = measuredRowHeights.get(itemId)) != null ? _a : DEFAULT_LAYER_ROW_HEIGHT;
-};
-var cacheMeasuredRowHeight = (itemId, height) => {
-  if (height <= 0) {
-    return;
+  if (((_a = indexes.zones[zoneCompound]) == null ? void 0 : _a.type) !== "slot") {
+    return NO_CONSTRAINTS;
   }
-  measuredRowHeights.set(itemId, height);
+  const field = getSlotField(zoneCompound, config, indexes.nodes);
+  if ((field == null ? void 0 : field.type) !== "slot") {
+    return NO_CONSTRAINTS;
+  }
+  return { allow: field.allow, disallow: field.disallow };
 };
-var getScrollParent = (el) => {
-  var _a;
-  let current = (_a = el == null ? void 0 : el.parentElement) != null ? _a : null;
-  while (current) {
-    const { overflow, overflowY } = getComputedStyle(current);
-    if ([overflow, overflowY].some((value) => /auto|scroll/.test(value))) {
-      return current;
-    }
-    current = current.parentElement;
+
+// components/LayerTree/lib/dnd/compute.ts
+var OUTLINE_ITEM_TYPE = "outline-item";
+var OUTLINE_ZONE_TYPE = "outline-zone";
+var cached = (cache, key, compute) => {
+  const hit = cache.get(key);
+  if (hit !== void 0) {
+    return hit;
   }
-  return null;
+  const result = compute();
+  cache.set(key, result);
+  return result;
 };
-var Layer = forwardRef2(function Layer2({
-  childIsSelected,
-  dataIndex,
-  depth,
-  isSelected,
-  node,
-  selectedId,
-  selectedPathIds
-}, ref) {
-  const dispatch = useAppStore((s) => s.dispatch);
-  const zoneStore = useContext11(ZoneStoreContext);
-  const isHovering = useContextStore(
-    ZoneStoreContext,
-    (s) => s.hoveringComponent === node.itemId
+var zoneAcceptsComponent = (cache, zoneCompound, componentType, config, indexes) => cached(cache, `zone:${zoneCompound}`, () => {
+  const targetZoneConstraints = getZoneConstraints(
+    zoneCompound,
+    config,
+    indexes
   );
-  const containsZone = node.childZones.length > 0;
-  const setItemSelector = useCallback14(
-    (itemSelector) => {
-      dispatch({ type: "setUi", ui: { itemSelector } });
-    },
-    [dispatch]
+  return isComponentAllowed(componentType, targetZoneConstraints);
+});
+var itemAcceptsComponent = (cache, itemId, componentType, config, indexes) => cached(cache, `childZones:${itemId}`, () => {
+  return Object.keys(indexes.zones).some(
+    (zoneCompound) => zoneCompound.startsWith(`${itemId}:`) && zoneAcceptsComponent(
+      cache,
+      zoneCompound,
+      componentType,
+      config,
+      indexes
+    )
   );
-  const shouldRenderChildren = isSelected || childIsSelected;
-  return /* @__PURE__ */ jsxs12(
-    "li",
-    {
-      ref,
-      className: getClassNameLayer({
-        childIsSelected,
-        containsZone,
-        isHovering,
-        isSelected
-      }),
-      "data-index": dataIndex,
-      "data-puck-layer-tree-id": node.itemId,
-      children: [
-        /* @__PURE__ */ jsx37("div", { className: getClassNameLayer("inner"), children: /* @__PURE__ */ jsxs12(
-          "button",
-          {
-            type: "button",
-            className: getClassNameLayer("clickable"),
-            onClick: () => {
-              if (isSelected) {
-                setItemSelector(null);
-                return;
-              }
-              setItemSelector({
-                index: node.index,
-                zone: node.zoneCompound
-              });
-              zoneStore.getState().scrollToComponent(node.itemId);
-            },
-            onMouseEnter: (e) => {
-              e.stopPropagation();
-              zoneStore.setState({ hoveringComponent: node.itemId });
-            },
-            onMouseLeave: (e) => {
-              e.stopPropagation();
-              zoneStore.setState({ hoveringComponent: null });
-            },
-            children: [
-              containsZone && /* @__PURE__ */ jsx37(
-                "div",
-                {
-                  className: getClassNameLayer("chevron"),
-                  title: isSelected ? "Collapse" : "Expand",
-                  children: /* @__PURE__ */ jsx37(ChevronDown, { size: "12" })
-                }
-              ),
-              /* @__PURE__ */ jsxs12("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 })
-              ] })
-            ]
-          }
-        ) }),
-        containsZone && shouldRenderChildren && node.childZones.map((childZone) => /* @__PURE__ */ jsx37(
-          "div",
-          {
-            className: getClassNameLayer("zones"),
-            children: /* @__PURE__ */ jsx37(
-              LayerTreeZone,
-              {
-                depth: depth + 1,
-                selectedId,
-                selectedPathIds,
-                tree: childZone
-              }
-            )
-          },
-          childZone.zoneCompound
-        ))
-      ]
-    }
+});
+var isSourceOrDescendantOfSource = (cache, itemId, sourceItemId, nodes) => cached(cache, `subtree:${itemId}`, () => {
+  var _a;
+  if (itemId === sourceItemId) {
+    return true;
+  }
+  const path = ((_a = nodes[itemId]) == null ? void 0 : _a.path) || [];
+  return path.some(
+    (zoneCompound) => zoneCompound.split(":")[0] === sourceItemId
   );
 });
-var LayerTreeZone = ({
-  depth,
-  selectedId,
-  selectedPathIds,
-  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: [
-      /* @__PURE__ */ jsx37("div", { className: getClassName20("zoneIcon"), children: /* @__PURE__ */ jsx37(Layers, { size: "16" }) }),
-      tree.label
-    ] }),
-    shouldVirtualize ? /* @__PURE__ */ jsx37(
-      VirtualizedLayerTreeItems,
-      {
-        depth,
-        selectedId,
-        selectedPathIds,
-        tree
-      }
-    ) : /* @__PURE__ */ jsx37(
-      StaticLayerTreeItems,
-      {
-        depth,
-        selectedId,
-        selectedPathIds,
-        tree
+var createOutlineAccept = (stores, target) => (source) => {
+  if (source.type !== OUTLINE_ITEM_TYPE) return false;
+  const sourceData = source.data;
+  const cache = stores.outlineStore.getState().acceptCache;
+  const { config, state } = stores.appStore.getState();
+  const indexes = state.indexes;
+  const anchorId = target.kind === "row" ? target.itemId : target.zoneCompound.split(":")[0];
+  if (isSourceOrDescendantOfSource(
+    cache,
+    anchorId,
+    sourceData.itemId,
+    indexes.nodes
+  )) {
+    return false;
+  }
+  if (target.kind === "zone") {
+    return zoneAcceptsComponent(
+      cache,
+      target.zoneCompound,
+      sourceData.componentType,
+      config,
+      indexes
+    );
+  }
+  return zoneAcceptsComponent(
+    cache,
+    target.zoneCompound,
+    sourceData.componentType,
+    config,
+    indexes
+  ) || itemAcceptsComponent(
+    cache,
+    target.itemId,
+    sourceData.componentType,
+    config,
+    indexes
+  );
+};
+
+// components/LayerTree/lib/store.ts
+init_react_import();
+import { createContext as createContext6, useContext as useContext11 } from "react";
+import { createStore as createStore6 } from "zustand";
+var OUTLINE_EXPAND_DELAY_MS = 600;
+var createOutlineDndStore = () => {
+  let expandTimer = null;
+  let pendingRowId = null;
+  const cancelTimer = () => {
+    if (expandTimer !== null) {
+      clearTimeout(expandTimer);
+      expandTimer = null;
+    }
+    pendingRowId = null;
+  };
+  return createStore6((set, get) => ({
+    status: "idle",
+    draggedRow: null,
+    tempExpandedIds: /* @__PURE__ */ new Set(),
+    expandCandidateId: null,
+    indicator: null,
+    drop: null,
+    acceptCache: /* @__PURE__ */ new Map(),
+    startDrag: (draggedRow) => set({
+      status: "dragging",
+      draggedRow,
+      acceptCache: /* @__PURE__ */ new Map()
+    }),
+    setTarget: (indicator, drop) => {
+      var _a, _b, _c, _d;
+      const current = get();
+      if (((_a = current.indicator) == null ? void 0 : _a.targetId) === indicator.targetId && ((_b = current.indicator) == null ? void 0 : _b.position) === indicator.position && ((_c = current.drop) == null ? void 0 : _c.zone) === drop.zone && ((_d = current.drop) == null ? void 0 : _d.index) === drop.index) {
+        return;
       }
-    )
+      set({ indicator, drop });
+    },
+    clearTarget: () => {
+      if (get().indicator === null && get().drop === null) {
+        return;
+      }
+      set({ indicator: null, drop: null });
+    },
+    scheduleExpand: (rowId, onExpand) => {
+      if (pendingRowId === rowId || get().tempExpandedIds.has(rowId)) {
+        return;
+      }
+      cancelTimer();
+      pendingRowId = rowId;
+      set({ expandCandidateId: rowId });
+      expandTimer = setTimeout(() => {
+        expandTimer = null;
+        pendingRowId = null;
+        set((s) => ({
+          tempExpandedIds: new Set(s.tempExpandedIds).add(rowId),
+          expandCandidateId: null
+        }));
+        onExpand();
+      }, OUTLINE_EXPAND_DELAY_MS);
+    },
+    cancelPendingExpand: () => {
+      cancelTimer();
+      if (get().expandCandidateId !== null) {
+        set({ expandCandidateId: null });
+      }
+    },
+    endDrag: () => {
+      cancelTimer();
+      set({
+        status: "dropping",
+        indicator: null,
+        drop: null,
+        expandCandidateId: null
+      });
+    },
+    reset: () => {
+      cancelTimer();
+      set({
+        status: "idle",
+        draggedRow: null,
+        tempExpandedIds: /* @__PURE__ */ new Set(),
+        expandCandidateId: null,
+        indicator: null,
+        drop: null,
+        acceptCache: /* @__PURE__ */ new Map()
+      });
+    }
+  }));
+};
+var OutlineDndStoreContext = createContext6(
+  createOutlineDndStore()
+);
+var useOutlineDndStoreApi = () => {
+  return useContext11(OutlineDndStoreContext);
+};
+var useOutlineDndStore = (selector) => {
+  return useContextStore(OutlineDndStoreContext, selector);
+};
+
+// components/LayerTree/lib/dnd/use-outline-drop-zone.ts
+var useOutlineDropZone = ({
+  kind,
+  zoneCompound
+}) => {
+  const appStore = useAppStoreApi();
+  const outlineStore = useOutlineDndStoreApi();
+  const dndId = `${kind}:${zoneCompound}`;
+  const accept = useMemo15(
+    () => createOutlineAccept(
+      { appStore, outlineStore },
+      {
+        kind: "zone",
+        zoneCompound
+      }
+    ),
+    [appStore, outlineStore, zoneCompound]
+  );
+  const { ref } = useDroppable3({
+    id: dndId,
+    type: OUTLINE_ZONE_TYPE,
+    accept,
+    collisionDetector: pointerIntersection,
+    data: { kind: "zone", zoneCompound }
+  });
+  const isDropTarget = useOutlineDndStore(
+    (s) => {
+      var _a;
+      return ((_a = s.indicator) == null ? void 0 : _a.targetId) === dndId;
+    }
+  );
+  const outlineDropZoneObject = useMemo15(
+    () => ({ isDropTarget, ref }),
+    [isDropTarget, ref]
+  );
+  return outlineDropZoneObject;
+};
+var use_outline_drop_zone_default = useOutlineDropZone;
+
+// components/LayerTree/components/drop-line/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/drop-line/styles.module.css#css-module
+init_react_import();
+var styles_module_default14 = { "DropLine": "_DropLine_eyz3q_2", "DropLine--top": "_DropLine--top_eyz3q_12", "DropLine--bottom": "_DropLine--bottom_eyz3q_16", "DropLine--outset": "_DropLine--outset_eyz3q_20" };
+
+// components/LayerTree/components/drop-line/index.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+var getClassName20 = get_class_name_factory_default("DropLine", styles_module_default14);
+var DropLine = ({
+  edge,
+  outset
+}) => /* @__PURE__ */ jsx37(
+  "div",
+  {
+    className: getClassName20({
+      top: edge === "top",
+      bottom: edge === "bottom",
+      outset: Boolean(outset)
+    })
+  }
+);
+
+// components/LayerTree/components/layer-tree-items/index.ts
+init_react_import();
+
+// components/LayerTree/components/layer-tree-items/static-layer-tree-items.tsx
+init_react_import();
+
+// components/LayerTree/components/empty-zone-placeholder/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/empty-zone-placeholder/styles.module.css#css-module
+init_react_import();
+var styles_module_default15 = { "LayerTree-helper": "_LayerTree-helper_1niov_2" };
+
+// components/LayerTree/components/empty-zone-placeholder/index.tsx
+import { jsx as jsx38, jsxs as jsxs11 } from "react/jsx-runtime";
+var getClassName21 = get_class_name_factory_default("LayerTree", styles_module_default15);
+var EmptyZonePlaceholder = ({
+  zoneCompound
+}) => {
+  const { ref, isDropTarget } = use_outline_drop_zone_default({
+    kind: "empty",
+    zoneCompound
+  });
+  const noItemsMsg = useMessage("outline-empty");
+  return /* @__PURE__ */ jsxs11(
+    "li",
+    {
+      className: getClassName21("helper"),
+      "data-puck-drop-target": isDropTarget || void 0,
+      ref,
+      children: [
+        noItemsMsg,
+        isDropTarget && /* @__PURE__ */ jsx38(DropLine, { edge: "top" })
+      ]
+    }
+  );
+};
+
+// components/LayerTree/components/layer/index.tsx
+init_react_import();
+import { forwardRef as forwardRef2, useCallback as useCallback16, useContext as useContext13 } from "react";
+
+// components/LayerTree/lib/dnd/use-outline-row-dnd.ts
+init_react_import();
+import { useCallback as useCallback14, useMemo as useMemo16 } from "react";
+import { Feedback as Feedback2 } from "@dnd-kit/dom";
+import { useSortable as useSortable3 } from "@dnd-kit/react/sortable";
+var useOutlineRowDnd = ({
+  componentType,
+  index,
+  itemId,
+  zoneCompound
+}) => {
+  const appStore = useAppStoreApi();
+  const outlineStore = useOutlineDndStoreApi();
+  const accept = useMemo16(
+    () => createOutlineAccept(
+      { appStore, outlineStore },
+      { kind: "row", itemId, zoneCompound }
+    ),
+    [appStore, outlineStore, itemId, zoneCompound]
+  );
+  const collisionDetector = useMemo16(
+    () => createDynamicCollisionDetector("y"),
+    []
+  );
+  const { handleRef, ref, isDragSource } = useSortable3({
+    id: itemId,
+    index,
+    group: zoneCompound,
+    type: OUTLINE_ITEM_TYPE,
+    accept,
+    data: {
+      kind: "row",
+      itemId,
+      zoneCompound,
+      index,
+      componentType
+    },
+    collisionPriority: 1,
+    collisionDetector,
+    // Don't animate rows while dragging or dropping
+    transition: { duration: 0 },
+    plugins: (defaults) => [
+      ...defaults,
+      // The source row stays rendered in place
+      // The drop animation is disabled for a more snappy feel
+      Feedback2.configure({ feedback: "clone", dropAnimation: null })
+    ]
+  });
+  const { indicatorPosition, isExpandCandidate, isTempExpanded } = useOutlineDndStore((s) => {
+    var _a;
+    return {
+      indicatorPosition: ((_a = s.indicator) == null ? void 0 : _a.targetId) === itemId ? s.indicator.position : null,
+      isExpandCandidate: s.expandCandidateId === itemId,
+      isTempExpanded: s.tempExpandedIds.has(itemId)
+    };
+  });
+  const rowRef = useCallback14(
+    (element) => {
+      ref(element);
+      handleRef(element);
+    },
+    [ref, handleRef]
+  );
+  return {
+    rowRef,
+    isDragSource,
+    indicatorPosition,
+    isExpandCandidate,
+    isTempExpanded
+  };
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer/styles.module.css#css-module
+init_react_import();
+var styles_module_default16 = { "Layer": "_Layer_1o110_1", "Layer-inner": "_Layer-inner_1o110_8", "Layer--isSortable": "_Layer--isSortable_1o110_18", "Layer-content": "_Layer-content_1o110_22", "Layer-clickable": "_Layer-clickable_1o110_29", "Layer-caret": "_Layer-caret_1o110_57", "Layer--containsZone": "_Layer--containsZone_1o110_68", "Layer-title": "_Layer-title_1o110_76", "Layer-name": "_Layer-name_1o110_85", "Layer-icon": "_Layer-icon_1o110_91", "Layer-zones": "_Layer-zones_1o110_101", "Layer--isExpanded": "_Layer--isExpanded_1o110_106", "Layer--isSelected": "_Layer--isSelected_1o110_115", "Layer--isExpandCandidate": "_Layer--isExpandCandidate_1o110_138", "Layer--isDragSource": "_Layer--isDragSource_1o110_143" };
+
+// components/LayerTree/components/layer-actions/index.tsx
+init_react_import();
+import { useCallback as useCallback15 } from "react";
+import { useShallow as useShallow7 } from "zustand/react/shallow";
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer-actions/styles.module.css#css-module
+init_react_import();
+var styles_module_default17 = { "LayerActions": "_LayerActions_1m5z5_2", "LayerActions--visible": "_LayerActions--visible_1m5z5_17" };
+
+// components/LayerTree/components/layer-actions/index.tsx
+import { jsx as jsx39, jsxs as jsxs12 } from "react/jsx-runtime";
+var getClassName22 = get_class_name_factory_default("LayerActions", styles_module_default17);
+var LayerActions = ({
+  node,
+  visible
+}) => {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const outlineStore = useOutlineDndStoreApi();
+  const permissions = useAppStore(
+    useShallow7((s) => {
+      const item = getItem(
+        { index: node.index, zone: node.zoneCompound },
+        s.state
+      );
+      const itemPermissions = s.permissions.getPermissions({ item });
+      return {
+        delete: itemPermissions.delete,
+        duplicate: itemPermissions.duplicate
+      };
+    })
+  );
+  const duplicateMsg = useMessage("outline-item-duplicate");
+  const deleteMsg = useMessage("outline-item-delete");
+  const deleteItem = useCallback15(
+    (e) => {
+      e.stopPropagation();
+      if (outlineStore.getState().status !== "idle") {
+        return;
+      }
+      dispatch({
+        type: "remove",
+        index: node.index,
+        zone: node.zoneCompound
+      });
+    },
+    [dispatch, outlineStore, node]
+  );
+  const duplicateItem = useCallback15(
+    (e) => {
+      e.stopPropagation();
+      if (outlineStore.getState().status !== "idle") {
+        return;
+      }
+      dispatch({
+        type: "duplicate",
+        sourceIndex: node.index,
+        sourceZone: node.zoneCompound
+      });
+    },
+    [dispatch, outlineStore, node.index, node.zoneCompound]
+  );
+  if (!permissions.delete && !permissions.duplicate) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs12("div", { className: getClassName22({ visible }), children: [
+    permissions.duplicate && /* @__PURE__ */ jsx39(IconButton, { onClick: duplicateItem, title: duplicateMsg, type: "button", children: /* @__PURE__ */ jsx39(Copy, {}) }),
+    permissions.delete && /* @__PURE__ */ jsx39(IconButton, { onClick: deleteItem, title: deleteMsg, type: "button", children: /* @__PURE__ */ jsx39(Trash, {}) })
   ] });
 };
+
+// components/LayerTree/components/layer/index.tsx
+import { jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
+var getClassName23 = get_class_name_factory_default("Layer", styles_module_default16);
+var Layer = forwardRef2(function Layer2({
+  dataIndex,
+  depth,
+  isSelected,
+  node,
+  selectedId
+}, ref) {
+  const dispatch = useAppStore((s) => s.dispatch);
+  const isExpanded = useAppStore(
+    (s) => {
+      var _a, _b;
+      return (_b = (_a = s.state.ui.itemExpanded) == null ? void 0 : _a[node.itemId]) != null ? _b : false;
+    }
+  );
+  const isHovering = useContextStore(
+    ZoneStoreContext,
+    (s) => s.hoveringComponent === node.itemId
+  );
+  const isDraggable = useAppStore((s) => {
+    var _a;
+    const item = getItem(
+      { index: node.index, zone: node.zoneCompound },
+      s.state
+    );
+    return (_a = s.permissions.getPermissions({ item })) == null ? void 0 : _a.drag;
+  });
+  const {
+    indicatorPosition,
+    isDragSource,
+    isExpandCandidate,
+    isTempExpanded,
+    rowRef
+  } = useOutlineRowDnd({
+    componentType: node.componentType,
+    index: node.index,
+    itemId: node.itemId,
+    zoneCompound: node.zoneCompound
+  });
+  const zoneStore = useContext13(ZoneStoreContext);
+  const outlineStore = useOutlineDndStoreApi();
+  const collapseMsg = useMessage("outline-item-collapse");
+  const expandMsg = useMessage("outline-item-expand");
+  const containsZone = node.childZones.length > 0;
+  const setItemSelector = useCallback16(
+    (itemSelector) => {
+      dispatch({ type: "setUi", ui: { itemSelector } });
+    },
+    [dispatch]
+  );
+  const shouldBeExpanded = isExpanded || isTempExpanded;
+  const shouldShowIndicator = indicatorPosition !== null;
+  const shouldShowZoneTitles = node.childZones.length !== 1;
+  return /* @__PURE__ */ jsxs13(
+    "li",
+    {
+      ref,
+      className: getClassName23({
+        containsZone,
+        isDragSource,
+        isExpandCandidate,
+        isExpanded: shouldBeExpanded,
+        isHovering,
+        isSelected,
+        isSortable: isDraggable
+      }),
+      "data-index": dataIndex,
+      "data-puck-layer-tree-id": node.itemId,
+      children: [
+        shouldShowIndicator && /* @__PURE__ */ jsx40(
+          DropLine,
+          {
+            edge: indicatorPosition === "before" ? "top" : "bottom",
+            outset: true
+          }
+        ),
+        /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: getClassName23("inner"),
+            ref: rowRef,
+            onMouseEnter: (e) => {
+              e.stopPropagation();
+              if (outlineStore.getState().status !== "idle") {
+                return;
+              }
+              zoneStore.setState({ hoveringComponent: node.itemId });
+            },
+            onMouseLeave: (e) => {
+              e.stopPropagation();
+              zoneStore.setState({ hoveringComponent: null });
+            },
+            children: [
+              /* @__PURE__ */ jsx40("div", { className: getClassName23("caret"), children: /* @__PURE__ */ jsx40(
+                IconButton,
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    if (outlineStore.getState().status !== "idle") {
+                      return;
+                    }
+                    dispatch({
+                      type: "setUi",
+                      ui: (previous) => {
+                        var _a;
+                        const newItemExpanded = __spreadValues({}, previous.itemExpanded);
+                        if ((_a = previous.itemExpanded) == null ? void 0 : _a[node.itemId]) {
+                          delete newItemExpanded[node.itemId];
+                        } else {
+                          newItemExpanded[node.itemId] = true;
+                        }
+                        return {
+                          itemExpanded: newItemExpanded
+                        };
+                      },
+                      recordHistory: false
+                    });
+                  },
+                  title: isExpanded ? collapseMsg : expandMsg,
+                  type: "button",
+                  children: /* @__PURE__ */ jsx40(ChevronRight, {})
+                }
+              ) }),
+              /* @__PURE__ */ jsxs13("div", { className: getClassName23("content"), children: [
+                /* @__PURE__ */ jsx40(
+                  "button",
+                  {
+                    type: "button",
+                    className: getClassName23("clickable"),
+                    onClick: () => {
+                      if (outlineStore.getState().status !== "idle") {
+                        return;
+                      }
+                      setItemSelector({
+                        index: node.index,
+                        zone: node.zoneCompound
+                      });
+                      zoneStore.getState().scrollToComponent(node.itemId);
+                    },
+                    children: /* @__PURE__ */ jsxs13("div", { className: getClassName23("title"), children: [
+                      /* @__PURE__ */ jsx40("div", { className: getClassName23("icon"), children: node.componentType === "Text" || node.componentType === "Heading" ? (
+                        // Sized in CSS via --puck-outline-icon-size
+                        /* @__PURE__ */ jsx40(Type, {})
+                      ) : /* @__PURE__ */ jsx40(LayoutGrid, {}) }),
+                      /* @__PURE__ */ jsx40("div", { className: getClassName23("name"), children: node.label })
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsx40(LayerActions, { node, visible: isHovering && !isDragSource })
+              ] })
+            ]
+          }
+        ),
+        containsZone && shouldBeExpanded && node.childZones.map((childZone) => /* @__PURE__ */ jsx40("div", { className: getClassName23("zones"), children: /* @__PURE__ */ jsx40(
+          LayerTreeZone,
+          {
+            depth: shouldShowZoneTitles ? depth + 1 : depth,
+            selectedId,
+            tree: shouldShowZoneTitles ? childZone : __spreadProps(__spreadValues({}, childZone), { label: void 0 })
+          }
+        ) }, childZone.zoneCompound))
+      ]
+    }
+  );
+});
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer-tree-items/styles.module.css#css-module
+init_react_import();
+var styles_module_default18 = { "LayerTree": "_LayerTree_o5tyt_1", "LayerTree--nested": "_LayerTree--nested_o5tyt_12" };
+
+// components/LayerTree/components/layer-tree-items/static-layer-tree-items.tsx
+import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
+var getClassName24 = get_class_name_factory_default("LayerTree", styles_module_default18);
 var StaticLayerTreeItems = ({
   depth,
   selectedId,
-  selectedPathIds,
   tree
 }) => {
-  return /* @__PURE__ */ jsxs12("ul", { className: getClassName20(), children: [
-    tree.items.length === 0 && /* @__PURE__ */ jsx37("div", { className: getClassName20("helper"), children: "No items" }),
-    tree.items.map((node) => /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs14("ul", { className: getClassName24({ nested: depth > 0 }), children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx41(EmptyZonePlaceholder, { zoneCompound: tree.zoneCompound }),
+    tree.items.map((node) => /* @__PURE__ */ jsx41(
       Layer,
       {
-        childIsSelected: selectedPathIds.has(node.itemId),
         depth,
         isSelected: selectedId === node.itemId,
         node,
-        selectedId,
-        selectedPathIds
+        selectedId
       },
       node.itemId
     ))
   ] });
 };
+
+// components/LayerTree/components/layer-tree-items/virtualized-layer-tree-items.tsx
+init_react_import();
+import { defaultRangeExtractor as defaultRangeExtractor2, useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { useCallback as useCallback17, useRef as useRef10 } from "react";
+import { jsx as jsx42, jsxs as jsxs15 } from "react/jsx-runtime";
+var getClassName25 = get_class_name_factory_default("LayerTree", styles_module_default18);
+var DEFAULT_LAYER_ROW_HEIGHT = 32;
+var LAYER_TREE_VIRTUALIZATION_OVERSCAN = 8;
+var measuredRowHeights = /* @__PURE__ */ new Map();
+var getEstimatedRowHeight = (itemId) => {
+  var _a;
+  return (_a = measuredRowHeights.get(itemId)) != null ? _a : DEFAULT_LAYER_ROW_HEIGHT;
+};
+var cacheMeasuredRowHeight = (itemId, height) => {
+  if (height <= 0) {
+    return;
+  }
+  measuredRowHeights.set(itemId, height);
+};
+var getFirstScrollAncestor = (el) => {
+  var _a;
+  let current = (_a = el == null ? void 0 : el.parentElement) != null ? _a : null;
+  while (current) {
+    const { overflow, overflowY } = getComputedStyle(current);
+    if ([overflow, overflowY].some((value) => /auto|scroll/.test(value))) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+};
 var VirtualizedLayerTreeItems = ({
   depth,
   selectedId,
-  selectedPathIds,
   tree
 }) => {
   const listRef = useRef10(null);
+  const pinnedIndex = useOutlineDndStore(
+    (s) => {
+      var _a;
+      return ((_a = s.draggedRow) == null ? void 0 : _a.zoneCompound) === tree.zoneCompound ? s.draggedRow.index : null;
+    }
+  );
+  const rangeExtractor = useCallback17(
+    (range) => {
+      const indexes = defaultRangeExtractor2(range);
+      if (pinnedIndex !== null && !indexes.includes(pinnedIndex)) {
+        indexes.push(pinnedIndex);
+        indexes.sort((a, b) => a - b);
+      }
+      return indexes;
+    },
+    [pinnedIndex]
+  );
   const virtualizer = useVirtualizer2({
     count: tree.items.length,
     estimateSize: (index) => getEstimatedRowHeight(tree.items[index].itemId),
     getItemKey: (index) => tree.items[index].itemId,
-    getScrollElement: () => getScrollParent(listRef.current),
+    getScrollElement: () => getFirstScrollAncestor(listRef.current),
     overscan: LAYER_TREE_VIRTUALIZATION_OVERSCAN,
+    rangeExtractor,
     measureElement: (element) => {
       const height = Math.ceil(element.getBoundingClientRect().height);
       const itemId = element.dataset.puckLayerTreeId;
@@ -6082,7 +6628,7 @@ var VirtualizedLayerTreeItems = ({
     const gapSize = Math.max(virtualItem.start - previousEnd, 0);
     if (gapSize > 0) {
       renderedItems.push(
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx42(
           "li",
           {
             "aria-hidden": "true",
@@ -6093,17 +6639,15 @@ var VirtualizedLayerTreeItems = ({
       );
     }
     renderedItems.push(
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx42(
         Layer,
         {
-          childIsSelected: selectedPathIds.has(node.itemId),
           dataIndex: virtualItem.index,
           depth,
           isSelected: selectedId === node.itemId,
           node,
           ref: virtualizer.measureElement,
-          selectedId,
-          selectedPathIds
+          selectedId
         },
         node.itemId
       )
@@ -6114,7 +6658,7 @@ var VirtualizedLayerTreeItems = ({
   const trailingGap = Math.max(totalSize - previousEnd, 0);
   if (trailingGap > 0) {
     renderedItems.push(
-      /* @__PURE__ */ jsx37(
+      /* @__PURE__ */ jsx42(
         "li",
         {
           "aria-hidden": "true",
@@ -6124,42 +6668,480 @@ 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__ */ jsxs15("ul", { className: getClassName25({ nested: depth > 0 }), ref: listRef, children: [
+    tree.items.length === 0 && /* @__PURE__ */ jsx42(EmptyZonePlaceholder, { zoneCompound: tree.zoneCompound }),
     renderedItems
   ] });
 };
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer-tree-zone/styles.module.css#css-module
+init_react_import();
+var styles_module_default19 = { "LayerTree-zoneTitle": "_LayerTree-zoneTitle_fvhlh_2", "LayerTree-zoneIcon": "_LayerTree-zoneIcon_fvhlh_19" };
+
+// components/LayerTree/components/layer-tree-zone/index.tsx
+import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs16 } from "react/jsx-runtime";
+var getClassName26 = get_class_name_factory_default("LayerTree", styles_module_default19);
+var MIN_VIRTUALIZED_LAYER_COUNT = 25;
+var ZoneLabel = ({
+  label,
+  zoneCompound
+}) => {
+  const { ref, isDropTarget } = use_outline_drop_zone_default({
+    kind: "label",
+    zoneCompound
+  });
+  return /* @__PURE__ */ jsxs16(
+    "div",
+    {
+      className: getClassName26("zoneTitle"),
+      "data-puck-drop-target": isDropTarget || void 0,
+      ref,
+      children: [
+        /* @__PURE__ */ jsx43("div", { className: getClassName26("zoneIcon"), children: /* @__PURE__ */ jsx43(Layers, {}) }),
+        label,
+        isDropTarget && /* @__PURE__ */ jsx43(DropLine, { edge: "bottom" })
+      ]
+    }
+  );
+};
+var LayerTreeZone = ({
+  depth,
+  selectedId,
+  tree
+}) => {
+  const shouldVirtualize = depth === 0 && tree.items.length >= MIN_VIRTUALIZED_LAYER_COUNT;
+  return /* @__PURE__ */ jsxs16(Fragment10, { children: [
+    tree.label && /* @__PURE__ */ jsx43(ZoneLabel, { label: tree.label, zoneCompound: tree.zoneCompound }),
+    shouldVirtualize ? /* @__PURE__ */ jsx43(
+      VirtualizedLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        tree
+      }
+    ) : /* @__PURE__ */ jsx43(
+      StaticLayerTreeItems,
+      {
+        depth,
+        selectedId,
+        tree
+      }
+    )
+  ] });
+};
+
+// components/LayerTree/components/outline-dnd-provider/index.tsx
+init_react_import();
+import { PointerActivationConstraints as PointerActivationConstraints3 } from "@dnd-kit/dom";
+import { DragDropProvider as DragDropProvider3 } from "@dnd-kit/react";
+import { useContext as useContext14, useMemo as useMemo17, useState as useState18 } from "react";
+
+// components/LayerTree/lib/dnd/handlers.ts
+init_react_import();
+import { effect as effect2 } from "@dnd-kit/state";
+
+// lib/data/component-has-slots.ts
+init_react_import();
+function componentDataHasSlots(componentId, indexes) {
+  return Object.keys(indexes).some(
+    (zoneCompound) => zoneCompound.startsWith(`${componentId}:`)
+  );
+}
+
+// components/LayerTree/lib/dnd/handlers.ts
+var SCROLL_SETTLE_FRAMES = 2;
+var SCROLL_SETTLE_MAX_FRAMES = 60;
+var scrollToComponentWhenSettled = (id, scrollToComponent) => {
+  let lastTop;
+  let stableFrames = 0;
+  let totalFrames = 0;
+  const check = () => {
+    var _a;
+    const el = (_a = getFrame()) == null ? void 0 : _a.querySelector(`[data-puck-component="${id}"]`);
+    const top = el ? el.getBoundingClientRect().top : null;
+    stableFrames = top === lastTop ? stableFrames + 1 : 0;
+    lastTop = top;
+    totalFrames += 1;
+    if (stableFrames >= SCROLL_SETTLE_FRAMES || totalFrames >= SCROLL_SETTLE_MAX_FRAMES) {
+      scrollToComponent(id);
+      return;
+    }
+    requestAnimationFrame(check);
+  };
+  requestAnimationFrame(check);
+};
+var setPreviewFence = (enabled) => {
+  if (typeof document === "undefined") return;
+  const frameEl = document.getElementById("preview-frame");
+  if (enabled) {
+    frameEl == null ? void 0 : frameEl.setAttribute("data-puck-outline-dragging", "true");
+  } else {
+    frameEl == null ? void 0 : frameEl.removeAttribute("data-puck-outline-dragging");
+  }
+};
+var onOutlineBeforeDragStart = (event, ctx) => {
+  const source = event.operation.source;
+  const data = source == null ? void 0 : source.data;
+  if (!source || !data) return;
+  const appState = ctx.appStore.getState();
+  const item = getItem(
+    { zone: data.zoneCompound, index: data.index },
+    appState.state
+  );
+  if (!item || !appState.permissions.getPermissions({ item }).drag) {
+    event.preventDefault();
+    return;
+  }
+  ctx.outlineDndStore.getState().startDrag({
+    itemId: data.itemId,
+    zoneCompound: data.zoneCompound,
+    index: data.index,
+    componentType: data.componentType
+  });
+  setPreviewFence(true);
+  appState.dispatch({
+    type: "setUi",
+    ui: { isDragging: true },
+    recordHistory: false
+  });
+};
+var onOutlineDragMove = (event, manager, ctx) => {
+  var _a, _b;
+  const outlineStore = ctx.outlineDndStore.getState();
+  const dragged = outlineStore.draggedRow;
+  if (!dragged) return;
+  const target = event.operation.target;
+  if (!target) {
+    outlineStore.cancelPendingExpand();
+    outlineStore.clearTarget();
+    return;
+  }
+  const targetData = target.data;
+  if (targetData.kind === "zone") {
+    outlineStore.cancelPendingExpand();
+    outlineStore.setTarget(
+      { targetId: target.id.toString(), position: "inside" },
+      { zone: targetData.zoneCompound, index: 0 }
+    );
+    return;
+  }
+  const { config, state } = ctx.appStore.getState();
+  const indexes = state.indexes;
+  const cache = outlineStore.acceptCache;
+  if (zoneAcceptsComponent(
+    cache,
+    targetData.zoneCompound,
+    dragged.componentType,
+    config,
+    indexes
+  )) {
+    const collisionData = (_a = manager.collisionObserver.collisions[0]) == null ? void 0 : _a.data;
+    const position = getCollisionPosition(collisionData == null ? void 0 : collisionData.direction);
+    outlineStore.setTarget(
+      { targetId: target.id.toString(), position },
+      {
+        zone: targetData.zoneCompound,
+        index: getInsertIndex({
+          position,
+          sourceIndex: dragged.index,
+          targetIndex: targetData.index,
+          isSameZone: targetData.zoneCompound === dragged.zoneCompound
+        })
+      }
+    );
+  } else {
+    outlineStore.clearTarget();
+  }
+  const isCurrentlyExpanded = Boolean((_b = state.ui.itemExpanded) == null ? void 0 : _b[targetData.itemId]) || outlineStore.tempExpandedIds.has(targetData.itemId);
+  const isExpandable = componentDataHasSlots(targetData.itemId, indexes.zones);
+  if (!isCurrentlyExpanded && isExpandable) {
+    outlineStore.scheduleExpand(targetData.itemId, () => {
+      requestAnimationFrame(() => manager.collisionObserver.forceUpdate(true));
+    });
+  } else {
+    outlineStore.cancelPendingExpand();
+  }
+};
+var onOutlineDragEnd = (event, ctx) => {
+  const { source } = event.operation;
+  const outlineDnDState = ctx.outlineDndStore.getState();
+  const dragged = outlineDnDState.draggedRow;
+  const drop = event.canceled ? null : outlineDnDState.drop;
+  const dispatch = ctx.appStore.getState().dispatch;
+  setPreviewFence(false);
+  if (dragged && drop) {
+    moveComponent(
+      dragged.itemId,
+      { zone: dragged.zoneCompound, index: dragged.index },
+      { zone: drop.zone, index: drop.index },
+      ctx.appStore
+    );
+    const moved = drop.zone !== dragged.zoneCompound || drop.index !== dragged.index;
+    dispatch({
+      type: "setUi",
+      ui: {
+        itemSelector: { zone: drop.zone, index: drop.index },
+        isDragging: false
+      },
+      recordHistory: moved
+    });
+    scrollToComponentWhenSettled(dragged.itemId, ctx.scrollToComponent);
+  } else {
+    dispatch({
+      type: "setUi",
+      ui: { isDragging: false },
+      recordHistory: false
+    });
+  }
+  outlineDnDState.endDrag();
+  const reset = () => ctx.outlineDndStore.getState().reset();
+  if (!source || source.status === "idle") {
+    reset();
+  } else {
+    const dispose = effect2(() => {
+      if (source.status === "idle") {
+        reset();
+        dispose == null ? void 0 : dispose();
+      }
+    });
+  }
+};
+
+// components/LayerTree/components/outline-dnd-provider/index.tsx
+import { jsx as jsx44 } from "react/jsx-runtime";
+var NO_SENSORS = [];
+var OutlineDndProvider = ({ children }) => {
+  const appStore = useAppStoreApi();
+  const zoneStore = useContext14(ZoneStoreContext);
+  const [outlineDndStore] = useState18(() => createOutlineDndStore());
+  const disableOutlineDrag = useAppStore(
+    (s) => {
+      var _a, _b;
+      return (_b = (_a = s.dnd) == null ? void 0 : _a.disableOutlineDrag) != null ? _b : false;
+    }
+  );
+  const sensors = useSensors({
+    mouse: [new PointerActivationConstraints3.Distance({ value: 5 })]
+  });
+  const dragContext = useMemo17(
+    () => ({
+      outlineDndStore,
+      appStore,
+      scrollToComponent: (id) => zoneStore.getState().scrollToComponent(id)
+    }),
+    [outlineDndStore, appStore, zoneStore]
+  );
+  return /* @__PURE__ */ jsx44(OutlineDndStoreContext.Provider, { value: outlineDndStore, children: /* @__PURE__ */ jsx44(
+    DragDropProvider3,
+    {
+      sensors: disableOutlineDrag ? NO_SENSORS : sensors,
+      onBeforeDragStart: (event) => {
+        onOutlineBeforeDragStart(event, dragContext);
+      },
+      onDragOver: (event, manager) => {
+        event.preventDefault();
+        onOutlineDragMove(event, manager, dragContext);
+      },
+      onDragMove: (event, manager) => {
+        onOutlineDragMove(event, manager, dragContext);
+      },
+      onDragEnd: (event) => {
+        onOutlineDragEnd(event, dragContext);
+      },
+      children
+    }
+  ) });
+};
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css#css-module
+init_react_import();
+var styles_module_default20 = { "LayerTreeRoot": "_LayerTreeRoot_kxnd1_1" };
+
+// components/LayerTree/lib/build-layer-tree.ts
+init_react_import();
+var getZonesByParent = (zones) => {
+  const result = {};
+  Object.keys(zones).forEach((zone) => {
+    const [parentId] = zone.split(":");
+    if (!parentId) return;
+    if (!result[parentId]) result[parentId] = [];
+    result[parentId].push(zone);
+  });
+  return result;
+};
+var getZoneLabel = (zoneCompound, nodes, config, label) => {
+  var _a, _b;
+  if (label !== void 0) {
+    return label;
+  }
+  const [, slotId] = zoneCompound.split(":");
+  if (!slotId) {
+    return;
+  }
+  return (_b = (_a = getSlotField(zoneCompound, config, nodes)) == null ? void 0 : _a.label) != null ? _b : slotId;
+};
+var buildLayerNode = ({
+  config,
+  itemId,
+  index,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent,
+  componentFallbackLabel
+}) => {
+  var _a, _b, _c, _d;
+  const nodeData = nodes[itemId];
+  const componentType = (_b = (_a = nodeData == null ? void 0 : nodeData.data.type) == null ? void 0 : _a.toString()) != null ? _b : componentFallbackLabel;
+  const label = (_d = (_c = config.components[componentType]) == null ? void 0 : _c.label) != null ? _d : componentType;
+  const childZoneCompounds = zonesByParent[itemId] || [];
+  return {
+    childZones: childZoneCompounds.map(
+      (childZoneCompound) => buildLayerTree({
+        config,
+        nodes,
+        zoneCompound: childZoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    componentType,
+    index,
+    itemId,
+    label,
+    zoneCompound
+  };
+};
+var buildLayerTree = ({
+  config,
+  label,
+  nodes,
+  zoneCompound,
+  zones,
+  zonesByParent = getZonesByParent(zones),
+  componentFallbackLabel
+}) => {
+  var _a, _b;
+  const contentIds = (_b = (_a = zones[zoneCompound]) == null ? void 0 : _a.contentIds) != null ? _b : [];
+  return {
+    items: contentIds.map(
+      (itemId, index) => buildLayerNode({
+        config,
+        itemId,
+        index,
+        nodes,
+        zoneCompound,
+        zones,
+        zonesByParent
+      })
+    ),
+    label: getZoneLabel(zoneCompound, nodes, config, label),
+    zoneCompound
+  };
+};
+
+// components/LayerTree/index.tsx
+import { jsx as jsx45 } from "react/jsx-runtime";
+var getClassNameDragRoot = get_class_name_factory_default("LayerTreeRoot", styles_module_default20);
 var LayerTree = ({
   selectedId,
-  selectedPathIds,
   trees
 }) => {
-  return /* @__PURE__ */ jsx37(Fragment10, { children: trees.map((tree) => /* @__PURE__ */ jsx37(
-    LayerTreeZone,
+  const disableOutlineDrag = useAppStore(
+    (s) => {
+      var _a, _b;
+      return (_b = (_a = s.dnd) == null ? void 0 : _a.disableOutlineDrag) != null ? _b : false;
+    }
+  );
+  const hasItems = trees.length > 0 && trees[0].items.length > 0;
+  return /* @__PURE__ */ jsx45(OutlineDndProvider, { children: /* @__PURE__ */ jsx45(
+    "div",
     {
-      depth: 0,
-      selectedId,
-      selectedPathIds,
-      tree
-    },
-    tree.zoneCompound
-  )) });
+      className: getClassNameDragRoot(),
+      "data-puck-dnd-disabled": disableOutlineDrag || void 0,
+      children: hasItems && trees.map((tree) => /* @__PURE__ */ jsx45(
+        LayerTreeZone,
+        {
+          depth: 0,
+          selectedId,
+          tree
+        },
+        tree.zoneCompound
+      ))
+    }
+  ) });
 };
 
-// components/Puck/components/Outline/index.tsx
-import { useMemo as useMemo15 } from "react";
+// components/Puck/components/Outline/components/collapse-all/index.tsx
+init_react_import();
 
-// lib/data/find-zones-for-area.ts
+// lib/merge-class-names.ts
 init_react_import();
-var findZonesForArea = (state, area) => {
-  return Object.keys(state.indexes.zones).filter(
-    (zone) => zone.split(":")[0] === area
+var mergeClassNames = (...classNames) => [...classNames].filter(Boolean).join(" ");
+var merge_class_names_default = mergeClassNames;
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/components/collapse-all/styles.module.css#css-module
+init_react_import();
+var styles_module_default21 = { "CollapseAll": "_CollapseAll_1r4cy_1", "CollapseAll-icon": "_CollapseAll-icon_1r4cy_5", "CollapseAll--visible": "_CollapseAll--visible_1r4cy_10" };
+
+// components/Puck/components/Outline/components/collapse-all/index.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+var getClassName27 = get_class_name_factory_default("CollapseAll", styles_module_default21);
+function CollapseAll({ className }) {
+  const hasExpandedItems = useAppStore(
+    (s) => {
+      var _a;
+      return Object.keys((_a = s.state.ui.itemExpanded) != null ? _a : {}).length > 0;
+    }
   );
+  const dispatch = useAppStore((s) => s.dispatch);
+  const collapseAllMsg = useMessage("outline-header-collapseall");
+  const collapseAll = () => {
+    dispatch({ type: "setUi", ui: { itemExpanded: {} } });
+  };
+  return /* @__PURE__ */ jsx46(
+    "div",
+    {
+      className: merge_class_names_default(
+        getClassName27({ visible: hasExpandedItems }),
+        className
+      ),
+      children: /* @__PURE__ */ jsx46(IconButton, { title: collapseAllMsg, onClick: collapseAll, children: /* @__PURE__ */ jsx46(ChevronsDownUp, { className: getClassName27("icon") }) })
+    }
+  );
+}
+var collapse_all_default = CollapseAll;
+
+// components/Puck/components/Outline/components/outline-header/index.tsx
+init_react_import();
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/components/outline-header/styles.module.css#css-module
+init_react_import();
+var styles_module_default22 = { "OutlineHeader": "_OutlineHeader_filq3_1", "OutlineHeader-title": "_OutlineHeader-title_filq3_12" };
+
+// components/Puck/components/Outline/components/outline-header/index.tsx
+import { jsx as jsx47, jsxs as jsxs17 } from "react/jsx-runtime";
+var getClassName28 = get_class_name_factory_default("OutlineHeader", styles_module_default22);
+var OutlineHeader = ({
+  children,
+  title
+}) => {
+  const outlineHeaderMsg = useMessage("outline-header-title");
+  return /* @__PURE__ */ jsxs17("div", { className: getClassName28(), children: [
+    /* @__PURE__ */ jsx47("div", { className: getClassName28("title"), children: outlineHeaderMsg != null ? outlineHeaderMsg : title }),
+    children
+  ] });
 };
+var outline_header_default = OutlineHeader;
+
+// css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css#css-module
+init_react_import();
+var styles_module_default23 = { "OutlineWrapper": "_OutlineWrapper_b9ln0_1", "OutlineWrapper-collapseAll": "_OutlineWrapper-collapseAll_b9ln0_9", "OutlineWrapper-layers": "_OutlineWrapper-layers_b9ln0_15" };
 
 // components/Puck/components/Outline/index.tsx
-import { useShallow as useShallow7 } from "zustand/react/shallow";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs18 } from "react/jsx-runtime";
+var getClassName29 = get_class_name_factory_default("OutlineWrapper", styles_module_default23);
+var DefaultWrapper = ({ children }) => /* @__PURE__ */ jsx48("div", { className: getClassName29(), children });
 var Outline = () => {
   const outlineOverride = useAppStore((s) => s.overrides.outline);
   const config = useAppStore((s) => s.config);
@@ -6169,52 +7151,49 @@ 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"))
+    useShallow8((s) => findZonesForArea(s.state, "root"))
   );
-  const selectedPathIds = useMemo15(() => {
-    var _a;
-    const selectedPath = selectedId ? (_a = nodes[selectedId]) == null ? void 0 : _a.path : null;
-    return new Set(
-      (selectedPath == null ? void 0 : selectedPath.map((candidate) => candidate.split(":")[0]).filter(Boolean)) || []
-    );
-  }, [nodes, selectedId]);
-  const trees = useMemo15(
+  const trees = useMemo18(
     () => rootZones.map(
       (zoneCompound) => buildLayerTree({
         config,
         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(
-    LayerTree,
-    {
-      selectedId,
-      selectedPathIds,
-      trees
-    }
-  ) });
+  const Wrapper = useMemo18(
+    () => outlineOverride || DefaultWrapper,
+    [outlineOverride]
+  );
+  return /* @__PURE__ */ jsxs18(Wrapper, { children: [
+    /* @__PURE__ */ jsx48(outline_header_default, { children: /* @__PURE__ */ jsx48(collapse_all_default, { className: getClassName29("collapseAll") }) }),
+    /* @__PURE__ */ jsx48("div", { className: getClassName29("layers"), children: /* @__PURE__ */ jsx48(LayerTree, { selectedId, trees }) })
+  ] });
 };
 
 // css-module:/home/runner/work/puck/puck/packages/core/plugins/outline/styles.module.css#css-module
 init_react_import();
-var styles_module_default15 = { "OutlinePlugin": "_OutlinePlugin_16k03_1" };
+var styles_module_default24 = { "OutlinePlugin": "_OutlinePlugin_1ylsc_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, {})
-});
+import { jsx as jsx49 } from "react/jsx-runtime";
+var getClassName30 = get_class_name_factory_default("OutlinePlugin", styles_module_default24);
+var outlinePlugin = (props = {}) => {
+  var _a, _b;
+  return {
+    name: "outline",
+    label: (_a = props.label) != null ? _a : "Outline",
+    render: () => /* @__PURE__ */ jsx49("div", { className: getClassName30(), children: /* @__PURE__ */ jsx49(Outline, {}) }),
+    icon: (_b = props.icon) != null ? _b : /* @__PURE__ */ jsx49(Layers, {})
+  };
+};
 
 // plugins/fields/index.tsx
 init_react_import();
@@ -6224,11 +7203,11 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Breadcrumbs/styles.module.css#css-module
 init_react_import();
-var styles_module_default16 = { "Breadcrumbs": "_Breadcrumbs_8c6w5_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_8c6w5_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_8c6w5_7" };
+var styles_module_default25 = { "Breadcrumbs": "_Breadcrumbs_8c6w5_1", "Breadcrumbs-breadcrumbLabel": "_Breadcrumbs-breadcrumbLabel_8c6w5_7", "Breadcrumbs-breadcrumb": "_Breadcrumbs-breadcrumb_8c6w5_7" };
 
 // lib/use-breadcrumbs.ts
 init_react_import();
-import { useMemo as useMemo16 } from "react";
+import { useMemo as useMemo19 } from "react";
 var useBreadcrumbs = (renderCount) => {
   const selectedId = useAppStore((s) => {
     var _a;
@@ -6240,13 +7219,15 @@ var useBreadcrumbs = (renderCount) => {
     return (_a = s.state.indexes.nodes[selectedId]) == null ? void 0 : _a.path;
   });
   const appStore = useAppStoreApi();
-  return useMemo16(() => {
+  const pageLabel = useMessage("label-page");
+  const componentLabel = useMessage("label-component");
+  return useMemo19(() => {
     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
         };
       }
@@ -6254,7 +7235,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 ? {
@@ -6267,30 +7248,30 @@ 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";
-var getClassName22 = get_class_name_factory_default("Breadcrumbs", styles_module_default16);
+import { jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
+var getClassName31 = get_class_name_factory_default("Breadcrumbs", styles_module_default25);
 var Breadcrumbs = ({
   children,
   numParents = 1
 }) => {
   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: [
-      /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsxs19("div", { className: getClassName31(), children: [
+    breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ jsxs19("div", { className: getClassName31("breadcrumb"), children: [
+      /* @__PURE__ */ jsx50(
         "button",
         {
           type: "button",
-          className: getClassName22("breadcrumbLabel"),
+          className: getClassName31("breadcrumbLabel"),
           onClick: () => setUi({ itemSelector: breadcrumb.selector }),
           children: breadcrumb.label
         }
       ),
-      /* @__PURE__ */ jsx40(ChevronRight, { size: 16 })
+      /* @__PURE__ */ jsx50(ChevronRight, { size: 16 })
     ] }, i)),
     children
   ] });
@@ -6301,23 +7282,23 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default17 = { "PuckFields": "_PuckFields_wnj25_1", "PuckFields--isLoading": "_PuckFields--isLoading_wnj25_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_wnj25_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_wnj25_25", "PuckFields-field": "_PuckFields-field_wnj25_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_wnj25_36" };
+var styles_module_default26 = { "PuckFields": "_PuckFields_wnj25_1", "PuckFields--isLoading": "_PuckFields--isLoading_wnj25_6", "PuckFields-loadingOverlay": "_PuckFields-loadingOverlay_wnj25_10", "PuckFields-loadingOverlayInner": "_PuckFields-loadingOverlayInner_wnj25_25", "PuckFields-field": "_PuckFields-field_wnj25_32", "PuckFields--wrapFields": "_PuckFields--wrapFields_wnj25_36" };
 
 // components/Puck/components/Fields/index.tsx
 import {
   memo as memo8,
-  useCallback as useCallback15,
-  useContext as useContext12,
+  useCallback as useCallback18,
+  useContext as useContext15,
   useEffect as useEffect20,
-  useMemo as useMemo17
+  useMemo as useMemo20
 } from "react";
-import { useShallow as useShallow8 } from "zustand/react/shallow";
-import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
-var getClassName23 = get_class_name_factory_default("PuckFields", styles_module_default17);
+import { useShallow as useShallow9 } from "zustand/react/shallow";
+import { Fragment as Fragment11, jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
+var getClassName32 = get_class_name_factory_default("PuckFields", styles_module_default26);
 var DefaultFields = ({
   children
 }) => {
-  return /* @__PURE__ */ jsx41(Fragment11, { children });
+  return /* @__PURE__ */ jsx51(Fragment11, { children });
 };
 var createOnChange = (fieldName, appStore) => (value, updatedUi) => __async(null, null, function* () {
   const { dispatch, state, selectedItem, resolveComponentData } = appStore.getState();
@@ -6372,17 +7353,17 @@ var FieldsChildInner = ({ fieldName }) => {
     return s.selectedItem ? `${s.selectedItem.props.id}_${field.type}_${fieldName}` : `root_${field.type}_${fieldName}`;
   });
   const permissions = useAppStore(
-    useShallow8((s) => {
+    useShallow9((s) => {
       const { selectedItem, permissions: permissions2 } = s;
       return selectedItem ? permissions2.getPermissions({ item: selectedItem }) : permissions2.getPermissions({ root: true });
     })
   );
   const appStore = useAppStoreApi();
-  const onChange = useCallback15(createOnChange(fieldName, appStore), [
+  const onChange = useCallback18(createOnChange(fieldName, appStore), [
     fieldName
   ]);
   const { visible = true } = field != null ? field : {};
-  const fieldStore = useContext12(fieldContextStore.ctx);
+  const fieldStore = useContext15(fieldContextStore.ctx);
   useEffect20(() => {
     return appStore.subscribe(
       (s) => {
@@ -6397,7 +7378,7 @@ var FieldsChildInner = ({ fieldName }) => {
   }, [appStore, fieldStore]);
   if (!field || !id || !visible) return null;
   if (field.type === "slot") return null;
-  return /* @__PURE__ */ jsx41("div", { className: getClassName23("field"), children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx51("div", { className: getClassName32("field"), children: /* @__PURE__ */ jsx51(
     AutoFieldPrivate,
     {
       field,
@@ -6410,12 +7391,12 @@ var FieldsChildInner = ({ fieldName }) => {
 };
 var FieldsChild = ({ fieldName }) => {
   const appStore = useAppStoreApi();
-  const initialValue = useMemo17(() => {
+  const initialValue = useMemo20(() => {
     var _a;
     const value = (_a = appStore.getState().getCurrentData().props) == null ? void 0 : _a[fieldName];
     return { [fieldName]: value };
   }, []);
-  return /* @__PURE__ */ jsx41(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx41(FieldsChildInner, { fieldName }) });
+  return /* @__PURE__ */ jsx51(fieldContextStore.Provider, { value: initialValue, children: /* @__PURE__ */ jsx51(FieldsChildInner, { fieldName }) });
 };
 var FieldsChildMemo = memo8(FieldsChild);
 var FieldsInternal = ({ wrapFields = true }) => {
@@ -6425,7 +7406,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
     const loadingCount = s.selectedItem ? (_a = s.componentState[s.selectedItem.props.id]) == null ? void 0 : _a.loadingCount : (_b = s.componentState["root"]) == null ? void 0 : _b.loadingCount;
     return (loadingCount != null ? loadingCount : 0) > 0;
   });
-  const itemSelector = useAppStore(useShallow8((s) => s.state.ui.itemSelector));
+  const itemSelector = useAppStore(useShallow9((s) => s.state.ui.itemSelector));
   const id = useAppStore((s) => {
     var _a;
     return (_a = s.selectedItem) == null ? void 0 : _a.props.id;
@@ -6434,7 +7415,7 @@ var FieldsInternal = ({ wrapFields = true }) => {
   useRegisterFieldsSlice(appStore, id);
   const fieldsLoading = useAppStore((s) => s.fields.loading);
   const fieldNames = useAppStore(
-    useShallow8((s) => {
+    useShallow9((s) => {
       if (s.fields.id === id) {
         return Object.keys(s.fields.fields);
       }
@@ -6442,17 +7423,17 @@ var FieldsInternal = ({ wrapFields = true }) => {
     })
   );
   const isLoading = fieldsLoading || componentResolving;
-  const Wrapper = useMemo17(() => overrides.fields || DefaultFields, [overrides]);
-  return /* @__PURE__ */ jsxs14(
+  const Wrapper = useMemo20(() => overrides.fields || DefaultFields, [overrides]);
+  return /* @__PURE__ */ jsxs20(
     "form",
     {
-      className: getClassName23({ wrapFields }),
+      className: getClassName32({ wrapFields }),
       onSubmit: (e) => {
         e.preventDefault();
       },
       children: [
-        /* @__PURE__ */ jsx41(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx41(FieldsChildMemo, { fieldName }, fieldName)) }),
-        isLoading && /* @__PURE__ */ jsx41("div", { className: getClassName23("loadingOverlay"), children: /* @__PURE__ */ jsx41("div", { className: getClassName23("loadingOverlayInner"), children: /* @__PURE__ */ jsx41(Loader, { size: 16 }) }) })
+        /* @__PURE__ */ jsx51(Wrapper, { isLoading, itemSelector, children: fieldNames.map((fieldName) => /* @__PURE__ */ jsx51(FieldsChildMemo, { fieldName }, fieldName)) }),
+        isLoading && /* @__PURE__ */ jsx51("div", { className: getClassName32("loadingOverlay"), children: /* @__PURE__ */ jsx51("div", { className: getClassName32("loadingOverlayInner"), children: /* @__PURE__ */ jsx51(Loader, { size: 16 }) }) })
       ]
     }
   );
@@ -6461,53 +7442,54 @@ var Fields = memo8(FieldsInternal);
 
 // css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css#css-module
 init_react_import();
-var styles_module_default18 = { "FieldsPlugin": "_FieldsPlugin_18cj3_1", "FieldsPlugin-header": "_FieldsPlugin-header_18cj3_7" };
+var styles_module_default27 = { "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";
-var getClassName24 = get_class_name_factory_default("FieldsPlugin", styles_module_default18);
+import { jsx as jsx52, jsxs as jsxs21 } from "react/jsx-runtime";
+var getClassName33 = get_class_name_factory_default("FieldsPlugin", styles_module_default27);
 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: [
-    /* @__PURE__ */ jsx42("div", { className: getClassName24("header"), children: /* @__PURE__ */ jsx42(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx42(CurrentTitle, {}) }) }),
-    /* @__PURE__ */ jsx42(Fields, {})
+  label: label != null ? label : "Fields",
+  render: () => /* @__PURE__ */ jsxs21("div", { className: getClassName33(), children: [
+    /* @__PURE__ */ jsx52("div", { className: getClassName33("header"), children: /* @__PURE__ */ jsx52(Breadcrumbs, { numParents: 2, children: /* @__PURE__ */ jsx52(CurrentTitle, {}) }) }),
+    /* @__PURE__ */ jsx52(Fields, {})
   ] }),
-  icon: /* @__PURE__ */ jsx42(RectangleEllipsis, {}),
+  icon: icon != null ? icon : /* @__PURE__ */ jsx52(RectangleEllipsis, {}),
   mobileOnly: desktopSideBar === "right"
 });
 
 // components/Puck/index.tsx
 init_react_import();
 import {
-  createContext as createContext8,
-  useCallback as useCallback22,
-  useContext as useContext15,
+  createContext as createContext9,
+  useCallback as useCallback25,
+  useContext as useContext18,
   useEffect as useEffect29,
-  useMemo as useMemo25,
+  useMemo as useMemo28,
   useRef as useRef16,
-  useState as useState24
+  useState as useState25
 } from "react";
 
 // components/Puck/components/Preview/index.tsx
 init_react_import();
-import { useEffect as useEffect23, useRef as useRef11, useMemo as useMemo18, memo as memo9 } from "react";
+import { useEffect as useEffect23, useRef as useRef11, useMemo as useMemo21, memo as memo9 } from "react";
 
 // components/AutoFrame/index.tsx
 init_react_import();
 import {
-  createContext as createContext6,
-  useContext as useContext13,
+  createContext as createContext7,
+  useContext as useContext16,
   useEffect as useEffect22,
-  useState as useState18
+  useState as useState19
 } from "react";
 import hash from "object-hash";
 import { createPortal as createPortal3 } from "react-dom";
@@ -6629,6 +7611,7 @@ var defaultUiStyles = `@import "https://rsms.me/inter/inter.css";
     --puck-color-focus-ring: var(--puck-color-azure-05);
     --puck-color-selection-bg: color-mix( in srgb, var(--puck-color-azure-09) 30%, transparent );
     --puck-color-selection-border: var(--puck-color-azure-08);
+    --puck-color-insertion-indicator: var(--puck-color-azure-06);
     --puck-color-highlight: var(--puck-color-rose-07);
     --puck-color-bg-disabled: var(--puck-color-grey-07);
     --puck-color-text-disabled: var(--puck-color-grey-03);
@@ -6663,6 +7646,7 @@ var defaultUiStyles = `@import "https://rsms.me/inter/inter.css";
     --puck-font-weight-heavy: 800;
     --puck-letter-spacing-ui: 0.05ch;
     --puck-letter-spacing-heading: 0.08ch;
+    --puck-icon-size-xs: 14px;
     --puck-icon-size-s: 16px;
     --puck-icon-size-m: 18px;
     --puck-icon-size-l: 24px;
@@ -7196,7 +8180,7 @@ textarea._Input-input_qyenz_29 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/IconButton/IconButton.module.css/#css-module-data */
-._IconButton_yuha3_1 {
+._IconButton_1pxxt_1 {
   align-items: center;
   background: var(--puck-iconbutton-color-bg, transparent);
   border: none;
@@ -7208,26 +8192,26 @@ textarea._Input-input_qyenz_29 {
   padding: var(--puck-iconbutton-space, var(--puck-space-1));
   transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._IconButton--active_yuha3_15 {
+._IconButton--active_1pxxt_15 {
   color: var( --puck-iconbutton-color-icon-active, var(--puck-color-interactive) );
 }
-._IconButton_yuha3_1:focus-visible {
+._IconButton_1pxxt_1:focus-visible {
   outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
   outline-offset: calc(var(--puck-border-width-focus) * -1);
 }
 @media (hover: hover) and (pointer: fine) {
-  ._IconButton_yuha3_1:hover:not(._IconButton--disabled_yuha3_28) {
-    background: var( --puck-iconbutton-color-bg-hover, var(--puck-color-interactive-neutral-hover) );
+  ._IconButton_1pxxt_1:hover:not(._IconButton--disabled_1pxxt_28) {
+    background: var( --_puck-iconbutton-color-bg-hover, var( --puck-iconbutton-color-bg-hover, var(--puck-color-interactive-neutral-hover) ) );
     color: var( --puck-iconbutton-color-icon-hover, var(--puck-color-interactive) );
     cursor: pointer;
     transition: none;
   }
 }
-._IconButton_yuha3_1:active {
+._IconButton_1pxxt_1:active {
   background: var( --puck-iconbutton-color-bg-active, var(--puck-color-interactive-soft) );
   transition: none;
 }
-._IconButton--disabled_yuha3_28 {
+._IconButton--disabled_1pxxt_28 {
   color: var( --puck-iconbutton-color-icon-disabled, var(--puck-color-text-subtle) );
 }
 
@@ -8336,138 +9320,327 @@ body:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
-._PuckPreview_z2rgu_1 {
+._PuckPreview_zbic3_1 {
   position: relative;
   height: 100%;
 }
-._PuckPreview-frame_z2rgu_6 {
+._PuckPreview-frame_zbic3_6 {
   border: none;
   height: 100%;
   width: 100%;
 }
+._PuckPreview-frame_zbic3_6[data-puck-outline-dragging] {
+  pointer-events: none;
+}
 
-/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
-._LayerTree_1vltj_1 {
-  color: var(--puck-outline-color-text, var(--puck-color-text-secondary));
-  font-family: var(--puck-font-family);
-  font-size: var(--puck-outline-font-size, var(--puck-font-size-xxs));
-  margin: 0;
-  position: relative;
-  list-style: none;
-  padding: 0;
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/drop-line/styles.module.css/#css-module-data */
+._DropLine_eyz3q_2 {
+  background: var(--_puck-outline-color-drop-indicator);
+  border-radius: calc(var(--_puck-outline-drop-indicator-size) / 2);
+  height: var(--_puck-outline-drop-indicator-size);
+  inset-inline: 0;
+  pointer-events: none;
+  position: absolute;
+  z-index: 1;
 }
-._LayerTree-zoneTitle_1vltj_11 {
-  color: var(--puck-outline-zone-color-text, var(--puck-color-text-muted));
-  font-size: var(--puck-outline-zone-font-size, var(--puck-font-size-xxxs));
-  text-transform: uppercase;
+._DropLine--top_eyz3q_12 {
+  top: 0;
 }
-._LayerTree-helper_1vltj_17 {
-  text-align: center;
-  color: var(--puck-color-text-subtle);
-  margin: var(--puck-space-2) var(--puck-space-1);
+._DropLine--bottom_eyz3q_16 {
+  bottom: 0;
 }
-._Layer_1vltj_1 {
+._DropLine--top_eyz3q_12._DropLine--outset_eyz3q_20 {
+  top: calc(-1 * var(--_puck-outline-drop-indicator-size));
+}
+._DropLine--bottom_eyz3q_16._DropLine--outset_eyz3q_20 {
+  bottom: calc(-1 * var(--_puck-outline-drop-indicator-size));
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/empty-zone-placeholder/styles.module.css/#css-module-data */
+._LayerTree-helper_1niov_2 {
+  color: var(--puck-outline-color-text-helper, var(--puck-color-text-subtle));
+  padding-top: var(--puck-space-1);
+  padding-bottom: var(--puck-space-1);
+  padding-inline-start: var(--_puck-outline-label-indent);
+  border: var(--_puck-outline-border-width) solid transparent;
+}
+._LayerTree-helper_1niov_2[data-puck-drop-target] {
+  position: relative;
+  overflow: visible;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer/styles.module.css/#css-module-data */
+._Layer_1o110_1 {
   position: relative;
-  border: var(--puck-outline-border-width, var(--puck-border-width-regular)) solid transparent;
-  border-radius: var(--puck-outline-radius, var(--puck-radius-m));
+  border: var(--_puck-outline-border-width) solid transparent;
+  border-radius: var(--_puck-outline-radius);
 }
-._Layer-inner_1vltj_30 {
-  border: var(--puck-outline-border-width, var(--puck-border-width-regular)) solid transparent;
-  border-radius: var(--puck-outline-radius, var(--puck-radius-m));
+._Layer-inner_1o110_8 {
+  align-items: center;
+  border: var(--_puck-outline-border-width) solid transparent;
+  border-radius: var(--_puck-outline-radius);
+  cursor: pointer;
+  display: flex;
+  position: relative;
   transition: color var(--puck-duration-fast) var(--puck-ease-exit);
 }
-._Layer--containsZone_1vltj_37 > ._Layer-inner_1vltj_30 {
-  padding-inline-start: 0;
+._Layer--isSortable_1o110_18 > ._Layer-inner_1o110_8 {
+  cursor: grab;
+}
+._Layer-content_1o110_22 {
+  display: flex;
+  gap: var(--puck-space-4);
+  flex: 1 1 auto;
+  min-width: 0;
 }
-._Layer-clickable_1vltj_41 {
+._Layer-clickable_1o110_29 {
   align-items: center;
   background: none;
   border: 0;
-  border-radius: var(--puck-outline-radius, var(--puck-radius-m));
+  border-radius: var(--_puck-outline-radius);
   color: inherit;
-  cursor: pointer;
+  cursor: inherit;
   display: flex;
+  flex: 1 1 auto;
   font: inherit;
-  padding-inline-start: var(--puck-space-3);
-  padding-inline-end: var(--puck-space-1);
-  width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+[data-puck-dnd-disabled] ._Layer-inner_1o110_8,
+[data-puck-dnd-disabled] ._Layer-clickable_1o110_29 {
+  cursor: pointer;
 }
-._Layer-clickable_1vltj_41:focus-visible {
+._Layer-clickable_1o110_29:focus-visible {
   outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);
   outline-offset: var(--puck-border-width-focus);
   position: relative;
   z-index: 1;
 }
+._Layer-caret_1o110_57 {
+  visibility: hidden;
+  display: flex;
+  flex-shrink: 0;
+}
+._Layer-caret_1o110_57 svg {
+  height: var(--_puck-outline-caret-size);
+  width: var(--_puck-outline-caret-size);
+}
+._Layer--containsZone_1o110_68 > ._Layer-inner_1o110_8 > ._Layer-content_1o110_22 {
+  font-weight: var(--puck-font-weight-bold);
+}
+._Layer--containsZone_1o110_68 > ._Layer-inner_1o110_8 > ._Layer-caret_1o110_57 {
+  visibility: visible;
+}
+._Layer-title_1o110_76 {
+  display: flex;
+  gap: var(--puck-space-2);
+  align-items: center;
+  overflow-x: hidden;
+  margin: var(--puck-space-1);
+  cursor: pointer;
+}
+._Layer-name_1o110_85 {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+._Layer-icon_1o110_91 {
+  color: var(--puck-outline-color-icon, var(--puck-color-text-subtle));
+  margin-top: var(--puck-space-1);
+}
+._Layer-icon_1o110_91 svg {
+  height: var(--_puck-outline-icon-size);
+  width: var(--_puck-outline-icon-size);
+}
+._Layer-zones_1o110_101 {
+  display: none;
+  margin-inline-start: var(--puck-outline-space-indent, var(--puck-space-4));
+}
+._Layer--isExpanded_1o110_106 > ._Layer-zones_1o110_101 {
+  display: block;
+}
+._Layer--isExpanded_1o110_106 > ._Layer-inner_1o110_8 > ._Layer-caret_1o110_57 svg {
+  transform: rotate(90deg);
+}
 @media (hover: hover) and (pointer: fine) {
-  ._Layer_1vltj_1:not(._Layer--isSelected_1vltj_63) > ._Layer-inner_1vltj_30:hover {
-    border-color: var( --puck-outline-color-border-hover, var(--puck-color-interactive-subtle) );
-    background: var( --puck-outline-color-bg-hover, var(--puck-color-interactive-soft) );
-    color: var(--puck-outline-color-text-hover, var(--puck-color-interactive));
+  ._Layer_1o110_1:not(._Layer--isSelected_1o110_115) > ._Layer-inner_1o110_8:hover {
+    --_puck-outline-actions-color-bg: var(--_puck-outline-color-bg-hover);
+    border-color: var(--_puck-outline-color-border-hover);
+    background: var(--_puck-outline-color-bg-hover);
     transition: none;
   }
 }
-._Layer--isSelected_1vltj_63 {
+._Layer--isSelected_1o110_115 {
   border-color: var( --puck-outline-color-border-selected, var(--puck-color-selection-border) );
 }
-._Layer--isSelected_1vltj_63 > ._Layer-inner_1vltj_30 {
-  background: var( --puck-outline-color-bg-selected, var(--puck-color-interactive-subtle) );
+._Layer--isSelected_1o110_115 > ._Layer-inner_1o110_8 {
+  --_puck-outline-actions-color-bg: var(--_puck-outline-color-bg-selected);
+  background: var(--_puck-outline-color-bg-selected);
 }
-._Layer--isSelected_1vltj_63 > ._Layer-inner_1vltj_30 > ._Layer-clickable_1vltj_41 > ._Layer-chevron_1vltj_91,
-._Layer--childIsSelected_1vltj_92 > ._Layer-inner_1vltj_30 > ._Layer-clickable_1vltj_41 > ._Layer-chevron_1vltj_91 {
-  transform: scaleY(-1);
+._Layer--isExpandCandidate_1o110_138 > ._Layer-inner_1o110_8 {
+  border-color: var(--_puck-outline-color-border-hover);
+  background: var(--_puck-outline-color-bg-hover);
 }
-._Layer-zones_1vltj_96 {
-  display: none;
-  margin-inline-start: var(--puck-space-3);
+._Layer--isDragSource_1o110_143 > ._Layer-inner_1o110_8 {
+  color: var(--puck-color-text-muted);
+  background: transparent;
 }
-._Layer--isSelected_1vltj_63 > ._Layer-zones_1vltj_96,
-._Layer--childIsSelected_1vltj_92 > ._Layer-zones_1vltj_96 {
-  display: block;
+._Layer--isDragSource_1o110_143 > ._Layer-zones_1o110_101 {
+  opacity: 0.5;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer-actions/styles.module.css/#css-module-data */
+._LayerActions_1m5z5_2 {
+  position: sticky;
+  inset-inline-end: calc(var(--puck-space-1) * -1);
+  padding-inline: var(--puck-space-1);
+  display: flex;
+  visibility: hidden;
+  flex-shrink: 0;
+  gap: var(--puck-space-1);
+  color: var(--_puck-outline-color-text);
+  background: var(--_puck-outline-actions-color-bg);
+}
+._LayerActions--visible_1m5z5_17 {
+  visibility: visible;
+}
+._LayerActions_1m5z5_2 svg {
+  height: var(--_puck-outline-caret-size);
+  width: var(--_puck-outline-caret-size);
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer-tree-items/styles.module.css/#css-module-data */
+._LayerTree_o5tyt_1 {
+  color: var(--_puck-outline-color-text);
+  font-family: var(--puck-outline-font-family, var(--puck-font-family));
+  font-size: var(--puck-outline-font-size, var(--puck-font-size-xxxs));
+  margin: 0;
+  position: relative;
+  list-style: none;
+  padding: 0;
 }
-._Layer-zones_1vltj_96 > ._LayerTree_1vltj_1 {
-  margin-inline-start: var(--puck-space-3);
+._LayerTree--nested_o5tyt_12 {
+  margin-inline-start: var(--puck-outline-space-indent, var(--puck-space-3));
 }
-._Layer-title_1vltj_110,
-._LayerTree-zoneTitle_1vltj_11 {
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/components/layer-tree-zone/styles.module.css/#css-module-data */
+._LayerTree-zoneTitle_fvhlh_2 {
+  color: var(--_puck-outline-zone-color-text);
+  font-size: var( --puck-outline-zone-font-size, calc(var(--puck-font-size-xxxs) * 0.9) );
   display: flex;
   gap: var(--puck-space-2);
   align-items: center;
-  margin: var(--puck-space-2) var(--puck-space-1);
-  overflow-x: hidden;
-}
-._Layer-name_1vltj_119 {
   overflow-x: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  padding-top: var(--puck-space-1);
+  padding-bottom: var(--puck-space-1);
+  padding-inline-start: var(--_puck-outline-label-indent);
+  border: var(--_puck-outline-border-width) solid transparent;
 }
-._Layer-icon_1vltj_125 {
-  color: var(--puck-outline-color-icon, var(--puck-color-highlight));
+._LayerTree-zoneIcon_fvhlh_19 {
   margin-top: var(--puck-space-1);
 }
-._Layer-zoneIcon_1vltj_130 {
-  color: var(--puck-outline-zone-color-text, var(--puck-color-text-muted));
-  margin-top: var(--puck-space-1);
+._LayerTree-zoneIcon_fvhlh_19 svg {
+  height: var(--_puck-outline-icon-size);
+  width: var(--_puck-outline-icon-size);
+}
+._LayerTree-zoneTitle_fvhlh_2[data-puck-drop-target] {
+  color: var(--_puck-outline-color-text-hover);
+  position: relative;
+  overflow: visible;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/LayerTree/styles.module.css/#css-module-data */
+._LayerTreeRoot_kxnd1_1 {
+  min-width: max-content;
+  --_puck-iconbutton-color-bg-hover: transparent;
+  --_puck-outline-color-text: var( --puck-outline-color-text, var(--puck-color-text-secondary) );
+  --_puck-outline-border-width: var( --puck-outline-border-width, var(--puck-border-width-regular) );
+  --_puck-outline-radius: var(--puck-outline-radius, var(--puck-radius-m));
+  --_puck-outline-caret-size: var( --puck-outline-action-size, var(--puck-icon-size-s) );
+  --_puck-outline-icon-size: var( --puck-outline-icon-size, var(--puck-icon-size-xs) );
+  --_puck-outline-color-bg-selected: var( --puck-outline-color-bg-selected, var(--puck-color-interactive-subtle) );
+  --_puck-outline-color-bg-hover: var( --puck-outline-color-bg-hover, var(--puck-color-interactive-soft) );
+  --_puck-outline-color-border-hover: var( --puck-outline-color-border-hover, var(--puck-color-interactive-subtle) );
+  --_puck-outline-color-text-hover: var( --puck-outline-color-text-hover, var(--puck-color-interactive) );
+  --_puck-outline-color-drop-indicator: var( --puck-outline-color-drop-indicator, var(--puck-color-insertion-indicator) );
+  --_puck-outline-drop-indicator-size: var(--puck-border-width-focus);
+  --_puck-outline-zone-color-text: var( --puck-outline-zone-color-text, var(--puck-color-text-muted) );
+  --_puck-outline-actions-color-bg: transparent;
+  --_puck-outline-caret-slot: calc( var(--_puck-outline-caret-size) + var(--puck-iconbutton-space, var(--puck-space-1)) * 2 );
+  --_puck-outline-label-indent: calc( var(--_puck-outline-caret-slot) + var(--puck-space-1) + var(--_puck-outline-border-width) );
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/components/collapse-all/styles.module.css/#css-module-data */
+._CollapseAll_1r4cy_1 {
+  visibility: hidden;
+}
+._CollapseAll-icon_1r4cy_5 {
+  height: var(--puck-icon-size-m);
+  width: var(--puck-icon-size-m);
+}
+._CollapseAll--visible_1r4cy_10 {
+  visibility: visible;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/components/outline-header/styles.module.css/#css-module-data */
+._OutlineHeader_filq3_1 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--puck-space-2);
+  padding-block: var(--puck-space-3);
+  padding-inline: var(--puck-space-4);
+  border-bottom: var(--puck-border-width-regular) solid var(--puck-color-border);
+  box-sizing: border-box;
+}
+._OutlineHeader-title_filq3_12 {
+  color: var(--puck-color-text-secondary);
+  font-size: var(--puck-font-size-xs);
+  font-weight: var(--puck-font-weight-regular);
+  line-height: var(--puck-line-height-m);
+  margin: 0;
+}
+
+/* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css/#css-module-data */
+._OutlineWrapper_b9ln0_1 {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+}
+._OutlineWrapper-collapseAll_b9ln0_9 {
+  display: flex;
+  align-items: center;
+  margin-inline-start: auto;
+}
+._OutlineWrapper-layers_b9ln0_15 {
+  flex-grow: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: var(--puck-space-1);
+  box-sizing: border-box;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
-._Puck_mr27u_19 {
+._Puck_tzaxg_19 {
   font-family: var(--puck-font-family);
   overflow-x: hidden;
   visibility: visible !important;
 }
 @media (min-width: 766px) {
-  ._Puck_mr27u_19 {
+  ._Puck_tzaxg_19 {
     overflow-x: auto;
   }
 }
-._Puck-portal_mr27u_31 {
+._Puck-portal_tzaxg_31 {
   position: relative;
   z-index: 2;
 }
-._PuckLayout_mr27u_36 {
+._PuckLayout_tzaxg_36 {
   height: 100dvh;
 }
-._PuckLayout-inner_mr27u_40 {
+._PuckLayout-inner_tzaxg_40 {
   --puck-frame-width: auto;
   --puck-pluginbar-width: min-content;
   --puck-sidebar-width: 0px;
@@ -8485,92 +9658,92 @@ body:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout-inner_tzaxg_40 {
     --puck-pluginbar-width: 68px;
     grid-template-areas: "header header header header" "sidenav left editor right";
     grid-template-columns: var(--puck-pluginbar-width) 0 var(--puck-frame-width) 0;
     grid-template-rows: min-content auto;
   }
-  ._Puck--hidePlugins_mr27u_73 ._PuckLayout-inner_mr27u_40 {
+  ._Puck--hidePlugins_tzaxg_73 ._PuckLayout-inner_tzaxg_40 {
     --puck-pluginbar-width: 0;
   }
 }
-._PuckLayout--mounted_mr27u_78 ._PuckLayout-inner_mr27u_40 {
+._PuckLayout--mounted_tzaxg_78 ._PuckLayout-inner_tzaxg_40 {
   --puck-sidebar-width: 186px;
 }
-._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40 {
+._PuckLayout--mobilePanelHeightToggle_tzaxg_82._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-inner_tzaxg_40 {
   grid-template-rows: 0 auto 30% 0 var(--puck-pluginbar-width);
   transition: grid-template-rows var(--puck-duration-medium) var(--puck-ease-entrance);
 }
-._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40 {
+._PuckLayout--mobilePanelHeightToggle_tzaxg_82._PuckLayout--leftSideBarVisible_tzaxg_82._PuckLayout--isExpanded_tzaxg_90 ._PuckLayout-inner_tzaxg_40 {
   grid-template-rows: 0 auto 55% 0 var(--puck-pluginbar-width);
   transition: grid-template-rows var(--puck-duration-medium) var(--puck-ease-entrance);
 }
 @media (min-width: 638px) {
-  ._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout--mobilePanelHeightToggle_tzaxg_82._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-inner_tzaxg_40 {
     grid-template-columns: var(--puck-pluginbar-width) var(--puck-sidebar-left-width) var( --puck-frame-width ) 0;
     grid-template-rows: min-content auto;
   }
 }
-._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40,
-._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40 {
+._PuckLayout--mobilePanelHeightMinContent_tzaxg_110._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-inner_tzaxg_40,
+._PuckLayout--mobilePanelHeightMinContent_tzaxg_110._PuckLayout--leftSideBarVisible_tzaxg_82._PuckLayout--isExpanded_tzaxg_90 ._PuckLayout-inner_tzaxg_40 {
   grid-template-rows: 0 auto min-content 0 var(--puck-pluginbar-width);
 }
 @media (min-width: 638px) {
-  ._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40,
-  ._PuckLayout--mobilePanelHeightToggle_mr27u_82._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40,
-  ._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-inner_mr27u_40,
-  ._PuckLayout--mobilePanelHeightMinContent_mr27u_110._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--isExpanded_mr27u_90 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout--mobilePanelHeightToggle_tzaxg_82._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-inner_tzaxg_40,
+  ._PuckLayout--mobilePanelHeightToggle_tzaxg_82._PuckLayout--leftSideBarVisible_tzaxg_82._PuckLayout--isExpanded_tzaxg_90 ._PuckLayout-inner_tzaxg_40,
+  ._PuckLayout--mobilePanelHeightMinContent_tzaxg_110._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-inner_tzaxg_40,
+  ._PuckLayout--mobilePanelHeightMinContent_tzaxg_110._PuckLayout--leftSideBarVisible_tzaxg_82._PuckLayout--isExpanded_tzaxg_90 ._PuckLayout-inner_tzaxg_40 {
     grid-template-columns: var(--puck-pluginbar-width) var(--puck-sidebar-left-width) var( --puck-frame-width ) 0;
     grid-template-rows: min-content auto;
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout--rightSideBarVisible_mr27u_137 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout--rightSideBarVisible_tzaxg_137 ._PuckLayout-inner_tzaxg_40 {
     grid-template-columns: var(--puck-pluginbar-width) 0 var(--puck-frame-width) var(--puck-sidebar-right-width);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout--leftSideBarVisible_mr27u_82._PuckLayout--rightSideBarVisible_mr27u_137 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout--leftSideBarVisible_tzaxg_82._PuckLayout--rightSideBarVisible_tzaxg_137 ._PuckLayout-inner_tzaxg_40 {
     grid-template-columns: var(--puck-pluginbar-width) var(--puck-sidebar-left-width) var( --puck-frame-width ) var(--puck-sidebar-right-width);
   }
 }
 @media (min-width: 458px) {
-  ._PuckLayout-mounted_mr27u_156 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout-mounted_tzaxg_156 ._PuckLayout-inner_tzaxg_40 {
     --puck-frame-width: minmax(266px, auto);
   }
 }
 @media (min-width: 638px) {
-  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout_tzaxg_36 ._PuckLayout-inner_tzaxg_40 {
     --puck-sidebar-width: minmax(186px, 250px);
   }
 }
 @media (min-width: 766px) {
-  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout_tzaxg_36 ._PuckLayout-inner_tzaxg_40 {
     --puck-frame-width: auto;
   }
 }
 @media (min-width: 990px) {
-  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout_tzaxg_36 ._PuckLayout-inner_tzaxg_40 {
     --puck-sidebar-width: 256px;
   }
 }
 @media (min-width: 1198px) {
-  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout_tzaxg_36 ._PuckLayout-inner_tzaxg_40 {
     --puck-sidebar-width: 274px;
   }
 }
 @media (min-width: 1398px) {
-  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout_tzaxg_36 ._PuckLayout-inner_tzaxg_40 {
     --puck-sidebar-width: 290px;
   }
 }
 @media (min-width: 1598px) {
-  ._PuckLayout_mr27u_36 ._PuckLayout-inner_mr27u_40 {
+  ._PuckLayout_tzaxg_36 ._PuckLayout-inner_tzaxg_40 {
     --puck-sidebar-width: 320px;
   }
 }
-._PuckLayout-nav_mr27u_197 {
+._PuckLayout-nav_tzaxg_197 {
   border-top: var(--puck-border-width-regular) solid var(--puck-color-border);
   background-color: var( --puck-pluginbar-color-bg, var(--puck-color-surface-subtle) );
   grid-area: sidenav;
@@ -8578,35 +9751,39 @@ body:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {
   width: 100%;
 }
 @media (min-width: 638px) {
-  ._PuckLayout-nav_mr27u_197 {
+  ._PuckLayout-nav_tzaxg_197 {
     border-top: 0;
     border-right: var(--puck-border-width-regular) solid var(--puck-color-border);
     box-sizing: border-box;
   }
 }
-._PuckLayout-header_mr27u_217 {
+._PuckLayout-header_tzaxg_217 {
   grid-area: header;
 }
-._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-header_mr27u_217 {
+._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-header_tzaxg_217 {
   overflow: hidden;
 }
 @media (min-width: 638px) {
-  ._PuckLayout--leftSideBarVisible_mr27u_82 ._PuckLayout-header_mr27u_217 {
+  ._PuckLayout--leftSideBarVisible_tzaxg_82 ._PuckLayout-header_tzaxg_217 {
     overflow: auto;
   }
 }
-._PuckPluginTab_mr27u_231 {
+._PuckPluginTab_tzaxg_231 {
   display: none;
   flex-grow: 1;
   max-height: 100%;
 }
-._PuckPluginTab--visible_mr27u_237 {
+._PuckPluginTab--visible_tzaxg_237 {
   display: flex;
   flex-direction: column;
+  min-height: 0;
 }
-._PuckPluginTab-body_mr27u_242 {
+._PuckPluginTab-body_tzaxg_243 {
+  display: flex;
+  flex-direction: column;
   flex-grow: 1;
   max-height: 100%;
+  min-height: 0;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
@@ -9247,11 +10424,13 @@ body:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/plugins/outline/styles.module.css/#css-module-data */
-._OutlinePlugin_16k03_1 {
-  padding: var(--puck-space-4);
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
+._OutlinePlugin_1ylsc_1 {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  min-height: 0;
+  min-width: 0;
+  position: relative;
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/plugins/fields/styles.module.css/#css-module-data */
@@ -9273,7 +10452,7 @@ body:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {
     padding: var(--puck-space-4);
   }
 }`;
-var iframeInteractionStyles = '/* styles/color.css */\n@layer puck-tokens {\n  :root {\n    --puck-color-rose-01: #4a001c;\n    --puck-color-rose-02: #670833;\n    --puck-color-rose-03: #87114c;\n    --puck-color-rose-04: #a81a66;\n    --puck-color-rose-05: #bc5089;\n    --puck-color-rose-06: #cc7ca5;\n    --puck-color-rose-07: #d89aba;\n    --puck-color-rose-08: #e3b8cf;\n    --puck-color-rose-09: #efd6e3;\n    --puck-color-rose-10: #f6eaf1;\n    --puck-color-rose-11: #faf4f8;\n    --puck-color-rose-12: #fef8fc;\n    --puck-color-azure-01: #00175d;\n    --puck-color-azure-02: #002c77;\n    --puck-color-azure-03: #014292;\n    --puck-color-azure-04: #0158ad;\n    --puck-color-azure-05: #3479be;\n    --puck-color-azure-06: #6499cf;\n    --puck-color-azure-07: #88b0da;\n    --puck-color-azure-08: #abc7e5;\n    --puck-color-azure-09: #cfdff0;\n    --puck-color-azure-10: #e7eef7;\n    --puck-color-azure-11: #f3f6fb;\n    --puck-color-azure-12: #f7faff;\n    --puck-color-green-01: #002000;\n    --puck-color-green-02: #043604;\n    --puck-color-green-03: #084e08;\n    --puck-color-green-04: #0c680c;\n    --puck-color-green-05: #1d882f;\n    --puck-color-green-06: #2faa53;\n    --puck-color-green-07: #56c16f;\n    --puck-color-green-08: #7dd78b;\n    --puck-color-green-09: #b8e8bf;\n    --puck-color-green-10: #ddf3e0;\n    --puck-color-green-11: #eff8f0;\n    --puck-color-green-12: #f3fcf4;\n    --puck-color-yellow-01: #211000;\n    --puck-color-yellow-02: #362700;\n    --puck-color-yellow-03: #4c4000;\n    --puck-color-yellow-04: #645a00;\n    --puck-color-yellow-05: #877614;\n    --puck-color-yellow-06: #ab9429;\n    --puck-color-yellow-07: #bfac4e;\n    --puck-color-yellow-08: #d4c474;\n    --puck-color-yellow-09: #e6deb1;\n    --puck-color-yellow-10: #f3efd9;\n    --puck-color-yellow-11: #f9f7ed;\n    --puck-color-yellow-12: #fcfaf0;\n    --puck-color-red-01: #4c0000;\n    --puck-color-red-02: #6a0a10;\n    --puck-color-red-03: #8a1422;\n    --puck-color-red-04: #ac1f35;\n    --puck-color-red-05: #bf5366;\n    --puck-color-red-06: #ce7e8e;\n    --puck-color-red-07: #d99ca8;\n    --puck-color-red-08: #e4b9c2;\n    --puck-color-red-09: #efd7db;\n    --puck-color-red-10: #f6eaec;\n    --puck-color-red-11: #faf4f5;\n    --puck-color-red-12: #fff9fa;\n    --puck-color-grey-01: #181818;\n    --puck-color-grey-02: #292929;\n    --puck-color-grey-03: #404040;\n    --puck-color-grey-04: #5a5a5a;\n    --puck-color-grey-05: #767676;\n    --puck-color-grey-06: #949494;\n    --puck-color-grey-07: #ababab;\n    --puck-color-grey-08: #c3c3c3;\n    --puck-color-grey-09: #dcdcdc;\n    --puck-color-grey-10: #efefef;\n    --puck-color-grey-11: #f5f5f5;\n    --puck-color-grey-12: #fafafa;\n    --puck-color-black: #000000;\n    --puck-color-white: #ffffff;\n  }\n}\n\n/* styles/tokens.css */\n@layer puck-tokens {\n  :root {\n    --puck-color-surface: var(--puck-color-white);\n    --puck-color-surface-muted: var(--puck-color-grey-11);\n    --puck-color-surface-subtle: var(--puck-color-grey-12);\n    --puck-color-surface-inverse: var(--puck-color-grey-01);\n    --puck-color-border: var(--puck-color-grey-09);\n    --puck-color-border-hover: var(--puck-color-grey-05);\n    --puck-color-border-muted: var(--puck-color-grey-10);\n    --puck-color-border-inverse: var(--puck-color-grey-05);\n    --puck-color-text: var(--puck-color-black);\n    --puck-color-text-secondary: var(--puck-color-grey-04);\n    --puck-color-text-muted: var(--puck-color-grey-05);\n    --puck-color-text-subtle: var(--puck-color-grey-07);\n    --puck-color-text-inverse: var(--puck-color-white);\n    --puck-opacity-text-inverse: 0.75;\n    --puck-color-interactive: var(--puck-color-azure-04);\n    --puck-color-interactive-hover: var(--puck-color-azure-03);\n    --puck-color-interactive-active: var(--puck-color-azure-02);\n    --puck-color-interactive-subtle: var(--puck-color-azure-10);\n    --puck-color-interactive-soft: var(--puck-color-azure-11);\n    --puck-color-interactive-soft-hover: var(--puck-color-azure-12);\n    --puck-color-interactive-neutral-hover: var(--puck-color-grey-10);\n    --puck-color-interactive-inverse-hover: var(--puck-color-azure-06);\n    --puck-color-interactive-inverse-active: var(--puck-color-azure-07);\n    --puck-color-focus-ring: var(--puck-color-azure-05);\n    --puck-color-selection-bg: color-mix( in srgb, var(--puck-color-azure-09) 30%, transparent );\n    --puck-color-selection-border: var(--puck-color-azure-08);\n    --puck-color-highlight: var(--puck-color-rose-07);\n    --puck-color-bg-disabled: var(--puck-color-grey-07);\n    --puck-color-text-disabled: var(--puck-color-grey-03);\n    --puck-color-overlay-backdrop: color-mix( in srgb, var(--puck-color-black) 75%, transparent );\n    --puck-space-1: 4px;\n    --puck-space-2: 8px;\n    --puck-space-3: 12px;\n    --puck-space-4: 16px;\n    --puck-space-5: 24px;\n    --puck-space-chrome-gutter: var(--puck-space-4);\n    --puck-radius-none: 0;\n    --puck-radius-xs: 2px;\n    --puck-radius-s: 3px;\n    --puck-radius-m: 4px;\n    --puck-radius-l: 8px;\n    --puck-radius-pill: 30px;\n    --puck-radius-round: 100%;\n    --puck-border-width-hairline: 0.5px;\n    --puck-border-width-regular: 1px;\n    --puck-border-width-focus: 2px;\n    --puck-border-width-strong: 4px;\n    --puck-duration-fast: 50ms;\n    --puck-duration-medium: 150ms;\n    --puck-duration-slow: 250ms;\n    --puck-ease-exit: ease-in;\n    --puck-ease-emphasized: ease-in-out;\n    --puck-ease-entrance: ease-out;\n    --puck-font-weight-regular: 400;\n    --puck-font-weight-medium: 500;\n    --puck-font-weight-semibold: 600;\n    --puck-font-weight-bold: 700;\n    --puck-font-weight-heavy: 800;\n    --puck-letter-spacing-ui: 0.05ch;\n    --puck-letter-spacing-heading: 0.08ch;\n    --puck-icon-size-s: 16px;\n    --puck-icon-size-m: 18px;\n    --puck-icon-size-l: 24px;\n    --puck-space-m-unitless: 24;\n    --puck-user-sidebar-left-width: var(--puck-sidebar-width);\n    --puck-user-sidebar-right-width: var(--puck-sidebar-width);\n    --puck-slot-min-empty-height: 128px;\n  }\n}\n\n/* styles/typography.css */\n@layer puck-tokens {\n  :root {\n    --puck-font-size-scale-base-unitless: 12;\n    --puck-font-size-xxxs-unitless: 12;\n    --puck-font-size-xxs-unitless: 14;\n    --puck-font-size-xs-unitless: 16;\n    --puck-font-size-s-unitless: 18;\n    --puck-font-size-m-unitless: 21;\n    --puck-font-size-l-unitless: 24;\n    --puck-font-size-xl-unitless: 28;\n    --puck-font-size-xxl-unitless: 36;\n    --puck-font-size-xxxl-unitless: 48;\n    --puck-font-size-xxxxl-unitless: 56;\n    --puck-font-size-xxxs: calc( 1rem * var(--puck-font-size-xxxs-unitless) / 16 );\n    --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);\n    --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);\n    --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);\n    --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);\n    --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);\n    --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);\n    --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);\n    --puck-font-size-xxxl: calc( 1rem * var(--puck-font-size-xxxl-unitless) / 16 );\n    --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );\n    --puck-font-size-base: var(--puck-font-size-xs);\n    --puck-line-height-reset: 1;\n    --puck-line-height-xs: calc( var(--puck-space-m-unitless) / var(--puck-font-size-m-unitless) );\n    --puck-line-height-s: calc( var(--puck-space-m-unitless) / var(--puck-font-size-s-unitless) );\n    --puck-line-height-m: calc( var(--puck-space-m-unitless) / var(--puck-font-size-xs-unitless) );\n    --puck-line-height-l: calc( var(--puck-space-m-unitless) / var(--puck-font-size-xxs-unitless) );\n    --puck-line-height-xl: calc( var(--puck-space-m-unitless) / var(--puck-font-size-scale-base-unitless) );\n    --puck-line-height-base: var(--puck-line-height-m);\n    --puck-fallback-font-stack:\n      -apple-system,\n      BlinkMacSystemFont,\n      Segoe UI,\n      Helvetica Neue,\n      sans-serif,\n      Apple Color Emoji,\n      Segoe UI Emoji,\n      Segoe UI Symbol;\n    --puck-font-family: Inter, var(--puck-fallback-font-stack);\n    --puck-font-family-monospaced:\n      ui-monospace,\n      "Cascadia Code",\n      "Source Code Pro",\n      Menlo,\n      Consolas,\n      "DejaVu Sans Mono",\n      monospace;\n  }\n  @supports (font-variation-settings: normal) {\n    :root {\n      --puck-font-family: InterVariable, var(--puck-fallback-font-stack);\n    }\n  }\n}\n\n/* bundle/core.css */\n:root {\n  --_puck-styles-loaded: "true";\n}\n#frame-root {\n  height: 1px;\n  min-height: 100vh;\n}\n[data-puck-entry] {\n  position: relative;\n  z-index: 0;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */\n._ActionBar_5vdfr_1 {\n  align-items: center;\n  cursor: default;\n  display: flex;\n  width: auto;\n  padding-top: var(--puck-actionbar-space-y, var(--puck-space-1));\n  padding-bottom: var(--puck-actionbar-space-y, var(--puck-space-1));\n  padding-inline-start: var(--puck-actionbar-space-x, 0);\n  padding-inline-end: var(--puck-actionbar-space-x, 0);\n  border-radius: var(--puck-actionbar-radius, var(--puck-radius-l));\n  background: var(--puck-actionbar-color-bg, var(--puck-color-surface-inverse));\n  color: var(--puck-color-text-inverse);\n  font-family: var(--puck-font-family);\n  min-height: 26px;\n}\n._ActionBar-label_5vdfr_17 {\n  color: var(--puck-actionbar-color-text, var(--puck-color-text-inverse));\n  font-size: var(--puck-actionbar-font-size, var(--puck-font-size-xxxs));\n  opacity: var(--puck-actionbar-opacity-text, var(--puck-opacity-text-inverse));\n  font-weight: var(--puck-font-weight-medium);\n  padding-inline-start: var(--puck-space-2);\n  padding-inline-end: var(--puck-space-2);\n  margin-inline-start: var(--puck-space-1);\n  margin-inline-end: var(--puck-space-1);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n._ActionBarAction_5vdfr_30 + ._ActionBar-label_5vdfr_17 {\n  padding-inline-start: 0;\n}\n._ActionBar-label_5vdfr_17 + ._ActionBarAction_5vdfr_30 {\n  margin-inline-start: calc(var(--puck-space-1) * -1);\n}\n._ActionBar-group_5vdfr_38 {\n  align-items: center;\n  border-inline-start: var(--puck-border-width-hairline) solid var(--puck-actionbar-color-separator, var(--puck-color-border-inverse));\n  display: flex;\n  height: 100%;\n  padding-inline-start: var(--puck-space-1);\n  padding-inline-end: var(--puck-space-1);\n}\n._ActionBar-group_5vdfr_38:first-of-type {\n  border-inline-start: 0;\n}\n._ActionBar-group_5vdfr_38:empty {\n  display: none;\n}\n._ActionBarAction_5vdfr_30 {\n  background: transparent;\n  border: none;\n  color: var(--puck-actionbar-color-text, var(--puck-color-text-inverse));\n  cursor: pointer;\n  padding: var(--puck-actionbar-action-space, 6px);\n  margin-inline-start: var(--puck-space-1);\n  margin-inline-end: var(--puck-space-1);\n  border-radius: var(--puck-radius-m);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: var(--puck-actionbar-opacity-text, var(--puck-opacity-text-inverse));\n  transition: color var(--puck-duration-fast) var(--puck-ease-exit), opacity var(--puck-duration-fast) var(--puck-ease-exit);\n}\n._ActionBarAction--disabled_5vdfr_74 {\n  cursor: auto;\n  color: var( --puck-actionbar-color-action-disabled, var(--puck-color-text-inverse) );\n  opacity: var(--puck-actionbar-opacity-action-disabled, 0.54);\n}\n._ActionBarAction_5vdfr_30 svg {\n  max-width: none !important;\n}\n._ActionBarAction_5vdfr_30:focus-visible {\n  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);\n  outline-offset: calc(var(--puck-border-width-focus) * -1);\n}\n@media (hover: hover) and (pointer: fine) {\n  ._ActionBarAction_5vdfr_30:hover:not(._ActionBarAction--disabled_5vdfr_74) {\n    color: var( --puck-actionbar-color-action-hover, var(--puck-color-interactive-inverse-hover) );\n    opacity: 1;\n    transition: none;\n  }\n}\n._ActionBarAction_5vdfr_30:active:not(._ActionBarAction--disabled_5vdfr_74),\n._ActionBarAction--active_5vdfr_104 {\n  color: var( --puck-actionbar-color-action-active, var(--puck-color-interactive-inverse-active) );\n  opacity: 1;\n  transition: none;\n}\n._ActionBar-group_5vdfr_38 * {\n  margin: 0;\n}\n._ActionBar-separator_5vdfr_117 {\n  background: var( --puck-actionbar-color-separator, var(--puck-color-border-inverse) );\n  margin-inline: var(--puck-space-1);\n  width: var( --puck-border-width-hairline );\n  height: 100%;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */\n._DraggableComponent_1627v_1 {\n  position: absolute;\n  pointer-events: none;\n}\n._DraggableComponent-overlayWrapper_1627v_6 {\n  height: 100%;\n  width: 100%;\n  top: 0;\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n._DraggableComponent-overlay_1627v_6 {\n  cursor: pointer;\n  height: 100%;\n  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var( --puck-slot-component-color-overlay-border, var(--puck-color-selection-border) ) solid;\n  outline-offset: calc(var(--puck-slot-component-border-width, var(--puck-border-width-focus)) * -1);\n  width: 100%;\n}\n._DraggableComponent_1627v_1:focus-visible > ._DraggableComponent-overlayWrapper_1627v_6 {\n  outline: var(--puck-border-width-regular) solid var(--puck-color-focus-ring);\n}\n._DraggableComponent-loadingOverlay_1627v_38 {\n  background: var(--puck-color-surface);\n  color: var(--puck-color-text);\n  border-radius: var(--puck-radius-m);\n  display: flex;\n  padding: var(--puck-space-2);\n  top: var(--puck-space-2);\n  right: var(--puck-space-2);\n  position: absolute;\n  z-index: 1;\n  pointer-events: all;\n  box-sizing: border-box;\n  opacity: 0.8;\n  z-index: 1;\n}\n._DraggableComponent--hover_1627v_54 > ._DraggableComponent-overlayWrapper_1627v_6 > ._DraggableComponent-overlay_1627v_6 {\n  background: var( --puck-slot-component-color-overlay, var(--puck-color-selection-bg) );\n  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var( --puck-slot-component-color-overlay-border, var(--puck-color-selection-border) ) solid;\n}\n._DraggableComponent--isSelected_1627v_72 > ._DraggableComponent-overlayWrapper_1627v_6 > ._DraggableComponent-overlay_1627v_6 {\n  outline-color: var( --puck-slot-component-color-border-selected, var(--puck-color-selection-border) );\n}\n._DraggableComponent_1627v_1:has(._DraggableComponent--hover_1627v_54 > ._DraggableComponent-overlayWrapper_1627v_6) > ._DraggableComponent-overlayWrapper_1627v_6 {\n  display: none;\n}\n._DraggableComponent-actionsOverlay_1627v_89 {\n  position: sticky;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n._DraggableComponent--isSelected_1627v_72 ._DraggableComponent-actionsOverlay_1627v_89 {\n  opacity: 1;\n  pointer-events: auto;\n}\n._DraggableComponent-actions_1627v_89 {\n  position: absolute;\n  width: auto;\n  cursor: grab;\n  display: flex;\n  box-sizing: border-box;\n  transform-origin: right top;\n  min-height: 36px;\n}\n._DraggableComponent-actionsAction_1627v_111 {\n  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */\n._Drawer_1n90m_1 {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--puck-font-family);\n  gap: var(--puck-space-3);\n}\n._Drawer-draggable_1n90m_8 {\n  position: relative;\n}\n._Drawer-draggableBg_1n90m_12 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: -1;\n}\n._DrawerItem-draggable_1n90m_22 {\n  background: var(--puck-drawer-item-color-bg, var(--puck-color-surface));\n  color: var(--puck-drawer-item-color-text, var(--puck-color-text));\n  cursor: grab;\n  padding: var(--puck-drawer-item-space, var(--puck-space-3));\n  display: flex;\n  border: var(--puck-drawer-item-border-width, var(--puck-border-width-regular)) var(--puck-drawer-item-color-border, var(--puck-color-border)) solid;\n  border-radius: var(--puck-drawer-item-radius, var(--puck-radius-m));\n  font-size: var(--puck-drawer-item-font-size, var(--puck-font-size-xxs));\n  justify-content: space-between;\n  align-items: center;\n  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);\n}\n._DrawerItem--disabled_1n90m_38 ._DrawerItem-draggable_1n90m_22 {\n  background: var(--puck-color-surface-muted);\n  color: var(--puck-color-text-muted);\n  cursor: not-allowed;\n}\n._DrawerItem_1n90m_22:focus-visible {\n  outline: 0;\n}\n._Drawer_1n90m_1:not(._Drawer--isDraggingFrom_1n90m_48) ._DrawerItem_1n90m_22:focus-visible ._DrawerItem-draggable_1n90m_22 {\n  border-radius: var(--puck-radius-m);\n  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);\n  outline-offset: var(--puck-border-width-focus);\n}\n@media (hover: hover) and (pointer: fine) {\n  ._Drawer_1n90m_1:not(._Drawer--isDraggingFrom_1n90m_48) ._DrawerItem_1n90m_22:not(._DrawerItem--disabled_1n90m_38) ._DrawerItem-draggable_1n90m_22:hover {\n    background-color: var( --puck-drawer-item-color-bg-hover, var(--puck-color-interactive-soft-hover) );\n    color: var( --puck-drawer-item-color-text-hover, var(--puck-color-interactive) );\n    transition: none;\n  }\n}\n._DrawerItem-name_1n90m_72 {\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */\n._DropZone_ybznu_1 {\n  position: relative;\n  height: 100%;\n  min-height: var(--puck-slot-min-empty-height);\n  outline-offset: calc(var(--puck-slot-border-width, var(--puck-border-width-focus)) * -1);\n  width: 100%;\n}\n._DropZone--hasChildren_ybznu_11 {\n  min-height: 0;\n}\n._DropZone_ybznu_1:empty {\n  min-height: var(--puck-slot-min-empty-height);\n}\n[data-puck-entry]:not([data-puck-dragging]) ._DropZone_ybznu_1 {\n  transition: min-height var(--puck-duration-medium) var(--puck-ease-exit);\n}\n._DropZone--isAreaSelected_ybznu_24,\n._DropZone--hoveringOverArea_ybznu_25:not(._DropZone--isRootZone_ybznu_25) {\n  background: var(--puck-slot-color-bg, var(--puck-color-selection-bg));\n  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));\n}\n._DropZone_ybznu_1:empty {\n  background: var(--puck-slot-color-bg, var(--puck-color-selection-bg));\n  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));\n}\n._DropZone-item_ybznu_39 {\n  position: relative;\n}\n._DropZone-hitbox_ybznu_43 {\n  position: absolute;\n  bottom: calc(var(--puck-space-3) * -1);\n  height: var(--puck-space-5);\n  width: 100%;\n  z-index: 1;\n}\n[data-puck-dragging] ._DropZone--isEnabled_ybznu_51 {\n  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));\n}\n._DropZone_ybznu_1 > *:not([data-puck-component]) {\n  opacity: 0;\n}\nbody:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {\n  opacity: 0 !important;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */\n._InlineTextField_104qp_1 {\n  cursor: text;\n  display: inline-block;\n  white-space: pre-wrap;\n  text-decoration: inherit;\n}\n[data-dnd-dragging] ._InlineTextField_104qp_1 {\n  cursor: none;\n  caret-color: transparent;\n}\n[data-dnd-dragging] ._InlineTextField_104qp_1::selection {\n  display: none;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */\n@keyframes _loader-animation_1w5zn_1 {\n  0% {\n    transform: rotate(0deg) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) scale(0.8);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n}\n._Loader_1w5zn_13 {\n  background: transparent;\n  border-radius: var(--puck-radius-round);\n  border: var(--puck-border-width-focus) solid currentColor;\n  border-bottom-color: transparent;\n  display: inline-block;\n  animation: _loader-animation_1w5zn_1 1s 0s infinite linear;\n  animation-fill-mode: both;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/styles.module.css/#css-module-data */\n._RichTextMenu_1ve2j_1 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n}\n._RichTextMenu--form_1ve2j_7 {\n  border-top-left-radius: var(--puck-field-radius, var(--puck-radius-m));\n  border-top-right-radius: var(--puck-field-radius, var(--puck-radius-m));\n  padding: var(--puck-field-richtext-menu-space-y, 6px) var(--puck-field-richtext-menu-space-x, 6px);\n  background-color: var( --puck-field-richtext-menu-color-bg, var(--puck-color-surface-subtle) );\n  position: relative;\n  scrollbar-width: none;\n  overflow-x: auto;\n}\n._RichTextMenu-group_1ve2j_21 {\n  display: flex;\n  align-items: space-between;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  padding-inline: 6px;\n  gap: 2px;\n  position: relative;\n}\n._RichTextMenu-group_1ve2j_21:first-of-type {\n  padding-left: 0;\n}\n._RichTextMenu-group_1ve2j_21:last-of-type {\n  padding-right: 0;\n}\n._RichTextMenu--inline_1ve2j_39 ._RichTextMenu-group_1ve2j_21 {\n  color: var(--puck-color-text-inverse);\n  gap: 0px;\n  flex-wrap: nowrap;\n}\n._RichTextMenu-group_1ve2j_21 + ._RichTextMenu-group_1ve2j_21 {\n  border-left: var(--puck-border-width-regular) solid var( --puck-field-richtext-menu-color-separator, var(--puck-color-border-muted) );\n}\n._RichTextMenu--inline_1ve2j_39 ._RichTextMenu-group_1ve2j_21 + ._RichTextMenu-group_1ve2j_21 {\n  border-left: var(--puck-border-width-hairline) solid var(--puck-color-border-inverse);\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/components/Control/styles.module.css/#css-module-data */\n._Control_id4pm_1 .lucide {\n  height: var(--puck-icon-size-m);\n  width: var(--puck-icon-size-m);\n}\n._Control--inline_id4pm_6 .lucide {\n  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n}\n\n/* components/DraggableComponent/styles.css */\n[data-puck-component] * {\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n[data-puck-component] {\n  cursor: grab;\n  pointer-events: auto !important;\n  user-select: none;\n  -webkit-user-select: none;\n}\n[data-puck-dropzone] {\n  pointer-events: auto !important;\n}\n[data-puck-disabled] {\n  cursor: pointer;\n}\n[data-dnd-placeholder] {\n  background: var( --puck-slot-component-color-placeholder, var(--puck-color-azure-06) ) !important;\n  border: none !important;\n  color: transparent !important;\n  opacity: 0.3 !important;\n  outline: none !important;\n  transition: none !important;\n}\n[data-dnd-placeholder] *,\n[data-dnd-placeholder]::after,\n[data-dnd-placeholder]::before {\n  opacity: 0 !important;\n}\n[data-dnd-dragging][data-puck-component] {\n  pointer-events: none !important;\n  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var(--puck-slot-component-color-border-dragging, var(--puck-color-azure-09)) solid !important;\n  outline-offset: calc(var(--puck-slot-component-border-width, var(--puck-border-width-focus)) * -1) !important;\n}\n[data-dnd-dragging][data-puck-component] > :first-child {\n  margin-top: 0 !important;\n}\n[data-dnd-dragging][data-puck-component] > :last-child {\n  margin-bottom: 0 !important;\n}\n\n/* lib/overlay-portal/styles.css */\n[data-puck-overlay-portal],\n[data-puck-overlay-portal] * {\n  pointer-events: auto !important;\n}\n[data-puck-entry][data-puck-preview-mode=edit] [data-puck-overlay-portal]:hover {\n  outline: 2px var(--puck-color-azure-09, #cfdff0) dashed;\n  outline-offset: 2px;\n}\n[data-puck-entry][data-puck-preview-mode=edit] [data-puck-overlay-portal]:focus-within {\n  outline: 2px var(--puck-color-azure-07, #88b0da) dashed;\n  outline-offset: 2px;\n}';
+var iframeInteractionStyles = '/* styles/color.css */\n@layer puck-tokens {\n  :root {\n    --puck-color-rose-01: #4a001c;\n    --puck-color-rose-02: #670833;\n    --puck-color-rose-03: #87114c;\n    --puck-color-rose-04: #a81a66;\n    --puck-color-rose-05: #bc5089;\n    --puck-color-rose-06: #cc7ca5;\n    --puck-color-rose-07: #d89aba;\n    --puck-color-rose-08: #e3b8cf;\n    --puck-color-rose-09: #efd6e3;\n    --puck-color-rose-10: #f6eaf1;\n    --puck-color-rose-11: #faf4f8;\n    --puck-color-rose-12: #fef8fc;\n    --puck-color-azure-01: #00175d;\n    --puck-color-azure-02: #002c77;\n    --puck-color-azure-03: #014292;\n    --puck-color-azure-04: #0158ad;\n    --puck-color-azure-05: #3479be;\n    --puck-color-azure-06: #6499cf;\n    --puck-color-azure-07: #88b0da;\n    --puck-color-azure-08: #abc7e5;\n    --puck-color-azure-09: #cfdff0;\n    --puck-color-azure-10: #e7eef7;\n    --puck-color-azure-11: #f3f6fb;\n    --puck-color-azure-12: #f7faff;\n    --puck-color-green-01: #002000;\n    --puck-color-green-02: #043604;\n    --puck-color-green-03: #084e08;\n    --puck-color-green-04: #0c680c;\n    --puck-color-green-05: #1d882f;\n    --puck-color-green-06: #2faa53;\n    --puck-color-green-07: #56c16f;\n    --puck-color-green-08: #7dd78b;\n    --puck-color-green-09: #b8e8bf;\n    --puck-color-green-10: #ddf3e0;\n    --puck-color-green-11: #eff8f0;\n    --puck-color-green-12: #f3fcf4;\n    --puck-color-yellow-01: #211000;\n    --puck-color-yellow-02: #362700;\n    --puck-color-yellow-03: #4c4000;\n    --puck-color-yellow-04: #645a00;\n    --puck-color-yellow-05: #877614;\n    --puck-color-yellow-06: #ab9429;\n    --puck-color-yellow-07: #bfac4e;\n    --puck-color-yellow-08: #d4c474;\n    --puck-color-yellow-09: #e6deb1;\n    --puck-color-yellow-10: #f3efd9;\n    --puck-color-yellow-11: #f9f7ed;\n    --puck-color-yellow-12: #fcfaf0;\n    --puck-color-red-01: #4c0000;\n    --puck-color-red-02: #6a0a10;\n    --puck-color-red-03: #8a1422;\n    --puck-color-red-04: #ac1f35;\n    --puck-color-red-05: #bf5366;\n    --puck-color-red-06: #ce7e8e;\n    --puck-color-red-07: #d99ca8;\n    --puck-color-red-08: #e4b9c2;\n    --puck-color-red-09: #efd7db;\n    --puck-color-red-10: #f6eaec;\n    --puck-color-red-11: #faf4f5;\n    --puck-color-red-12: #fff9fa;\n    --puck-color-grey-01: #181818;\n    --puck-color-grey-02: #292929;\n    --puck-color-grey-03: #404040;\n    --puck-color-grey-04: #5a5a5a;\n    --puck-color-grey-05: #767676;\n    --puck-color-grey-06: #949494;\n    --puck-color-grey-07: #ababab;\n    --puck-color-grey-08: #c3c3c3;\n    --puck-color-grey-09: #dcdcdc;\n    --puck-color-grey-10: #efefef;\n    --puck-color-grey-11: #f5f5f5;\n    --puck-color-grey-12: #fafafa;\n    --puck-color-black: #000000;\n    --puck-color-white: #ffffff;\n  }\n}\n\n/* styles/tokens.css */\n@layer puck-tokens {\n  :root {\n    --puck-color-surface: var(--puck-color-white);\n    --puck-color-surface-muted: var(--puck-color-grey-11);\n    --puck-color-surface-subtle: var(--puck-color-grey-12);\n    --puck-color-surface-inverse: var(--puck-color-grey-01);\n    --puck-color-border: var(--puck-color-grey-09);\n    --puck-color-border-hover: var(--puck-color-grey-05);\n    --puck-color-border-muted: var(--puck-color-grey-10);\n    --puck-color-border-inverse: var(--puck-color-grey-05);\n    --puck-color-text: var(--puck-color-black);\n    --puck-color-text-secondary: var(--puck-color-grey-04);\n    --puck-color-text-muted: var(--puck-color-grey-05);\n    --puck-color-text-subtle: var(--puck-color-grey-07);\n    --puck-color-text-inverse: var(--puck-color-white);\n    --puck-opacity-text-inverse: 0.75;\n    --puck-color-interactive: var(--puck-color-azure-04);\n    --puck-color-interactive-hover: var(--puck-color-azure-03);\n    --puck-color-interactive-active: var(--puck-color-azure-02);\n    --puck-color-interactive-subtle: var(--puck-color-azure-10);\n    --puck-color-interactive-soft: var(--puck-color-azure-11);\n    --puck-color-interactive-soft-hover: var(--puck-color-azure-12);\n    --puck-color-interactive-neutral-hover: var(--puck-color-grey-10);\n    --puck-color-interactive-inverse-hover: var(--puck-color-azure-06);\n    --puck-color-interactive-inverse-active: var(--puck-color-azure-07);\n    --puck-color-focus-ring: var(--puck-color-azure-05);\n    --puck-color-selection-bg: color-mix( in srgb, var(--puck-color-azure-09) 30%, transparent );\n    --puck-color-selection-border: var(--puck-color-azure-08);\n    --puck-color-insertion-indicator: var(--puck-color-azure-06);\n    --puck-color-highlight: var(--puck-color-rose-07);\n    --puck-color-bg-disabled: var(--puck-color-grey-07);\n    --puck-color-text-disabled: var(--puck-color-grey-03);\n    --puck-color-overlay-backdrop: color-mix( in srgb, var(--puck-color-black) 75%, transparent );\n    --puck-space-1: 4px;\n    --puck-space-2: 8px;\n    --puck-space-3: 12px;\n    --puck-space-4: 16px;\n    --puck-space-5: 24px;\n    --puck-space-chrome-gutter: var(--puck-space-4);\n    --puck-radius-none: 0;\n    --puck-radius-xs: 2px;\n    --puck-radius-s: 3px;\n    --puck-radius-m: 4px;\n    --puck-radius-l: 8px;\n    --puck-radius-pill: 30px;\n    --puck-radius-round: 100%;\n    --puck-border-width-hairline: 0.5px;\n    --puck-border-width-regular: 1px;\n    --puck-border-width-focus: 2px;\n    --puck-border-width-strong: 4px;\n    --puck-duration-fast: 50ms;\n    --puck-duration-medium: 150ms;\n    --puck-duration-slow: 250ms;\n    --puck-ease-exit: ease-in;\n    --puck-ease-emphasized: ease-in-out;\n    --puck-ease-entrance: ease-out;\n    --puck-font-weight-regular: 400;\n    --puck-font-weight-medium: 500;\n    --puck-font-weight-semibold: 600;\n    --puck-font-weight-bold: 700;\n    --puck-font-weight-heavy: 800;\n    --puck-letter-spacing-ui: 0.05ch;\n    --puck-letter-spacing-heading: 0.08ch;\n    --puck-icon-size-xs: 14px;\n    --puck-icon-size-s: 16px;\n    --puck-icon-size-m: 18px;\n    --puck-icon-size-l: 24px;\n    --puck-space-m-unitless: 24;\n    --puck-user-sidebar-left-width: var(--puck-sidebar-width);\n    --puck-user-sidebar-right-width: var(--puck-sidebar-width);\n    --puck-slot-min-empty-height: 128px;\n  }\n}\n\n/* styles/typography.css */\n@layer puck-tokens {\n  :root {\n    --puck-font-size-scale-base-unitless: 12;\n    --puck-font-size-xxxs-unitless: 12;\n    --puck-font-size-xxs-unitless: 14;\n    --puck-font-size-xs-unitless: 16;\n    --puck-font-size-s-unitless: 18;\n    --puck-font-size-m-unitless: 21;\n    --puck-font-size-l-unitless: 24;\n    --puck-font-size-xl-unitless: 28;\n    --puck-font-size-xxl-unitless: 36;\n    --puck-font-size-xxxl-unitless: 48;\n    --puck-font-size-xxxxl-unitless: 56;\n    --puck-font-size-xxxs: calc( 1rem * var(--puck-font-size-xxxs-unitless) / 16 );\n    --puck-font-size-xxs: calc(1rem * var(--puck-font-size-xxs-unitless) / 16);\n    --puck-font-size-xs: calc(1rem * var(--puck-font-size-xs-unitless) / 16);\n    --puck-font-size-s: calc(1rem * var(--puck-font-size-s-unitless) / 16);\n    --puck-font-size-m: calc(1rem * var(--puck-font-size-m-unitless) / 16);\n    --puck-font-size-l: calc(1rem * var(--puck-font-size-l-unitless) / 16);\n    --puck-font-size-xl: calc(1rem * var(--puck-font-size-xl-unitless) / 16);\n    --puck-font-size-xxl: calc(1rem * var(--puck-font-size-xxl-unitless) / 16);\n    --puck-font-size-xxxl: calc( 1rem * var(--puck-font-size-xxxl-unitless) / 16 );\n    --puck-font-size-xxxxl: calc( 1rem * var(--puck-font-size-xxxxl-unitless) / 16 );\n    --puck-font-size-base: var(--puck-font-size-xs);\n    --puck-line-height-reset: 1;\n    --puck-line-height-xs: calc( var(--puck-space-m-unitless) / var(--puck-font-size-m-unitless) );\n    --puck-line-height-s: calc( var(--puck-space-m-unitless) / var(--puck-font-size-s-unitless) );\n    --puck-line-height-m: calc( var(--puck-space-m-unitless) / var(--puck-font-size-xs-unitless) );\n    --puck-line-height-l: calc( var(--puck-space-m-unitless) / var(--puck-font-size-xxs-unitless) );\n    --puck-line-height-xl: calc( var(--puck-space-m-unitless) / var(--puck-font-size-scale-base-unitless) );\n    --puck-line-height-base: var(--puck-line-height-m);\n    --puck-fallback-font-stack:\n      -apple-system,\n      BlinkMacSystemFont,\n      Segoe UI,\n      Helvetica Neue,\n      sans-serif,\n      Apple Color Emoji,\n      Segoe UI Emoji,\n      Segoe UI Symbol;\n    --puck-font-family: Inter, var(--puck-fallback-font-stack);\n    --puck-font-family-monospaced:\n      ui-monospace,\n      "Cascadia Code",\n      "Source Code Pro",\n      Menlo,\n      Consolas,\n      "DejaVu Sans Mono",\n      monospace;\n  }\n  @supports (font-variation-settings: normal) {\n    :root {\n      --puck-font-family: InterVariable, var(--puck-fallback-font-stack);\n    }\n  }\n}\n\n/* bundle/core.css */\n:root {\n  --_puck-styles-loaded: "true";\n}\n#frame-root {\n  height: 1px;\n  min-height: 100vh;\n}\n[data-puck-entry] {\n  position: relative;\n  z-index: 0;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */\n._ActionBar_5vdfr_1 {\n  align-items: center;\n  cursor: default;\n  display: flex;\n  width: auto;\n  padding-top: var(--puck-actionbar-space-y, var(--puck-space-1));\n  padding-bottom: var(--puck-actionbar-space-y, var(--puck-space-1));\n  padding-inline-start: var(--puck-actionbar-space-x, 0);\n  padding-inline-end: var(--puck-actionbar-space-x, 0);\n  border-radius: var(--puck-actionbar-radius, var(--puck-radius-l));\n  background: var(--puck-actionbar-color-bg, var(--puck-color-surface-inverse));\n  color: var(--puck-color-text-inverse);\n  font-family: var(--puck-font-family);\n  min-height: 26px;\n}\n._ActionBar-label_5vdfr_17 {\n  color: var(--puck-actionbar-color-text, var(--puck-color-text-inverse));\n  font-size: var(--puck-actionbar-font-size, var(--puck-font-size-xxxs));\n  opacity: var(--puck-actionbar-opacity-text, var(--puck-opacity-text-inverse));\n  font-weight: var(--puck-font-weight-medium);\n  padding-inline-start: var(--puck-space-2);\n  padding-inline-end: var(--puck-space-2);\n  margin-inline-start: var(--puck-space-1);\n  margin-inline-end: var(--puck-space-1);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n._ActionBarAction_5vdfr_30 + ._ActionBar-label_5vdfr_17 {\n  padding-inline-start: 0;\n}\n._ActionBar-label_5vdfr_17 + ._ActionBarAction_5vdfr_30 {\n  margin-inline-start: calc(var(--puck-space-1) * -1);\n}\n._ActionBar-group_5vdfr_38 {\n  align-items: center;\n  border-inline-start: var(--puck-border-width-hairline) solid var(--puck-actionbar-color-separator, var(--puck-color-border-inverse));\n  display: flex;\n  height: 100%;\n  padding-inline-start: var(--puck-space-1);\n  padding-inline-end: var(--puck-space-1);\n}\n._ActionBar-group_5vdfr_38:first-of-type {\n  border-inline-start: 0;\n}\n._ActionBar-group_5vdfr_38:empty {\n  display: none;\n}\n._ActionBarAction_5vdfr_30 {\n  background: transparent;\n  border: none;\n  color: var(--puck-actionbar-color-text, var(--puck-color-text-inverse));\n  cursor: pointer;\n  padding: var(--puck-actionbar-action-space, 6px);\n  margin-inline-start: var(--puck-space-1);\n  margin-inline-end: var(--puck-space-1);\n  border-radius: var(--puck-radius-m);\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: var(--puck-actionbar-opacity-text, var(--puck-opacity-text-inverse));\n  transition: color var(--puck-duration-fast) var(--puck-ease-exit), opacity var(--puck-duration-fast) var(--puck-ease-exit);\n}\n._ActionBarAction--disabled_5vdfr_74 {\n  cursor: auto;\n  color: var( --puck-actionbar-color-action-disabled, var(--puck-color-text-inverse) );\n  opacity: var(--puck-actionbar-opacity-action-disabled, 0.54);\n}\n._ActionBarAction_5vdfr_30 svg {\n  max-width: none !important;\n}\n._ActionBarAction_5vdfr_30:focus-visible {\n  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);\n  outline-offset: calc(var(--puck-border-width-focus) * -1);\n}\n@media (hover: hover) and (pointer: fine) {\n  ._ActionBarAction_5vdfr_30:hover:not(._ActionBarAction--disabled_5vdfr_74) {\n    color: var( --puck-actionbar-color-action-hover, var(--puck-color-interactive-inverse-hover) );\n    opacity: 1;\n    transition: none;\n  }\n}\n._ActionBarAction_5vdfr_30:active:not(._ActionBarAction--disabled_5vdfr_74),\n._ActionBarAction--active_5vdfr_104 {\n  color: var( --puck-actionbar-color-action-active, var(--puck-color-interactive-inverse-active) );\n  opacity: 1;\n  transition: none;\n}\n._ActionBar-group_5vdfr_38 * {\n  margin: 0;\n}\n._ActionBar-separator_5vdfr_117 {\n  background: var( --puck-actionbar-color-separator, var(--puck-color-border-inverse) );\n  margin-inline: var(--puck-space-1);\n  width: var( --puck-border-width-hairline );\n  height: 100%;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */\n._DraggableComponent_1627v_1 {\n  position: absolute;\n  pointer-events: none;\n}\n._DraggableComponent-overlayWrapper_1627v_6 {\n  height: 100%;\n  width: 100%;\n  top: 0;\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n._DraggableComponent-overlay_1627v_6 {\n  cursor: pointer;\n  height: 100%;\n  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var( --puck-slot-component-color-overlay-border, var(--puck-color-selection-border) ) solid;\n  outline-offset: calc(var(--puck-slot-component-border-width, var(--puck-border-width-focus)) * -1);\n  width: 100%;\n}\n._DraggableComponent_1627v_1:focus-visible > ._DraggableComponent-overlayWrapper_1627v_6 {\n  outline: var(--puck-border-width-regular) solid var(--puck-color-focus-ring);\n}\n._DraggableComponent-loadingOverlay_1627v_38 {\n  background: var(--puck-color-surface);\n  color: var(--puck-color-text);\n  border-radius: var(--puck-radius-m);\n  display: flex;\n  padding: var(--puck-space-2);\n  top: var(--puck-space-2);\n  right: var(--puck-space-2);\n  position: absolute;\n  z-index: 1;\n  pointer-events: all;\n  box-sizing: border-box;\n  opacity: 0.8;\n  z-index: 1;\n}\n._DraggableComponent--hover_1627v_54 > ._DraggableComponent-overlayWrapper_1627v_6 > ._DraggableComponent-overlay_1627v_6 {\n  background: var( --puck-slot-component-color-overlay, var(--puck-color-selection-bg) );\n  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var( --puck-slot-component-color-overlay-border, var(--puck-color-selection-border) ) solid;\n}\n._DraggableComponent--isSelected_1627v_72 > ._DraggableComponent-overlayWrapper_1627v_6 > ._DraggableComponent-overlay_1627v_6 {\n  outline-color: var( --puck-slot-component-color-border-selected, var(--puck-color-selection-border) );\n}\n._DraggableComponent_1627v_1:has(._DraggableComponent--hover_1627v_54 > ._DraggableComponent-overlayWrapper_1627v_6) > ._DraggableComponent-overlayWrapper_1627v_6 {\n  display: none;\n}\n._DraggableComponent-actionsOverlay_1627v_89 {\n  position: sticky;\n  opacity: 0;\n  pointer-events: none;\n  z-index: 2;\n}\n._DraggableComponent--isSelected_1627v_72 ._DraggableComponent-actionsOverlay_1627v_89 {\n  opacity: 1;\n  pointer-events: auto;\n}\n._DraggableComponent-actions_1627v_89 {\n  position: absolute;\n  width: auto;\n  cursor: grab;\n  display: flex;\n  box-sizing: border-box;\n  transform-origin: right top;\n  min-height: 36px;\n}\n._DraggableComponent-actionsAction_1627v_111 {\n  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */\n._Drawer_1n90m_1 {\n  display: flex;\n  flex-direction: column;\n  font-family: var(--puck-font-family);\n  gap: var(--puck-space-3);\n}\n._Drawer-draggable_1n90m_8 {\n  position: relative;\n}\n._Drawer-draggableBg_1n90m_12 {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  pointer-events: none;\n  z-index: -1;\n}\n._DrawerItem-draggable_1n90m_22 {\n  background: var(--puck-drawer-item-color-bg, var(--puck-color-surface));\n  color: var(--puck-drawer-item-color-text, var(--puck-color-text));\n  cursor: grab;\n  padding: var(--puck-drawer-item-space, var(--puck-space-3));\n  display: flex;\n  border: var(--puck-drawer-item-border-width, var(--puck-border-width-regular)) var(--puck-drawer-item-color-border, var(--puck-color-border)) solid;\n  border-radius: var(--puck-drawer-item-radius, var(--puck-radius-m));\n  font-size: var(--puck-drawer-item-font-size, var(--puck-font-size-xxs));\n  justify-content: space-between;\n  align-items: center;\n  transition: background-color var(--puck-duration-fast) var(--puck-ease-exit), color var(--puck-duration-fast) var(--puck-ease-exit);\n}\n._DrawerItem--disabled_1n90m_38 ._DrawerItem-draggable_1n90m_22 {\n  background: var(--puck-color-surface-muted);\n  color: var(--puck-color-text-muted);\n  cursor: not-allowed;\n}\n._DrawerItem_1n90m_22:focus-visible {\n  outline: 0;\n}\n._Drawer_1n90m_1:not(._Drawer--isDraggingFrom_1n90m_48) ._DrawerItem_1n90m_22:focus-visible ._DrawerItem-draggable_1n90m_22 {\n  border-radius: var(--puck-radius-m);\n  outline: var(--puck-border-width-focus) solid var(--puck-color-focus-ring);\n  outline-offset: var(--puck-border-width-focus);\n}\n@media (hover: hover) and (pointer: fine) {\n  ._Drawer_1n90m_1:not(._Drawer--isDraggingFrom_1n90m_48) ._DrawerItem_1n90m_22:not(._DrawerItem--disabled_1n90m_38) ._DrawerItem-draggable_1n90m_22:hover {\n    background-color: var( --puck-drawer-item-color-bg-hover, var(--puck-color-interactive-soft-hover) );\n    color: var( --puck-drawer-item-color-text-hover, var(--puck-color-interactive) );\n    transition: none;\n  }\n}\n._DrawerItem-name_1n90m_72 {\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */\n._DropZone_ybznu_1 {\n  position: relative;\n  height: 100%;\n  min-height: var(--puck-slot-min-empty-height);\n  outline-offset: calc(var(--puck-slot-border-width, var(--puck-border-width-focus)) * -1);\n  width: 100%;\n}\n._DropZone--hasChildren_ybznu_11 {\n  min-height: 0;\n}\n._DropZone_ybznu_1:empty {\n  min-height: var(--puck-slot-min-empty-height);\n}\n[data-puck-entry]:not([data-puck-dragging]) ._DropZone_ybznu_1 {\n  transition: min-height var(--puck-duration-medium) var(--puck-ease-exit);\n}\n._DropZone--isAreaSelected_ybznu_24,\n._DropZone--hoveringOverArea_ybznu_25:not(._DropZone--isRootZone_ybznu_25) {\n  background: var(--puck-slot-color-bg, var(--puck-color-selection-bg));\n  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));\n}\n._DropZone_ybznu_1:empty {\n  background: var(--puck-slot-color-bg, var(--puck-color-selection-bg));\n  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));\n}\n._DropZone-item_ybznu_39 {\n  position: relative;\n}\n._DropZone-hitbox_ybznu_43 {\n  position: absolute;\n  bottom: calc(var(--puck-space-3) * -1);\n  height: var(--puck-space-5);\n  width: 100%;\n  z-index: 1;\n}\n[data-puck-dragging] ._DropZone--isEnabled_ybznu_51 {\n  outline: var(--puck-slot-border-width, var(--puck-border-width-focus)) var(--puck-slot-border-style, dashed) var(--puck-slot-color-border, var(--puck-color-selection-border));\n}\n._DropZone_ybznu_1 > *:not([data-puck-component]) {\n  opacity: 0;\n}\nbody:has(._DropZone--isAnimating_ybznu_62:empty) [data-puck-overlay] {\n  opacity: 0 !important;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */\n._InlineTextField_104qp_1 {\n  cursor: text;\n  display: inline-block;\n  white-space: pre-wrap;\n  text-decoration: inherit;\n}\n[data-dnd-dragging] ._InlineTextField_104qp_1 {\n  cursor: none;\n  caret-color: transparent;\n}\n[data-dnd-dragging] ._InlineTextField_104qp_1::selection {\n  display: none;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/Loader/styles.module.css/#css-module-data */\n@keyframes _loader-animation_1w5zn_1 {\n  0% {\n    transform: rotate(0deg) scale(1);\n  }\n  50% {\n    transform: rotate(180deg) scale(0.8);\n  }\n  100% {\n    transform: rotate(360deg) scale(1);\n  }\n}\n._Loader_1w5zn_13 {\n  background: transparent;\n  border-radius: var(--puck-radius-round);\n  border: var(--puck-border-width-focus) solid currentColor;\n  border-bottom-color: transparent;\n  display: inline-block;\n  animation: _loader-animation_1w5zn_1 1s 0s infinite linear;\n  animation-fill-mode: both;\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/styles.module.css/#css-module-data */\n._RichTextMenu_1ve2j_1 {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n}\n._RichTextMenu--form_1ve2j_7 {\n  border-top-left-radius: var(--puck-field-radius, var(--puck-radius-m));\n  border-top-right-radius: var(--puck-field-radius, var(--puck-radius-m));\n  padding: var(--puck-field-richtext-menu-space-y, 6px) var(--puck-field-richtext-menu-space-x, 6px);\n  background-color: var( --puck-field-richtext-menu-color-bg, var(--puck-color-surface-subtle) );\n  position: relative;\n  scrollbar-width: none;\n  overflow-x: auto;\n}\n._RichTextMenu-group_1ve2j_21 {\n  display: flex;\n  align-items: space-between;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  padding-inline: 6px;\n  gap: 2px;\n  position: relative;\n}\n._RichTextMenu-group_1ve2j_21:first-of-type {\n  padding-left: 0;\n}\n._RichTextMenu-group_1ve2j_21:last-of-type {\n  padding-right: 0;\n}\n._RichTextMenu--inline_1ve2j_39 ._RichTextMenu-group_1ve2j_21 {\n  color: var(--puck-color-text-inverse);\n  gap: 0px;\n  flex-wrap: nowrap;\n}\n._RichTextMenu-group_1ve2j_21 + ._RichTextMenu-group_1ve2j_21 {\n  border-left: var(--puck-border-width-regular) solid var( --puck-field-richtext-menu-color-separator, var(--puck-color-border-muted) );\n}\n._RichTextMenu--inline_1ve2j_39 ._RichTextMenu-group_1ve2j_21 + ._RichTextMenu-group_1ve2j_21 {\n  border-left: var(--puck-border-width-hairline) solid var(--puck-color-border-inverse);\n}\n\n/* css-module:/home/runner/work/puck/puck/packages/core/components/RichTextMenu/components/Control/styles.module.css/#css-module-data */\n._Control_id4pm_1 .lucide {\n  height: var(--puck-icon-size-m);\n  width: var(--puck-icon-size-m);\n}\n._Control--inline_id4pm_6 .lucide {\n  height: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n  width: var(--puck-actionbar-action-size, var(--puck-icon-size-s));\n}\n\n/* components/DraggableComponent/styles.css */\n[data-puck-component] * {\n  pointer-events: none;\n  user-select: none;\n  -webkit-user-select: none;\n}\n[data-puck-component] {\n  cursor: grab;\n  pointer-events: auto !important;\n  user-select: none;\n  -webkit-user-select: none;\n}\n[data-puck-dropzone] {\n  pointer-events: auto !important;\n}\n[data-puck-disabled] {\n  cursor: pointer;\n}\n[data-dnd-placeholder] {\n  background: var( --puck-slot-component-color-placeholder, var(--puck-color-azure-06) ) !important;\n  border: none !important;\n  color: transparent !important;\n  opacity: 0.3 !important;\n  outline: none !important;\n  transition: none !important;\n}\n[data-dnd-placeholder] *,\n[data-dnd-placeholder]::after,\n[data-dnd-placeholder]::before {\n  opacity: 0 !important;\n}\n[data-dnd-dragging][data-puck-component] {\n  pointer-events: none !important;\n  outline: var( --puck-slot-component-border-width, var(--puck-border-width-focus) ) var(--puck-slot-component-color-border-dragging, var(--puck-color-azure-09)) solid !important;\n  outline-offset: calc(var(--puck-slot-component-border-width, var(--puck-border-width-focus)) * -1) !important;\n}\n[data-dnd-dragging][data-puck-component] > :first-child {\n  margin-top: 0 !important;\n}\n[data-dnd-dragging][data-puck-component] > :last-child {\n  margin-bottom: 0 !important;\n}\n\n/* lib/overlay-portal/styles.css */\n[data-puck-overlay-portal],\n[data-puck-overlay-portal] * {\n  pointer-events: auto !important;\n}\n[data-puck-entry][data-puck-preview-mode=edit] [data-puck-overlay-portal]:hover {\n  outline: 2px var(--puck-color-azure-09, #cfdff0) dashed;\n  outline-offset: 2px;\n}\n[data-puck-entry][data-puck-preview-mode=edit] [data-puck-overlay-portal]:focus-within {\n  outline: 2px var(--puck-color-azure-07, #88b0da) dashed;\n  outline-offset: 2px;\n}';
 
 // lib/use-inject-css.ts
 var PUCK_STYLE_SOURCE_ATTRIBUTE = "data-puck-style-source";
@@ -9411,7 +10590,7 @@ var useInjectIframeCss = (targetDocument) => {
 };
 
 // components/AutoFrame/index.tsx
-import { Fragment as Fragment12, jsx as jsx43 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx53 } from "react/jsx-runtime";
 var styleSelector = 'style, link[rel="stylesheet"]';
 var mirroredStyleAttribute = "data-puck-style-mirror";
 var shouldMirrorStyleElement = (style) => {
@@ -9661,10 +10840,10 @@ var CopyHostStyles = ({
       removeAllMirrors();
     };
   }, [syncHostStyles]);
-  return /* @__PURE__ */ jsx43(Fragment12, { children });
+  return /* @__PURE__ */ jsx53(Fragment12, { children });
 };
-var autoFrameContext = createContext6({});
-var useFrame = () => useContext13(autoFrameContext);
+var autoFrameContext = createContext7({});
+var useFrame = () => useContext16(autoFrameContext);
 function AutoFrame(_a) {
   var _b = _a, {
     children,
@@ -9687,10 +10866,10 @@ function AutoFrame(_a) {
     "frameRef",
     "syncHostStyles"
   ]);
-  const [loaded, setLoaded] = useState18(false);
-  const [ctx, setCtx] = useState18({});
-  const [mountTarget, setMountTarget] = useState18();
-  const [stylesLoaded, setStylesLoaded] = useState18(false);
+  const [loaded, setLoaded] = useState19(false);
+  const [ctx, setCtx] = useState19({});
+  const [mountTarget, setMountTarget] = useState19();
+  const [stylesLoaded, setStylesLoaded] = useState19(false);
   useEffect22(() => {
     if (loaded) {
       setStylesLoaded(!syncHostStyles);
@@ -9715,7 +10894,7 @@ function AutoFrame(_a) {
       }
     }
   }, [frameRef, loaded, stylesLoaded]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx53(
     "iframe",
     __spreadProps(__spreadValues({}, props), {
       className,
@@ -9725,7 +10904,7 @@ function AutoFrame(_a) {
       onLoad: () => {
         setLoaded(true);
       },
-      children: /* @__PURE__ */ jsx43(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx53(autoFrameContext.Provider, { value: ctx, children: loaded && mountTarget && /* @__PURE__ */ jsx53(
         CopyHostStyles,
         {
           debug,
@@ -9742,11 +10921,11 @@ var AutoFrame_default = AutoFrame;
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
 init_react_import();
-var styles_module_default19 = { "PuckPreview": "_PuckPreview_z2rgu_1", "PuckPreview-frame": "_PuckPreview-frame_z2rgu_6" };
+var styles_module_default28 = { "PuckPreview": "_PuckPreview_zbic3_1", "PuckPreview-frame": "_PuckPreview-frame_zbic3_6" };
 
 // components/Puck/components/Preview/index.tsx
-import { Fragment as Fragment13, jsx as jsx44 } from "react/jsx-runtime";
-var getClassName25 = get_class_name_factory_default("PuckPreview", styles_module_default19);
+import { Fragment as Fragment13, jsx as jsx54 } from "react/jsx-runtime";
+var getClassName34 = get_class_name_factory_default("PuckPreview", styles_module_default28);
 var useBubbleIframeEvents = (ref) => {
   const status = useAppStore((s) => s.status);
   useEffect23(() => {
@@ -9811,7 +10990,7 @@ var Page = memo9((_a) => {
   const richtextProps = useRichtextProps((_b2 = (_a2 = config.root) == null ? void 0 : _a2.fields) != null ? _b2 : {}, pageProps);
   return ((_c = config.root) == null ? void 0 : _c.render) ? (_d = config.root) == null ? void 0 : _d.render(__spreadValues(__spreadValues({
     id: "puck-root"
-  }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx44(Fragment13, { children: propsWithSlots.children });
+  }, propsWithSlots), richtextProps)) : /* @__PURE__ */ jsx54(Fragment13, { children: propsWithSlots.children });
 });
 Page.displayName = "Page";
 var Preview2 = ({ id = "puck-preview" }) => {
@@ -9825,12 +11004,12 @@ var Preview2 = ({ id = "puck-preview" }) => {
   const renderData = useAppStore(
     (s) => s.state.ui.previewMode === "edit" ? null : s.state.data
   );
-  const Frame = useMemo18(() => overrides.iframe, [overrides]);
+  const Frame = useMemo21(() => overrides.iframe, [overrides]);
   const rootProps = root.props || root;
   const ref = useRef11(null);
   useBubbleIframeEvents(ref);
   usePreviewModeAttribute(ref);
-  const inner = !renderData ? /* @__PURE__ */ jsx44(
+  const inner = !renderData ? /* @__PURE__ */ jsx54(
     Page,
     __spreadProps(__spreadValues({}, rootProps), {
       config,
@@ -9841,18 +11020,18 @@ var Preview2 = ({ id = "puck-preview" }) => {
         metadata
       },
       editMode: true,
-      children: /* @__PURE__ */ jsx44(DropZonePure, { zone: rootDroppableId })
+      children: /* @__PURE__ */ jsx54(DropZonePure, { zone: rootDroppableId })
     })
-  ) : /* @__PURE__ */ jsx44(Render, { data: renderData, config, metadata });
+  ) : /* @__PURE__ */ jsx54(Render, { data: renderData, config, metadata });
   useEffect23(() => {
     if (!iframe.enabled) {
       setStatus("READY");
     }
   }, [iframe.enabled]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx54(
     "div",
     {
-      className: getClassName25(),
+      className: getClassName34(),
       id,
       "data-puck-preview": true,
       onClick: (e) => {
@@ -9861,11 +11040,11 @@ var Preview2 = ({ id = "puck-preview" }) => {
           dispatch({ type: "setUi", ui: { itemSelector: null } });
         }
       },
-      children: iframe.enabled ? /* @__PURE__ */ jsx44(
+      children: iframe.enabled ? /* @__PURE__ */ jsx54(
         AutoFrame_default,
         {
           id: "preview-frame",
-          className: getClassName25("frame"),
+          className: getClassName34("frame"),
           "data-rfd-iframe": true,
           syncHostStyles: iframe.syncHostStyles,
           onReady: () => {
@@ -9875,18 +11054,18 @@ var Preview2 = ({ id = "puck-preview" }) => {
             setStatus("MOUNTED");
           },
           frameRef: ref,
-          children: /* @__PURE__ */ jsx44(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
+          children: /* @__PURE__ */ jsx54(autoFrameContext.Consumer, { children: ({ document: document2 }) => {
             if (Frame) {
-              return /* @__PURE__ */ jsx44(Frame, { document: document2, children: inner });
+              return /* @__PURE__ */ jsx54(Frame, { document: document2, children: inner });
             }
             return inner;
           } })
         }
-      ) : /* @__PURE__ */ jsx44(
+      ) : /* @__PURE__ */ jsx54(
         "div",
         {
           id: "preview-frame",
-          className: getClassName25("frame"),
+          className: getClassName34("frame"),
           ref,
           "data-puck-entry": true,
           children: inner
@@ -9898,7 +11077,7 @@ var Preview2 = ({ id = "puck-preview" }) => {
 
 // lib/use-loaded-overrides.ts
 init_react_import();
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo22 } from "react";
 
 // lib/load-overrides.ts
 init_react_import();
@@ -9940,7 +11119,7 @@ var useLoadedOverrides = ({
   overrides,
   plugins
 }) => {
-  return useMemo19(() => {
+  return useMemo22(() => {
     return loadOverrides({ overrides, plugins });
   }, [plugins, overrides]);
 };
@@ -9953,25 +11132,25 @@ init_react_import();
 import {
   useEffect as useEffect28,
   useLayoutEffect as useLayoutEffect2,
-  useMemo as useMemo24,
-  useState as useState23
+  useMemo as useMemo27,
+  useState as useState24
 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css#css-module
 init_react_import();
-var styles_module_default20 = { "Puck": "_Puck_mr27u_19", "Puck-portal": "_Puck-portal_mr27u_31", "PuckLayout": "_PuckLayout_mr27u_36", "PuckLayout-inner": "_PuckLayout-inner_mr27u_40", "Puck--hidePlugins": "_Puck--hidePlugins_mr27u_73", "PuckLayout--mounted": "_PuckLayout--mounted_mr27u_78", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_mr27u_82", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_mr27u_82", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_mr27u_90", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_mr27u_110", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_mr27u_137", "PuckLayout-mounted": "_PuckLayout-mounted_mr27u_156", "PuckLayout-nav": "_PuckLayout-nav_mr27u_197", "PuckLayout-header": "_PuckLayout-header_mr27u_217", "PuckPluginTab": "_PuckPluginTab_mr27u_231", "PuckPluginTab--visible": "_PuckPluginTab--visible_mr27u_237", "PuckPluginTab-body": "_PuckPluginTab-body_mr27u_242" };
+var styles_module_default29 = { "Puck": "_Puck_tzaxg_19", "Puck-portal": "_Puck-portal_tzaxg_31", "PuckLayout": "_PuckLayout_tzaxg_36", "PuckLayout-inner": "_PuckLayout-inner_tzaxg_40", "Puck--hidePlugins": "_Puck--hidePlugins_tzaxg_73", "PuckLayout--mounted": "_PuckLayout--mounted_tzaxg_78", "PuckLayout--mobilePanelHeightToggle": "_PuckLayout--mobilePanelHeightToggle_tzaxg_82", "PuckLayout--leftSideBarVisible": "_PuckLayout--leftSideBarVisible_tzaxg_82", "PuckLayout--isExpanded": "_PuckLayout--isExpanded_tzaxg_90", "PuckLayout--mobilePanelHeightMinContent": "_PuckLayout--mobilePanelHeightMinContent_tzaxg_110", "PuckLayout--rightSideBarVisible": "_PuckLayout--rightSideBarVisible_tzaxg_137", "PuckLayout-mounted": "_PuckLayout-mounted_tzaxg_156", "PuckLayout-nav": "_PuckLayout-nav_tzaxg_197", "PuckLayout-header": "_PuckLayout-header_tzaxg_217", "PuckPluginTab": "_PuckPluginTab_tzaxg_231", "PuckPluginTab--visible": "_PuckPluginTab--visible_tzaxg_237", "PuckPluginTab-body": "_PuckPluginTab-body_tzaxg_243" };
 
 // components/DefaultOverride/index.tsx
 init_react_import();
-import { Fragment as Fragment14, jsx as jsx45 } from "react/jsx-runtime";
-var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx45(Fragment14, { children });
+import { Fragment as Fragment14, jsx as jsx55 } from "react/jsx-runtime";
+var DefaultOverride = ({ children }) => /* @__PURE__ */ jsx55(Fragment14, { children });
 
 // lib/use-preview-mode-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback16 } from "react";
+import { useCallback as useCallback19 } from "react";
 var usePreviewModeHotkeys = () => {
   const appStore = useAppStoreApi();
-  const toggleInteractive = useCallback16(() => {
+  const toggleInteractive = useCallback19(() => {
     const dispatch = appStore.getState().dispatch;
     dispatch({
       type: "setUi",
@@ -9986,18 +11165,18 @@ var usePreviewModeHotkeys = () => {
 
 // components/Puck/components/Header/index.tsx
 init_react_import();
-import { memo as memo10, useCallback as useCallback17, useMemo as useMemo20, useState as useState19 } from "react";
+import { memo as memo10, useCallback as useCallback20, useMemo as useMemo23, useState as useState20 } from "react";
 
 // components/MenuBar/index.tsx
 init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css#css-module
 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" };
+var styles_module_default30 = { "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";
-var getClassName26 = get_class_name_factory_default("MenuBar", styles_module_default21);
+import { Fragment as Fragment15, jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
+var getClassName35 = get_class_name_factory_default("MenuBar", styles_module_default30);
 function MenuBar({
   menuOpen = false,
   renderHeaderActions,
@@ -10007,10 +11186,12 @@ function MenuBar({
   const forward = useAppStore((s) => s.history.forward);
   const hasFuture = useAppStore((s) => s.history.hasFuture());
   const hasPast = useAppStore((s) => s.history.hasPast());
-  return /* @__PURE__ */ jsx46(
+  const undoLabel = useMessage("header-undo");
+  const redoLabel = useMessage("header-redo");
+  return /* @__PURE__ */ jsx56(
     "div",
     {
-      className: getClassName26({ menuOpen }),
+      className: getClassName35({ menuOpen }),
       onClick: (event) => {
         var _a;
         const element = event.target;
@@ -10021,30 +11202,30 @@ function MenuBar({
           setMenuOpen(false);
         }
       },
-      children: /* @__PURE__ */ jsxs16("div", { className: getClassName26("inner"), children: [
-        /* @__PURE__ */ jsxs16("div", { className: getClassName26("history"), children: [
-          /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsxs22("div", { className: getClassName35("inner"), children: [
+        /* @__PURE__ */ jsxs22("div", { className: getClassName35("history"), children: [
+          /* @__PURE__ */ jsx56(
             IconButton,
             {
               type: "button",
-              title: "undo",
+              title: undoLabel,
               disabled: !hasPast,
               onClick: back,
-              children: /* @__PURE__ */ jsx46(Undo2, { size: 21 })
+              children: /* @__PURE__ */ jsx56(Undo2, { size: 21 })
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx56(
             IconButton,
             {
               type: "button",
-              title: "redo",
+              title: redoLabel,
               disabled: !hasFuture,
               onClick: forward,
-              children: /* @__PURE__ */ jsx46(Redo2, { size: 21 })
+              children: /* @__PURE__ */ jsx56(Redo2, { size: 21 })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx46(Fragment15, { children: renderHeaderActions && renderHeaderActions() })
+        /* @__PURE__ */ jsx56(Fragment15, { children: renderHeaderActions && renderHeaderActions() })
       ] })
     }
   );
@@ -10052,11 +11233,11 @@ function MenuBar({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css#css-module
 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" };
+var styles_module_default31 = { "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";
-var getClassName27 = get_class_name_factory_default("PuckHeader", styles_module_default22);
+import { Fragment as Fragment16, jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+var getClassName36 = get_class_name_factory_default("PuckHeader", styles_module_default31);
 var HeaderInner = ({
   hidePlugins
 }) => {
@@ -10070,7 +11251,7 @@ var HeaderInner = ({
   } = usePropsContext();
   const dispatch = useAppStore((s) => s.dispatch);
   const appStore = useAppStoreApi();
-  const defaultHeaderRender = useMemo20(() => {
+  const defaultHeaderRender = useMemo23(() => {
     if (renderHeader) {
       console.warn(
         "`renderHeader` is deprecated. Please use `overrides.header` and the `usePuck` hook instead"
@@ -10079,13 +11260,13 @@ var HeaderInner = ({
         var _b = _a, { actions } = _b, props = __objRest(_b, ["actions"]);
         const Comp = renderHeader;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx47(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
+        return /* @__PURE__ */ jsx57(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState, children: actions }));
       };
       return RenderHeader;
     }
     return DefaultOverride;
   }, [renderHeader]);
-  const defaultHeaderActionsRender = useMemo20(() => {
+  const defaultHeaderActionsRender = useMemo23(() => {
     if (renderHeaderActions) {
       console.warn(
         "`renderHeaderActions` is deprecated. Please use `overrides.headerActions` and the `usePuck` hook instead."
@@ -10093,7 +11274,7 @@ var HeaderInner = ({
       const RenderHeader = (props) => {
         const Comp = renderHeaderActions;
         const appState = useAppStore((s) => s.state);
-        return /* @__PURE__ */ jsx47(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
+        return /* @__PURE__ */ jsx57(Comp, __spreadProps(__spreadValues({}, props), { dispatch, state: appState }));
       };
       return RenderHeader;
     }
@@ -10105,7 +11286,7 @@ var HeaderInner = ({
   const CustomHeaderActions = useAppStore(
     (s) => s.overrides.headerActions || defaultHeaderActionsRender
   );
-  const [menuOpen, setMenuOpen] = useState19(false);
+  const [menuOpen, setMenuOpen] = useState20(false);
   const rootTitle = useAppStore((s) => {
     var _a, _b;
     const rootData = (_a = s.state.indexes.nodes["root"]) == null ? void 0 : _a.data;
@@ -10115,7 +11296,7 @@ var HeaderInner = ({
   const rightSideBarVisible = useAppStore(
     (s) => s.state.ui.rightSideBarVisible
   );
-  const toggleSidebars = useCallback17(
+  const toggleSidebars = useCallback20(
     (sidebar) => {
       const widerViewport = window.matchMedia("(min-width: 638px)").matches;
       const sideBarVisible = sidebar === "left" ? leftSideBarVisible : rightSideBarVisible;
@@ -10129,87 +11310,92 @@ var HeaderInner = ({
     },
     [dispatch, leftSideBarVisible, rightSideBarVisible]
   );
-  return /* @__PURE__ */ jsx47(
+  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__ */ jsx57(
     CustomHeader,
     {
-      actions: /* @__PURE__ */ jsx47(Fragment16, { children: /* @__PURE__ */ jsx47(CustomHeaderActions, { children: /* @__PURE__ */ jsx47(
+      actions: /* @__PURE__ */ jsx57(Fragment16, { children: /* @__PURE__ */ jsx57(CustomHeaderActions, { children: /* @__PURE__ */ jsx57(
         Button,
         {
           onClick: () => {
             const data = appStore.getState().state.data;
             onPublish && onPublish(data);
           },
-          icon: /* @__PURE__ */ jsx47(Globe, { size: "14px" }),
-          children: "Publish"
+          icon: /* @__PURE__ */ jsx57(Globe, { size: "14px" }),
+          children: publishLabel
         }
       ) }) }),
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx57(
         "header",
         {
-          className: getClassName27({
+          className: getClassName36({
             leftSideBarVisible,
             rightSideBarVisible,
             hidePlugins
           }),
-          children: /* @__PURE__ */ jsxs17("div", { className: getClassName27("inner"), children: [
-            /* @__PURE__ */ jsxs17("div", { className: getClassName27("toggle"), children: [
-              /* @__PURE__ */ jsx47("div", { className: getClassName27("leftSideBarToggle"), children: /* @__PURE__ */ jsx47(
+          children: /* @__PURE__ */ jsxs23("div", { className: getClassName36("inner"), children: [
+            /* @__PURE__ */ jsxs23("div", { className: getClassName36("toggle"), children: [
+              /* @__PURE__ */ jsx57("div", { className: getClassName36("leftSideBarToggle"), children: /* @__PURE__ */ jsx57(
                 IconButton,
                 {
                   type: "button",
                   onClick: () => {
                     toggleSidebars("left");
                   },
-                  title: "Toggle left sidebar",
-                  children: /* @__PURE__ */ jsx47(PanelLeft, { focusable: "false" })
+                  title: toggleLeftLabel,
+                  children: /* @__PURE__ */ jsx57(PanelLeft, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx47("div", { className: getClassName27("rightSideBarToggle"), children: /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx57("div", { className: getClassName36("rightSideBarToggle"), children: /* @__PURE__ */ jsx57(
                 IconButton,
                 {
                   type: "button",
                   onClick: () => {
                     toggleSidebars("right");
                   },
-                  title: "Toggle right sidebar",
-                  children: /* @__PURE__ */ jsx47(PanelRight, { focusable: "false" })
+                  title: toggleRightLabel,
+                  children: /* @__PURE__ */ jsx57(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__ */ jsx57("div", { className: getClassName36("title"), children: /* @__PURE__ */ jsxs23(Heading, { rank: "2", size: "xs", children: [
+              headerTitle || rootTitle || pageLabel,
+              headerPath && /* @__PURE__ */ jsxs23(Fragment16, { children: [
                 " ",
-                /* @__PURE__ */ jsx47("code", { className: getClassName27("path"), children: headerPath })
+                /* @__PURE__ */ jsx57("code", { className: getClassName36("path"), children: headerPath })
               ] })
             ] }) }),
-            /* @__PURE__ */ jsxs17("div", { className: getClassName27("tools"), children: [
-              /* @__PURE__ */ jsx47("div", { className: getClassName27("menuButton"), children: /* @__PURE__ */ jsx47(
+            /* @__PURE__ */ jsxs23("div", { className: getClassName36("tools"), children: [
+              /* @__PURE__ */ jsx57("div", { className: getClassName36("menuButton"), children: /* @__PURE__ */ jsx57(
                 IconButton,
                 {
                   type: "button",
                   onClick: () => {
                     return setMenuOpen(!menuOpen);
                   },
-                  title: "Toggle menu bar",
-                  children: menuOpen ? /* @__PURE__ */ jsx47(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx47(ChevronDown, { focusable: "false" })
+                  title: toggleMenuLabel,
+                  children: menuOpen ? /* @__PURE__ */ jsx57(ChevronUp, { focusable: "false" }) : /* @__PURE__ */ jsx57(ChevronDown, { focusable: "false" })
                 }
               ) }),
-              /* @__PURE__ */ jsx47(
+              /* @__PURE__ */ jsx57(
                 MenuBar,
                 {
                   dispatch,
                   onPublish,
                   menuOpen,
-                  renderHeaderActions: () => /* @__PURE__ */ jsx47(CustomHeaderActions, { children: /* @__PURE__ */ jsx47(
+                  renderHeaderActions: () => /* @__PURE__ */ jsx57(CustomHeaderActions, { children: /* @__PURE__ */ jsx57(
                     Button,
                     {
                       onClick: () => {
                         const data = appStore.getState().state.data;
                         onPublish && onPublish(data);
                       },
-                      icon: /* @__PURE__ */ jsx47(Globe, { size: "14px" }),
-                      children: "Publish"
+                      icon: /* @__PURE__ */ jsx57(Globe, { size: "14px" }),
+                      children: publishLabel
                     }
                   ) }),
                   setMenuOpen
@@ -10229,11 +11415,11 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css#css-module
 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" };
+var styles_module_default32 = { "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";
-var getClassName28 = get_class_name_factory_default("SidebarSection", styles_module_default23);
+import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
+var getClassName37 = get_class_name_factory_default("SidebarSection", styles_module_default32);
 var SidebarSection = ({
   children,
   title,
@@ -10242,44 +11428,44 @@ 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: [
-      showBreadcrumbs && /* @__PURE__ */ jsx48(Breadcrumbs, {}),
-      /* @__PURE__ */ jsx48("div", { className: getClassName28("heading"), children: /* @__PURE__ */ jsx48(Heading, { rank: "2", size: "xs", children: title }) })
+  return /* @__PURE__ */ jsxs24("div", { className: getClassName37({ noBorderTop }), style: { background }, children: [
+    /* @__PURE__ */ jsx58("div", { className: getClassName37("title"), children: /* @__PURE__ */ jsxs24("div", { className: getClassName37("breadcrumbs"), children: [
+      showBreadcrumbs && /* @__PURE__ */ jsx58(Breadcrumbs, {}),
+      /* @__PURE__ */ jsx58("div", { className: getClassName37("heading"), children: /* @__PURE__ */ jsx58(Heading, { rank: "2", size: "xs", children: title }) })
     ] }) }),
-    /* @__PURE__ */ jsx48("div", { className: getClassName28("content"), children }),
-    isLoading && /* @__PURE__ */ jsx48("div", { className: getClassName28("loadingOverlay"), children: /* @__PURE__ */ jsx48(Loader, { size: 32 }) })
+    /* @__PURE__ */ jsx58("div", { className: getClassName37("content"), children }),
+    isLoading && /* @__PURE__ */ jsx58("div", { className: getClassName37("loadingOverlay"), children: /* @__PURE__ */ jsx58(Loader, { size: 32 }) })
   ] });
 };
 
 // components/Puck/components/Canvas/index.tsx
 init_react_import();
 import {
-  useCallback as useCallback18,
+  useCallback as useCallback21,
   useEffect as useEffect25,
-  useMemo as useMemo23,
+  useMemo as useMemo26,
   useRef as useRef13,
-  useState as useState21
+  useState as useState22
 } from "react";
 
 // components/ViewportControls/index.tsx
 init_react_import();
-import { useEffect as useEffect24, useMemo as useMemo21, useState as useState20 } from "react";
+import { useEffect as useEffect24, useMemo as useMemo24, useState as useState21 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ViewportControls/styles.module.css#css-module
 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" };
+var styles_module_default33 = { "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 jsx59, jsxs as jsxs25 } from "react/jsx-runtime";
 var icons = {
-  Smartphone: /* @__PURE__ */ jsx49(Smartphone, { size: 16 }),
-  Tablet: /* @__PURE__ */ jsx49(Tablet, { size: 16 }),
-  Monitor: /* @__PURE__ */ jsx49(Monitor, { size: 16 }),
-  FullWidth: /* @__PURE__ */ jsx49(Expand, { size: 16 })
+  Smartphone: /* @__PURE__ */ jsx59(Smartphone, { size: 16 }),
+  Tablet: /* @__PURE__ */ jsx59(Tablet, { size: 16 }),
+  Monitor: /* @__PURE__ */ jsx59(Monitor, { size: 16 }),
+  FullWidth: /* @__PURE__ */ jsx59(Expand, { size: 16 })
 };
-var getClassName29 = get_class_name_factory_default("ViewportControls", styles_module_default24);
-var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default24);
+var getClassName38 = get_class_name_factory_default("ViewportControls", styles_module_default33);
+var getClassNameButton = get_class_name_factory_default("ViewportButton", styles_module_default33);
 var ActionButton = ({
   children,
   title,
@@ -10287,7 +11473,7 @@ var ActionButton = ({
   isActive,
   disabled
 }) => {
-  return /* @__PURE__ */ jsx49("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx59("span", { className: getClassNameButton({ isActive }), suppressHydrationWarning: true, children: /* @__PURE__ */ jsx59(
     IconButton,
     {
       type: "button",
@@ -10295,7 +11481,7 @@ var ActionButton = ({
       disabled: disabled || isActive,
       onClick,
       suppressHydrationWarning: true,
-      children: /* @__PURE__ */ jsx49("span", { className: getClassNameButton("inner"), children })
+      children: /* @__PURE__ */ jsx59("span", { className: getClassNameButton("inner"), children })
     }
   ) });
 };
@@ -10308,6 +11494,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__ */ jsx59(
+    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,
@@ -10321,50 +11527,55 @@ var ViewportControls = ({
   const defaultsContainAutoZoom = defaultZoomOptions.find(
     (option) => option.value === autoZoom
   );
-  const zoomOptions = useMemo21(
+  const autoZoomLabel = useMessage("viewport-zoom-auto", {
+    zoom: (autoZoom * 100).toFixed(0)
+  });
+  const zoomOptions = useMemo24(
     () => [
       ...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(
+  const [activeViewport, setActiveViewport] = useState21(
     uiViewports.current.width
   );
   useEffect24(() => {
     setActiveViewport(uiViewports.current.width);
   }, [uiViewports.current]);
-  const [isExpanded, setIsExpanded] = useState20(false);
-  return /* @__PURE__ */ jsxs19(
+  const [isExpanded, setIsExpanded] = useState21(false);
+  const zoomOutLabel = useMessage("viewport-zoom-out");
+  const zoomInLabel = useMessage("viewport-zoom-in");
+  const toggleMenuLabel = useMessage("viewport-toggle-menu");
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: getClassName29({ isExpanded, fullScreen }),
+      className: getClassName38({ isExpanded, fullScreen }),
       suppressHydrationWarning: true,
       children: [
-        /* @__PURE__ */ jsx49("div", { className: getClassName29("actions"), children: /* @__PURE__ */ jsxs19("div", { className: getClassName29("actionsInner"), children: [
-          viewports.map((viewport, i) => /* @__PURE__ */ jsx49(
-            ActionButton,
+        /* @__PURE__ */ jsx59("div", { className: getClassName38("actions"), children: /* @__PURE__ */ jsxs25("div", { className: getClassName38("actionsInner"), children: [
+          viewports.map((viewport, i) => /* @__PURE__ */ jsx59(
+            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
           )),
-          /* @__PURE__ */ jsx49("div", { className: getClassName29("divider") }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx59("div", { className: getClassName38("divider") }),
+          /* @__PURE__ */ jsx59(
             ActionButton,
             {
-              title: "Zoom viewport out",
+              title: zoomOutLabel,
               disabled: zoom <= ((_a = zoomOptions[0]) == null ? void 0 : _a.value),
               onClick: (e) => {
                 e.stopPropagation();
@@ -10375,13 +11586,13 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ jsx49(ZoomOut, { size: 16 })
+              children: /* @__PURE__ */ jsx59(ZoomOut, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx59(
             ActionButton,
             {
-              title: "Zoom viewport in",
+              title: zoomInLabel,
               disabled: zoom >= ((_b = zoomOptions[zoomOptions.length - 1]) == null ? void 0 : _b.value),
               onClick: (e) => {
                 e.stopPropagation();
@@ -10392,15 +11603,15 @@ var ViewportControls = ({
                   )].value
                 );
               },
-              children: /* @__PURE__ */ jsx49(ZoomIn, { size: 16 })
+              children: /* @__PURE__ */ jsx59(ZoomIn, { size: 16 })
             }
           ),
-          /* @__PURE__ */ jsxs19("div", { className: getClassName29("zoom"), children: [
-            /* @__PURE__ */ jsx49("div", { className: getClassName29("divider") }),
-            /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsxs25("div", { className: getClassName38("zoom"), children: [
+            /* @__PURE__ */ jsx59("div", { className: getClassName38("divider") }),
+            /* @__PURE__ */ jsx59(
               "select",
               {
-                className: getClassName29("zoomSelect"),
+                className: getClassName38("zoomSelect"),
                 value: zoom.toString(),
                 onClick: (e) => {
                   e.stopPropagation();
@@ -10408,7 +11619,7 @@ var ViewportControls = ({
                 onChange: (e) => {
                   onZoom(parseFloat(e.currentTarget.value));
                 },
-                children: zoomOptions.map((option) => /* @__PURE__ */ jsx49(
+                children: zoomOptions.map((option) => /* @__PURE__ */ jsx59(
                   "option",
                   {
                     value: option.value,
@@ -10420,13 +11631,13 @@ var ViewportControls = ({
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx59(
           "button",
           {
-            className: getClassName29("toggleButton"),
-            title: "Toggle viewport menu",
+            className: getClassName38("toggleButton"),
+            title: toggleMenuLabel,
             onClick: () => setIsExpanded((s) => !s),
-            children: isExpanded ? /* @__PURE__ */ jsx49(X, { size: 16 }) : /* @__PURE__ */ jsx49(Monitor, { size: 16 })
+            children: isExpanded ? /* @__PURE__ */ jsx59(X, { size: 16 }) : /* @__PURE__ */ jsx59(Monitor, { size: 16 })
           }
         )
       ]
@@ -10436,35 +11647,35 @@ var ViewportControls = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css#css-module
 init_react_import();
-var styles_module_default25 = { "PuckCanvas": "_PuckCanvas_zw9iy_1", "PuckCanvas-controls": "_PuckCanvas-controls_zw9iy_18", "PuckCanvas--fullScreen": "_PuckCanvas--fullScreen_zw9iy_23", "PuckCanvas-inner": "_PuckCanvas-inner_zw9iy_34", "PuckCanvas-root": "_PuckCanvas-root_zw9iy_43", "PuckCanvas--ready": "_PuckCanvas--ready_zw9iy_68", "PuckCanvas-loader": "_PuckCanvas-loader_zw9iy_73", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_zw9iy_84" };
+var styles_module_default34 = { "PuckCanvas": "_PuckCanvas_zw9iy_1", "PuckCanvas-controls": "_PuckCanvas-controls_zw9iy_18", "PuckCanvas--fullScreen": "_PuckCanvas--fullScreen_zw9iy_23", "PuckCanvas-inner": "_PuckCanvas-inner_zw9iy_34", "PuckCanvas-root": "_PuckCanvas-root_zw9iy_43", "PuckCanvas--ready": "_PuckCanvas--ready_zw9iy_68", "PuckCanvas-loader": "_PuckCanvas-loader_zw9iy_73", "PuckCanvas--showLoader": "_PuckCanvas--showLoader_zw9iy_84" };
 
 // components/Puck/components/Canvas/index.tsx
-import { useShallow as useShallow9 } from "zustand/react/shallow";
+import { useShallow as useShallow10 } from "zustand/react/shallow";
 
 // lib/frame-context.tsx
 init_react_import();
 import {
-  createContext as createContext7,
-  useContext as useContext14,
+  createContext as createContext8,
+  useContext as useContext17,
   useRef as useRef12,
-  useMemo as useMemo22
+  useMemo as useMemo25
 } from "react";
-import { jsx as jsx50 } from "react/jsx-runtime";
-var FrameContext = createContext7(null);
+import { jsx as jsx60 } from "react/jsx-runtime";
+var FrameContext = createContext8(null);
 var FrameProvider = ({
   children
 }) => {
   const frameRef = useRef12(null);
-  const value = useMemo22(
+  const value = useMemo25(
     () => ({
       frameRef
     }),
     []
   );
-  return /* @__PURE__ */ jsx50(FrameContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx60(FrameContext.Provider, { value, children });
 };
 var useCanvasFrame = () => {
-  const context = useContext14(FrameContext);
+  const context = useContext17(FrameContext);
   if (context === null) {
     throw new Error("useCanvasFrame must be used within a FrameProvider");
   }
@@ -10472,8 +11683,8 @@ var useCanvasFrame = () => {
 };
 
 // components/Puck/components/Canvas/index.tsx
-import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
-var getClassName30 = get_class_name_factory_default("PuckCanvas", styles_module_default25);
+import { Fragment as Fragment17, jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+var getClassName39 = get_class_name_factory_default("PuckCanvas", styles_module_default34);
 var ZOOM_ON_CHANGE = true;
 var TRANSITION_DURATION = 150;
 var Canvas = () => {
@@ -10491,7 +11702,7 @@ var Canvas = () => {
     iframe,
     _experimentalFullScreenCanvas
   } = useAppStore(
-    useShallow9((s) => ({
+    useShallow10((s) => ({
       dispatch: s.dispatch,
       overrides: s.overrides,
       setUi: s.setUi,
@@ -10509,7 +11720,7 @@ var Canvas = () => {
     rightSideBarWidth,
     viewports
   } = useAppStore(
-    useShallow9((s) => ({
+    useShallow10((s) => ({
       leftSideBarVisible: s.state.ui.leftSideBarVisible,
       rightSideBarVisible: s.state.ui.rightSideBarVisible,
       leftSideBarWidth: s.state.ui.leftSideBarWidth,
@@ -10517,17 +11728,17 @@ var Canvas = () => {
       viewports: s.state.ui.viewports
     }))
   );
-  const [showTransition, setShowTransition] = useState21(false);
+  const [showTransition, setShowTransition] = useState22(false);
   const isResizingRef = useRef13(false);
-  const defaultRender = useMemo23(() => {
-    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx51(Fragment17, { children });
+  const defaultRender = useMemo26(() => {
+    const PuckDefault = ({ children }) => /* @__PURE__ */ jsx61(Fragment17, { children });
     return PuckDefault;
   }, []);
-  const CustomPreview = useMemo23(
+  const CustomPreview = useMemo26(
     () => overrides.preview || defaultRender,
     [overrides]
   );
-  const getFrameDimensions = useCallback18(() => {
+  const getFrameDimensions = useCallback21(() => {
     if (frameRef.current) {
       const frame = frameRef.current;
       const box = getBox(frame);
@@ -10570,7 +11781,7 @@ var Canvas = () => {
       resizeObserver.disconnect();
     };
   }, [frameRef.current]);
-  const [showLoader, setShowLoader] = useState21(false);
+  const [showLoader, setShowLoader] = useState22(false);
   useEffect25(() => {
     setTimeout(() => {
       setShowLoader(true);
@@ -10628,10 +11839,10 @@ var Canvas = () => {
     appStoreApi,
     (_a = uiProp == null ? void 0 : uiProp.viewports) == null ? void 0 : _a.current
   ]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs26(
     "div",
     {
-      className: getClassName30({
+      className: getClassName39({
         ready: status === "READY" || !iframe.enabled || !iframe.waitForStyles,
         showLoader,
         fullScreen: _experimentalFullScreenCanvas
@@ -10647,7 +11858,7 @@ var Canvas = () => {
         }
       },
       children: [
-        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx51("div", { className: getClassName30("controls"), children: /* @__PURE__ */ jsx51(
+        viewports.controlsVisible && iframe.enabled && /* @__PURE__ */ jsx61("div", { className: getClassName39("controls"), children: /* @__PURE__ */ jsx61(
           ViewportControls,
           {
             fullScreen: _experimentalFullScreenCanvas,
@@ -10677,11 +11888,11 @@ var Canvas = () => {
             }
           }
         ) }),
-        /* @__PURE__ */ jsxs20("div", { className: getClassName30("inner"), ref: frameRef, children: [
-          /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs26("div", { className: getClassName39("inner"), ref: frameRef, children: [
+          /* @__PURE__ */ jsx61(
             "div",
             {
-              className: getClassName30("root"),
+              className: getClassName39("root"),
               style: {
                 width: iframe.enabled ? viewports.current.width : "100%",
                 height: zoomConfig.rootHeight,
@@ -10695,10 +11906,10 @@ var Canvas = () => {
                 setShowTransition(false);
                 isResizingRef.current = false;
               },
-              children: /* @__PURE__ */ jsx51(CustomPreview, { children: /* @__PURE__ */ jsx51(Preview2, {}) })
+              children: /* @__PURE__ */ jsx61(CustomPreview, { children: /* @__PURE__ */ jsx61(Preview2, {}) })
             }
           ),
-          /* @__PURE__ */ jsx51("div", { className: getClassName30("loader"), children: /* @__PURE__ */ jsx51(Loader, { size: 24 }) })
+          /* @__PURE__ */ jsx61("div", { className: getClassName39("loader"), children: /* @__PURE__ */ jsx61(Loader, { size: 24 }) })
         ] })
       ]
     }
@@ -10707,9 +11918,9 @@ var Canvas = () => {
 
 // lib/use-sidebar-resize.ts
 init_react_import();
-import { useCallback as useCallback19, useEffect as useEffect26, useRef as useRef14, useState as useState22 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect26, useRef as useRef14, useState as useState23 } from "react";
 function useSidebarResize(position, dispatch) {
-  const [width, setWidth] = useState22(null);
+  const [width, setWidth] = useState23(null);
   const sidebarRef = useRef14(null);
   const storeWidth = useAppStore(
     (s) => position === "left" ? s.state.ui.leftSideBarWidth : s.state.ui.rightSideBarWidth
@@ -10744,7 +11955,7 @@ function useSidebarResize(position, dispatch) {
       setWidth(storeWidth);
     }
   }, [storeWidth]);
-  const handleResizeEnd = useCallback19(
+  const handleResizeEnd = useCallback22(
     (width2) => {
       dispatch({
         type: "setUi",
@@ -10791,15 +12002,15 @@ init_react_import();
 
 // components/Puck/components/ResizeHandle/index.tsx
 init_react_import();
-import { useCallback as useCallback20, useRef as useRef15 } from "react";
+import { useCallback as useCallback23, useRef as useRef15 } from "react";
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css#css-module
 init_react_import();
-var styles_module_default26 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
+var styles_module_default35 = { "ResizeHandle": "_ResizeHandle_144bf_2", "ResizeHandle--left": "_ResizeHandle--left_144bf_16", "ResizeHandle--right": "_ResizeHandle--right_144bf_20" };
 
 // components/Puck/components/ResizeHandle/index.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
-var getClassName31 = get_class_name_factory_default("ResizeHandle", styles_module_default26);
+import { jsx as jsx62 } from "react/jsx-runtime";
+var getClassName40 = get_class_name_factory_default("ResizeHandle", styles_module_default35);
 var ResizeHandle = ({
   position,
   sidebarRef,
@@ -10812,7 +12023,7 @@ var ResizeHandle = ({
   const isDragging = useRef15(false);
   const startX = useRef15(0);
   const startWidth = useRef15(0);
-  const handleMouseMove = useCallback20(
+  const handleMouseMove = useCallback23(
     (e) => {
       if (!isDragging.current) return;
       const delta = e.clientX - startX.current;
@@ -10823,7 +12034,7 @@ var ResizeHandle = ({
     },
     [onResize, position]
   );
-  const handleMouseUp = useCallback20(() => {
+  const handleMouseUp = useCallback23(() => {
     var _a;
     if (!isDragging.current) return;
     isDragging.current = false;
@@ -10839,7 +12050,7 @@ var ResizeHandle = ({
     onResizeEnd(finalWidth);
     resetAutoZoom();
   }, [onResizeEnd]);
-  const handleMouseDown = useCallback20(
+  const handleMouseDown = useCallback23(
     (e) => {
       var _a;
       isDragging.current = true;
@@ -10857,11 +12068,11 @@ var ResizeHandle = ({
     },
     [position, handleMouseMove, handleMouseUp]
   );
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx62(
     "div",
     {
       ref: handleRef,
-      className: getClassName31({ [position]: true }),
+      className: getClassName40({ [position]: true }),
       onMouseDown: handleMouseDown
     }
   );
@@ -10869,11 +12080,11 @@ var ResizeHandle = ({
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css#css-module
 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" };
+var styles_module_default36 = { "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";
-var getClassName32 = get_class_name_factory_default("Sidebar", styles_module_default27);
+import { Fragment as Fragment18, jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
+var getClassName41 = get_class_name_factory_default("Sidebar", styles_module_default36);
 var Sidebar = ({
   position,
   sidebarRef,
@@ -10882,16 +12093,16 @@ var Sidebar = ({
   onResizeEnd,
   children
 }) => {
-  return /* @__PURE__ */ jsxs21(Fragment18, { children: [
-    /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsxs27(Fragment18, { children: [
+    /* @__PURE__ */ jsx63(
       "div",
       {
         ref: sidebarRef,
-        className: getClassName32({ [position]: true, isVisible }),
+        className: getClassName41({ [position]: true, isVisible }),
         children
       }
     ),
-    /* @__PURE__ */ jsx53("div", { className: `${getClassName32("resizeHandle")}`, children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx63("div", { className: `${getClassName41("resizeHandle")}`, children: /* @__PURE__ */ jsx63(
       ResizeHandle,
       {
         position,
@@ -10905,7 +12116,7 @@ var Sidebar = ({
 
 // lib/use-delete-hotkeys.ts
 init_react_import();
-import { useCallback as useCallback21 } from "react";
+import { useCallback as useCallback24 } from "react";
 var isElementVisible = (element) => {
   let current = element;
   while (current && current !== document.body) {
@@ -10940,7 +12151,7 @@ var shouldBlockDeleteHotkey = (e) => {
 };
 var useDeleteHotkeys = () => {
   const appStore = useAppStoreApi();
-  const deleteSelectedComponent = useCallback21(
+  const deleteSelectedComponent = useCallback24(
     (e) => {
       var _a;
       if (shouldBlockDeleteHotkey(e)) {
@@ -10969,12 +12180,12 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css#css-module
 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" };
+var styles_module_default37 = { "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";
-var getClassName33 = get_class_name_factory_default("Nav", styles_module_default28);
-var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default28);
+import { jsx as jsx64, jsxs as jsxs28 } from "react/jsx-runtime";
+var getClassName42 = get_class_name_factory_default("Nav", styles_module_default37);
+var getClassNameItem3 = get_class_name_factory_default("NavItem", styles_module_default37);
 var MenuItem = ({
   label,
   icon,
@@ -10983,7 +12194,7 @@ var MenuItem = ({
   mobileOnly,
   desktopOnly
 }) => {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx64(
     "li",
     {
       className: getClassNameItem3({
@@ -10991,9 +12202,9 @@ var MenuItem = ({
         mobileOnly,
         desktopOnly
       }),
-      children: onClick && /* @__PURE__ */ jsxs22("div", { className: getClassNameItem3("link"), onClick, children: [
-        icon && /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkIcon"), children: icon }),
-        /* @__PURE__ */ jsx54("span", { className: getClassNameItem3("linkLabel"), children: label })
+      children: onClick && /* @__PURE__ */ jsxs28("div", { className: getClassNameItem3("link"), onClick, children: [
+        icon && /* @__PURE__ */ jsx64("span", { className: getClassNameItem3("linkIcon"), children: icon }),
+        /* @__PURE__ */ jsx64("span", { className: getClassNameItem3("linkLabel"), children: label })
       ] })
     }
   );
@@ -11002,9 +12213,9 @@ var Nav = ({
   items,
   mobileActions
 }) => {
-  return /* @__PURE__ */ jsxs22("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 })
+  return /* @__PURE__ */ jsxs28("nav", { className: getClassName42(), children: [
+    /* @__PURE__ */ jsx64("ul", { className: getClassName42("list"), children: Object.entries(items).map(([key, item]) => /* @__PURE__ */ jsx64(MenuItem, __spreadValues({}, item), key)) }),
+    mobileActions && /* @__PURE__ */ jsx64("div", { className: getClassName42("mobileActions"), children: mobileActions })
   ] });
 };
 
@@ -11017,26 +12228,27 @@ var normalizeIframeConfig = (iframe) => __spreadValues({
 }, iframe);
 
 // components/Puck/components/Layout/index.tsx
-import { jsx as jsx55, jsxs as jsxs23 } 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);
+import { jsx as jsx65, jsxs as jsxs29 } from "react/jsx-runtime";
+var getClassName43 = get_class_name_factory_default("Puck", styles_module_default29);
+var getLayoutClassName = get_class_name_factory_default("PuckLayout", styles_module_default29);
+var getPluginTabClassName = get_class_name_factory_default("PuckPluginTab", styles_module_default29);
 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__ */ jsx65(SidebarSection, { noBorderTop: true, showBreadcrumbs: true, title: title || pageLabel, children: /* @__PURE__ */ jsx65(Fields, {}) });
 };
 var PluginTab = ({
   children,
   visible,
   mobileOnly
 }) => {
-  return /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx55("div", { className: getPluginTabClassName("body"), children }) });
+  return /* @__PURE__ */ jsx65("div", { className: getPluginTabClassName({ visible, mobileOnly }), children: /* @__PURE__ */ jsx65("div", { className: getPluginTabClassName("body"), children }) });
 };
 var Layout = ({ children }) => {
   var _a, _b;
@@ -11047,7 +12259,7 @@ var Layout = ({ children }) => {
     plugins,
     height
   } = usePropsContext();
-  const iframe = useMemo24(
+  const iframe = useMemo27(
     () => normalizeIframeConfig(_iframe),
     [_iframe]
   );
@@ -11094,11 +12306,11 @@ var Layout = ({ children }) => {
     };
   }, []);
   const overrides = useAppStore((s) => s.overrides);
-  const CustomPuck = useMemo24(
+  const CustomPuck = useMemo27(
     () => overrides.puck || DefaultOverride,
     [overrides]
   );
-  const [mounted, setMounted] = useState23(false);
+  const [mounted, setMounted] = useState24(false);
   useBrowserLayoutEffect(() => {
     setMounted(true);
   }, []);
@@ -11127,20 +12339,26 @@ var Layout = ({ children }) => {
     return (_a2 = s.state.ui.plugin) == null ? void 0 : _a2.current;
   });
   const appStoreApi = useAppStoreApi();
-  const hasLegacySideBarPlugin = useMemo24(
+  const hasLegacySideBarPlugin = useMemo27(
     () => !!(plugins == null ? void 0 : plugins.find((p) => p.name === "legacy-side-bar")),
     [plugins]
   );
-  const pluginItems = useMemo24(() => {
+  const blocksLabel = useMessage("plugin-blocks");
+  const outlineLabel = useMessage("plugin-outline");
+  const fieldsLabel = useMessage("plugin-fields");
+  const pluginItems = useMemo27(() => {
     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 _a2, _b2, _c;
@@ -11150,7 +12368,7 @@ var Layout = ({ children }) => {
         }
         details[plugin.name] = {
           label: (_a2 = plugin.label) != null ? _a2 : plugin.name,
-          icon: (_b2 = plugin.icon) != null ? _b2 : /* @__PURE__ */ jsx55(ToyBrick, {}),
+          icon: (_b2 = plugin.icon) != null ? _b2 : /* @__PURE__ */ jsx65(ToyBrick, {}),
           onClick: () => {
             if (plugin.name === currentPlugin) {
               if (leftSideBarVisible) {
@@ -11176,7 +12394,15 @@ var Layout = ({ children }) => {
       }
     });
     return details;
-  }, [plugins, currentPlugin, appStoreApi, leftSideBarVisible]);
+  }, [
+    plugins,
+    currentPlugin,
+    appStoreApi,
+    leftSideBarVisible,
+    blocksLabel,
+    outlineLabel,
+    fieldsLabel
+  ]);
   const activePlugin = currentPlugin != null ? currentPlugin : Object.keys(pluginItems)[0];
   const mobilePanelHeightMode = (_b = (_a = pluginItems[activePlugin]) == null ? void 0 : _a.mobilePanelHeight) != null ? _b : "toggle";
   useEffect28(() => {
@@ -11192,16 +12418,18 @@ var Layout = ({ children }) => {
       return (_a2 = s.state.ui.mobilePanelExpanded) != null ? _a2 : false;
     }
   );
-  return /* @__PURE__ */ jsxs23(
+  const maximizeLabel = useMessage("layout-maximize");
+  const minimizeLabel = useMessage("layout-minimize");
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
-      className: `Puck ${getClassName34({
+      className: `Puck ${getClassName43({
         hidePlugins: hasLegacySideBarPlugin
       })}`,
       id: instanceId,
       style: { height, visibility: "hidden" },
       children: [
-        /* @__PURE__ */ jsx55(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx55(CustomPuck, { children: children || /* @__PURE__ */ jsx55(FrameProvider, { children: /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx65(DragDropContext, { disableAutoScroll: dnd == null ? void 0 : dnd.disableAutoScroll, children: /* @__PURE__ */ jsx65(CustomPuck, { children: children || /* @__PURE__ */ jsx65(FrameProvider, { children: /* @__PURE__ */ jsx65(
           "div",
           {
             className: getLayoutClassName({
@@ -11213,33 +12441,33 @@ var Layout = ({ children }) => {
               mobilePanelHeightMinContent: mobilePanelHeightMode === "min-content"
             }),
             style: { height },
-            children: /* @__PURE__ */ jsxs23(
+            children: /* @__PURE__ */ jsxs29(
               "div",
               {
                 className: getLayoutClassName("inner"),
                 style: layoutOptions,
                 children: [
-                  /* @__PURE__ */ jsx55("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx55(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
-                  /* @__PURE__ */ jsx55("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx55(
+                  /* @__PURE__ */ jsx65("div", { className: getLayoutClassName("header"), children: /* @__PURE__ */ jsx65(Header, { hidePlugins: hasLegacySideBarPlugin }) }),
+                  /* @__PURE__ */ jsx65("div", { className: getLayoutClassName("nav"), children: /* @__PURE__ */ jsx65(
                     Nav,
                     {
                       items: pluginItems,
-                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx55(
+                      mobileActions: leftSideBarVisible && mobilePanelHeightMode === "toggle" && /* @__PURE__ */ jsx65(
                         IconButton,
                         {
                           type: "button",
-                          title: "maximize",
+                          title: mobilePanelExpanded ? minimizeLabel : maximizeLabel,
                           onClick: () => {
                             setUi({
                               mobilePanelExpanded: !mobilePanelExpanded
                             });
                           },
-                          children: mobilePanelExpanded ? /* @__PURE__ */ jsx55(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx55(Maximize2, { size: 21 })
+                          children: mobilePanelExpanded ? /* @__PURE__ */ jsx65(Minimize2, { size: 21 }) : /* @__PURE__ */ jsx65(Maximize2, { size: 21 })
                         }
                       )
                     }
                   ) }),
-                  /* @__PURE__ */ jsx55(
+                  /* @__PURE__ */ jsx65(
                     Sidebar,
                     {
                       position: "left",
@@ -11248,20 +12476,20 @@ var Layout = ({ children }) => {
                       onResize: setLeftWidth,
                       onResizeEnd: handleLeftSidebarResizeEnd,
                       children: Object.entries(pluginItems).map(
-                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx55(
+                        ([id, { mobileOnly, render: Render2, label }]) => /* @__PURE__ */ jsx65(
                           PluginTab,
                           {
                             visible: currentPlugin === id,
                             mobileOnly,
-                            children: /* @__PURE__ */ jsx55(Render2, {})
+                            children: /* @__PURE__ */ jsx65(Render2, {})
                           },
                           id
                         )
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsx55(Canvas, {}),
-                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx55(
+                  /* @__PURE__ */ jsx65(Canvas, {}),
+                  !hasDesktopFieldsPlugin && /* @__PURE__ */ jsx65(
                     Sidebar,
                     {
                       position: "right",
@@ -11269,7 +12497,7 @@ var Layout = ({ children }) => {
                       isVisible: rightSideBarVisible,
                       onResize: setRightWidth,
                       onResizeEnd: handleRightSidebarResizeEnd,
-                      children: /* @__PURE__ */ jsx55(FieldSideBar, {})
+                      children: /* @__PURE__ */ jsx65(FieldSideBar, {})
                     }
                   )
                 ]
@@ -11277,19 +12505,19 @@ var Layout = ({ children }) => {
             )
           }
         ) }) }) }),
-        /* @__PURE__ */ jsx55("div", { id: "puck-portal-root", className: getClassName34("portal") })
+        /* @__PURE__ */ jsx65("div", { id: "puck-portal-root", className: getClassName43("portal") })
       ]
     }
   );
 };
 
 // components/Puck/index.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-var propsContext = createContext8({});
+import { jsx as jsx66 } from "react/jsx-runtime";
+var propsContext = createContext9({});
 function PropsProvider(props) {
-  return /* @__PURE__ */ jsx56(propsContext.Provider, { value: props, children: props.children });
+  return /* @__PURE__ */ jsx66(propsContext.Provider, { value: props, children: props.children });
 }
-var usePropsContext = () => useContext15(propsContext);
+var usePropsContext = () => useContext18(propsContext);
 function PuckProvider({ children }) {
   const {
     config,
@@ -11301,18 +12529,20 @@ function PuckProvider({ children }) {
     overrides,
     viewports = defaultViewports,
     iframe: _iframe,
+    dnd,
     initialHistory: _initialHistory,
     metadata,
+    dictionary,
     onAction,
     fieldTransforms,
     _experimentalFullScreenCanvas,
     _experimentalVirtualization
   } = usePropsContext();
-  const iframe = useMemo25(
+  const iframe = useMemo28(
     () => normalizeIframeConfig(_iframe),
     [_iframe]
   );
-  const [generatedAppState] = useState24(() => {
+  const [generatedAppState] = useState25(() => {
     var _a, _b, _c;
     const initial = __spreadValues(__spreadValues({}, defaultAppState.ui), initialUi);
     let clientUiState = {};
@@ -11352,7 +12582,7 @@ function PuckProvider({ children }) {
     return walkAppState(newAppState, config);
   });
   const { appendData = true } = _initialHistory || {};
-  const [blendedHistories] = useState24(
+  const [blendedHistories] = useState25(
     [
       ...(_initialHistory == null ? void 0 : _initialHistory.histories) || [],
       ...appendData ? [{ state: generatedAppState }] : []
@@ -11366,7 +12596,7 @@ function PuckProvider({ children }) {
       });
     })
   );
-  const initialHistoryIndex = useMemo25(() => {
+  const initialHistoryIndex = useMemo28(() => {
     if ((_initialHistory == null ? void 0 : _initialHistory.index) !== void 0 && (_initialHistory == null ? void 0 : _initialHistory.index) >= 0 && (_initialHistory == null ? void 0 : _initialHistory.index) < blendedHistories.length) {
       return _initialHistory == null ? void 0 : _initialHistory.index;
     }
@@ -11377,7 +12607,7 @@ function PuckProvider({ children }) {
     overrides,
     plugins
   });
-  const loadedFieldTransforms = useMemo25(() => {
+  const loadedFieldTransforms = useMemo28(() => {
     const _plugins = plugins || [];
     const pluginFieldTransforms = _plugins.reduce(
       (acc, plugin) => __spreadValues(__spreadValues({}, acc), plugin.fieldTransforms),
@@ -11386,7 +12616,7 @@ function PuckProvider({ children }) {
     return __spreadValues(__spreadValues({}, pluginFieldTransforms), fieldTransforms);
   }, [fieldTransforms, plugins]);
   const instanceId = useSafeId();
-  const generateAppStore = useCallback22(
+  const generateAppStore = useCallback25(
     (state) => {
       return {
         instanceId,
@@ -11400,6 +12630,8 @@ function PuckProvider({ children }) {
         _experimentalVirtualization: !!_experimentalVirtualization,
         onAction,
         metadata,
+        dictionary: dictionary || {},
+        dnd,
         fieldTransforms: loadedFieldTransforms
       };
     },
@@ -11415,10 +12647,12 @@ function PuckProvider({ children }) {
       _experimentalVirtualization,
       onAction,
       metadata,
+      dictionary,
+      dnd,
       loadedFieldTransforms
     ]
   );
-  const [appStore] = useState24(
+  const [appStore] = useState25(
     () => createAppStore(generateAppStore(initialAppState))
   );
   useEffect29(() => {
@@ -11456,10 +12690,10 @@ function PuckProvider({ children }) {
       resolveAndCommitData();
     }, 0);
   }, []);
-  return /* @__PURE__ */ jsx56(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx56(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
+  return /* @__PURE__ */ jsx66(appStoreContext.Provider, { value: appStore, children: /* @__PURE__ */ jsx66(UsePuckStoreContext.Provider, { value: uPuckStore, children }) });
 }
 function Puck(props) {
-  return /* @__PURE__ */ jsx56(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx56(Layout, { children: props.children }) })) }));
+  return /* @__PURE__ */ jsx66(PropsProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx66(PuckProvider, __spreadProps(__spreadValues({}, props), { children: /* @__PURE__ */ jsx66(Layout, { children: props.children }) })) }));
 }
 Puck.Components = Components;
 Puck.Fields = Fields;
@@ -11469,13 +12703,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 jsx67, jsxs as jsxs30 } 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__ */ jsxs30("div", { style: { overflowY: "auto" }, children: [
+    /* @__PURE__ */ jsx67(SidebarSection, { title: resolvedComponentsLabel, noBorderTop: true, children: /* @__PURE__ */ jsx67(Components, {}) }),
+    /* @__PURE__ */ jsx67(SidebarSection, { title: resolvedOutlineLabel, children: /* @__PURE__ */ jsx67(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__ */ jsx67(
+    LegacySideBar,
+    {
+      outlineLabel: props.outlineLabel,
+      componentsLabel: props.componentsLabel
+    }
+  )
 });
 
 // bundle/core.ts