@measured/puck 0.11.0-canary.b28404f → 0.11.0-canary.c8c02fd

package/README.md

@@ -1,7 +1,5 @@
 # puck
 
-The self-hosted, drag and drop editor for React.
-
 <p align="left">
   <a aria-label="Measured logo" href="https://measured.co">
     <img src="https://img.shields.io/badge/MADE%20BY%20Measured-000000.svg?style=for-the-badge&labelColor=000">
@@ -17,7 +15,7 @@ The self-hosted, drag and drop editor for React.
   </a>
 </p>
 
-## Features
+The self-hosted, drag and drop editor for React.
 
 - 🖱️ **Drag and drop**: Visual editing for your existing React component library
 - 🌐 **Integrations**: Load your content from a 3rd party headless CMS
@@ -234,163 +232,6 @@ The current DropZone implementation has certain rules and limitations:
 3. You can't drag between DropZones that don't share a parent (or _area_)
 4. Your mouse must be directly over a DropZone for a collision to be detected
 
-## Adaptors
-
-Adaptors can be used to import data from a third-party API, such as a headless CMS.
-
-### Example
-
-The `external` field type enables us to use an adaptor to query data from a third party API:
-
-```tsx
-const myAdaptor = {
-  name: "My adaptor",
-  fetchList: async () => {
-    const response = await fetch("https://www.example.com/api");
-
-    return {
-      text: response.json().text,
-    };
-  },
-};
-
-const config = {
-  components: {
-    HeadingBlock: {
-      fields: {
-        myData: {
-          type: "external",
-          adaptor: myAdaptor,
-        },
-      },
-      render: ({ myData }) => {
-        return <h1>{myData.text}</h1>;
-      },
-    },
-  },
-};
-```
-
-When the user interacts with this adaptor, they'll be presented with a list of items to choose from. Once they select an item, the value will be mapped onto the prop. In this case, `myData`.
-
-## Dynamic prop resolution
-
-Dynamic prop resolution allows developers to resolve props for components without saving the data to the Puck data model.
-
-### resolveProps()
-
-`resolveProps` is defined in the component config, and allows the developer to make asynchronous calls to change the props after they've been set by Puck.
-
-#### Args
-
-- **props** (`object`): the current props for your component stored in the Puck data
-
-#### Response
-
-- **props** (`object`): the resolved props for your component. Will not be stored in the Puck data
-- **readOnly** (`object`): an object describing which fields on the component are currently read-only
-  - **[prop]** (`boolean`): boolean describing whether or not the prop field is read-only
-
-#### Examples
-
-##### Basic example
-
-In this example, we remap the `text` prop to the `title` prop and mark the `title` field as read-only.
-
-```tsx
-const config = {
-  components: {
-    HeadingBlock: {
-      fields: {
-        text: {
-          type: "text",
-        },
-        title: {
-          type: "text",
-        },
-      },
-      resolveProps: async (props) => {
-        return {
-          props: {
-            title: props.text,
-          },
-          readOnly: {
-            title: true,
-          },
-        };
-      },
-      render: ({ title }) => {
-        return <h1>{title}</h1>;
-      },
-    },
-  },
-};
-```
-
-##### Combining with adaptors
-
-A more advanced pattern is to combine the `resolveProps` method with the adaptors to dynamically fetch data when rendering the component.
-
-```tsx
-const myAdaptor = {
-  name: "My adaptor",
-  fetchList: async () => {
-    const response = await fetch("https://www.example.com/api");
-
-    return {
-      id: response.json().id,
-    };
-  },
-};
-
-const config = {
-  components: {
-    HeadingBlock: {
-      fields: {
-        myData: {
-          type: "external",
-          adaptor: myAdaptor,
-        },
-        title: {
-          type: "text",
-        },
-      },
-      resolveProps: async (props) => {
-        if (!myData.id) {
-          return { props, readOnly: { title: false } };
-        }
-
-        const latestData = await fetch(
-          `https://www.example.com/api/${myData.id}`
-        );
-
-        return {
-          props: {
-            title: latestData.json().text,
-          },
-          readOnly: {
-            title: true,
-          },
-        };
-      },
-      render: ({ title }) => {
-        return <h1>{title}</h1>;
-      },
-    },
-  },
-};
-```
-
-### resolveData()
-
-`resolveData` is a utility function exported by Puck to enable the developer to resolve their custom props before rendering their component with `<Render>`. This is ideally done on the server. If you're using `resolveProps`, you _must_ use `resolveData` before rendering.
-
-```tsx
-import { resolveData } from "@measured/puck";
-
-const resolvedData = resolveData(data, config);
-```
-
 ## Reference
 
 ### `<Puck>`
@@ -436,13 +277,6 @@ The `Config` object describes which components Puck should render, how they shou
     - **fields** (`Field`): The Field objects describing the input data stored against this component.
     - **render** (`Component`): Render function for your React component. Receives props as defined in fields.
     - **defaultProps** (`object` [optional]): Default props to pass to your component. Will show in fields.
-    - **resolveProps** (`async (props: object) => object` [optional]): Function to dynamically change props before rendering the component.
-      - Args
-        - **props** (`object`): the current props for your component stored in the Puck data
-      - Response
-        - **props** (`object`): the resolved props for your component. Will not be stored in the Puck data
-        - **readOnly** (`object`): an object describing which fields on the component are currently read-only
-          - **[prop]** (`boolean`): boolean describing whether or not the prop field is read-only
 - **categories** (`object`): Component categories for rendering in the side bar or restricting in DropZones
   - **[categoryName]** (`object`)
     - **components** (`sting[]`, [optional]): Array containing the names of components in this category
@@ -454,58 +288,17 @@ The `Config` object describes which components Puck should render, how they shou
 
 A `Field` represents a user input field shown in the Puck interface.
 
-### All Fields
-
+- **type** (`text` | `textarea` | `number` | `select` | `radio` | `external` | `array` | `custom`): The input type to render
 - **label** (`text` [optional]): A label for the input. Will use the key if not provided.
-
-### Text Fields
-
-- **type** (`"text"`)
-
-### Textarea Fields
-
-- **type** (`"textarea"`)
-
-### Number Fields
-
-- **type** (`"number"`)
-
-### Select Fields
-
-- **type** (`"select"`)
-- **options** (`object[]`): array of items to render
-  - **label** (`string`)
-  - **value** (`string` | `number` | `boolean`)
-
-### Radio Fields
-
-- **type** (`"radio"`)
-- **options** (`object[]`): array of items to render
-  - **label** (`string`)
-  - **value** (`string` | `number` | `boolean`)
-
-### Array Fields
-
-- **type** (`"array"`)
-- **arrayFields** (`object`): Object describing sub-fields for each item
+- **arrayFields** (`object`): Object describing sub-fields for items in an `array` input
   - **[fieldName]** (`Field`): The Field objects describing the input data for each item
-  - **getItemSummary** (`(object, number) => string` [optional]): Function to get the label of each item
+- **getItemSummary** (`(object, number) => string` [optional]): Function to get the name of each item when using the `array` or `external` field types
 - **defaultItemProps** (`object` [optional]): Default props to pass to each new item added, when using a `array` field type
-
-### External Fields
-
-External fields can be used to load content from an external content repository, like Strapi.js, using an `Adaptor`.
-
-- **type** (`"external"`)
-- **adaptor** (`Adaptor`): Content adaptor responsible for fetching data to show in the table
-  - **name** (`string`): The human-readable name of the adaptor
-  - **fetchList** (`(adaptorParams: object) => object`): Fetch content from a third-party API and return an array
-  - **mapProp** (`(selectedItem: object) => object`): Map the selected item into another shape
+- **options** (`object[]`): array of items to render for select or radio inputs
+  - **label** (`string`)
+  - **value** (`string` | `number` | `boolean`)
+- **adaptor** (`Adaptor`): Content adaptor if using the `external` input type
 - **adaptorParams** (`object`): Paramaters passed to the adaptor
-
-### Custom Fields
-
-- **type** (`"custom"`)
 - **render** (`Component`): Render a custom field. Receives the props:
   - **field** (`Field`): Field configuration
   - **name** (`string`): Name of the field
@@ -540,6 +333,15 @@ The `Data` object stores the puck page data.
   - **props** (object):
     - **[prop]** (string): User defined data from component fields
 
+### `Adaptor`
+
+An `Adaptor` can be used to load content from an external content repository, like Strapi.js.
+
+- **name** (`string`): The human-readable name of the adaptor
+- **fetchList** (`(adaptorParams: object) => object`): Fetch a list of content and return an array
+
+> NB Using an adaptor on the reserved field name `_data` will spread the resulting data over your object, and lock the overridden fields.
+
 ### `Plugin`
 
 Plugins that can be used to enhance Puck.

package/dist/index.d.ts

@@ -8,71 +8,39 @@ type ItemSelector = {
     zone?: string;
 };
 
-type Adaptor<AdaptorParams = {}, TableShape extends Record<string, any> = {}, PropShape = TableShape> = {
+type Adaptor<AdaptorParams = {}> = {
     name: string;
-    fetchList: (adaptorParams?: AdaptorParams) => Promise<TableShape[] | null>;
-    mapProp?: (value: TableShape) => PropShape;
+    fetchList: (adaptorParams?: AdaptorParams) => Promise<Record<string, any>[] | null>;
 };
-type WithPuckProps<Props> = Props & {
+type WithId<T> = T & {
     id: string;
-    _meta?: {
-        readOnly: Partial<Record<keyof Props, boolean>>;
-    };
-};
-type BaseField = {
-    label?: string;
-};
-type TextField = BaseField & {
-    type: "text" | "number" | "textarea";
-};
-type SelectField = BaseField & {
-    type: "select" | "radio";
-    options: {
-        label: string;
-        value: string | number | boolean;
-    }[];
-};
-type ArrayField<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = BaseField & {
-    type: "array";
-    arrayFields: {
-        [SubPropName in keyof Props[0]]: Field<Props[0][SubPropName]>;
-    };
-    defaultItemProps?: Props[0];
-    getItemSummary?: (item: Props[0], index?: number) => string;
 };
-type ExternalField<Props extends {
+type Field<Props extends {
     [key: string]: any;
 } = {
     [key: string]: any;
-}> = BaseField & {
-    type: "external";
-    adaptor: Adaptor<any, any, Props>;
+}> = {
+    type: "text" | "textarea" | "number" | "select" | "array" | "external" | "radio" | "custom";
+    label?: string;
+    adaptor?: Adaptor;
     adaptorParams?: object;
-    getItemSummary: (item: Props, index?: number) => string;
-};
-type CustomField<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = BaseField & {
-    type: "custom";
-    render: (props: {
-        field: CustomField;
+    arrayFields?: {
+        [SubPropName in keyof Props]: Field<Props[SubPropName][0]>;
+    };
+    getItemSummary?: (item: Props, index?: number) => string;
+    defaultItemProps?: Props;
+    render?: (props: {
+        field: Field;
         name: string;
         value: any;
-        onChange: (value: Props) => void;
+        onChange: (value: any) => void;
         readOnly?: boolean;
     }) => ReactElement;
+    options?: {
+        label: string;
+        value: string | number | boolean;
+    }[];
 };
-type Field<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = TextField | SelectField | ArrayField<Props> | ExternalField<Props> | CustomField;
 type DefaultRootProps = {
     children: ReactNode;
     title: string;
@@ -84,7 +52,7 @@ type DefaultComponentProps = {
     editMode?: boolean;
 };
 type Fields<ComponentProps extends DefaultComponentProps = DefaultComponentProps> = {
-    [PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName]>;
+    [PropName in keyof Omit<Required<ComponentProps>, "children" | "editMode">]: Field<ComponentProps[PropName][0]>;
 };
 type Content<Props extends {
     [key: string]: any;
@@ -92,13 +60,9 @@ type Content<Props extends {
     [key: string]: any;
 }> = MappedItem<Props>[];
 type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps> = {
-    render: (props: WithPuckProps<ComponentProps>) => ReactElement;
+    render: (props: WithId<ComponentProps>) => ReactElement;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
-    resolveProps?: (props: WithPuckProps<ComponentProps>) => Promise<{
-        props: WithPuckProps<ComponentProps>;
-        readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
-    }>;
 };
 type Category<ComponentName> = {
     components?: ComponentName[];
@@ -129,7 +93,7 @@ type MappedItem<Props extends {
     [key: string]: any;
 }> = {
     type: keyof Props;
-    props: WithPuckProps<{
+    props: WithId<{
         [key: string]: any;
     }>;
 };
@@ -252,7 +216,6 @@ type PathData = Record<string, {
 type DropZoneContext = {
     data: Data;
     config: Config;
-    dynamicProps?: Record<string, any>;
     itemSelector?: ItemSelector | null;
     setItemSelector?: (newIndex: ItemSelector | null) => void;
     dispatch?: (action: PuckAction) => void;
@@ -346,24 +309,10 @@ declare function Render({ config, data }: {
     data: Data;
 }): react_jsx_runtime.JSX.Element;
 
-declare const resolveData: (data: Data, config: Config) => Promise<{
-    content: {
-        props: any;
-        type: string | number;
-    }[];
-    zones: Record<string, MappedItem<{
-        [key: string]: any;
-    }>[]>;
-    root: {
-        [key: string]: any;
-        title: string;
-    };
-}>;
-
 declare const FieldLabel: ({ children, icon, label, }: {
     children?: ReactNode;
     icon?: ReactNode;
     label: string;
 }) => react_jsx_runtime.JSX.Element;
 
-export { Adaptor, AppState, ArrayField, ArrayState, BaseField, Button, ComponentConfig, Config, Content, CustomField, Data, DefaultComponentProps, DefaultRootProps, DropZone, DropZoneProvider, ExternalField, Field, FieldLabel, Fields, IconButton, ItemWithId, MappedItem, Puck, Render, SelectField, TextField, UiState, dropZoneContext, resolveData };
+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

@@ -1109,8 +1109,7 @@ __export(core_exports, {
   IconButton: () => IconButton,
   Puck: () => Puck,
   Render: () => Render,
-  dropZoneContext: () => dropZoneContext,
-  resolveData: () => resolveData
+  dropZoneContext: () => dropZoneContext
 });
 module.exports = __toCommonJS(core_exports);
 init_react_import();
@@ -2664,13 +2663,11 @@ var setupZone = (data, zoneKey) => {
 };
 
 // lib/get-item.ts
-var getItem = (selector, data, dynamicProps = {}) => {
+var getItem = (selector, data) => {
   if (!selector.zone || selector.zone === rootDroppableId) {
-    const item2 = data.content[selector.index];
-    return __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props });
+    return data.content[selector.index];
   }
-  const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
-  return __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props });
+  return setupZone(data, selector.zone).zones[selector.zone][selector.index];
 };
 
 // lib/index.ts
@@ -2678,6 +2675,14 @@ init_react_import();
 
 // lib/filter.ts
 init_react_import();
+var filter = (obj, validKeys) => {
+  return validKeys.reduce((acc, item) => {
+    if (typeof obj[item] !== "undefined") {
+      return __spreadProps(__spreadValues({}, acc), { [item]: obj[item] });
+    }
+    return acc;
+  }, {});
+};
 
 // lib/reorder.ts
 init_react_import();
@@ -2828,7 +2833,6 @@ function DropZoneEdit({ zone, style }) {
   const {
     // These all need setting via context
     data,
-    dynamicProps = {},
     dispatch = () => null,
     config,
     itemSelector,
@@ -2930,7 +2934,7 @@ function DropZoneEdit({ zone, style }) {
                   content.map((item, i) => {
                     var _a2;
                     const componentId = item.props.id;
-                    const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), dynamicProps[item.props.id] || item.props), {
+                    const defaultedProps = __spreadProps(__spreadValues(__spreadValues({}, (_a2 = config.components[item.type]) == null ? void 0 : _a2.defaultProps), item.props), {
                       editMode: true
                     });
                     const isSelected = (selectedItem == null ? void 0 : selectedItem.props.id) === componentId || false;
@@ -3320,7 +3324,7 @@ var ArrayField = ({
     });
     setArrayState({ items: newItems });
   }, [value]);
-  if (field.type !== "array" || !field.arrayFields) {
+  if (!field.arrayFields) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: getClassNameInput(), children: [
@@ -3519,7 +3523,6 @@ var ExternalInput = ({
   onChange,
   value = null
 }) => {
-  const { mapProp = (val) => val } = field.adaptor || {};
   const [data, setData] = (0, import_react27.useState)([]);
   const [isOpen, setOpen] = (0, import_react27.useState)(false);
   const [selectedData, setSelectedData] = (0, import_react27.useState)(value);
@@ -3597,9 +3600,9 @@ var ExternalInput = ({
                     {
                       style: { whiteSpace: "nowrap" },
                       onClick: (e) => {
-                        onChange(mapProp(item));
+                        onChange(item);
                         setOpen(false);
-                        setSelectedData(mapProp(item));
+                        setSelectedData(item);
                       },
                       children: keys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: item[key] }, key))
                     },
@@ -3621,18 +3624,16 @@ var getClassName9 = get_class_name_factory_default("Input", styles_module_defaul
 var ExternalField = ({
   field,
   onChange,
+  readOnly,
   value,
   name,
   label
 }) => {
-  if (field.type !== "external" || !field.adaptor) {
+  if (!field.adaptor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("labelIcon"), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(link_default, { size: 16 }) }),
-      label || name
-    ] }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: getClassName9(""), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: getClassName9("label"), children: name === "_data" ? "External content" : label || name }),
     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ExternalInput, { field, onChange, value })
   ] });
 };
@@ -3648,7 +3649,7 @@ var RadioField = ({
   value,
   name
 }) => {
-  if (field.type !== "radio" || !field.options) {
+  if (!field.options) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: getClassName10(), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: getClassName10("radioGroup"), children: [
@@ -3698,7 +3699,7 @@ var SelectField = ({
   value,
   name
 }) => {
-  if (field.type !== "select" || !field.options) {
+  if (!field.options) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("label", { className: getClassName11(), children: [
@@ -4745,26 +4746,6 @@ var useComponentList = (config, ui) => {
   return componentList;
 };
 
-// lib/resolve-all-props.ts
-init_react_import();
-var resolveAllProps = (content, config) => __async(void 0, null, function* () {
-  return yield Promise.all(
-    content.map((item) => __async(void 0, null, function* () {
-      const configForItem = config.components[item.type];
-      if (configForItem.resolveProps) {
-        const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveProps(item.props);
-        const { _meta: { readOnly: existingReadOnly = {} } = {} } = item.props || {};
-        return __spreadProps(__spreadValues({}, item), {
-          props: __spreadProps(__spreadValues({}, resolvedProps), {
-            _meta: { readOnly: __spreadValues(__spreadValues({}, existingReadOnly), readOnly) }
-          })
-        });
-      }
-      return item;
-    }))
-  );
-});
-
 // components/Puck/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var defaultPageFields = {
@@ -4795,7 +4776,6 @@ function Puck({
   headerPath
 }) {
   var _a, _b;
-  const [dynamicProps, setDynamicProps] = (0, import_react34.useState)({});
   const [reducer] = (0, import_react34.useState)(() => createReducer({ config }));
   const initialAppState = __spreadProps(__spreadValues({}, defaultAppState), {
     data: initialData,
@@ -4821,21 +4801,6 @@ function Puck({
     flushZones(initialAppState)
   );
   const { data, ui } = appState;
-  (0, import_react34.useEffect)(() => {
-    const flatContent = Object.keys(data.zones || {}).reduce(
-      (acc, zone) => [...acc, ...data.zones[zone]],
-      data.content
-    );
-    resolveAllProps(flatContent, config).then((dynamicContent) => {
-      const newDynamicProps = dynamicContent.reduce(
-        (acc, item) => {
-          return __spreadProps(__spreadValues({}, acc), { [item.props.id]: item.props });
-        },
-        {}
-      );
-      setDynamicProps(newDynamicProps);
-    });
-  }, [data]);
   const { canForward, canRewind, rewind, forward } = usePuckHistory({
     appState,
     dispatch
@@ -4850,7 +4815,7 @@ function Puck({
     },
     []
   );
-  const selectedItem = itemSelector ? getItem(itemSelector, data, dynamicProps) : null;
+  const selectedItem = itemSelector ? getItem(itemSelector, data) : null;
   const Page = (0, import_react34.useCallback)(
     (pageProps) => {
       var _a2, _b2;
@@ -4979,7 +4944,6 @@ function Puck({
           value: {
             data,
             itemSelector,
-            dynamicProps,
             setItemSelector,
             config,
             dispatch,
@@ -5260,18 +5224,42 @@ function Puck({
                           showBreadcrumbs: true,
                           title: selectedItem ? selectedItem.type : "Page",
                           children: Object.keys(fields).map((fieldName) => {
+                            var _a2, _b2, _c, _d;
                             const field = fields[fieldName];
                             const onChange2 = (value) => {
                               let currentProps;
+                              let newProps;
                               if (selectedItem) {
                                 currentProps = selectedItem.props;
                               } else {
                                 currentProps = data.root;
                               }
-                              const _a2 = currentProps._meta || {}, { readOnly } = _a2, _meta = __objRest(_a2, ["readOnly"]);
-                              const newProps = __spreadProps(__spreadValues({}, currentProps), {
-                                [fieldName]: value
-                              });
+                              if (fieldName === "_data") {
+                                if (!value) {
+                                  const _a3 = currentProps._meta || {}, { locked } = _a3, _meta = __objRest(_a3, ["locked"]);
+                                  newProps = __spreadProps(__spreadValues({}, currentProps), {
+                                    _data: void 0,
+                                    _meta
+                                  });
+                                } else {
+                                  const changedFields = filter(
+                                    // filter out anything not supported by this component
+                                    value,
+                                    Object.keys(fields)
+                                  );
+                                  newProps = __spreadProps(__spreadValues(__spreadValues({}, currentProps), changedFields), {
+                                    _data: value,
+                                    // TODO perf - this is duplicative and will make payload larger
+                                    _meta: {
+                                      locked: Object.keys(changedFields)
+                                    }
+                                  });
+                                }
+                              } else {
+                                newProps = __spreadProps(__spreadValues({}, currentProps), {
+                                  [fieldName]: value
+                                });
+                              }
                               if (itemSelector) {
                                 dispatch({
                                   type: "replace",
@@ -5287,28 +5275,31 @@ function Puck({
                               }
                             };
                             if (selectedItem && itemSelector) {
-                              const { readOnly = {} } = selectedItem.props._meta || {};
                               return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
                                   name: fieldName,
                                   label: field.label,
-                                  readOnly: readOnly[fieldName],
+                                  readOnly: ((_b2 = (_a2 = getItem(
+                                    itemSelector,
+                                    data
+                                  ).props._meta) == null ? void 0 : _a2.locked) == null ? void 0 : _b2.indexOf(fieldName)) > -1,
                                   value: selectedItem.props[fieldName],
                                   onChange: onChange2
                                 },
                                 `${selectedItem.props.id}_${fieldName}`
                               );
                             } else {
-                              const { readOnly = {} } = data.root._meta || {};
                               return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 InputOrGroup,
                                 {
                                   field,
                                   name: fieldName,
                                   label: field.label,
-                                  readOnly: readOnly[fieldName],
+                                  readOnly: ((_d = (_c = data.root._meta) == null ? void 0 : _c.locked) == null ? void 0 : _d.indexOf(
+                                    fieldName
+                                  )) > -1,
                                   value: data.root[fieldName],
                                   onChange: onChange2
                                 },
@@ -5339,22 +5330,6 @@ function Render({ config, data }) {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZoneProvider, { value: { data, config, mode: "render" }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropZone, { zone: rootDroppableId }) });
 }
-
-// lib/resolve-data.ts
-init_react_import();
-var resolveData = (data, config) => __async(void 0, null, function* () {
-  const { zones = {} } = data;
-  const zoneKeys = Object.keys(zones);
-  const resolvedZones = {};
-  for (let i = 0; i < zoneKeys.length; i++) {
-    const zoneKey = zoneKeys[i];
-    resolvedZones[zoneKey] = yield resolveAllProps(zones[zoneKey], config);
-  }
-  return __spreadProps(__spreadValues({}, data), {
-    content: yield resolveAllProps(data.content, config),
-    zones: resolvedZones
-  });
-});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
@@ -5364,8 +5339,7 @@ var resolveData = (data, config) => __async(void 0, null, function* () {
   IconButton,
   Puck,
   Render,
-  dropZoneContext,
-  resolveData
+  dropZoneContext
 });
 /*! Bundled license information:
 

package/package.json

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