@measured/puck 0.20.0-canary.d405985b → 0.20.0-canary.e25949a6

package/dist/no-external.mjs

@@ -13,17 +13,19 @@ import {
   Render,
   createUsePuck,
   overrideKeys,
+  registerOverlayPortal,
   renderContext,
+  setDeep,
   useGetPuck,
   usePuck
-} from "./chunk-DBSNJT3R.mjs";
+} from "./chunk-FYXJ5FPS.mjs";
 import {
   init_react_import,
   migrate,
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-32MJ3X3H.mjs";
+} from "./chunk-HUKJ36SA.mjs";
 
 // bundle/no-external.ts
 init_react_import();
@@ -43,8 +45,10 @@ export {
   createUsePuck,
   migrate,
   overrideKeys,
+  registerOverlayPortal,
   renderContext,
   resolveAllData,
+  setDeep,
   transformProps,
   useGetPuck,
   usePuck,

package/dist/rsc.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-Bp8tnkJS.mjs';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Bp8tnkJS.mjs';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-B57SgEEc.mjs';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-B57SgEEc.mjs';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-Bp8tnkJS.js';
-export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Bp8tnkJS.js';
+import { C as Config, U as UserGenerics, M as Metadata } from './walk-tree-B57SgEEc.js';
+export { m as migrate, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-B57SgEEc.js';
 import 'react';
 
 declare function Render<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>({ config, data, metadata, }: {

package/dist/rsc.js

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -95,7 +107,7 @@ var setupZone = (data, zoneKey) => {
   return newData;
 };
 
-// lib/use-slots.tsx
+// lib/field-transforms/use-field-transforms.tsx
 var import_react2 = require("react");
 
 // lib/data/default-slots.ts
@@ -104,14 +116,14 @@ var defaultSlots = (value, fields) => Object.keys(fields).reduce(
   value
 );
 
-// lib/data/map-slots.ts
+// lib/data/map-fields.ts
 var isPromise = (v) => !!v && typeof v.then === "function";
 var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
 var containsPromise = (arr) => arr.some(isPromise);
 var walkField = ({
   value,
   fields,
-  map,
+  mappers,
   propKey = "",
   propPath = "",
   id = "",
@@ -119,7 +131,9 @@ var walkField = ({
   recurseSlots = false
 }) => {
   var _a, _b, _c;
-  if (((_a = fields[propKey]) == null ? void 0 : _a.type) === "slot") {
+  const fieldType = (_a = fields[propKey]) == null ? void 0 : _a.type;
+  const map = mappers[fieldType];
+  if (map && fieldType === "slot") {
     const content = value || [];
     const mappedContent = recurseSlots ? content.map((el) => {
       var _a2;
@@ -131,7 +145,7 @@ var walkField = ({
       return walkField({
         value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
         fields: fields2,
-        map,
+        mappers,
         id: el.props.id,
         config,
         recurseSlots
@@ -140,7 +154,21 @@ var walkField = ({
     if (containsPromise(mappedContent)) {
       return Promise.all(mappedContent);
     }
-    return map(mappedContent, id, propPath, fields[propKey], propPath);
+    return map({
+      value: mappedContent,
+      parentId: id,
+      propName: propKey,
+      field: fields[propKey],
+      propPath
+    });
+  } else if (map && fields[propKey]) {
+    return map({
+      value,
+      parentId: id,
+      propName: propKey,
+      field: fields[propKey],
+      propPath
+    });
   }
   if (value && typeof value === "object") {
     if (Array.isArray(value)) {
@@ -150,7 +178,7 @@ var walkField = ({
         (el, idx) => walkField({
           value: el,
           fields: arrayFields,
-          map,
+          mappers,
           propKey,
           propPath: `${propPath}[${idx}]`,
           id,
@@ -169,7 +197,7 @@ var walkField = ({
       return walkObject({
         value,
         fields: objectFields,
-        map,
+        mappers,
         id,
         getPropPath: (k) => `${propPath}.${k}`,
         config,
@@ -182,7 +210,7 @@ var walkField = ({
 var walkObject = ({
   value,
   fields,
-  map,
+  mappers,
   id,
   getPropPath,
   config,
@@ -192,7 +220,7 @@ var walkObject = ({
     const opts = {
       value: v,
       fields,
-      map,
+      mappers,
       propKey: k,
       propPath: getPropPath(k),
       id,
@@ -214,14 +242,14 @@ var walkObject = ({
   }
   return flatten(newProps);
 };
-function mapSlots(item, map, config, recurseSlots = false) {
+function mapFields(item, mappers, config, recurseSlots = false) {
   var _a, _b, _c, _d, _e;
   const itemType = "type" in item ? item.type : "root";
   const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
   const newProps = walkObject({
     value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
     fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
-    map,
+    mappers,
     id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
     getPropPath: (k) => k,
     config,
@@ -237,35 +265,66 @@ function mapSlots(item, map, config, recurseSlots = false) {
   });
 }
 
-// lib/use-slots.tsx
-function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
-  const slotProps = (0, import_react2.useMemo)(() => {
-    const mapped = mapSlots(
-      item,
-      (content, _parentId, propName, field, propPath) => {
-        const wildcardPath = propPath.replace(/\[\d+\]/g, "[*]");
-        const isReadOnly = (readOnly == null ? void 0 : readOnly[propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly;
-        const render = isReadOnly ? renderSlotRender : renderSlotEdit;
-        const Slot = (dzProps) => render(__spreadProps(__spreadValues({
-          allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
-          disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
-        }, dzProps), {
-          zone: propName,
-          content
-        }));
-        return Slot;
-      },
-      config
-    ).props;
+// lib/field-transforms/use-field-transforms.tsx
+function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
+  const mappers = (0, import_react2.useMemo)(() => {
+    return Object.keys(transforms).reduce((acc, _fieldType) => {
+      const fieldType = _fieldType;
+      return __spreadProps(__spreadValues({}, acc), {
+        [fieldType]: (_a) => {
+          var _b = _a, {
+            parentId
+          } = _b, params = __objRest(_b, [
+            "parentId"
+          ]);
+          const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
+          const isReadOnly = (readOnly == null ? void 0 : readOnly[params.propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly || false;
+          const fn = transforms[fieldType];
+          return fn == null ? void 0 : fn(__spreadProps(__spreadValues({}, params), {
+            isReadOnly,
+            componentId: parentId
+          }));
+        }
+      });
+    }, {});
+  }, [transforms, readOnly, forceReadOnly]);
+  const transformedProps = (0, import_react2.useMemo)(() => {
+    const mapped = mapFields(item, mappers, config).props;
     return mapped;
-  }, [config, item, readOnly, forceReadOnly]);
+  }, [config, item, mappers]);
   const mergedProps = (0, import_react2.useMemo)(
-    () => __spreadValues(__spreadValues({}, item.props), slotProps),
-    [item.props, slotProps]
+    () => __spreadValues(__spreadValues({}, item.props), transformedProps),
+    [item.props, transformedProps]
   );
   return mergedProps;
 }
 
+// lib/field-transforms/default-transforms/slot-transform.tsx
+var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
+  slot: ({ value: content, propName, field, isReadOnly }) => {
+    const render = isReadOnly ? renderSlotRender : renderSlotEdit;
+    const Slot = (dzProps) => render(__spreadProps(__spreadValues({
+      allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
+      disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
+    }, dzProps), {
+      zone: propName,
+      content
+    }));
+    return Slot;
+  }
+});
+
+// lib/use-slots.tsx
+function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
+  return useFieldTransforms(
+    config,
+    item,
+    getSlotTransform(renderSlotEdit, renderSlotRender),
+    readOnly,
+    forceReadOnly
+  );
+}
+
 // components/SlotRender/server.tsx
 var import_react3 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -441,24 +500,27 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
       resolvedItem.readOnly = readOnly;
     }
   }
-  let itemWithResolvedChildren = yield mapSlots(
+  let itemWithResolvedChildren = yield mapFields(
     resolvedItem,
-    (content) => __async(void 0, null, function* () {
-      return yield Promise.all(
-        content.map(
-          (childItem) => __async(void 0, null, function* () {
-            return (yield resolveComponentData(
-              childItem,
-              config,
-              metadata,
-              onResolveStart,
-              onResolveEnd,
-              trigger
-            )).node;
-          })
-        )
-      );
-    }),
+    {
+      slot: (_02) => __async(void 0, [_02], function* ({ value }) {
+        const content = value;
+        return yield Promise.all(
+          content.map(
+            (childItem) => __async(void 0, null, function* () {
+              return (yield resolveComponentData(
+                childItem,
+                config,
+                metadata,
+                onResolveStart,
+                onResolveEnd,
+                trigger
+              )).node;
+            })
+          )
+        );
+      })
+    },
     config
   );
   if (shouldRunResolver && onResolveEnd) {
@@ -506,9 +568,9 @@ function resolveAllData(_0, _1) {
         },
         "force"
       )).node;
-      const resolvedDeep = yield mapSlots(
+      const resolvedDeep = yield mapFields(
         resolved,
-        processContent,
+        { slot: ({ value }) => processContent(value) },
         config
       );
       onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
@@ -542,11 +604,14 @@ function resolveAllData(_0, _1) {
 function walkTree(data, config, callbackFn) {
   var _a, _b;
   const walkItem = (item) => {
-    return mapSlots(
+    return mapFields(
       item,
-      (content, parentId, propName) => {
-        var _a2;
-        return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
+      {
+        slot: ({ value, parentId, propName }) => {
+          var _a2;
+          const content = value;
+          return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
+        }
       },
       config,
       true
@@ -663,7 +728,7 @@ var import_flat = __toESM(require("flat"));
 
 // lib/data/strip-slots.ts
 var stripSlots = (data, config) => {
-  return mapSlots(data, () => null, config);
+  return mapFields(data, { slot: () => null }, config);
 };
 
 // lib/data/flatten-node.ts
@@ -716,18 +781,21 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
     const mappedItem = mapNodeOrSkip(item, path, index);
     if (!mappedItem) return item;
     const id = mappedItem.props.id;
-    const newProps = __spreadProps(__spreadValues({}, mapSlots(
+    const newProps = __spreadProps(__spreadValues({}, mapFields(
       mappedItem,
-      (content, parentId2, slotId) => {
-        const zoneCompound = `${parentId2}:${slotId}`;
-        const [_2, newContent2] = processContent(
-          path,
-          zoneCompound,
-          content,
-          "slot",
-          parentId2
-        );
-        return newContent2;
+      {
+        slot: ({ value, parentId: parentId2, propPath }) => {
+          const content = value;
+          const zoneCompound = `${parentId2}:${propPath}`;
+          const [_2, newContent2] = processContent(
+            path,
+            zoneCompound,
+            content,
+            "slot",
+            parentId2
+          );
+          return newContent2;
+        }
       },
       config
     ).props), {

package/dist/rsc.mjs

@@ -5,7 +5,7 @@ import {
   resolveAllData,
   transformProps,
   walkTree
-} from "./chunk-32MJ3X3H.mjs";
+} from "./chunk-HUKJ36SA.mjs";
 
 // bundle/rsc.tsx
 init_react_import();

package/dist/{walk-tree-Bp8tnkJS.d.mts → walk-tree-B57SgEEc.d.mts}

@@ -17,7 +17,7 @@ type DropZoneProps = {
 
 type FieldOption = {
     label: string;
-    value: string | number | boolean;
+    value: string | number | boolean | undefined | null | object;
 };
 type FieldOptions = Array<FieldOption> | ReadonlyArray<FieldOption>;
 type BaseField = {
@@ -29,6 +29,7 @@ type BaseField = {
 type TextField = BaseField & {
     type: "text";
     placeholder?: string;
+    contentEditable?: boolean;
 };
 type NumberField = BaseField & {
     type: "number";
@@ -40,6 +41,7 @@ type NumberField = BaseField & {
 type TextareaField = BaseField & {
     type: "textarea";
     placeholder?: string;
+    contentEditable?: boolean;
 };
 type SelectField = BaseField & {
     type: "select";
@@ -117,6 +119,7 @@ type CustomFieldRender<Value extends any> = (props: {
 type CustomField<Value extends any> = BaseField & {
     type: "custom";
     render: CustomFieldRender<Value>;
+    contentEditable?: boolean;
 };
 type SlotField = BaseField & {
     type: "slot";
@@ -218,6 +221,9 @@ type UserGenerics<UserConfig extends Config = Config, UserProps extends ExtractP
     UserPublicAppState: UserPublicAppState;
     UserComponentData: UserComponentData;
 };
+type ExtractField<T extends Field["type"]> = Extract<Field, {
+    type: T;
+}>;
 
 type PuckContext = {
     renderDropZone: React.FC<DropZoneProps>;
@@ -286,6 +292,8 @@ type ArrayState = {
 type UiState = {
     leftSideBarVisible: boolean;
     rightSideBarVisible: boolean;
+    leftSideBarWidth?: number | null;
+    rightSideBarWidth?: number | null;
     itemSelector: ItemSelector | null;
     arrayState: Record<string, ArrayState | undefined>;
     previewMode: "interactive" | "edit";
@@ -342,12 +350,29 @@ type WithDeepSlots<T, SlotType = T> = T extends Slot ? SlotType : T extends (inf
     [K in keyof T]: WithDeepSlots<T[K], SlotType>;
 } : T;
 
+type MapFnParams<ThisField = Field> = {
+    value: any;
+    parentId: string;
+    propName: string;
+    field: ThisField;
+    propPath: string;
+};
+
+type FieldTransformFnParams<T> = Omit<MapFnParams<T>, "parentId"> & {
+    isReadOnly: boolean;
+    componentId: string;
+};
+type FieldTransformFn<T = any> = (params: FieldTransformFnParams<T>) => any;
+type FieldTransforms = Partial<{
+    [FieldType in Field["type"]]: FieldTransformFn<ExtractField<FieldType>>;
+}>;
+
 type RenderFunc<Props extends {
     [key: string]: any;
 } = {
     children: ReactNode;
 }> = (props: Props) => ReactElement;
-declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "components", "componentItem", "outline", "puck", "preview"];
+declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "drawer", "drawerItem", "componentOverlay", "outline", "puck", "preview"];
 type OverrideKey = (typeof overrideKeys)[number];
 type OverridesGeneric<Shape extends {
     [key in OverrideKey]: any;
@@ -385,11 +410,23 @@ type Overrides = OverridesGeneric<{
         children: ReactNode;
         name: string;
     }>;
+    drawer: RenderFunc;
+    drawerItem: RenderFunc<{
+        children: ReactNode;
+        name: string;
+    }>;
     iframe: RenderFunc<{
         children: ReactNode;
         document?: Document;
     }>;
     outline: RenderFunc;
+    componentOverlay: RenderFunc<{
+        children: ReactNode;
+        hover: boolean;
+        isSelected: boolean;
+        componentId: string;
+        componentType: string;
+    }>;
     puck: RenderFunc;
 }>;
 type FieldRenderFunctions = Omit<{
@@ -431,7 +468,8 @@ type IframeConfig = {
 };
 type OnAction<UserData extends Data = Data> = (action: PuckAction, appState: AppState<UserData>, prevAppState: AppState<UserData>) => void;
 type Plugin = {
-    overrides: Partial<Overrides>;
+    overrides?: Partial<Overrides>;
+    fieldTransforms?: FieldTransforms;
 };
 type History<D = any> = {
     state: D;
@@ -549,4 +587,4 @@ type WalkTreeOptions = {
 };
 declare function walkTree<T extends ComponentData | RootData | G["UserData"], UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(data: T, config: UserConfig, callbackFn: (data: Content, options: WalkTreeOptions) => Content | null | void): T;
 
-export { type RadioField as $, type AppState as A, type RootConfig as B, type Config as C, type DropZoneProps as D, type BaseData as E, type Fields as F, type RootDataWithoutProps as G, type History as H, type IframeConfig as I, type RootData as J, type ComponentDataOptionalId as K, type MappedItem as L, type Metadata as M, type ComponentDataMap as N, type Overrides as O, type Permissions as P, type Content as Q, type RootDataWithProps as R, type Slot as S, type BaseField as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type TextField as X, type NumberField as Y, type TextareaField as Z, type SelectField as _, type ComponentData as a, type ArrayField as a0, type ObjectField as a1, type Adaptor as a2, type ExternalFieldWithAdaptor as a3, type ExternalField as a4, type CustomFieldRender as a5, type CustomField as a6, type SlotField as a7, type PuckContext as a8, type DefaultRootFieldProps as a9, type DefaultRootRenderProps as aa, type DefaultRootProps as ab, type DefaultComponentProps as ac, type WithId as ad, type WithPuckProps as ae, type AsFieldProps as af, type WithChildren as ag, type ExtractPropsFromConfig as ah, type ExtractRootPropsFromConfig as ai, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type Field as g, type FieldProps as h, type Data as i, type OnAction as j, type InitialHistory as k, type ItemSelector as l, migrate as m, type Direction as n, type DragAxis as o, type Viewport as p, overrideKeys as q, resolveAllData as r, type OverrideKey as s, transformProps as t, type FieldRenderFunctions as u, type ItemWithId as v, walkTree as w, type ArrayState as x, type SlotComponent as y, type PuckComponent as z };
+export { type NumberField as $, type AppState as A, type ArrayState as B, type Config as C, type DropZoneProps as D, type SlotComponent as E, type Fields as F, type PuckComponent as G, type History as H, type IframeConfig as I, type RootConfig as J, type BaseData as K, type RootDataWithoutProps as L, type Metadata as M, type RootData as N, type Overrides as O, type Permissions as P, type ComponentDataOptionalId as Q, type RootDataWithProps as R, type Slot as S, type MappedItem as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type ComponentDataMap as X, type Content as Y, type BaseField as Z, type TextField as _, type ComponentData as a, type TextareaField as a0, type SelectField as a1, type RadioField as a2, type ArrayField as a3, type ObjectField as a4, type Adaptor as a5, type ExternalFieldWithAdaptor as a6, type ExternalField as a7, type CustomFieldRender as a8, type CustomField as a9, type SlotField as aa, type PuckContext as ab, type DefaultRootFieldProps as ac, type DefaultRootRenderProps as ad, type DefaultRootProps as ae, type DefaultComponentProps as af, type WithId as ag, type WithPuckProps as ah, type AsFieldProps as ai, type WithChildren as aj, type ExtractPropsFromConfig as ak, type ExtractRootPropsFromConfig as al, type ExtractField as am, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldTransforms as g, type Field as h, type FieldProps as i, type Data as j, type OnAction as k, type InitialHistory as l, migrate as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, resolveAllData as r, type FieldTransformFnParams as s, transformProps as t, type FieldTransformFn as u, overrideKeys as v, walkTree as w, type OverrideKey as x, type FieldRenderFunctions as y, type ItemWithId as z };

package/dist/{walk-tree-Bp8tnkJS.d.ts → walk-tree-B57SgEEc.d.ts}

@@ -17,7 +17,7 @@ type DropZoneProps = {
 
 type FieldOption = {
     label: string;
-    value: string | number | boolean;
+    value: string | number | boolean | undefined | null | object;
 };
 type FieldOptions = Array<FieldOption> | ReadonlyArray<FieldOption>;
 type BaseField = {
@@ -29,6 +29,7 @@ type BaseField = {
 type TextField = BaseField & {
     type: "text";
     placeholder?: string;
+    contentEditable?: boolean;
 };
 type NumberField = BaseField & {
     type: "number";
@@ -40,6 +41,7 @@ type NumberField = BaseField & {
 type TextareaField = BaseField & {
     type: "textarea";
     placeholder?: string;
+    contentEditable?: boolean;
 };
 type SelectField = BaseField & {
     type: "select";
@@ -117,6 +119,7 @@ type CustomFieldRender<Value extends any> = (props: {
 type CustomField<Value extends any> = BaseField & {
     type: "custom";
     render: CustomFieldRender<Value>;
+    contentEditable?: boolean;
 };
 type SlotField = BaseField & {
     type: "slot";
@@ -218,6 +221,9 @@ type UserGenerics<UserConfig extends Config = Config, UserProps extends ExtractP
     UserPublicAppState: UserPublicAppState;
     UserComponentData: UserComponentData;
 };
+type ExtractField<T extends Field["type"]> = Extract<Field, {
+    type: T;
+}>;
 
 type PuckContext = {
     renderDropZone: React.FC<DropZoneProps>;
@@ -286,6 +292,8 @@ type ArrayState = {
 type UiState = {
     leftSideBarVisible: boolean;
     rightSideBarVisible: boolean;
+    leftSideBarWidth?: number | null;
+    rightSideBarWidth?: number | null;
     itemSelector: ItemSelector | null;
     arrayState: Record<string, ArrayState | undefined>;
     previewMode: "interactive" | "edit";
@@ -342,12 +350,29 @@ type WithDeepSlots<T, SlotType = T> = T extends Slot ? SlotType : T extends (inf
     [K in keyof T]: WithDeepSlots<T[K], SlotType>;
 } : T;
 
+type MapFnParams<ThisField = Field> = {
+    value: any;
+    parentId: string;
+    propName: string;
+    field: ThisField;
+    propPath: string;
+};
+
+type FieldTransformFnParams<T> = Omit<MapFnParams<T>, "parentId"> & {
+    isReadOnly: boolean;
+    componentId: string;
+};
+type FieldTransformFn<T = any> = (params: FieldTransformFnParams<T>) => any;
+type FieldTransforms = Partial<{
+    [FieldType in Field["type"]]: FieldTransformFn<ExtractField<FieldType>>;
+}>;
+
 type RenderFunc<Props extends {
     [key: string]: any;
 } = {
     children: ReactNode;
 }> = (props: Props) => ReactElement;
-declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "components", "componentItem", "outline", "puck", "preview"];
+declare const overrideKeys: readonly ["header", "headerActions", "fields", "fieldLabel", "drawer", "drawerItem", "componentOverlay", "outline", "puck", "preview"];
 type OverrideKey = (typeof overrideKeys)[number];
 type OverridesGeneric<Shape extends {
     [key in OverrideKey]: any;
@@ -385,11 +410,23 @@ type Overrides = OverridesGeneric<{
         children: ReactNode;
         name: string;
     }>;
+    drawer: RenderFunc;
+    drawerItem: RenderFunc<{
+        children: ReactNode;
+        name: string;
+    }>;
     iframe: RenderFunc<{
         children: ReactNode;
         document?: Document;
     }>;
     outline: RenderFunc;
+    componentOverlay: RenderFunc<{
+        children: ReactNode;
+        hover: boolean;
+        isSelected: boolean;
+        componentId: string;
+        componentType: string;
+    }>;
     puck: RenderFunc;
 }>;
 type FieldRenderFunctions = Omit<{
@@ -431,7 +468,8 @@ type IframeConfig = {
 };
 type OnAction<UserData extends Data = Data> = (action: PuckAction, appState: AppState<UserData>, prevAppState: AppState<UserData>) => void;
 type Plugin = {
-    overrides: Partial<Overrides>;
+    overrides?: Partial<Overrides>;
+    fieldTransforms?: FieldTransforms;
 };
 type History<D = any> = {
     state: D;
@@ -549,4 +587,4 @@ type WalkTreeOptions = {
 };
 declare function walkTree<T extends ComponentData | RootData | G["UserData"], UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>>(data: T, config: UserConfig, callbackFn: (data: Content, options: WalkTreeOptions) => Content | null | void): T;
 
-export { type RadioField as $, type AppState as A, type RootConfig as B, type Config as C, type DropZoneProps as D, type BaseData as E, type Fields as F, type RootDataWithoutProps as G, type History as H, type IframeConfig as I, type RootData as J, type ComponentDataOptionalId as K, type MappedItem as L, type Metadata as M, type ComponentDataMap as N, type Overrides as O, type Permissions as P, type Content as Q, type RootDataWithProps as R, type Slot as S, type BaseField as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type TextField as X, type NumberField as Y, type TextareaField as Z, type SelectField as _, type ComponentData as a, type ArrayField as a0, type ObjectField as a1, type Adaptor as a2, type ExternalFieldWithAdaptor as a3, type ExternalField as a4, type CustomFieldRender as a5, type CustomField as a6, type SlotField as a7, type PuckContext as a8, type DefaultRootFieldProps as a9, type DefaultRootRenderProps as aa, type DefaultRootProps as ab, type DefaultComponentProps as ac, type WithId as ad, type WithPuckProps as ae, type AsFieldProps as af, type WithChildren as ag, type ExtractPropsFromConfig as ah, type ExtractRootPropsFromConfig as ai, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type Field as g, type FieldProps as h, type Data as i, type OnAction as j, type InitialHistory as k, type ItemSelector as l, migrate as m, type Direction as n, type DragAxis as o, type Viewport as p, overrideKeys as q, resolveAllData as r, type OverrideKey as s, transformProps as t, type FieldRenderFunctions as u, type ItemWithId as v, walkTree as w, type ArrayState as x, type SlotComponent as y, type PuckComponent as z };
+export { type NumberField as $, type AppState as A, type ArrayState as B, type Config as C, type DropZoneProps as D, type SlotComponent as E, type Fields as F, type PuckComponent as G, type History as H, type IframeConfig as I, type RootConfig as J, type BaseData as K, type RootDataWithoutProps as L, type Metadata as M, type RootData as N, type Overrides as O, type Permissions as P, type ComponentDataOptionalId as Q, type RootDataWithProps as R, type Slot as S, type MappedItem as T, type UserGenerics as U, type Viewports as V, type WithSlotProps as W, type ComponentDataMap as X, type Content as Y, type BaseField as Z, type TextField as _, type ComponentData as a, type TextareaField as a0, type SelectField as a1, type RadioField as a2, type ArrayField as a3, type ObjectField as a4, type Adaptor as a5, type ExternalFieldWithAdaptor as a6, type ExternalField as a7, type CustomFieldRender as a8, type CustomField as a9, type SlotField as aa, type PuckContext as ab, type DefaultRootFieldProps as ac, type DefaultRootRenderProps as ad, type DefaultRootProps as ae, type DefaultComponentProps as af, type WithId as ag, type WithPuckProps as ah, type AsFieldProps as ai, type WithChildren as aj, type ExtractPropsFromConfig as ak, type ExtractRootPropsFromConfig as al, type ExtractField as am, type PuckAction as b, type ResolveDataTrigger as c, type Plugin as d, type UiState as e, type ComponentConfig as f, type FieldTransforms as g, type Field as h, type FieldProps as i, type Data as j, type OnAction as k, type InitialHistory as l, migrate as m, type ItemSelector as n, type Direction as o, type DragAxis as p, type Viewport as q, resolveAllData as r, type FieldTransformFnParams as s, transformProps as t, type FieldTransformFn as u, overrideKeys as v, walkTree as w, type OverrideKey as x, type FieldRenderFunctions as y, type ItemWithId as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@measured/puck",
-  "version": "0.20.0-canary.d405985b",
+  "version": "0.20.0-canary.e25949a6",
   "author": "Chris Villa <chris@puckeditor.com>",
   "repository": "measuredco/puck",
   "bugs": "https://github.com/measuredco/puck/issues",