@measured/puck 0.16.0-canary.f761e5f → 0.16.0

package/dist/{actions-DDAd8cys.d.mts → actions-9pHbVtMU.d.mts}

@@ -140,12 +140,12 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         changed: Partial<Record<keyof FieldProps, boolean>>;
         fields: Fields<FieldProps>;
         lastFields: Fields<FieldProps>;
-        lastData: DataShape;
+        lastData: DataShape | null;
         appState: AppState;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
-        lastData: DataShape;
+        lastData: DataShape | null;
     }) => Promise<{
         props?: Partial<FieldProps>;
         readOnly?: Partial<Record<keyof FieldProps, boolean>>;
@@ -155,10 +155,11 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
     };
     resolvePermissions?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
-        lastPermissions: Partial<Permissions> | undefined;
-        initialPermissions: Partial<Permissions>;
+        lastPermissions: Partial<Permissions>;
+        permissions: Partial<Permissions>;
         appState: AppState;
-    }) => Partial<Permissions>;
+        lastData: DataShape | null;
+    }) => Promise<Partial<Permissions>> | Partial<Permissions>;
 };
 type Category<ComponentName> = {
     components?: ComponentName[];
@@ -173,7 +174,7 @@ type Config<Props extends DefaultComponentProps = DefaultComponentProps, RootPro
     components: {
         [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
     };
-    root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData>>;
+    root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
 };
 
 type WithId<Props> = Props & {
@@ -189,6 +190,14 @@ type WithChildren<Props> = Props & {
 };
 type ExtractPropsFromConfig<UserConfig> = UserConfig extends Config<infer P, any, any> ? P : never;
 type ExtractRootPropsFromConfig<UserConfig> = UserConfig extends Config<any, infer P, any> ? P : never;
+type UserGenerics<UserConfig extends Config = Config, UserProps extends ExtractPropsFromConfig<UserConfig> = ExtractPropsFromConfig<UserConfig>, UserRootProps extends ExtractRootPropsFromConfig<UserConfig> = ExtractRootPropsFromConfig<UserConfig>, UserData extends Data<UserProps, UserRootProps> | Data = Data<UserProps, UserRootProps>, UserAppState extends AppState<UserData> = AppState<UserData>, UserComponentData extends ComponentData = UserData["content"][0]> = {
+    UserConfig: UserConfig;
+    UserProps: UserProps;
+    UserRootProps: UserRootProps;
+    UserData: UserData;
+    UserAppState: UserAppState;
+    UserComponentData: UserComponentData;
+};
 
 type PuckContext = {
     renderDropZone: React.FC<DropZoneProps>;
@@ -349,11 +358,27 @@ type Permissions = {
 } & Record<string, boolean>;
 type IframeConfig = {
     enabled?: boolean;
+    waitForStyles?: boolean;
 };
 type OnAction<UserData extends Data = Data> = (action: PuckAction, appState: AppState<UserData>, prevAppState: AppState<UserData>) => void;
 type Plugin = {
     overrides: Partial<Overrides>;
 };
+type History<D = any> = {
+    state: D;
+    id?: string;
+};
+type InitialHistoryAppend<AS = Partial<AppState>> = {
+    histories: History<AS>[];
+    index?: number;
+    appendData?: true;
+};
+type InitialHistoryNoAppend<AS = Partial<AppState>> = {
+    histories: [History<AS>, ...History<AS>[]];
+    index?: number;
+    appendData?: false;
+};
+type InitialHistory<AS = Partial<AppState>> = InitialHistoryAppend<AS> | InitialHistoryNoAppend<AS>;
 
 type InsertAction = {
     type: "insert";
@@ -415,4 +440,4 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
-export { type AsFieldProps as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type Field as F, type ObjectField as G, type Adaptor as H, type ItemSelector as I, type ExternalFieldWithAdaptor as J, type ExternalField as K, type CustomField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type PuckAction as P, type Fields as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UiState as U, type Viewports as V, type PuckContext as W, type DefaultRootRenderProps as X, type DefaultRootProps as Y, type WithId as Z, type WithPuckProps as _, type FieldProps as a, type WithChildren as a0, type DropZoneProps as b, type ExtractRootPropsFromConfig as c, type Permissions as d, type Plugin as e, type Overrides as f, type IframeConfig as g, type DefaultComponentProps as h, type DefaultRootFieldProps as i, type ComponentData as j, type Viewport as k, type OverrideKey as l, type FieldRenderFunctions as m, type ItemWithId as n, overrideKeys as o, type ArrayState as p, type PuckComponent as q, type ComponentConfig as r, type RootDataWithoutProps as s, type RootData as t, type ComponentDataMap as u, type Content as v, type BaseField as w, type TextareaField as x, type RadioField as y, type ArrayField as z };
+export { type DefaultRootProps as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type Field as F, type RadioField as G, type History as H, type ItemSelector as I, type ArrayField as J, type ObjectField as K, type Adaptor as L, type MappedItem as M, type NumberField as N, type OnAction as O, type PuckAction as P, type ExternalFieldWithAdaptor as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ExternalField as W, type CustomField as X, type Fields as Y, type PuckContext as Z, type DefaultRootRenderProps as _, type FieldProps as a, type WithId as a0, type WithPuckProps as a1, type AsFieldProps as a2, type WithChildren as a3, type DropZoneProps as b, type UiState as c, type Permissions as d, type Plugin as e, type Overrides as f, type IframeConfig as g, type InitialHistory as h, type DefaultComponentProps as i, type DefaultRootFieldProps as j, type ComponentData as k, type ExtractRootPropsFromConfig as l, type ComponentDataMap as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type ComponentConfig as u, type RootDataWithoutProps as v, type RootData as w, type Content as x, type BaseField as y, type TextareaField as z };

package/dist/{actions-DDAd8cys.d.ts → actions-9pHbVtMU.d.ts}

@@ -140,12 +140,12 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
         changed: Partial<Record<keyof FieldProps, boolean>>;
         fields: Fields<FieldProps>;
         lastFields: Fields<FieldProps>;
-        lastData: DataShape;
+        lastData: DataShape | null;
         appState: AppState;
     }) => Promise<Fields<FieldProps>> | Fields<FieldProps>;
     resolveData?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
-        lastData: DataShape;
+        lastData: DataShape | null;
     }) => Promise<{
         props?: Partial<FieldProps>;
         readOnly?: Partial<Record<keyof FieldProps, boolean>>;
@@ -155,10 +155,11 @@ type ComponentConfig<RenderProps extends DefaultComponentProps = DefaultComponen
     };
     resolvePermissions?: (data: DataShape, params: {
         changed: Partial<Record<keyof FieldProps, boolean>>;
-        lastPermissions: Partial<Permissions> | undefined;
-        initialPermissions: Partial<Permissions>;
+        lastPermissions: Partial<Permissions>;
+        permissions: Partial<Permissions>;
         appState: AppState;
-    }) => Partial<Permissions>;
+        lastData: DataShape | null;
+    }) => Promise<Partial<Permissions>> | Partial<Permissions>;
 };
 type Category<ComponentName> = {
     components?: ComponentName[];
@@ -173,7 +174,7 @@ type Config<Props extends DefaultComponentProps = DefaultComponentProps, RootPro
     components: {
         [ComponentName in keyof Props]: Omit<ComponentConfig<Props[ComponentName], Props[ComponentName]>, "type">;
     };
-    root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData>>;
+    root?: Partial<ComponentConfig<DefaultRootRenderProps<RootProps>, AsFieldProps<RootProps>, RootData<AsFieldProps<RootProps>>>>;
 };
 
 type WithId<Props> = Props & {
@@ -189,6 +190,14 @@ type WithChildren<Props> = Props & {
 };
 type ExtractPropsFromConfig<UserConfig> = UserConfig extends Config<infer P, any, any> ? P : never;
 type ExtractRootPropsFromConfig<UserConfig> = UserConfig extends Config<any, infer P, any> ? P : never;
+type UserGenerics<UserConfig extends Config = Config, UserProps extends ExtractPropsFromConfig<UserConfig> = ExtractPropsFromConfig<UserConfig>, UserRootProps extends ExtractRootPropsFromConfig<UserConfig> = ExtractRootPropsFromConfig<UserConfig>, UserData extends Data<UserProps, UserRootProps> | Data = Data<UserProps, UserRootProps>, UserAppState extends AppState<UserData> = AppState<UserData>, UserComponentData extends ComponentData = UserData["content"][0]> = {
+    UserConfig: UserConfig;
+    UserProps: UserProps;
+    UserRootProps: UserRootProps;
+    UserData: UserData;
+    UserAppState: UserAppState;
+    UserComponentData: UserComponentData;
+};
 
 type PuckContext = {
     renderDropZone: React.FC<DropZoneProps>;
@@ -349,11 +358,27 @@ type Permissions = {
 } & Record<string, boolean>;
 type IframeConfig = {
     enabled?: boolean;
+    waitForStyles?: boolean;
 };
 type OnAction<UserData extends Data = Data> = (action: PuckAction, appState: AppState<UserData>, prevAppState: AppState<UserData>) => void;
 type Plugin = {
     overrides: Partial<Overrides>;
 };
+type History<D = any> = {
+    state: D;
+    id?: string;
+};
+type InitialHistoryAppend<AS = Partial<AppState>> = {
+    histories: History<AS>[];
+    index?: number;
+    appendData?: true;
+};
+type InitialHistoryNoAppend<AS = Partial<AppState>> = {
+    histories: [History<AS>, ...History<AS>[]];
+    index?: number;
+    appendData?: false;
+};
+type InitialHistory<AS = Partial<AppState>> = InitialHistoryAppend<AS> | InitialHistoryNoAppend<AS>;
 
 type InsertAction = {
     type: "insert";
@@ -415,4 +440,4 @@ type PuckAction = {
     recordHistory?: boolean;
 } & (ReorderAction | InsertAction | MoveAction | ReplaceAction | RemoveAction | DuplicateAction | SetAction | SetDataAction | SetUiAction | RegisterZoneAction | UnregisterZoneAction);
 
-export { type AsFieldProps as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type Field as F, type ObjectField as G, type Adaptor as H, type ItemSelector as I, type ExternalFieldWithAdaptor as J, type ExternalField as K, type CustomField as L, type MappedItem as M, type NumberField as N, type OnAction as O, type PuckAction as P, type Fields as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UiState as U, type Viewports as V, type PuckContext as W, type DefaultRootRenderProps as X, type DefaultRootProps as Y, type WithId as Z, type WithPuckProps as _, type FieldProps as a, type WithChildren as a0, type DropZoneProps as b, type ExtractRootPropsFromConfig as c, type Permissions as d, type Plugin as e, type Overrides as f, type IframeConfig as g, type DefaultComponentProps as h, type DefaultRootFieldProps as i, type ComponentData as j, type Viewport as k, type OverrideKey as l, type FieldRenderFunctions as m, type ItemWithId as n, overrideKeys as o, type ArrayState as p, type PuckComponent as q, type ComponentConfig as r, type RootDataWithoutProps as s, type RootData as t, type ComponentDataMap as u, type Content as v, type BaseField as w, type TextareaField as x, type RadioField as y, type ArrayField as z };
+export { type DefaultRootProps as $, type AppState as A, type BaseData as B, type Config as C, type Data as D, type ExtractPropsFromConfig as E, type Field as F, type RadioField as G, type History as H, type ItemSelector as I, type ArrayField as J, type ObjectField as K, type Adaptor as L, type MappedItem as M, type NumberField as N, type OnAction as O, type PuckAction as P, type ExternalFieldWithAdaptor as Q, type RootDataWithProps as R, type SelectField as S, type TextField as T, type UserGenerics as U, type Viewports as V, type ExternalField as W, type CustomField as X, type Fields as Y, type PuckContext as Z, type DefaultRootRenderProps as _, type FieldProps as a, type WithId as a0, type WithPuckProps as a1, type AsFieldProps as a2, type WithChildren as a3, type DropZoneProps as b, type UiState as c, type Permissions as d, type Plugin as e, type Overrides as f, type IframeConfig as g, type InitialHistory as h, type DefaultComponentProps as i, type DefaultRootFieldProps as j, type ComponentData as k, type ExtractRootPropsFromConfig as l, type ComponentDataMap as m, type Viewport as n, overrideKeys as o, type OverrideKey as p, type FieldRenderFunctions as q, type ItemWithId as r, type ArrayState as s, type PuckComponent as t, type ComponentConfig as u, type RootDataWithoutProps as v, type RootData as w, type Content as x, type BaseField as y, type TextareaField as z };

package/dist/index.css

@@ -137,10 +137,11 @@
 /* styles.css */
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
-._ActionBarComponent_8nyey_1 {
+._ActionBar_fp58q_1 {
   display: flex;
   width: auto;
   padding: 4px;
+  padding-right: 0;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   border-radius: 8px;
@@ -150,7 +151,7 @@
   gap: 4px;
   min-height: 26px;
 }
-._ActionBarComponent-actionsLabel_8nyey_15 {
+._ActionBar-actionsLabel_fp58q_16 {
   color: var(--puck-color-grey-08);
   display: flex;
   font-size: var(--puck-font-size-xxxs);
@@ -162,12 +163,13 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._ActionBarComponent-action_8nyey_15:first-of-type {
+._ActionBar-group_fp58q_29 {
   border-left: 0.5px solid var(--puck-color-grey-05);
-  border-radius: 0;
-  padding-left: 16px;
+  display: flex;
+  padding-left: 4px;
+  padding-right: 4px;
 }
-._ActionBarComponent-action_8nyey_15 {
+._ActionBar-action_fp58q_16 {
   background: transparent;
   border: none;
   color: var(--puck-color-grey-08);
@@ -180,17 +182,17 @@
   justify-content: center;
   transition: color 50ms ease-in;
 }
-._ActionBarComponent-action_8nyey_15:focus-visible {
+._ActionBar-action_fp58q_16:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: -2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ActionBarComponent-action_8nyey_15:hover {
+  ._ActionBar-action_fp58q_16:hover {
     color: var(--puck-color-azure-06);
     transition: none;
   }
 }
-._ActionBarComponent-action_8nyey_15:active {
+._ActionBar-action_fp58q_16:active {
   color: var(--puck-color-azure-07);
   transition: none;
 }
@@ -599,10 +601,10 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/ExternalInput/styles.module.css/#css-module-data */
-._ExternalInput-actions_19obq_1 {
+._ExternalInput-actions_wprq3_1 {
   display: flex;
 }
-._ExternalInput-button_19obq_5 {
+._ExternalInput-button_wprq3_5 {
   display: flex;
   gap: 8px;
   align-items: center;
@@ -611,7 +613,6 @@ textarea._Input-input_3pq3z_47 {
   border: 1px solid var(--puck-color-grey-09);
   border-radius: 4px;
   color: var(--puck-color-azure-04);
-  cursor: pointer;
   padding: 12px 16px;
   font-weight: 500;
   white-space: nowrap;
@@ -621,19 +622,21 @@ textarea._Input-input_3pq3z_47 {
   overflow: hidden;
   flex-grow: 1;
 }
-._ExternalInput--dataSelected_19obq_25 ._ExternalInput-button_19obq_5 {
+._ExternalInput--dataSelected_wprq3_24 ._ExternalInput-button_wprq3_5 {
   color: var(--puck-color-grey-03);
   display: block;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
 }
-._ExternalInput-detachButton_19obq_32 {
+._ExternalInput--readOnly_wprq3_31 ._ExternalInput-button_wprq3_5 {
+  background-color: var(--puck-color-grey-11);
+}
+._ExternalInput-detachButton_wprq3_35 {
   border: 1px solid var(--puck-color-grey-09);
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
   background-color: var(--puck-color-grey-12);
   color: var(--puck-color-grey-05);
-  cursor: pointer;
   display: flex;
   gap: 8px;
   align-items: center;
@@ -643,28 +646,28 @@ textarea._Input-input_3pq3z_47 {
   transition: background-color 50ms ease-in, color 50ms ease-in;
   margin-left: -1px;
 }
-._ExternalInput-button_19obq_5:focus-visible,
-._ExternalInput-detachButton_19obq_32:focus-visible {
+._ExternalInput-button_wprq3_5:focus-visible,
+._ExternalInput-detachButton_wprq3_35:focus-visible {
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
   z-index: 1;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInput-button_19obq_5:hover,
-  ._ExternalInput-detachButton_19obq_32:hover {
+  ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:hover,
+  ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
     background: var(--puck-color-azure-12);
     transition: none;
   }
-  ._ExternalInput-detachButton_19obq_32:hover {
+  ._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:hover {
     color: var(--puck-color-azure-04);
   }
 }
-._ExternalInput-button_19obq_5:active,
-._ExternalInput-detachButton_19obq_32:active {
+._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-button_wprq3_5:active,
+._ExternalInput_wprq3_1:not(._ExternalInput--readOnly_wprq3_31) ._ExternalInput-detachButton_wprq3_35:active {
   background: var(--puck-color-azure-11);
   transition: none;
 }
-._ExternalInputModal_19obq_74 {
+._ExternalInputModal_wprq3_79 {
   color: var(--puck-color-black);
   display: grid;
   grid-template-rows: min-content minmax(128px, 100%) min-content;
@@ -673,35 +676,35 @@ textarea._Input-input_3pq3z_47 {
   min-height: 50dvh;
   max-height: 90dvh;
 }
-._ExternalInputModal-grid_19obq_84 {
+._ExternalInputModal-grid_wprq3_89 {
   display: flex;
   flex-direction: column;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-grid_19obq_84 {
+  ._ExternalInputModal-grid_wprq3_89 {
     display: grid;
     grid-template-columns: 100%;
   }
-  ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-grid_19obq_84 {
+  ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-grid_wprq3_89 {
     grid-template-columns: 25% 75%;
   }
 }
-._ExternalInputModal-filters_19obq_100 {
+._ExternalInputModal-filters_wprq3_105 {
   border-bottom: 1px solid var(--puck-color-grey-09);
 }
-._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
+._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
   display: none;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-filters_19obq_100 {
+  ._ExternalInputModal-filters_wprq3_105 {
     border-right: 1px solid var(--puck-color-grey-09);
     display: none;
   }
-  ._ExternalInputModal--filtersToggled_19obq_95 ._ExternalInputModal-filters_19obq_100 {
+  ._ExternalInputModal--filtersToggled_wprq3_100 ._ExternalInputModal-filters_wprq3_105 {
     display: block;
   }
 }
-._ExternalInputModal-masthead_19obq_119 {
+._ExternalInputModal-masthead_wprq3_124 {
   background-color: var(--puck-color-grey-12);
   border-bottom: 1px solid var(--puck-color-grey-09);
   display: flex;
@@ -709,13 +712,13 @@ textarea._Input-input_3pq3z_47 {
   gap: 24px;
   padding: 24px;
 }
-._ExternalInputModal-tableWrapper_19obq_128 {
+._ExternalInputModal-tableWrapper_wprq3_133 {
   position: relative;
   overflow-x: auto;
   overflow-y: auto;
   flex-grow: 1;
 }
-._ExternalInputModal-table_19obq_128 {
+._ExternalInputModal-table_wprq3_133 {
   border-collapse: unset;
   border-spacing: 0px;
   color: var(--puck-color-grey-02);
@@ -723,51 +726,51 @@ textarea._Input-input_3pq3z_47 {
   z-index: 0;
   min-width: 100%;
 }
-._ExternalInputModal-thead_19obq_144 {
+._ExternalInputModal-thead_wprq3_149 {
   background-color: var(--puck-color-white);
   position: sticky;
   top: 0;
   z-index: 1;
 }
-._ExternalInputModal-th_19obq_144 {
+._ExternalInputModal-th_wprq3_149 {
   border-bottom: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
   font-weight: 500;
   font-size: 14px;
   padding: 16px 24px;
 }
-._ExternalInputModal-td_19obq_159 {
+._ExternalInputModal-td_wprq3_164 {
   border-bottom: 1px solid var(--puck-color-grey-10);
   padding: 16px 24px;
 }
-._ExternalInputModal-tr_19obq_164 ._ExternalInputModal-td_19obq_159:first-of-type {
+._ExternalInputModal-tr_wprq3_169 ._ExternalInputModal-td_wprq3_164:first-of-type {
   font-weight: 500;
   width: 1%;
   white-space: nowrap;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover {
+  ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover {
     background: var(--puck-color-azure-12);
     color: var(--puck-color-azure-04);
     cursor: pointer;
     position: relative;
     margin-left: -5px;
   }
-  ._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:hover ._ExternalInputModal-td_19obq_159:first-of-type {
+  ._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:hover ._ExternalInputModal-td_wprq3_164:first-of-type {
     border-left: 4px solid var(--puck-color-azure-04);
     padding-left: 20px;
   }
 }
-._ExternalInputModal-tbody_19obq_171 ._ExternalInputModal-tr_19obq_164:last-of-type ._ExternalInputModal-td_19obq_159 {
+._ExternalInputModal-tbody_wprq3_176 ._ExternalInputModal-tr_wprq3_169:last-of-type ._ExternalInputModal-td_wprq3_164 {
   border-bottom: none;
 }
-._ExternalInputModal-tableWrapper_19obq_128 {
+._ExternalInputModal-tableWrapper_wprq3_133 {
   display: none;
 }
-._ExternalInputModal--hasData_19obq_197 ._ExternalInputModal-tableWrapper_19obq_128 {
+._ExternalInputModal--hasData_wprq3_202 ._ExternalInputModal-tableWrapper_wprq3_133 {
   display: block;
 }
-._ExternalInputModal-loadingBanner_19obq_201 {
+._ExternalInputModal-loadingBanner_wprq3_206 {
   display: none;
   background-color: color-mix(in srgb, var(--puck-color-white) 90%, transparent);
   padding: 64px;
@@ -779,21 +782,21 @@ textarea._Input-input_3pq3z_47 {
   right: 0;
   bottom: 0;
 }
-._ExternalInputModal--isLoading_19obq_218 ._ExternalInputModal-loadingBanner_19obq_201 {
+._ExternalInputModal--isLoading_wprq3_223 ._ExternalInputModal-loadingBanner_wprq3_206 {
   display: flex;
 }
-._ExternalInputModal-searchForm_19obq_222 {
+._ExternalInputModal-searchForm_wprq3_227 {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   flex-grow: 1;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-searchForm_19obq_222 {
+  ._ExternalInputModal-searchForm_wprq3_227 {
     flex-wrap: nowrap;
   }
 }
-._ExternalInputModal-search_19obq_222 {
+._ExternalInputModal-search_wprq3_227 {
   display: flex;
   background: var(--puck-color-white);
   border-width: 1px;
@@ -803,18 +806,18 @@ textarea._Input-input_3pq3z_47 {
   flex-grow: 1;
   transition: border-color 50ms ease-in;
 }
-._ExternalInputModal-search_19obq_222:focus-within {
+._ExternalInputModal-search_wprq3_227:focus-within {
   border-color: var(--puck-color-grey-05);
   outline: 2px solid var(--puck-color-azure-05);
   transition: none;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-search_19obq_222:hover {
+  ._ExternalInputModal-search_wprq3_227:hover {
     border-color: var(--puck-color-grey-05);
     transition: none;
   }
 }
-._ExternalInputModal-searchIcon_19obq_259 {
+._ExternalInputModal-searchIcon_wprq3_264 {
   align-items: center;
   background: var(--puck-color-grey-12);
   border-bottom-left-radius: 4px;
@@ -826,17 +829,17 @@ textarea._Input-input_3pq3z_47 {
   padding: 12px 15px;
   transition: color 50ms ease-in;
 }
-._ExternalInputModal-search_19obq_222:focus-within ._ExternalInputModal-searchIcon_19obq_259 {
+._ExternalInputModal-search_wprq3_227:focus-within ._ExternalInputModal-searchIcon_wprq3_264 {
   color: var(--puck-color-grey-04);
   transition: none;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._ExternalInputModal-search_19obq_222:hover ._ExternalInputModal-searchIcon_19obq_259 {
+  ._ExternalInputModal-search_wprq3_227:hover ._ExternalInputModal-searchIcon_wprq3_264 {
     color: var(--puck-color-grey-04);
     transition: none;
   }
 }
-._ExternalInputModal-searchIconText_19obq_284 {
+._ExternalInputModal-searchIconText_wprq3_289 {
   clip: rect(0 0 0 0);
   clip-path: inset(100%);
   height: 1px;
@@ -845,7 +848,7 @@ textarea._Input-input_3pq3z_47 {
   white-space: nowrap;
   width: 1px;
 }
-._ExternalInputModal-searchInput_19obq_294 {
+._ExternalInputModal-searchInput_wprq3_299 {
   border: none;
   border-radius: 4px;
   background: var(--puck-color-white);
@@ -854,24 +857,24 @@ textarea._Input-input_3pq3z_47 {
   padding: 12px 15px;
   width: 100%;
 }
-._ExternalInputModal-searchInput_19obq_294:focus {
+._ExternalInputModal-searchInput_wprq3_299:focus {
   outline: 0;
 }
-._ExternalInputModal-searchActions_19obq_308 {
+._ExternalInputModal-searchActions_wprq3_313 {
   display: flex;
   gap: 8px;
   height: 44px;
   width: 100%;
 }
 @media (min-width: 458px) {
-  ._ExternalInputModal-searchActions_19obq_308 {
+  ._ExternalInputModal-searchActions_wprq3_313 {
     width: auto;
   }
 }
-._ExternalInputModal-searchActionIcon_19obq_321 {
+._ExternalInputModal-searchActionIcon_wprq3_326 {
   align-self: center;
 }
-._ExternalInputModal-footer_19obq_325 {
+._ExternalInputModal-footer_wprq3_330 {
   background-color: var(--puck-color-grey-12);
   border-top: 1px solid var(--puck-color-grey-09);
   color: var(--puck-color-grey-04);
@@ -1051,21 +1054,21 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
-._Drawer_4yfqn_1 {
+._Drawer_1oa7v_1 {
   font-family: var(--puck-font-family);
 }
-._DrawerItem--disabled_4yfqn_5 {
+._DrawerItem--disabled_1oa7v_5 ._DrawerItem-draggable_1oa7v_5 {
   background: var(--puck-color-grey-11);
   color: var(--puck-color-grey-05);
   cursor: not-allowed;
 }
-._DrawerItem-default_4yfqn_11 ._DrawerItem-draggableWrapper_4yfqn_11 {
+._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
   padding-bottom: 12px;
 }
-._DrawerItem_4yfqn_5:last-of-type ._DrawerItem-default_4yfqn_11 ._DrawerItem-draggableWrapper_4yfqn_11 {
+._DrawerItem_1oa7v_5:last-of-type ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
   padding-bottom: 0;
 }
-._DrawerItem-draggable_4yfqn_11 {
+._DrawerItem-draggable_1oa7v_5 {
   background: var(--puck-color-white);
   padding: 12px;
   display: flex;
@@ -1076,22 +1079,22 @@ textarea._Input-input_3pq3z_47 {
   align-items: center;
   transition: background-color 50ms ease-in, color 50ms ease-in;
 }
-._DrawerItem_4yfqn_5:focus-visible {
+._DrawerItem_1oa7v_5:focus-visible {
   outline: 0;
 }
-._Drawer_4yfqn_1:not(._Drawer--isDraggingFrom_4yfqn_36) ._DrawerItem_4yfqn_5:focus-visible ._DrawerItem-draggable_4yfqn_11 {
+._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
   border-radius: 4px;
   outline: 2px solid var(--puck-color-azure-05);
   outline-offset: 2px;
 }
 @media (hover: hover) and (pointer: fine) {
-  ._Drawer_4yfqn_1:not(._Drawer--isDraggingFrom_4yfqn_36) ._DrawerItem_4yfqn_5:not(._DrawerItem--disabled_4yfqn_5) ._DrawerItem-draggable_4yfqn_11:hover {
+  ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
     background-color: var(--puck-color-azure-12);
     color: var(--puck-color-azure-04);
     transition: none;
   }
 }
-._DrawerItem-name_4yfqn_54 {
+._DrawerItem-name_1oa7v_54 {
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1732,7 +1735,7 @@ textarea._Input-input_3pq3z_47 {
 }
 
 /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
-._PuckCanvas_6zd4y_1 {
+._PuckCanvas_esbg1_1 {
   background: var(--puck-color-grey-11);
   display: flex;
   grid-area: editor;
@@ -1741,15 +1744,15 @@ textarea._Input-input_3pq3z_47 {
   overflow: auto;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas_6zd4y_1 {
+  ._PuckCanvas_esbg1_1 {
     padding: calc(var(--puck-space-px) * 1.5);
     padding-top: var(--puck-space-px);
   }
-  ._PuckCanvas_6zd4y_1:not(._PuckCanvas_6zd4y_1:has(._PuckCanvas-controls_6zd4y_16)) {
+  ._PuckCanvas_esbg1_1:not(._PuckCanvas_esbg1_1:has(._PuckCanvas-controls_esbg1_16)) {
     padding-top: calc(var(--puck-space-px) * 1.5);
   }
 }
-._PuckCanvas-inner_6zd4y_21 {
+._PuckCanvas-inner_esbg1_21 {
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -1759,7 +1762,7 @@ textarea._Input-input_3pq3z_47 {
   position: relative;
   width: 100%;
 }
-._PuckCanvas-root_6zd4y_32 {
+._PuckCanvas-root_esbg1_32 {
   background: white;
   border: 1px solid var(--puck-color-grey-09);
   box-sizing: border-box;
@@ -1771,16 +1774,32 @@ textarea._Input-input_3pq3z_47 {
   opacity: 0;
 }
 @media (min-width: 1198px) {
-  ._PuckCanvas-root_6zd4y_32 {
+  ._PuckCanvas-root_esbg1_32 {
     min-width: unset;
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  ._PuckCanvas-root_6zd4y_32 {
+  ._PuckCanvas-root_esbg1_32 {
     transition: none !important;
   }
 }
-._PuckCanvas--ready_6zd4y_56 ._PuckCanvas-root_6zd4y_32 {
+._PuckCanvas--ready_esbg1_56 ._PuckCanvas-root_esbg1_32 {
   opacity: 1;
-  transition: opacity 150ms ease-out;
+}
+._PuckCanvas-loader_esbg1_60 {
+  align-items: center;
+  color: var(--puck-color-grey-06);
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  transition: opacity 250ms ease-out;
+  opacity: 0;
+}
+._PuckCanvas--showLoader_esbg1_70 ._PuckCanvas-loader_esbg1_60 {
+  opacity: 1;
+}
+._PuckCanvas--showLoader_esbg1_70._PuckCanvas--ready_esbg1_56 ._PuckCanvas-loader_esbg1_60 {
+  opacity: 0;
+  height: 0;
+  transition: none;
 }