@measured/puck 0.17.0-canary.5e57623 → 0.17.0-canary.6e5864a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -8,9 +8,6 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
8
8
  var __getProtoOf = Object.getPrototypeOf;
9
9
  var __hasOwnProp = Object.prototype.hasOwnProperty;
10
10
  var __propIsEnum = Object.prototype.propertyIsEnumerable;
11
- var __typeError = (msg) => {
12
- throw TypeError(msg);
13
- };
14
11
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
15
12
  var __spreadValues = (a, b) => {
16
13
  for (var prop in b || (b = {}))
@@ -58,10 +55,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
58
55
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
59
56
  mod
60
57
  ));
61
- var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
62
- var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
63
- var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
64
- var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
65
58
  var __async = (__this, __arguments, generator) => {
66
59
  return new Promise((resolve, reject) => {
67
60
  var fulfilled = (value) => {
@@ -243,9 +236,6 @@ export {
243
236
  __objRest,
244
237
  __commonJS,
245
238
  __toESM,
246
- __privateGet,
247
- __privateAdd,
248
- __privateSet,
249
239
  __async,
250
240
  init_react_import,
251
241
  rootDroppableId,
package/dist/index.css CHANGED
@@ -135,66 +135,52 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
- #frame-root {
139
- min-height: 100vh;
140
- }
141
138
 
142
139
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
143
- ._ActionBar_1lbm7_1 {
144
- align-items: center;
145
- cursor: default;
140
+ ._ActionBar_151w5_1 {
146
141
  display: flex;
147
142
  width: auto;
148
143
  padding: 4px;
149
- padding-left: 0;
150
- padding-right: 0;
144
+ padding-right: 4px;
151
145
  border-top-left-radius: 8px;
152
146
  border-top-right-radius: 8px;
153
147
  border-radius: 8px;
154
148
  background: var(--puck-color-grey-01);
155
149
  color: var(--puck-color-white);
156
150
  font-family: var(--puck-font-family);
151
+ gap: 4px;
157
152
  min-height: 26px;
158
153
  }
159
- ._ActionBar-label_1lbm7_18 {
154
+ ._ActionBar-actionsLabel_151w5_16 {
160
155
  color: var(--puck-color-grey-08);
156
+ display: flex;
161
157
  font-size: var(--puck-font-size-xxxs);
162
158
  font-weight: 500;
159
+ justify-content: center;
160
+ align-items: center;
163
161
  padding-left: 8px;
164
162
  padding-right: 8px;
165
- margin-left: 4px;
166
- margin-right: 4px;
167
163
  text-overflow: ellipsis;
168
164
  white-space: nowrap;
169
165
  }
170
- ._ActionBar-action_1lbm7_30 + ._ActionBar-label_1lbm7_18 {
171
- padding-left: 0;
172
- }
173
- ._ActionBar-label_1lbm7_18 + ._ActionBar-action_1lbm7_30 {
174
- margin-left: -4px;
175
- }
176
- ._ActionBar-group_1lbm7_38 {
177
- align-items: center;
166
+ ._ActionBar-group_151w5_29 {
178
167
  border-inline-start: 0.5px solid var(--puck-color-grey-05);
179
168
  display: flex;
180
- height: 100%;
181
169
  padding-left: 4px;
182
170
  padding-right: 4px;
183
171
  }
184
- ._ActionBar-group_1lbm7_38:first-of-type {
185
- border-inline-start: 0;
172
+ ._ActionBar-group_151w5_29:last-of-type {
173
+ padding-right: 0;
186
174
  }
187
- ._ActionBar-group_1lbm7_38:empty {
175
+ ._ActionBar-group_151w5_29:empty {
188
176
  display: none;
189
177
  }
190
- ._ActionBar-action_1lbm7_30 {
178
+ ._ActionBar-action_151w5_16 {
191
179
  background: transparent;
192
180
  border: none;
193
181
  color: var(--puck-color-grey-08);
194
182
  cursor: pointer;
195
183
  padding: 6px 8px;
196
- margin-left: 4px;
197
- margin-right: 4px;
198
184
  border-radius: 4px;
199
185
  overflow: hidden;
200
186
  display: flex;
@@ -202,23 +188,20 @@
202
188
  justify-content: center;
203
189
  transition: color 50ms ease-in;
204
190
  }
205
- ._ActionBar-action_1lbm7_30:focus-visible {
191
+ ._ActionBar-action_151w5_16:focus-visible {
206
192
  outline: 2px solid var(--puck-color-azure-05);
207
193
  outline-offset: -2px;
208
194
  }
209
195
  @media (hover: hover) and (pointer: fine) {
210
- ._ActionBar-action_1lbm7_30:hover {
196
+ ._ActionBar-action_151w5_16:hover {
211
197
  color: var(--puck-color-azure-06);
212
198
  transition: none;
213
199
  }
214
200
  }
215
- ._ActionBar-action_1lbm7_30:active {
201
+ ._ActionBar-action_151w5_16:active {
216
202
  color: var(--puck-color-azure-07);
217
203
  transition: none;
218
204
  }
219
- ._ActionBar-group_1lbm7_38 * {
220
- margin: 0;
221
- }
222
205
 
223
206
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
224
207
  ._InputWrapper_1l5m8_1 {
@@ -1079,15 +1062,22 @@ textarea._Input-input_1l5m8_47 {
1079
1062
  }
1080
1063
 
1081
1064
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1082
- ._Drawer_1ob9x_1 {
1083
- display: flex;
1084
- flex-direction: column;
1065
+ ._Drawer_1oa7v_1 {
1085
1066
  font-family: var(--puck-font-family);
1086
- gap: 12px;
1087
1067
  }
1088
- ._DrawerItem-draggable_1ob9x_8 {
1068
+ ._DrawerItem--disabled_1oa7v_5 ._DrawerItem-draggable_1oa7v_5 {
1069
+ background: var(--puck-color-grey-11);
1070
+ color: var(--puck-color-grey-05);
1071
+ cursor: not-allowed;
1072
+ }
1073
+ ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1074
+ padding-bottom: 12px;
1075
+ }
1076
+ ._DrawerItem_1oa7v_5:last-of-type ._DrawerItem-default_1oa7v_11 ._DrawerItem-draggableWrapper_1oa7v_11 {
1077
+ padding-bottom: 0;
1078
+ }
1079
+ ._DrawerItem-draggable_1oa7v_5 {
1089
1080
  background: var(--puck-color-white);
1090
- cursor: grab;
1091
1081
  padding: 12px;
1092
1082
  display: flex;
1093
1083
  border: 1px var(--puck-color-grey-09) solid;
@@ -1097,54 +1087,64 @@ textarea._Input-input_1l5m8_47 {
1097
1087
  align-items: center;
1098
1088
  transition: background-color 50ms ease-in, color 50ms ease-in;
1099
1089
  }
1100
- ._DrawerItem--disabled_1ob9x_21 ._DrawerItem-draggable_1ob9x_8 {
1101
- background: var(--puck-color-grey-11);
1102
- color: var(--puck-color-grey-05);
1103
- cursor: not-allowed;
1104
- }
1105
- ._DrawerItem_1ob9x_8:focus-visible {
1090
+ ._DrawerItem_1oa7v_5:focus-visible {
1106
1091
  outline: 0;
1107
1092
  }
1108
- ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:focus-visible ._DrawerItem-draggable_1ob9x_8 {
1093
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1109
1094
  border-radius: 4px;
1110
1095
  outline: 2px solid var(--puck-color-azure-05);
1111
1096
  outline-offset: 2px;
1112
1097
  }
1113
1098
  @media (hover: hover) and (pointer: fine) {
1114
- ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:not(._DrawerItem--disabled_1ob9x_21) ._DrawerItem-draggable_1ob9x_8:hover {
1099
+ ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1115
1100
  background-color: var(--puck-color-azure-12);
1116
1101
  color: var(--puck-color-azure-04);
1117
1102
  transition: none;
1118
1103
  }
1119
1104
  }
1120
- ._DrawerItem-name_1ob9x_49 {
1105
+ ._DrawerItem-name_1oa7v_54 {
1121
1106
  overflow-x: hidden;
1122
1107
  text-overflow: ellipsis;
1123
1108
  white-space: nowrap;
1124
1109
  }
1125
1110
 
1126
1111
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1127
- ._DraggableComponent_1uqah_1 {
1128
- position: absolute;
1129
- pointer-events: none;
1112
+ ._DraggableComponent_1bhad_1 {
1113
+ pointer-events: auto;
1130
1114
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1131
1115
  }
1132
- ._DraggableComponent-overlay_1uqah_12 {
1116
+ ._DraggableComponent--isDragging_1bhad_11 {
1117
+ background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
1118
+ overflow: hidden;
1119
+ }
1120
+ ._DraggableComponent-contents_1bhad_16 {
1121
+ position: relative;
1122
+ pointer-events: none;
1123
+ z-index: 0;
1124
+ }
1125
+ ._DraggableComponent-contents_1bhad_16::before,
1126
+ ._DraggableComponent-contents_1bhad_16::after {
1127
+ content: " ";
1128
+ display: table;
1129
+ }
1130
+ ._DraggableComponent-overlay_1bhad_29 {
1133
1131
  cursor: pointer;
1134
1132
  height: 100%;
1135
1133
  width: 100%;
1136
1134
  top: 0;
1137
- outline: 2px var(--puck-color-azure-09) solid;
1138
1135
  outline-offset: -2px;
1139
1136
  position: absolute;
1140
1137
  pointer-events: none;
1141
1138
  box-sizing: border-box;
1142
1139
  z-index: 1;
1143
1140
  }
1144
- ._DraggableComponent_1uqah_1:focus-visible > ._DraggableComponent-overlay_1uqah_12 {
1141
+ ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1145
1142
  outline: 1px solid var(--puck-color-azure-05);
1146
1143
  }
1147
- ._DraggableComponent-loadingOverlay_1uqah_29 {
1144
+ ._DraggableComponent--isDragging_1bhad_11 > ._DraggableComponent-overlay_1bhad_29 {
1145
+ outline: 2px var(--puck-color-azure-09) solid !important;
1146
+ }
1147
+ ._DraggableComponent-loadingOverlay_1bhad_49 {
1148
1148
  background: var(--puck-color-white);
1149
1149
  color: var(--puck-color-grey-03);
1150
1150
  border-radius: 4px;
@@ -1159,125 +1159,89 @@ textarea._Input-input_1l5m8_47 {
1159
1159
  opacity: 0.8;
1160
1160
  z-index: 1;
1161
1161
  }
1162
- ._DraggableComponent--hover_1uqah_45:not(._DraggableComponent--isLocked_1uqah_45) > ._DraggableComponent-overlay_1uqah_12 {
1162
+ ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1163
1163
  background: var(--overlay-background);
1164
+ pointer-events: none;
1164
1165
  }
1165
- ._DraggableComponent--hover_1uqah_45 > ._DraggableComponent-overlay_1uqah_12 {
1166
- outline: 2px var(--puck-color-azure-09) solid;
1166
+ ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1167
+ background: var(--overlay-background);
1168
+ pointer-events: none;
1167
1169
  }
1168
- ._DraggableComponent--isSelected_1uqah_54 > ._DraggableComponent-overlay_1uqah_12 {
1169
- outline-color: var(--puck-color-azure-07);
1170
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):hover > ._DraggableComponent-overlay_1bhad_29 {
1171
+ outline: 2px var(--puck-color-azure-09) solid !important;
1172
+ }
1173
+ ._DraggableComponent--indicativeHover_1bhad_81 > ._DraggableComponent-overlay_1bhad_29 {
1174
+ pointer-events: none;
1170
1175
  }
1171
- ._DraggableComponent_1uqah_1:has(._DraggableComponent--hover_1uqah_45 > ._DraggableComponent-overlay_1uqah_12) > ._DraggableComponent-overlay_1uqah_12 {
1176
+ ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1172
1177
  display: none;
1173
1178
  }
1174
- ._DraggableComponent-actionsOverlay_1uqah_66 {
1179
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-overlay_1bhad_29 {
1180
+ outline: 2px var(--puck-color-azure-07) solid !important;
1181
+ }
1182
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 {
1183
+ display: block;
1175
1184
  position: sticky;
1176
- opacity: 0;
1177
- pointer-events: none;
1178
1185
  z-index: 2;
1179
1186
  }
1180
- ._DraggableComponent--isSelected_1uqah_54 ._DraggableComponent-actionsOverlay_1uqah_66 {
1181
- opacity: 1;
1182
- pointer-events: auto;
1183
- }
1184
- ._DraggableComponent-actions_1uqah_66 {
1187
+ ._DraggableComponent-actions_1bhad_97 {
1185
1188
  position: absolute;
1186
1189
  width: auto;
1187
1190
  cursor: grab;
1188
- display: flex;
1191
+ display: none;
1189
1192
  pointer-events: auto;
1190
1193
  box-sizing: border-box;
1191
1194
  transform-origin: right top;
1192
1195
  }
1193
-
1194
- /* components/DraggableComponent/styles.css */
1195
- [data-puck-component] * {
1196
- pointer-events: none;
1197
- user-select: none;
1198
- -webkit-user-select: none;
1199
- }
1200
- [data-puck-component] {
1201
- cursor: grab;
1202
- pointer-events: auto !important;
1203
- user-select: none;
1204
- -webkit-user-select: none;
1205
- }
1206
- [data-puck-disabled] {
1207
- cursor: pointer;
1208
- }
1209
- [data-puck-dragging]:not([data-dnd-dragging]) {
1210
- background: var(--puck-color-azure-06) !important;
1211
- border: none !important;
1212
- color: #00000000 !important;
1213
- opacity: 0.3 !important;
1214
- outline: none !important;
1215
- transition: none !important;
1216
- }
1217
- [data-puck-dragging]:not([data-dnd-dragging]) *,
1218
- [data-puck-dragging]:not([data-dnd-dragging])::after,
1219
- [data-puck-dragging]:not([data-dnd-dragging])::before {
1220
- opacity: 0 !important;
1221
- }
1222
- [data-dnd-dragging] {
1223
- pointer-events: none !important;
1224
- outline: 2px var(--puck-color-azure-09) solid !important;
1225
- outline-offset: -2px !important;
1196
+ ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1197
+ display: flex;
1226
1198
  }
1227
1199
 
1228
1200
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1229
- ._DropZone_74ebh_1 {
1230
- --drop-animation-ms: 250ms;
1231
- --resize-animation-ms: 150ms;
1201
+ ._DropZone_djoti_1 {
1202
+ margin-left: auto;
1203
+ margin-right: auto;
1232
1204
  position: relative;
1233
- height: 100%;
1234
- min-height: var(--min-empty-height);
1205
+ min-height: 100%;
1235
1206
  outline-offset: -2px;
1236
1207
  width: 100%;
1237
1208
  }
1238
- ._DropZone--hasChildren_74ebh_12 {
1239
- min-height: 0;
1240
- }
1241
- ._DropZone_74ebh_1:empty {
1242
- min-height: var(--min-empty-height);
1209
+ ._DropZone-content_djoti_10 {
1210
+ min-height: 128px;
1211
+ height: 100%;
1243
1212
  }
1244
- ._DropZone--hasChildren_74ebh_12:not(._DropZone--userIsDragging_74ebh_20) {
1245
- transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1213
+ ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1214
+ pointer-events: all;
1246
1215
  }
1247
- ._DropZone_74ebh_1:empty:not(._DropZone--userIsDragging_74ebh_20) {
1248
- transition: min-height var(--resize-animation-ms) ease-in;
1216
+ ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1217
+ pointer-events: none;
1249
1218
  }
1250
- ._DropZone--isAreaSelected_74ebh_29,
1251
- ._DropZone--hoveringOverArea_74ebh_30:not(._DropZone--isRootZone_74ebh_30) {
1219
+ ._DropZone--isAreaSelected_djoti_26,
1220
+ ._DropZone--draggingOverArea_djoti_19:not(:has(._DropZone--hoveringOverArea_djoti_27)),
1221
+ ._DropZone--hoveringOverArea_djoti_27:not(._DropZone--isDisabled_djoti_28):not(._DropZone--isRootZone_djoti_29):not(._DropZone--hasChildren_djoti_30) {
1252
1222
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1253
1223
  outline: 2px dashed var(--puck-color-azure-08);
1254
1224
  }
1255
- ._DropZone_74ebh_1:empty {
1225
+ ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1256
1226
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1257
1227
  outline: 2px dashed var(--puck-color-azure-08);
1258
1228
  }
1259
- ._DropZone--isDestination_74ebh_40 {
1229
+ ._DropZone--isDestination_djoti_40 {
1260
1230
  outline: 2px dashed var(--puck-color-azure-04) !important;
1261
1231
  }
1262
- ._DropZone--isDestination_74ebh_40:not(._DropZone--isRootZone_74ebh_30) {
1232
+ ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1263
1233
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1264
1234
  }
1265
- ._DropZone-item_74ebh_52 {
1235
+ ._DropZone-item_djoti_52 {
1266
1236
  position: relative;
1267
1237
  }
1268
- ._DropZone-hitbox_74ebh_56 {
1238
+ ._DropZone-hitbox_djoti_56 {
1269
1239
  position: absolute;
1270
1240
  bottom: -12px;
1271
1241
  height: 24px;
1272
1242
  width: 100%;
1273
1243
  z-index: 1;
1274
1244
  }
1275
- ._DropZone--isEnabled_74ebh_64._DropZone--userIsDragging_74ebh_20 {
1276
- outline: 2px dashed var(--puck-color-azure-06);
1277
- }
1278
- ._DropZone_74ebh_1 > *:not([data-puck-component]) {
1279
- opacity: 0;
1280
- }
1281
1245
 
1282
1246
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1283
1247
  ._SidebarSection_125qe_1 {
@@ -1632,13 +1596,12 @@ textarea._Input-input_1l5m8_47 {
1632
1596
  }
1633
1597
 
1634
1598
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1635
- ._PuckPreview_z2rgu_1 {
1636
- position: relative;
1599
+ ._PuckPreview_rxwlr_1 {
1637
1600
  height: 100%;
1638
1601
  }
1639
- ._PuckPreview-frame_z2rgu_6 {
1602
+ ._PuckPreview-frame_rxwlr_5 {
1640
1603
  border: none;
1641
- height: 100%;
1604
+ min-height: 100%;
1642
1605
  width: 100%;
1643
1606
  }
1644
1607
 
@@ -1780,7 +1743,7 @@ textarea._Input-input_1l5m8_47 {
1780
1743
  }
1781
1744
 
1782
1745
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1783
- ._PuckCanvas_18jay_1 {
1746
+ ._PuckCanvas_avf1c_1 {
1784
1747
  background: var(--puck-color-grey-11);
1785
1748
  display: flex;
1786
1749
  grid-area: editor;
@@ -1789,26 +1752,28 @@ textarea._Input-input_1l5m8_47 {
1789
1752
  overflow: auto;
1790
1753
  }
1791
1754
  @media (min-width: 1198px) {
1792
- ._PuckCanvas_18jay_1 {
1755
+ ._PuckCanvas_avf1c_1 {
1793
1756
  padding: calc(var(--puck-space-px) * 1.5);
1794
1757
  padding-top: var(--puck-space-px);
1795
1758
  }
1796
- ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1759
+ ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
1797
1760
  padding-top: calc(var(--puck-space-px) * 1.5);
1798
1761
  }
1799
1762
  }
1800
- ._PuckCanvas-inner_18jay_21 {
1763
+ ._PuckCanvas-inner_avf1c_21 {
1764
+ box-sizing: border-box;
1801
1765
  display: flex;
1802
1766
  height: 100%;
1803
1767
  justify-content: center;
1804
1768
  min-width: 358px;
1769
+ overflow: hidden;
1805
1770
  position: relative;
1806
1771
  width: 100%;
1807
1772
  }
1808
- ._PuckCanvas-root_18jay_30 {
1773
+ ._PuckCanvas-root_avf1c_32 {
1809
1774
  background: white;
1810
1775
  border: 1px solid var(--puck-color-grey-09);
1811
- box-sizing: content-box;
1776
+ box-sizing: border-box;
1812
1777
  min-width: 321px;
1813
1778
  position: absolute;
1814
1779
  pointer-events: none;
@@ -1818,20 +1783,20 @@ textarea._Input-input_1l5m8_47 {
1818
1783
  opacity: 0;
1819
1784
  }
1820
1785
  @media (min-width: 1198px) {
1821
- ._PuckCanvas-root_18jay_30 {
1786
+ ._PuckCanvas-root_avf1c_32 {
1822
1787
  min-width: unset;
1823
1788
  }
1824
1789
  }
1825
1790
  @media (prefers-reduced-motion: reduce) {
1826
- ._PuckCanvas-root_18jay_30 {
1791
+ ._PuckCanvas-root_avf1c_32 {
1827
1792
  transition: none !important;
1828
1793
  }
1829
1794
  }
1830
- ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1795
+ ._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
1831
1796
  pointer-events: unset;
1832
1797
  opacity: 1;
1833
1798
  }
1834
- ._PuckCanvas-loader_18jay_60 {
1799
+ ._PuckCanvas-loader_avf1c_62 {
1835
1800
  align-items: center;
1836
1801
  color: var(--puck-color-grey-06);
1837
1802
  display: flex;
@@ -1840,10 +1805,10 @@ textarea._Input-input_1l5m8_47 {
1840
1805
  transition: opacity 250ms ease-out;
1841
1806
  opacity: 0;
1842
1807
  }
1843
- ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1808
+ ._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
1844
1809
  opacity: 1;
1845
1810
  }
1846
- ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1811
+ ._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
1847
1812
  opacity: 0;
1848
1813
  height: 0;
1849
1814
  transition: none;
package/dist/index.d.mts CHANGED
@@ -1,10 +1,9 @@
1
- import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-ZKVfUAQq.mjs';
2
- export { W as Adaptor, L as ArrayField, t as ArrayState, a4 as AsFieldProps, B as BaseData, G as BaseField, v as ComponentConfig, y as ComponentData, z as Content, Z as CustomField, a1 as DefaultRootProps, a0 as DefaultRootRenderProps, m as Direction, n as DragAxis, Y as ExternalField, X as ExternalFieldWithAdaptor, r as FieldRenderFunctions, _ as Fields, s as ItemWithId, M as MappedItem, N as NumberField, Q as ObjectField, q as OverrideKey, u as PuckComponent, $ as PuckContext, K as RadioField, x as RootData, R as RootDataWithProps, w as RootDataWithoutProps, S as SelectField, T as TextField, J as TextareaField, o as Viewport, a5 as WithChildren, a2 as WithId, a3 as WithPuckProps, p as overrideKeys, a6 as resolveAllData } from './resolve-all-data-ZKVfUAQq.mjs';
1
+ import { F as FieldProps, a as Field, C as Config, D as Data, I as ItemSelector, P as PuckAction, b as DropZoneProps, U as UserGenerics, c as UiState, O as OnAction, d as Permissions, e as Plugin, f as Overrides, V as Viewports, g as IframeConfig, h as InitialHistory, i as DefaultComponentProps, j as DefaultRootFieldProps, H as History, A as AppState, E as ExtractPropsFromConfig, k as ExtractRootPropsFromConfig, l as ComponentDataMap } from './resolve-all-data-C7aAQCY3.mjs';
2
+ export { L as Adaptor, J as ArrayField, r as ArrayState, a2 as AsFieldProps, B as BaseData, y as BaseField, t as ComponentConfig, w as ComponentData, x as Content, X as CustomField, $ as DefaultRootProps, _ as DefaultRootRenderProps, W as ExternalField, Q as ExternalFieldWithAdaptor, p as FieldRenderFunctions, Y as Fields, q as ItemWithId, M as MappedItem, N as NumberField, K as ObjectField, n as OverrideKey, s as PuckComponent, Z as PuckContext, G as RadioField, v as RootData, R as RootDataWithProps, u as RootDataWithoutProps, S as SelectField, T as TextField, z as TextareaField, m as Viewport, a3 as WithChildren, a0 as WithId, a1 as WithPuckProps, o as overrideKeys, a4 as resolveAllData } from './resolve-all-data-C7aAQCY3.mjs';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
- import { UniqueIdentifier } from '@dnd-kit/abstract';
7
- import { Draggable } from '@dnd-kit/dom';
5
+ import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
+ import { DragStart, DragUpdate } from '@measured/dnd';
8
7
 
9
8
  declare const ActionBar: {
10
9
  ({ label, children, }: {
@@ -16,9 +15,6 @@ declare const ActionBar: {
16
15
  label?: string;
17
16
  onClick: (e: SyntheticEvent) => void;
18
17
  }) => react_jsx_runtime.JSX.Element;
19
- Label: ({ label }: {
20
- label: string;
21
- }) => react_jsx_runtime.JSX.Element;
22
18
  Group: ({ children }: {
23
19
  children: ReactNode;
24
20
  }) => react_jsx_runtime.JSX.Element;
@@ -31,9 +27,6 @@ declare const Action: ({ children, label, onClick, }: {
31
27
  declare const Group: ({ children }: {
32
28
  children: ReactNode;
33
29
  }) => react_jsx_runtime.JSX.Element;
34
- declare const Label: ({ label }: {
35
- label: string;
36
- }) => react_jsx_runtime.JSX.Element;
37
30
 
38
31
  declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }: {
39
32
  children?: ReactNode;
@@ -62,7 +55,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
62
55
  }) => react_jsx_runtime.JSX.Element;
63
56
 
64
57
  declare const Drawer: {
65
- ({ children, droppableId, direction, }: {
58
+ ({ children, droppableId: _droppableId, direction, }: {
66
59
  children: ReactNode;
67
60
  droppableId?: string;
68
61
  direction?: "vertical" | "horizontal";
@@ -75,7 +68,7 @@ declare const Drawer: {
75
68
  }) => ReactElement;
76
69
  id?: string;
77
70
  label?: string;
78
- index?: number;
71
+ index: number;
79
72
  isDragDisabled?: boolean;
80
73
  }) => react_jsx_runtime.JSX.Element;
81
74
  };
@@ -92,9 +85,12 @@ type DropZoneContext<UserConfig extends Config = Config> = {
92
85
  setItemSelector?: (newIndex: ItemSelector | null) => void;
93
86
  dispatch?: (action: PuckAction) => void;
94
87
  areaId?: string;
95
- zoneCompound?: string;
96
- index?: number;
97
- draggedItem?: Draggable | null;
88
+ draggedItem?: DragStart & Partial<DragUpdate>;
89
+ placeholderStyle?: CSSProperties;
90
+ hoveringArea?: string | null;
91
+ setHoveringArea?: (area: string | null) => void;
92
+ hoveringZone?: string | null;
93
+ setHoveringZone?: (zone: string | null) => void;
98
94
  hoveringComponent?: string | null;
99
95
  setHoveringComponent?: (id: string | null) => void;
100
96
  registerZoneArea?: (areaId: string) => void;
@@ -105,13 +101,8 @@ type DropZoneContext<UserConfig extends Config = Config> = {
105
101
  pathData?: PathData;
106
102
  registerPath?: (selector: ItemSelector) => void;
107
103
  mode?: "edit" | "render";
108
- depth: number;
109
- registerLocalZone?: (zone: string, active: boolean) => void;
110
- deepestZone?: string | null;
111
- deepestArea?: string | null;
112
- nextDeepestZone?: string | null;
113
- nextDeepestArea?: string | null;
114
- path: string[];
104
+ zoneWillDrag?: string;
105
+ setZoneWillDrag?: (zone: string) => void;
115
106
  } | null;
116
107
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
117
108
  declare const DropZoneProvider: ({ children, value, }: {
@@ -119,12 +110,6 @@ declare const DropZoneProvider: ({ children, value, }: {
119
110
  value: DropZoneContext;
120
111
  }) => react_jsx_runtime.JSX.Element;
121
112
 
122
- type DropZoneDndData = {
123
- areaId?: string;
124
- depth: number;
125
- path: UniqueIdentifier[];
126
- isDroppableTarget: boolean;
127
- };
128
113
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
129
114
 
130
115
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -239,4 +224,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
239
224
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
240
225
  };
241
226
 
242
- export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, type DropZoneDndData, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, Label, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };
227
+ export { Action, ActionBar, AppState, AutoField, Button, ComponentDataMap, Config, Data, DefaultComponentProps, DefaultRootFieldProps, Drawer, DropZone, DropZoneProvider, ExtractPropsFromConfig, ExtractRootPropsFromConfig, Field, FieldLabel, FieldProps, Group, History, IconButton, IframeConfig, InitialHistory, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, Render, UiState, UserGenerics, Viewports, dropZoneContext, migrate, transformProps, usePuck };