@measured/puck 0.14.0-canary.d944288 → 0.14.0-canary.dd9be54

package/README.md

@@ -15,6 +15,9 @@ The visual editor for React.
   <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
     <img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
   </a>
+ <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
+    <img alt="" src="https://img.shields.io/badge/repo-awesome--puck-fc60a8.svg?style=for-the-badge&labelColor=000000&logoWidth=20">
+  </a>
 </p>
 
 ## Demo
@@ -96,6 +99,13 @@ Available recipes include:
 - [**next**](https://github.com/measuredco/puck/tree/main/recipes/next): Next.js 13 app example, using App Router and static page generation
 - [**remix**](https://github.com/measuredco/puck/tree/main/recipes/remix): Remix Run v2 app example, using dynamic routes at root-level
 
+
+## Community
+
+* [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions
+* [awesome-puck](https://github.com/measuredco/awesome-puck) community repo for plugins, custom fields & more
+
+
 ## Hire the Puck team
 
 Puck is developed and maintained by **Measured**, a small group of industry veterans with decades of experience helping companies solve hard UI problems. We offer consultancy and development services for scale-ups, SMEs and enterprises.

package/dist/{Config-Bgx_Bij_.d.ts → Config-shqT_YTp.d.ts}

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode, ReactElement } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ItemSelector = {
     index: number;
@@ -12,7 +11,6 @@ type DropZoneProps = {
     disallow?: string[];
     style?: CSSProperties;
 };
-declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
 
 type iconTypes = "Smartphone" | "Monitor" | "Tablet";
 type Viewport = {
@@ -147,20 +145,26 @@ type Content<Props extends {
 } = {
     [key: string]: any;
 }> = ComponentData<Props>[];
-type PuckComponent<Props extends DefaultComponentProps = DefaultComponentProps> = (props: WithPuckProps<Props & {
+type PuckComponent<Props> = (props: WithPuckProps<Props & {
     puck: PuckContext;
 }>) => JSX.Element;
 type PuckContext = {
-    renderDropZone: typeof DropZone;
+    renderDropZone: React.FC<DropZoneProps>;
 };
-type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = ComponentData<ComponentProps>> = {
+type ComponentConfig<ComponentProps extends DefaultComponentProps = DefaultComponentProps, DefaultProps = ComponentProps, DataShape = Omit<ComponentData<ComponentProps>, "type">> = {
     render: PuckComponent<ComponentProps>;
     label?: string;
     defaultProps?: DefaultProps;
     fields?: Fields<ComponentProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof ComponentProps, boolean>>;
-    }) => Promise<Partial<ComponentDataWithOptionalProps<ComponentProps>>> | Partial<ComponentDataWithOptionalProps<ComponentProps>>;
+    }) => Promise<{
+        props?: Partial<ComponentProps>;
+        readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
+    }> | {
+        props?: Partial<ComponentProps>;
+        readOnly?: Partial<Record<keyof ComponentProps, boolean>>;
+    };
 };
 type Category<ComponentName> = {
     components?: ComponentName[];
@@ -168,22 +172,18 @@ type Category<ComponentName> = {
     visible?: boolean;
     defaultExpanded?: boolean;
 };
-type Config<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}, RootProps extends DefaultRootProps = DefaultRootProps, CategoryName extends string = any> = {
+type Config<Props extends Record<string, any> = Record<string, any>, RootProps extends DefaultRootProps = DefaultRootProps, CategoryName extends string = string> = {
     categories?: Record<CategoryName, Category<keyof Props>> & {
-        other?: Category<Props>;
+        other?: Category<keyof Props>;
     };
     components: {
         [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
     };
     root?: Partial<ComponentConfig<RootProps & {
-        children: ReactNode;
+        children?: ReactNode;
     }, Partial<RootProps & {
-        children: ReactNode;
-    }>, RootDataWithProps<RootProps>>>;
+        children?: ReactNode;
+    }>, RootDataWithProps>>;
 };
 type BaseData<Props extends {
     [key: string]: any;
@@ -201,13 +201,6 @@ type RootDataWithProps<Props extends DefaultRootProps = DefaultRootProps> = {
 };
 type RootDataWithoutProps<Props extends DefaultRootProps = DefaultRootProps> = Props;
 type RootData<Props extends DefaultRootProps = DefaultRootProps> = BaseData<Props> & Partial<RootDataWithProps<Props>> & Partial<RootDataWithoutProps<Props>>;
-type ComponentDataWithOptionalProps<Props extends {
-    [key: string]: any;
-} = {
-    [key: string]: any;
-}> = Omit<ComponentData, "props"> & {
-    props: Partial<WithPuckProps<Props>>;
-};
 type MappedItem = ComponentData;
 type Data<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultRootProps = DefaultRootProps> = {
     root: RootData<RootProps>;
@@ -248,4 +241,4 @@ type AppState = {
     ui: UiState;
 };
 
-export { type AppState as A, type BaseField as B, type Config as C, type Data as D, type ExternalFieldWithAdaptor as E, type Field as F, type ItemSelector as I, type MappedItem as M, type NumberField as N, type ObjectField as O, type PuckComponent as P, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UiState as U, type Viewports as V, type DefaultComponentProps as a, type DefaultRootProps as b, type RootData as c, type TextareaField as d, type RadioField as e, type ArrayField as f, type Adaptor as g, type ExternalField as h, type CustomField as i, type Fields as j, type Content as k, type PuckContext as l, type ComponentConfig as m, type BaseData as n, type ComponentData as o, type RootDataWithoutProps as p, type ItemWithId as q, type ArrayState as r, DropZone as s };
+export type { AppState as A, BaseField as B, Config as C, Data as D, ExternalFieldWithAdaptor as E, Field as F, ItemSelector as I, MappedItem as M, NumberField as N, ObjectField as O, PuckComponent as P, RootDataWithProps as R, SelectField as S, TextField as T, UiState as U, Viewports as V, DefaultRootProps as a, DropZoneProps as b, DefaultComponentProps as c, RootData as d, ComponentData as e, TextareaField as f, RadioField as g, ArrayField as h, Adaptor as i, ExternalField as j, CustomField as k, Fields as l, Content as m, PuckContext as n, ComponentConfig as o, BaseData as p, RootDataWithoutProps as q, ItemWithId as r, ArrayState as s };

package/dist/index.css

@@ -977,22 +977,24 @@ textarea.styles_Input-input {
 }
 .styles_ArrayField--isDraggingFrom {
   background-color: var(--puck-color-azure-11);
+  overflow: hidden;
 }
 .styles_ArrayField-addButton {
   background-color: var(--puck-color-white);
   border: none;
-  border-radius: 4px;
+  border-radius: 3px;
   display: flex;
   color: var(--puck-color-azure-05);
   justify-content: center;
   cursor: pointer;
   width: 100%;
   margin: 0;
-  padding: 16px;
+  padding: 14px;
   text-align: left;
   transition: background-color 50ms ease-in;
 }
 .styles_ArrayField--hasItems > .styles_ArrayField-addButton {
+  border-top: 1px solid var(--puck-color-grey-09);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -1014,20 +1016,28 @@ textarea.styles_Input-input {
   transition: none;
 }
 .styles_ArrayFieldItem {
-  background: var(--puck-color-white);
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
   display: block;
-  margin-bottom: 1px;
+  position: relative;
 }
-.styles_ArrayField--isDraggingFrom > .styles_ArrayFieldItem:not(.styles_ArrayFieldItem--isDragging) {
-  border-bottom: 1px solid var(--puck-color-grey-09);
-  margin-bottom: 0;
+.styles_ArrayFieldItem:not(.styles_ArrayFieldItem--isDragging):not(:first-of-type)::before {
+  background-color: var(--puck-color-grey-09);
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  content: "";
+  z-index: 1;
+  top: -1px;
+}
+.styles_ArrayFieldItem--isExpanded::before {
+  display: none;
 }
 .styles_ArrayFieldItem--isExpanded {
   border-bottom: 0;
   outline-offset: 0px !important;
   outline: 1px solid var(--puck-color-azure-07) !important;
+  z-index: 2;
 }
 .styles_ArrayFieldItem--isDragging {
   box-shadow: color-mix(in srgb, var(--puck-color-grey-06) 25%, transparent) 0 3px 6px 0;
@@ -1040,6 +1050,7 @@ textarea.styles_Input-input {
   border-top-right-radius: 0;
 }
 .styles_ArrayFieldItem-summary {
+  background: var(--puck-color-white);
   color: var(--puck-color-grey-04);
   cursor: pointer;
   display: flex;
@@ -1049,17 +1060,22 @@ textarea.styles_Input-input {
   font-size: var(--puck-font-size-xxs);
   list-style: none;
   padding: 12px 15px;
+  padding-bottom: 13px;
   position: relative;
   overflow: hidden;
   transition: background-color 50ms ease-in;
 }
-.styles_ArrayFieldItem--readOnly > .styles_ArrayFieldItem-summary {
-  background-color: var(--puck-color-grey-12);
-  color: var(--puck-color-grey-06);
-}
 .styles_ArrayFieldItem:first-of-type > .styles_ArrayFieldItem-summary {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.styles_ArrayField--addDisabled > .styles_ArrayFieldItem:last-of-type:not(.styles_ArrayFieldItem--isExpanded) > .styles_ArrayFieldItem-summary {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+.styles_ArrayField--addDisabled > .styles_ArrayFieldItem--isExpanded:last-of-type {
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
 }
 .styles_ArrayFieldItem-summary:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
@@ -1082,6 +1098,7 @@ textarea.styles_Input-input {
   transition: none;
 }
 .styles_ArrayFieldItem-body {
+  background: var(--puck-color-white);
   display: none;
 }
 .styles_ArrayFieldItem--isExpanded > .styles_ArrayFieldItem-body {

package/dist/index.d.ts

@@ -1,47 +1,10 @@
-import { C as Config, D as Data, I as ItemSelector, U as UiState, A as AppState, F as Field, V as Viewports, a as DefaultComponentProps, b as DefaultRootProps, M as MappedItem, R as RootDataWithProps, c as RootData } from './Config-Bgx_Bij_.js';
-export { g as Adaptor, f as ArrayField, r as ArrayState, n as BaseData, B as BaseField, m as ComponentConfig, o as ComponentData, k as Content, i as CustomField, s as DropZone, h as ExternalField, E as ExternalFieldWithAdaptor, j as Fields, q as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, l as PuckContext, e as RadioField, p as RootDataWithoutProps, S as SelectField, T as TextField, d as TextareaField } from './Config-Bgx_Bij_.js';
+import { U as UiState, D as Data, A as AppState, C as Config, a as DefaultRootProps, I as ItemSelector, b as DropZoneProps, F as Field, V as Viewports, c as DefaultComponentProps, M as MappedItem, R as RootDataWithProps, d as RootData, e as ComponentData } from './Config-shqT_YTp.js';
+export { i as Adaptor, h as ArrayField, s as ArrayState, p as BaseData, B as BaseField, o as ComponentConfig, m as Content, k as CustomField, j as ExternalField, E as ExternalFieldWithAdaptor, l as Fields, r as ItemWithId, N as NumberField, O as ObjectField, P as PuckComponent, n as PuckContext, g as RadioField, q as RootDataWithoutProps, S as SelectField, T as TextField, f as TextareaField } from './Config-shqT_YTp.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties, ReactElement, SyntheticEvent } from 'react';
+import { ReactNode, ReactElement, CSSProperties, SyntheticEvent } from 'react';
 import { DragStart, DragUpdate } from '@measured/dnd';
 
-type PathData = Record<string, {
-    path: string[];
-    label: string;
-}>;
-type DropZoneContext<UserConfig extends Config<any, any, any> = Config<any, any, any>> = {
-    data: Data;
-    config: UserConfig;
-    componentState?: Record<string, any>;
-    itemSelector?: ItemSelector | null;
-    setItemSelector?: (newIndex: ItemSelector | null) => void;
-    dispatch?: (action: PuckAction) => void;
-    areaId?: string;
-    draggedItem?: DragStart & Partial<DragUpdate>;
-    placeholderStyle?: CSSProperties;
-    hoveringArea?: string | null;
-    setHoveringArea?: (area: string | null) => void;
-    hoveringZone?: string | null;
-    setHoveringZone?: (zone: string | null) => void;
-    hoveringComponent?: string | null;
-    setHoveringComponent?: (id: string | null) => void;
-    registerZoneArea?: (areaId: string) => void;
-    areasWithZones?: Record<string, boolean>;
-    registerZone?: (zoneCompound: string) => void;
-    unregisterZone?: (zoneCompound: string) => void;
-    activeZones?: Record<string, boolean>;
-    pathData?: PathData;
-    registerPath?: (selector: ItemSelector) => void;
-    mode?: "edit" | "render";
-    zoneWillDrag?: string;
-    setZoneWillDrag?: (zone: string) => void;
-} | null;
-declare const dropZoneContext: react.Context<DropZoneContext<Config<any, any, any>>>;
-declare const DropZoneProvider: ({ children, value, }: {
-    children: ReactNode;
-    value: DropZoneContext;
-}) => react_jsx_runtime.JSX.Element;
-
 type InsertAction = {
     type: "insert";
     componentType: string;
@@ -106,7 +69,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
     href?: string | undefined;
     onClick?: ((e: any) => void | Promise<void>) | undefined;
     variant?: "primary" | "secondary" | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
     disabled?: boolean | undefined;
     tabIndex?: number | undefined;
     newTab?: boolean | undefined;
@@ -120,7 +83,7 @@ declare const Drawer: {
     ({ children, droppableId, direction, }: {
         children: ReactNode;
         droppableId?: string | undefined;
-        direction?: "horizontal" | "vertical" | undefined;
+        direction?: "vertical" | "horizontal" | undefined;
     }): react_jsx_runtime.JSX.Element;
     Item: ({ name, children, id, label, index, }: {
         name: string;
@@ -134,12 +97,51 @@ declare const Drawer: {
     }) => react_jsx_runtime.JSX.Element;
 };
 
+type PathData = Record<string, {
+    path: string[];
+    label: string;
+}>;
+type DropZoneContext<UserConfig extends Config = Config> = {
+    data: Data;
+    config: UserConfig;
+    componentState?: Record<string, any>;
+    itemSelector?: ItemSelector | null;
+    setItemSelector?: (newIndex: ItemSelector | null) => void;
+    dispatch?: (action: PuckAction) => void;
+    areaId?: string;
+    draggedItem?: DragStart & Partial<DragUpdate>;
+    placeholderStyle?: CSSProperties;
+    hoveringArea?: string | null;
+    setHoveringArea?: (area: string | null) => void;
+    hoveringZone?: string | null;
+    setHoveringZone?: (zone: string | null) => void;
+    hoveringComponent?: string | null;
+    setHoveringComponent?: (id: string | null) => void;
+    registerZoneArea?: (areaId: string) => void;
+    areasWithZones?: Record<string, boolean>;
+    registerZone?: (zoneCompound: string) => void;
+    unregisterZone?: (zoneCompound: string) => void;
+    activeZones?: Record<string, boolean>;
+    pathData?: PathData;
+    registerPath?: (selector: ItemSelector) => void;
+    mode?: "edit" | "render";
+    zoneWillDrag?: string;
+    setZoneWillDrag?: (zone: string) => void;
+} | null;
+declare const dropZoneContext: react.Context<DropZoneContext<Config<Record<string, any>, DefaultRootProps, string>>>;
+declare const DropZoneProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: DropZoneContext;
+}) => react_jsx_runtime.JSX.Element;
+
+declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
+
 declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
     children: ReactNode;
     href?: string | undefined;
     onClick?: ((e: SyntheticEvent) => void | Promise<void>) | undefined;
     variant?: "primary" | "secondary" | undefined;
-    type?: "reset" | "submit" | "button" | undefined;
+    type?: "button" | "submit" | "reset" | undefined;
     disabled?: boolean | undefined;
     tabIndex?: number | undefined;
     newTab?: boolean | undefined;
@@ -227,7 +229,7 @@ type IframeConfig = {
     enabled?: boolean;
 };
 
-declare function Puck<UserConfig extends Config<any, any, any> = Config<any, any, any>>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, }: {
+declare function Puck<UserConfig extends Config = Config>({ children, config, data: initialData, ui: initialUi, onChange, onPublish, plugins, overrides, renderHeader, renderHeaderActions, headerTitle, headerPath, viewports, iframe, }: {
     children?: ReactNode;
     config: UserConfig;
     data: Data;
@@ -259,7 +261,7 @@ declare namespace Puck {
     }) => react_jsx_runtime.JSX.Element;
 }
 
-declare function Render<UserConfig extends Config<any, any, any> = Config<any, any, any>>({ config, data }: {
+declare function Render<UserConfig extends Config = Config>({ config, data, }: {
     config: UserConfig;
     data: Data;
 }): react_jsx_runtime.JSX.Element;
@@ -277,7 +279,7 @@ type PropTransform<Props extends DefaultComponentProps = DefaultComponentProps,
 }>;
 declare function transformProps<Props extends DefaultComponentProps = DefaultComponentProps, RootProps extends DefaultComponentProps = DefaultComponentProps>(data: Data, propTransforms: PropTransform<Props, RootProps>): Data;
 
-declare const resolveAllData: (data: Data, config: Config<any, any, any>, onResolveStart?: ((item: MappedItem) => void) | undefined, onResolveEnd?: ((item: MappedItem) => void) | undefined) => Promise<{
+declare function resolveAllData(data: Data, config: Config, onResolveStart?: (item: MappedItem) => void, onResolveEnd?: (item: MappedItem) => void): Promise<{
     root: RootDataWithProps<DefaultRootProps> | RootData<DefaultRootProps>;
     content: any[];
     zones: Record<string, MappedItem[]>;
@@ -308,9 +310,12 @@ type PuckHistory = {
 
 declare const usePuck: () => {
     appState: AppState;
-    config: Config<any, any, any>;
+    config: Config<Record<string, any>, DefaultRootProps, string>;
     dispatch: (action: PuckAction) => void;
     history: Partial<PuckHistory>;
+    selectedItem: ComponentData<DefaultComponentProps & {
+        id: string;
+    }> | null;
 };
 
-export { AppState, Button, Config, Data, DefaultComponentProps, DefaultRootProps, Drawer, DropZoneProvider, Field, FieldLabel, IconButton, MappedItem, Puck, type PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, migrate, resolveAllData, transformProps, usePuck };
+export { AppState, Button, ComponentData, Config, Data, DefaultComponentProps, DefaultRootProps, Drawer, DropZone, DropZoneProvider, Field, FieldLabel, IconButton, MappedItem, Puck, type PuckAction, Render, RootData, RootDataWithProps, UiState, dropZoneContext, migrate, resolveAllData, transformProps, usePuck };

package/dist/index.js

@@ -8085,7 +8085,7 @@ var require_react_dom_development = __commonJS({
         var HostPortal = 4;
         var HostComponent = 5;
         var HostText = 6;
-        var Fragment16 = 7;
+        var Fragment17 = 7;
         var Mode = 8;
         var ContextConsumer = 9;
         var ContextProvider = 10;
@@ -9241,7 +9241,7 @@ var require_react_dom_development = __commonJS({
               return "DehydratedFragment";
             case ForwardRef:
               return getWrappedName$1(type, type.render, "ForwardRef");
-            case Fragment16:
+            case Fragment17:
               return "Fragment";
             case HostComponent:
               return type;
@@ -18912,7 +18912,7 @@ var require_react_dom_development = __commonJS({
             }
           }
           function updateFragment2(returnFiber, current2, fragment, lanes, key) {
-            if (current2 === null || current2.tag !== Fragment16) {
+            if (current2 === null || current2.tag !== Fragment17) {
               var created = createFiberFromFragment(fragment, returnFiber.mode, lanes, key);
               created.return = returnFiber;
               return created;
@@ -19315,7 +19315,7 @@ var require_react_dom_development = __commonJS({
               if (child.key === key) {
                 var elementType = element.type;
                 if (elementType === REACT_FRAGMENT_TYPE) {
-                  if (child.tag === Fragment16) {
+                  if (child.tag === Fragment17) {
                     deleteRemainingChildren(returnFiber, child.sibling);
                     var existing = useFiber(child, element.props.children);
                     existing.return = returnFiber;
@@ -23490,7 +23490,7 @@ var require_react_dom_development = __commonJS({
               var _resolvedProps2 = workInProgress2.elementType === type ? _unresolvedProps2 : resolveDefaultProps(type, _unresolvedProps2);
               return updateForwardRef(current2, workInProgress2, type, _resolvedProps2, renderLanes2);
             }
-            case Fragment16:
+            case Fragment17:
               return updateFragment(current2, workInProgress2, renderLanes2);
             case Mode:
               return updateMode(current2, workInProgress2, renderLanes2);
@@ -23763,7 +23763,7 @@ var require_react_dom_development = __commonJS({
             case SimpleMemoComponent:
             case FunctionComponent:
             case ForwardRef:
-            case Fragment16:
+            case Fragment17:
             case Mode:
             case Profiler:
             case ContextConsumer:
@@ -28022,7 +28022,7 @@ var require_react_dom_development = __commonJS({
           return fiber;
         }
         function createFiberFromFragment(elements, mode, lanes, key) {
-          var fiber = createFiber(Fragment16, elements, key, mode);
+          var fiber = createFiber(Fragment17, elements, key, mode);
           fiber.lanes = lanes;
           return fiber;
         }
@@ -29911,6 +29911,18 @@ var useModifierHeld = (modifier) => {
   return modifierHeld;
 };
 
+// lib/is-ios.ts
+init_react_import();
+var isIos = () => [
+  "iPad Simulator",
+  "iPhone Simulator",
+  "iPod Simulator",
+  "iPad",
+  "iPhone",
+  "iPod"
+].includes(navigator.platform) || // iPad on iOS 13 detection
+navigator.userAgent.includes("Mac") && "ontouchend" in document;
+
 // components/DraggableComponent/index.tsx
 var import_react_spinners2 = require("react-spinners");
 var import_jsx_runtime7 = require("react/jsx-runtime");
@@ -29946,60 +29958,76 @@ var DraggableComponent = ({
   const { status } = useAppContext();
   const El = status !== "LOADING" ? import_dnd3.Draggable : DefaultDraggable;
   (0, import_react7.useEffect)(onMount, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(El, { draggableId: id, index, isDragDisabled, children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
-    "div",
-    __spreadProps(__spreadValues(__spreadValues({
-      ref: provided.innerRef
-    }, provided.draggableProps), provided.dragHandleProps), {
-      className: getClassName4({
-        isSelected,
-        isModifierHeld,
-        isDragging: snapshot.isDragging,
-        isLocked,
-        forceHover,
-        indicativeHover
-      }),
-      style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
-        cursor: isModifierHeld ? "initial" : "grab"
-      }),
-      onMouseOver,
-      onMouseOut,
-      onMouseDown,
-      onMouseUp,
-      onClick,
-      children: [
-        debug,
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners2.ClipLoader, { "aria-label": "loading", size: 16, color: "inherit" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          "div",
-          {
-            className: getClassName4("actionsOverlay"),
-            style: {
-              top: actionsOverlayTop / zoomConfig.zoom
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  const [disableSecondaryAnimation, setDisableSecondaryAnimation] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
+    if (isIos()) {
+      setDisableSecondaryAnimation(true);
+    }
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    El,
+    {
+      draggableId: id,
+      index,
+      isDragDisabled,
+      disableSecondaryAnimation,
+      children: (provided, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "div",
+        __spreadProps(__spreadValues(__spreadValues({
+          ref: provided.innerRef
+        }, provided.draggableProps), provided.dragHandleProps), {
+          className: getClassName4({
+            isSelected,
+            isModifierHeld,
+            isDragging: snapshot.isDragging,
+            isLocked,
+            forceHover,
+            indicativeHover
+          }),
+          style: __spreadProps(__spreadValues(__spreadValues({}, style), provided.draggableProps.style), {
+            cursor: isModifierHeld ? "initial" : "grab"
+          }),
+          onMouseOver,
+          onMouseOut,
+          onMouseDown,
+          onMouseUp,
+          onClick,
+          children: [
+            debug,
+            isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("loadingOverlay"), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_spinners2.ClipLoader, { "aria-label": "loading", size: 16, color: "inherit" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
-                className: getClassName4("actions"),
+                className: getClassName4("actionsOverlay"),
                 style: {
-                  transform: `scale(${1 / zoomConfig.zoom}`,
-                  top: actionsTop / zoomConfig.zoom,
-                  right: actionsRight / zoomConfig.zoom
+                  top: actionsOverlayTop / zoomConfig.zoom
                 },
-                children: [
-                  label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("actionsLabel"), children: label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 }) })
-                ]
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                  "div",
+                  {
+                    className: getClassName4("actions"),
+                    style: {
+                      transform: `scale(${1 / zoomConfig.zoom}`,
+                      top: actionsTop / zoomConfig.zoom,
+                      right: actionsRight / zoomConfig.zoom
+                    },
+                    children: [
+                      label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("actionsLabel"), children: label }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDuplicate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Copy, { size: 16 }) }),
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { className: getClassName4("action"), onClick: onDelete, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Trash, { size: 16 }) })
+                    ]
+                  }
+                )
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("overlay") }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("contents"), children })
-      ]
-    })
-  ) }, id);
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("overlay") }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: getClassName4("contents"), children })
+          ]
+        })
+      )
+    },
+    id
+  );
 };
 
 // components/DropZone/styles.module.css
@@ -30545,7 +30573,7 @@ var usePlaceholderStyle = () => {
     const droppableId = (draggedItem.destination || draggedItem.source).droppableId;
     const domQuery = `[${queryAttr}='${draggableId}']`;
     const frame = getFrame();
-    const draggedDOM = frame == null ? void 0 : frame.querySelector(domQuery);
+    const draggedDOM = document.querySelector(domQuery) || (frame == null ? void 0 : frame.querySelector(domQuery));
     if (!draggedDOM) {
       return;
     }
@@ -31442,7 +31470,7 @@ var styles_default10 = {
   "ArrayFieldItem--isDragging": "styles_ArrayFieldItem--isDragging",
   "ArrayFieldItem--isExpanded": "styles_ArrayFieldItem--isExpanded",
   "ArrayFieldItem-summary": "styles_ArrayFieldItem-summary",
-  "ArrayFieldItem--readOnly": "styles_ArrayFieldItem--readOnly",
+  "ArrayField--addDisabled": "styles_ArrayField--addDisabled",
   "ArrayFieldItem-body": "styles_ArrayFieldItem-body",
   "ArrayFieldItem-fieldset": "styles_ArrayFieldItem-fieldset",
   "ArrayFieldItem-rhs": "styles_ArrayFieldItem-rhs",
@@ -31528,12 +31556,15 @@ var ArrayField = ({
     [arrayState]
   );
   (0, import_react14.useEffect)(() => {
-    setUi(mapArrayStateToUi(arrayState));
+    if (arrayState.items.length > 0) {
+      setUi(mapArrayStateToUi(arrayState));
+    }
   }, []);
   const [hovering, setHovering] = (0, import_react14.useState)(false);
   if (field.type !== "array" || !field.arrayFields) {
     return null;
   }
+  const addDisabled = field.max !== void 0 && localState.arrayState.items.length >= field.max || readOnly;
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     FieldLabelInternal,
     {
@@ -31575,7 +31606,8 @@ var ArrayField = ({
                 ref: provided.innerRef,
                 className: getClassName10({
                   isDraggingFrom: !!snapshot.draggingFromThisWith,
-                  hasItems: Array.isArray(value) && value.length > 0
+                  hasItems: Array.isArray(value) && value.length > 0,
+                  addDisabled
                 }),
                 onMouseOver: (e) => {
                   e.stopPropagation();
@@ -31688,12 +31720,11 @@ var ArrayField = ({
                     );
                   }),
                   provided.placeholder,
-                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                  !addDisabled && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "button",
                     {
                       type: "button",
                       className: getClassName10("addButton"),
-                      disabled: field.max !== void 0 && localState.arrayState.items.length >= field.max,
                       onClick: () => {
                         const existingValue = value || [];
                         const newValue = [
@@ -31885,7 +31916,7 @@ var ExternalInput = ({
   const search = (0, import_react16.useCallback)(
     (query, filters2) => __async(void 0, null, function* () {
       setIsLoading(true);
-      const cacheKey = `${id}-${name}-${query}-${JSON.stringify(filters2)}`;
+      const cacheKey = `${id}-${query}-${JSON.stringify(filters2)}`;
       const listData = dataCache[cacheKey] || (yield field.fetchList({ query, filters: filters2 }));
       if (listData) {
         setData(listData);
@@ -32729,7 +32760,12 @@ var Preview = ({ id = "puck-preview" }) => {
   const Page = (0, import_react22.useCallback)(
     (pageProps) => {
       var _a, _b;
-      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({}, pageProps), { editMode: true })) : pageProps.children;
+      return ((_a = config.root) == null ? void 0 : _a.render) ? (_b = config.root) == null ? void 0 : _b.render(__spreadProps(__spreadValues({
+        id: "puck-root"
+      }, pageProps), {
+        editMode: true,
+        puck: { renderDropZone: DropZone }
+      })) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: pageProps.children });
     },
     [config.root]
   );
@@ -33928,7 +33964,10 @@ Puck.Preview = Preview;
 // components/Render/index.tsx
 init_react_import();
 var import_jsx_runtime35 = require("react/jsx-runtime");
-function Render({ config, data }) {
+function Render({
+  config,
+  data
+}) {
   var _a;
   const rootProps = data.root.props || data.root;
   const title = (rootProps == null ? void 0 : rootProps.title) || "";
@@ -34007,37 +34046,51 @@ function transformProps(data, propTransforms) {
 
 // lib/resolve-all-data.ts
 init_react_import();
-var resolveAllData = (data, config, onResolveStart, onResolveEnd) => __async(void 0, null, function* () {
-  const dynamicRoot = yield resolveRootData(data, config);
-  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 resolveAllComponentData(
-      zones[zoneKey],
-      config,
-      onResolveStart,
-      onResolveEnd
-    );
-  }
-  return __spreadProps(__spreadValues({}, data), {
-    root: dynamicRoot,
-    content: yield resolveAllComponentData(
-      data.content,
-      config,
-      onResolveStart,
-      onResolveEnd
-    ),
-    zones: resolvedZones
+function resolveAllData(data, config, onResolveStart, onResolveEnd) {
+  return __async(this, null, function* () {
+    const dynamicRoot = yield resolveRootData(data, config);
+    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 resolveAllComponentData(
+        zones[zoneKey],
+        config,
+        onResolveStart,
+        onResolveEnd
+      );
+    }
+    return __spreadProps(__spreadValues({}, data), {
+      root: dynamicRoot,
+      content: yield resolveAllComponentData(
+        data.content,
+        config,
+        onResolveStart,
+        onResolveEnd
+      ),
+      zones: resolvedZones
+    });
   });
-});
+}
 
 // lib/use-puck.ts
 init_react_import();
 var usePuck = () => {
-  const { state: appState, config, history, dispatch } = useAppContext();
-  return { appState, config, dispatch, history };
+  const {
+    state: appState,
+    config,
+    history,
+    dispatch,
+    selectedItem
+  } = useAppContext();
+  return {
+    appState,
+    config,
+    dispatch,
+    history,
+    selectedItem: selectedItem || null
+  };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/rsc.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, D as Data } from './Config-Bgx_Bij_.js';
+import { C as Config, D as Data } from './Config-shqT_YTp.js';
 import 'react';
 
-declare function Render<UserConfig extends Config<any, any, any> = Config<any, any, any>>({ config, data }: {
+declare function Render<UserConfig extends Config = Config>({ config, data, }: {
     config: UserConfig;
     data: Data;
 }): react_jsx_runtime.JSX.Element;

package/dist/rsc.js

@@ -109,7 +109,10 @@ function DropZoneRender({
     return null;
   }) });
 }
-function Render({ config, data }) {
+function Render({
+  config,
+  data
+}) {
   var _a;
   if ((_a = config.root) == null ? void 0 : _a.render) {
     const rootProps = data.root.props || data.root;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.14.0-canary.d944288",
+  "version": "0.14.0-canary.dd9be54",
   "author": "Measured Corporation Ltd <hello@measured.co>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",
@@ -60,7 +60,7 @@
   },
   "dependencies": {
     "@measured/auto-frame-component": "0.1.1",
-    "@measured/dnd": "16.6.0-canary.dcf051d",
+    "@measured/dnd": "16.6.0-canary.c7c88e8",
     "deep-diff": "^1.0.2",
     "react-hotkeys-hook": "^4.4.1",
     "react-spinners": "^0.13.8",