@measured/puck 0.10.0-canary.ca4f4be → 0.10.0

package/README.md

@@ -112,19 +112,32 @@ The plugin API follows a React paradigm. Each plugin passed to the Puck editor c
 - `renderRootFields` (`Component`): Render the root fields
 - `renderFields` (`Component`): Render the fields for the currently selected component
 
-Each render function receives the `children` prop, which you must render, and the `data` prop, which can be used to read the data model.
+Each render function receives three props:
+
+- **children** (`ReactNode`): The normal contents of the root or field. You must render this.
+- **state** (`AppState`): The current application state, including data and UI state
+- **dispatch** (`(action: PuckAction) => void`): The Puck dispatcher, used for making data changes or updating the UI. See the [action definitions](https://github.com/measuredco/puck/blob/main/packages/core/reducer/actions.tsx) for a full reference of available mutations.
 
 #### Example
 
-Here's a basic plugin that renders a "My plugin" heading in the root field area:
+Here's an example plugin that creates a button to toggle the left side-bar:
 
 ```jsx
 const myPlugin = {
-  renderRootFields: (props) => (
+  renderRootFields: ({ children, dispatch, state }) => (
     <div>
-      {props.children}
-
-      <h2>My plugin</h2>
+      {children}
+
+      <button
+        onClick={() => {
+          dispatch({
+            type: "setUi",
+            ui: { leftSideBarVisible: !state.ui.leftSideBarVisible },
+          });
+        }}
+      >
+        Toggle side-bar
+      </button>
     </div>
   ),
 };
@@ -285,9 +298,19 @@ A `Field` represents a user input field shown in the Puck interface.
   - **onChange** (`(value: any) => void`): Callback to change the value
   - **readOnly** (`boolean` | `undefined`): Whether or not the field should be in readOnly mode
 
+### `AppState`
+
+The `AppState` object stores the puck application state.
+
+- **data** (`Data`): The page data currently being rendered
+- **ui** (`object`):
+  - **leftSideBarVisible** (boolean): Whether or not the left side bar is visible
+  - **itemSelector** (object): An object describing which item is selected
+  - **arrayState** (object): An object describing the internal state of array items
+
 ### `Data`
 
-The `Data` object stores the puck state.
+The `Data` object stores the puck page data.
 
 - **root** (`object`):
   - **title** (string): Title of the content, typically used for the page title

package/dist/index.css

@@ -723,33 +723,32 @@
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css/#css-module-data */
-._ComponentList_1f52d_1 {
-  display: grid;
+._ComponentList_bvy0z_1 {
   font-family: var(--puck-font-stack);
-  grid-template-columns: 1fr;
   max-width: 100%;
-  grid-gap: 12px;
 }
-._ComponentList-item_1f52d_9 {
+._ComponentList-item_bvy0z_6 {
   background: white;
   padding: 12px;
   display: flex;
   border: 1px var(--puck-color-grey-8) solid;
-  border-radius: 8px;
+  border-radius: 4px;
   font-size: var(--puck-font-size-xxs);
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   cursor: grab;
+  margin-bottom: 12px;
 }
-._ComponentList-item_1f52d_9:last-of-type {
+._ComponentList-item_bvy0z_6:last-of-type {
   margin-bottom: 0px;
 }
-._ComponentList-itemIcon_1f52d_26 {
+._ComponentList-itemIcon_bvy0z_24 {
   color: var(--puck-color-grey-4);
 }
-._ComponentList_1f52d_1:not(._ComponentList--isDraggingFrom_1f52d_30) ._ComponentList-item_1f52d_9:hover {
+._ComponentList_bvy0z_1:not(._ComponentList--isDraggingFrom_bvy0z_28) ._ComponentList-item_bvy0z_6:hover {
   background-color: var(--puck-color-azure-9);
+  color: var(--puck-color-azure-4);
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */

package/dist/index.d.ts

@@ -111,14 +111,14 @@ type ArrayState = {
     items: ItemWithId[];
     openId: string;
 };
-type AppState = {
+type UiState = {
     leftSideBarVisible: boolean;
-    itemSelector?: ItemSelector | null;
+    itemSelector: ItemSelector | null;
     arrayState: Record<string, ArrayState | undefined>;
 };
-type AppData = {
+type AppState = {
     data: Data;
-    state: AppState;
+    ui: UiState;
 };
 
 declare const Button: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, icon, size, }: {
@@ -171,8 +171,8 @@ type RemoveAction = {
     zone: string;
 };
 type SetStateAction = {
-    type: "setState";
-    state: Partial<AppState>;
+    type: "setUi";
+    ui: Partial<UiState>;
 };
 type SetDataAction = {
     type: "setData";
@@ -180,7 +180,7 @@ type SetDataAction = {
 };
 type SetAction = {
     type: "set";
-    appData: Partial<AppData>;
+    state: Partial<AppState>;
 };
 type RegisterZoneAction = {
     type: "registerZone";
@@ -195,9 +195,9 @@ type PuckAction = {
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetStateAction | RegisterZoneAction | UnregisterZoneAction);
 
 type PathData = Record<string, {
-    selector: ItemSelector | null;
+    path: string[];
     label: string;
-}[]>;
+}>;
 type DropZoneContext = {
     data: Data;
     config: Config;
@@ -250,15 +250,18 @@ declare const IconButton: ({ children, href, onClick, variant, type, disabled, t
 type Plugin = {
     renderRootFields?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
     renderRoot?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
     renderFields?: (props: {
         children: ReactNode;
-        data: Data;
+        dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement<any>;
 };
 
@@ -270,11 +273,11 @@ declare function Puck({ config, data: initialData, onChange, onPublish, plugins,
     plugins?: Plugin[];
     renderHeader?: (props: {
         children: ReactNode;
-        data: Data;
         dispatch: (action: PuckAction) => void;
+        state: AppState;
     }) => ReactElement;
     renderHeaderActions?: (props: {
-        data: Data;
+        state: AppState;
         dispatch: (action: PuckAction) => void;
     }) => ReactElement;
     headerTitle?: string;
@@ -292,4 +295,4 @@ declare const FieldLabel: ({ children, icon, label, }: {
     label: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, AppData, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, Puck, Render, dropZoneContext };
+export { Adaptor, AppState, ArrayState, Button, ComponentConfig, Config, Content, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, UiState, dropZoneContext };

package/dist/index.js

@@ -327,7 +327,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment10 = REACT_FRAGMENT_TYPE;
+        var Fragment11 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -386,7 +386,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment10;
+        exports.Fragment = Fragment11;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -2646,7 +2646,7 @@ var getZoneId = (zoneCompound) => {
   if (zoneCompound && zoneCompound.indexOf(":") > -1) {
     return zoneCompound.split(":");
   }
-  return ["root", zoneCompound];
+  return [rootDroppableId, zoneCompound];
 };
 
 // components/DropZone/context.tsx
@@ -2713,15 +2713,15 @@ var DropZoneProvider = ({
       }
       const [area] = getZoneId(selector.zone);
       setPathData((latestPathData = {}) => {
-        const pathData2 = latestPathData[area] || [];
+        const parentPathData = latestPathData[area] || { path: [] };
         return __spreadProps(__spreadValues({}, latestPathData), {
-          [item.props.id]: [
-            ...pathData2,
-            {
-              selector,
-              label: item.type
-            }
-          ]
+          [item.props.id]: {
+            path: [
+              ...parentPathData.path,
+              ...selector.zone ? [selector.zone] : []
+            ],
+            label: item.type
+          }
         });
       });
     },
@@ -3090,7 +3090,7 @@ var IconButton = ({
 
 // components/Puck/index.tsx
 init_react_import();
-var import_react31 = require("react");
+var import_react32 = require("react");
 var import_react_beautiful_dnd5 = require("react-beautiful-dnd");
 
 // components/InputOrGroup/index.tsx
@@ -3140,7 +3140,14 @@ var Draggable2 = ({
           children: children(provided, snapshot)
         })
       ),
-      showShadow && snapshot.isDragging && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { transform: "none !important" }, children: children(provided, snapshot) })
+      showShadow && snapshot.isDragging && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "div",
+        {
+          className: className && className(provided, snapshot),
+          style: { transform: "none !important" },
+          children: children(provided, snapshot)
+        }
+      )
     ] });
   } });
 };
@@ -3168,26 +3175,29 @@ var DragIcon = () => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { class
 // components/Puck/context.tsx
 init_react_import();
 var import_react24 = require("react");
-var defaultAppData = {
+var defaultAppState = {
   data: { content: [], root: { title: "" } },
-  state: {
+  ui: {
     leftSideBarVisible: true,
-    arrayState: {}
+    arrayState: {},
+    itemSelector: null
   }
 };
 var appContext = (0, import_react24.createContext)({
-  appData: defaultAppData,
+  state: defaultAppState,
   dispatch: () => null
 });
 var AppProvider = appContext.Provider;
 var useAppContext = () => {
   const mainContext = (0, import_react24.useContext)(appContext);
+  const selectedItem = mainContext.state.ui.itemSelector ? getItem(mainContext.state.ui.itemSelector, mainContext.state.data) : void 0;
   return __spreadProps(__spreadValues({}, mainContext), {
-    // Helper
-    setState: (state, recordHistory) => {
+    // Helpers
+    selectedItem,
+    setUi: (ui, recordHistory) => {
       return mainContext.dispatch({
-        type: "setState",
-        state,
+        type: "setUi",
+        ui,
         recordHistory
       });
     }
@@ -3207,8 +3217,8 @@ var ArrayField = ({
   label
 }) => {
   const [arrayFieldId] = (0, import_react25.useState)(generateId("ArrayField"));
-  const { appData, setState } = useAppContext();
-  const arrayState = appData.state.arrayState[arrayFieldId] || {
+  const { state, setUi } = useAppContext();
+  const arrayState = state.ui.arrayState[arrayFieldId] || {
     items: Array.from(value).map((v) => ({
       _arrayId: generateId("ArrayItem"),
       data: v
@@ -3217,9 +3227,9 @@ var ArrayField = ({
   };
   const setArrayState = (0, import_react25.useCallback)(
     (newArrayState, recordHistory = false) => {
-      setState(
+      setUi(
         {
-          arrayState: __spreadProps(__spreadValues({}, appData.state.arrayState), {
+          arrayState: __spreadProps(__spreadValues({}, state.ui.arrayState), {
             [arrayFieldId]: __spreadValues(__spreadValues({}, arrayState), newArrayState)
           })
         },
@@ -3440,12 +3450,17 @@ var ExternalInput = ({
   const [data, setData] = (0, import_react26.useState)([]);
   const [isOpen, setOpen] = (0, import_react26.useState)(false);
   const [selectedData, setSelectedData] = (0, import_react26.useState)(value);
-  const keys = (0, import_react26.useMemo)(
-    () => Object.keys(data).filter(
-      (key) => typeof data[key] === "string" || typeof data[key] === "number"
-    ),
-    [data]
-  );
+  const keys = (0, import_react26.useMemo)(() => {
+    const validKeys = /* @__PURE__ */ new Set();
+    for (const item of data) {
+      for (const key of Object.keys(item)) {
+        if (typeof item[key] === "string" || typeof item[key] === "number") {
+          validKeys.add(key);
+        }
+      }
+    }
+    return Array.from(validKeys);
+  }, [data]);
   (0, import_react26.useEffect)(() => {
     (() => __async(void 0, null, function* () {
       if (field.adaptor) {
@@ -3725,7 +3740,7 @@ init_react_import();
 
 // css-module:/home/runner/work/puck/puck/packages/core/components/ComponentList/styles.module.css#css-module
 init_react_import();
-var styles_module_default7 = { "ComponentList": "_ComponentList_1f52d_1", "ComponentList-item": "_ComponentList-item_1f52d_9", "ComponentList-itemIcon": "_ComponentList-itemIcon_1f52d_26", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_1f52d_30" };
+var styles_module_default7 = { "ComponentList": "_ComponentList_bvy0z_1", "ComponentList-item": "_ComponentList-item_bvy0z_6", "ComponentList-itemIcon": "_ComponentList-itemIcon_bvy0z_24", "ComponentList--isDraggingFrom": "_ComponentList--isDraggingFrom_bvy0z_28" };
 
 // components/ComponentList/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
@@ -3747,15 +3762,16 @@ var ComponentList = ({ config }) => {
               index: i,
               showShadow: true,
               disableAnimations: true,
-              children: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: getClassName14("item"), children: [
+              className: () => getClassName14("item"),
+              children: () => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
                 componentKey,
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(grid_default, { size: 18 }) })
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: getClassName14("itemIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DragIcon, {}) })
               ] })
             },
             componentKey
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { display: "none" }, children: provided.placeholder })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { display: "none" }, children: provided.placeholder })
       ]
     })
   ) });
@@ -3839,6 +3855,72 @@ var Heading = ({ children, rank, size = "m" }) => {
   );
 };
 
+// lib/use-breadcrumbs.ts
+init_react_import();
+var import_react28 = require("react");
+var convertPathDataToBreadcrumbs = (selectedItem, pathData, data) => {
+  const id = selectedItem ? selectedItem == null ? void 0 : selectedItem.props.id : "";
+  const currentPathData = pathData && id && pathData[id] ? __spreadValues({}, pathData[id]) : { label: "Page", path: [] };
+  if (!id) {
+    return [];
+  }
+  return currentPathData == null ? void 0 : currentPathData.path.reduce((acc, zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    if (area === rootDroppableId) {
+      return [
+        {
+          label: "Page",
+          selector: null
+        }
+      ];
+    }
+    const parentZoneCompound = acc.length > 0 ? acc[acc.length - 1].zoneCompound : rootDroppableId;
+    let parentZone = data.content;
+    if (parentZoneCompound && parentZoneCompound !== rootDroppableId) {
+      parentZone = data.zones[parentZoneCompound];
+    }
+    if (!parentZone) {
+      return acc;
+    }
+    const itemIndex = parentZone.findIndex(
+      (queryItem) => queryItem.props.id === area
+    );
+    const item = parentZone[itemIndex];
+    if (!item) {
+      return acc;
+    }
+    return [
+      ...acc,
+      {
+        label: item.type.toString(),
+        selector: {
+          index: itemIndex,
+          zone: parentZoneCompound
+        },
+        zoneCompound
+      }
+    ];
+  }, []);
+};
+var useBreadcrumbs = (renderCount) => {
+  const {
+    state: { data },
+    selectedItem
+  } = useAppContext();
+  const dzContext = (0, import_react28.useContext)(dropZoneContext);
+  return (0, import_react28.useMemo)(() => {
+    const breadcrumbs = convertPathDataToBreadcrumbs(
+      selectedItem,
+      dzContext == null ? void 0 : dzContext.pathData,
+      data
+    );
+    if (renderCount) {
+      return breadcrumbs.slice(breadcrumbs.length - renderCount);
+    }
+    return breadcrumbs;
+  }, [selectedItem, dzContext == null ? void 0 : dzContext.pathData, renderCount]);
+};
+
 // components/SidebarSection/index.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var getClassName16 = get_class_name_factory_default("SidebarSection", styles_module_default8);
@@ -3846,23 +3928,24 @@ var SidebarSection = ({
   children,
   title,
   background,
-  breadcrumbs = [],
-  breadcrumbClick,
+  showBreadcrumbs,
   noPadding
 }) => {
+  const { setUi } = useAppContext();
+  const breadcrumbs = useBreadcrumbs(1);
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16({ noPadding }), style: { background }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("title"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumbs"), children: [
-      breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
+      showBreadcrumbs ? breadcrumbs.map((breadcrumb, i) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: getClassName16("breadcrumb"), children: [
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           "div",
           {
             className: getClassName16("breadcrumbLabel"),
-            onClick: () => breadcrumbClick && breadcrumbClick(breadcrumb),
+            onClick: () => setUi({ itemSelector: breadcrumb.selector }),
             children: breadcrumb.label
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(chevron_right_default, { size: 16 })
-      ] }, i)),
+      ] }, i)) : null,
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("heading"), children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Heading, { rank: 2, size: "xs", children: title }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: getClassName16("content"), children })
@@ -3874,15 +3957,15 @@ init_react_import();
 
 // lib/use-puck-history.ts
 init_react_import();
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // lib/use-action-history.ts
 init_react_import();
-var import_react28 = require("react");
+var import_react29 = require("react");
 var EMPTY_HISTORY_INDEX = -1;
 function useActionHistory() {
-  const [histories, setHistories] = (0, import_react28.useState)([]);
-  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react28.useState)(EMPTY_HISTORY_INDEX);
+  const [histories, setHistories] = (0, import_react29.useState)([]);
+  const [currentHistoryIndex, setCurrentHistoryIndex] = (0, import_react29.useState)(EMPTY_HISTORY_INDEX);
   const currentHistory = histories[currentHistoryIndex];
   const canRewind = currentHistoryIndex > EMPTY_HISTORY_INDEX;
   const canForward = currentHistoryIndex < histories.length - 1;
@@ -3926,35 +4009,42 @@ var import_use_debounce2 = require("use-debounce");
 var DEBOUNCE_TIME = 250;
 var RECORD_DIFF = "RECORD_DIFF";
 var historyEmitter = (0, import_event_emitter.default)();
-var recordDiff = (newAppData) => historyEmitter.emit(RECORD_DIFF, newAppData);
-var _recordHistory = ({ snapshot, newSnapshot, record, dispatch }) => {
+var recordDiff = (newAppState) => historyEmitter.emit(RECORD_DIFF, newAppState);
+var _recordHistory = ({
+  snapshot,
+  newSnapshot,
+  record,
+  dispatch
+}) => {
+  if (JSON.stringify(snapshot) === JSON.stringify(newSnapshot))
+    return;
   record({
     forward: () => {
-      dispatch({ type: "set", appData: newSnapshot });
+      dispatch({ type: "set", state: newSnapshot });
     },
     rewind: () => {
-      dispatch({ type: "set", appData: snapshot });
+      dispatch({ type: "set", state: snapshot });
     }
   });
 };
 function usePuckHistory({
-  appData,
+  appState,
   dispatch
 }) {
   const { canForward, canRewind, rewind, forward, record } = useActionHistory();
   (0, import_react_hotkeys_hook.useHotkeys)("meta+z", rewind, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+shift+z", forward, { preventDefault: true });
   (0, import_react_hotkeys_hook.useHotkeys)("meta+y", forward, { preventDefault: true });
-  const [snapshot] = (0, import_use_debounce2.useDebounce)(appData, DEBOUNCE_TIME);
-  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppData) => {
+  const [snapshot] = (0, import_use_debounce2.useDebounce)(appState, DEBOUNCE_TIME);
+  const handleRecordDiff = (0, import_use_debounce2.useDebouncedCallback)((newAppState) => {
     return _recordHistory({
       snapshot,
-      newSnapshot: newAppData,
+      newSnapshot: newAppState,
       record,
       dispatch
     });
   }, DEBOUNCE_TIME);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     historyEmitter.on(RECORD_DIFF, handleRecordDiff);
     return () => {
       historyEmitter.off(RECORD_DIFF, handleRecordDiff);
@@ -4244,11 +4334,11 @@ var reduceData = (data, action, config) => {
 
 // reducer/state.ts
 init_react_import();
-var reduceState = (state, action) => {
-  if (action.type === "setState") {
-    return __spreadValues(__spreadValues({}, state), action.state);
+var reduceState = (ui, action) => {
+  if (action.type === "setUi") {
+    return __spreadValues(__spreadValues({}, ui), action.ui);
   }
-  return state;
+  return ui;
 };
 
 // reducer/actions.tsx
@@ -4256,8 +4346,8 @@ init_react_import();
 
 // reducer/index.ts
 var storeInterceptor = (reducer) => {
-  return (appData, action) => {
-    const newAppData = reducer(appData, action);
+  return (state, action) => {
+    const newAppState = reducer(state, action);
     const isValidType = ![
       "registerZone",
       "unregisterZone",
@@ -4266,18 +4356,18 @@ var storeInterceptor = (reducer) => {
       "set"
     ].includes(action.type);
     if (typeof action.recordHistory !== "undefined" ? action.recordHistory : isValidType) {
-      recordDiff(newAppData);
+      recordDiff(newAppState);
     }
-    return newAppData;
+    return newAppState;
   };
 };
-var createReducer = ({ config }) => storeInterceptor((appData, action) => {
-  const data = reduceData(appData.data, action, config);
-  const state = reduceState(appData.state, action);
+var createReducer = ({ config }) => storeInterceptor((state, action) => {
+  const data = reduceData(state.data, action, config);
+  const ui = reduceState(state.ui, action);
   if (action.type === "set") {
-    return __spreadValues(__spreadValues({}, appData), action.appData);
+    return __spreadValues(__spreadValues({}, state), action.state);
   }
-  return { data, state };
+  return { data, ui };
 });
 
 // components/LayerTree/index.tsx
@@ -4299,7 +4389,7 @@ var scrollIntoView = (el) => {
 };
 
 // components/LayerTree/index.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // lib/find-zones-for-area.ts
 init_react_import();
@@ -4318,12 +4408,9 @@ init_react_import();
 var isChildOfZone = (item, maybeChild, ctx) => {
   var _a;
   const { data, pathData = {} } = ctx || {};
-  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.find((path) => {
-    if (path.selector) {
-      const pathItem = getItem(path.selector, data);
-      return (pathItem == null ? void 0 : pathItem.props.id) === item.props.id;
-    }
-    return false;
+  return maybeChild && data ? !!((_a = pathData[maybeChild.props.id]) == null ? void 0 : _a.path.find((zoneCompound) => {
+    const [area] = getZoneId(zoneCompound);
+    return area === item.props.id;
   })) : false;
 };
 
@@ -4340,7 +4427,7 @@ var LayerTree = ({
   label
 }) => {
   const zones = data.zones || {};
-  const ctx = (0, import_react30.useContext)(dropZoneContext);
+  const ctx = (0, import_react31.useContext)(dropZoneContext);
   return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: getClassName17("zoneTitle"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: getClassName17("zoneIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(layers_default, { size: "16" }) }),
@@ -4448,19 +4535,19 @@ var areaContainsZones = (data, area) => {
 
 // lib/flush-zones.ts
 init_react_import();
-var flushZones = (appData) => {
-  const containsZones = typeof appData.data.zones !== "undefined";
+var flushZones = (appState) => {
+  const containsZones = typeof appState.data.zones !== "undefined";
   if (containsZones) {
-    Object.keys(appData.data.zones || {}).forEach((zone) => {
-      addToZoneCache(zone, appData.data.zones[zone]);
+    Object.keys(appState.data.zones || {}).forEach((zone) => {
+      addToZoneCache(zone, appState.data.zones[zone]);
     });
-    return __spreadProps(__spreadValues({}, appData), {
-      data: __spreadProps(__spreadValues({}, appData.data), {
+    return __spreadProps(__spreadValues({}, appState), {
+      data: __spreadProps(__spreadValues({}, appState.data), {
         zones: {}
       })
     });
   }
-  return appData;
+  return appState;
 };
 
 // components/Puck/index.tsx
@@ -4470,12 +4557,13 @@ var defaultPageFields = {
 };
 var PluginRenderer = ({
   children,
-  data,
+  dispatch,
+  state,
   plugins,
   renderMethod
 }) => {
   return plugins.filter((item) => item[renderMethod]).map((item) => item[renderMethod]).reduce(
-    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { data, children: accChildren }),
+    (accChildren, Item) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Item, { dispatch, state, children: accChildren }),
     children
   );
 };
@@ -4491,35 +4579,31 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [reducer] = (0, import_react31.useState)(() => createReducer({ config }));
-  const initialAppData = {
-    data: initialData,
-    state: {
-      leftSideBarVisible: true,
-      arrayState: {}
-    }
-  };
-  const [appData, dispatch] = (0, import_react31.useReducer)(
+  const [reducer] = (0, import_react32.useState)(() => createReducer({ config }));
+  const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
+    data: initialData
+  });
+  const [appState, dispatch] = (0, import_react32.useReducer)(
     reducer,
-    flushZones(initialAppData)
+    flushZones(initialAppState)
   );
-  const { data, state } = appData;
+  const { data, ui } = appState;
   const { canForward, canRewind, rewind, forward } = usePuckHistory({
-    appData,
+    appState,
     dispatch
   });
-  const { itemSelector, leftSideBarVisible } = state;
-  const setItemSelector = (0, import_react31.useCallback)(
+  const { itemSelector, leftSideBarVisible } = ui;
+  const setItemSelector = (0, import_react32.useCallback)(
     (newItemSelector) => {
       dispatch({
-        type: "setState",
-        state: { itemSelector: newItemSelector }
+        type: "setUi",
+        ui: { itemSelector: newItemSelector }
       });
     },
     []
   );
   const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
-  const Page = (0, import_react31.useCallback)(
+  const Page = (0, import_react32.useCallback)(
     (pageProps) => {
       var _a2, _b2;
       return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -4527,32 +4611,35 @@ function Puck({
         {
           plugins,
           renderMethod: "renderRoot",
-          data: pageProps.data,
+          dispatch: pageProps.dispatch,
+          state: pageProps.state,
           children: ((_a2 = config.root) == null ? void 0 : _a2.render) ? (_b2 = config.root) == null ? void 0 : _b2.render(__spreadProps(__spreadValues({}, pageProps), { editMode: true })) : pageProps.children
         }
       );
     },
     [config.root]
   );
-  const PageFieldWrapper = (0, import_react31.useCallback)(
+  const PageFieldWrapper = (0, import_react32.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
         plugins,
         renderMethod: "renderRootFields",
-        data: props.data,
+        dispatch: props.dispatch,
+        state: props.state,
         children: props.children
       }
     ),
     []
   );
-  const ComponentFieldWrapper = (0, import_react31.useCallback)(
+  const ComponentFieldWrapper = (0, import_react32.useCallback)(
     (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       PluginRenderer,
       {
         plugins,
         renderMethod: "renderFields",
-        data: props.data,
+        dispatch: props.dispatch,
+        state: props.state,
         children: props.children
       }
     ),
@@ -4561,13 +4648,13 @@ function Puck({
   const FieldWrapper = itemSelector ? ComponentFieldWrapper : PageFieldWrapper;
   const rootFields = ((_a = config.root) == null ? void 0 : _a.fields) || defaultPageFields;
   let fields = selectedItem ? ((_b = config.components[selectedItem.type]) == null ? void 0 : _b.fields) || {} : rootFields;
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (onChange)
       onChange(data);
   }, [data]);
   const { onDragStartOrUpdate, placeholderStyle } = usePlaceholderStyle();
-  const [draggedItem, setDraggedItem] = (0, import_react31.useState)();
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { appData, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const [draggedItem, setDraggedItem] = (0, import_react32.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "puck", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AppProvider, { value: { state: appState, dispatch }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     import_react_beautiful_dnd5.DragDropContext,
     {
       onDragUpdate: (update) => {
@@ -4634,11 +4721,6 @@ function Puck({
             areaId: "root"
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(dropZoneContext.Consumer, { children: (ctx) => {
-            let path = (ctx == null ? void 0 : ctx.pathData) && selectedItem ? ctx == null ? void 0 : ctx.pathData[selectedItem == null ? void 0 : selectedItem.props.id] : void 0;
-            if (path) {
-              path = [{ label: "Page", selector: null }, ...path];
-              path = path.slice(path.length - 2, path.length - 1);
-            }
             return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "div",
               {
@@ -4675,8 +4757,8 @@ function Puck({
                             children: "Publish"
                           }
                         ),
-                        data,
-                        dispatch
+                        dispatch,
+                        state: appState
                       }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                         "div",
                         {
@@ -4699,8 +4781,8 @@ function Puck({
                                   IconButton,
                                   {
                                     onClick: () => dispatch({
-                                      type: "setState",
-                                      state: {
+                                      type: "setUi",
+                                      ui: {
                                         leftSideBarVisible: !leftSideBarVisible
                                       }
                                     }),
@@ -4771,7 +4853,10 @@ function Puck({
                                       }
                                     )
                                   ] }),
-                                  renderHeaderActions && renderHeaderActions({ data, dispatch }),
+                                  renderHeaderActions && renderHeaderActions({
+                                    state: appState,
+                                    dispatch
+                                  }),
                                   /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                                     Button,
                                     {
@@ -4862,7 +4947,15 @@ function Puck({
                                 style: {
                                   border: "1px solid var(--puck-color-grey-8)"
                                 },
-                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Page, __spreadProps(__spreadValues({ data }, data.root), { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId }) }))
+                                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                  Page,
+                                  __spreadProps(__spreadValues({
+                                    dispatch,
+                                    state: appState
+                                  }, data.root), {
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropZone, { zone: rootDroppableId })
+                                  })
+                                )
                               }
                             )
                           }
@@ -4892,12 +4985,11 @@ function Puck({
                         flexDirection: "column",
                         background: "var(--puck-color-white)"
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { data, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FieldWrapper, { dispatch, state: appState, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         SidebarSection,
                         {
                           noPadding: true,
-                          breadcrumbs: path,
-                          breadcrumbClick: (breadcrumb) => setItemSelector(breadcrumb.selector),
+                          showBreadcrumbs: true,
                           title: selectedItem ? selectedItem.type : "Page",
                           children: Object.keys(fields).map((fieldName) => {
                             var _a2, _b2, _c, _d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.10.0-canary.ca4f4be",
+  "version": "0.10.0",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",