@measured/puck 0.17.0-canary.35170f8 → 0.17.0-canary.5e57623

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,6 +8,9 @@ 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
+ };
11
14
  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
12
15
  var __spreadValues = (a, b) => {
13
16
  for (var prop in b || (b = {}))
@@ -55,6 +58,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
55
58
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
56
59
  mod
57
60
  ));
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);
58
65
  var __async = (__this, __arguments, generator) => {
59
66
  return new Promise((resolve, reject) => {
60
67
  var fulfilled = (value) => {
@@ -236,6 +243,9 @@ export {
236
243
  __objRest,
237
244
  __commonJS,
238
245
  __toESM,
246
+ __privateGet,
247
+ __privateAdd,
248
+ __privateSet,
239
249
  __async,
240
250
  init_react_import,
241
251
  rootDroppableId,
package/dist/index.css CHANGED
@@ -135,52 +135,66 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
+ #frame-root {
139
+ min-height: 100vh;
140
+ }
138
141
 
139
142
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
140
- ._ActionBar_151w5_1 {
143
+ ._ActionBar_1lbm7_1 {
144
+ align-items: center;
145
+ cursor: default;
141
146
  display: flex;
142
147
  width: auto;
143
148
  padding: 4px;
144
- padding-right: 4px;
149
+ padding-left: 0;
150
+ padding-right: 0;
145
151
  border-top-left-radius: 8px;
146
152
  border-top-right-radius: 8px;
147
153
  border-radius: 8px;
148
154
  background: var(--puck-color-grey-01);
149
155
  color: var(--puck-color-white);
150
156
  font-family: var(--puck-font-family);
151
- gap: 4px;
152
157
  min-height: 26px;
153
158
  }
154
- ._ActionBar-actionsLabel_151w5_16 {
159
+ ._ActionBar-label_1lbm7_18 {
155
160
  color: var(--puck-color-grey-08);
156
- display: flex;
157
161
  font-size: var(--puck-font-size-xxxs);
158
162
  font-weight: 500;
159
- justify-content: center;
160
- align-items: center;
161
163
  padding-left: 8px;
162
164
  padding-right: 8px;
165
+ margin-left: 4px;
166
+ margin-right: 4px;
163
167
  text-overflow: ellipsis;
164
168
  white-space: nowrap;
165
169
  }
166
- ._ActionBar-group_151w5_29 {
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;
167
178
  border-inline-start: 0.5px solid var(--puck-color-grey-05);
168
179
  display: flex;
180
+ height: 100%;
169
181
  padding-left: 4px;
170
182
  padding-right: 4px;
171
183
  }
172
- ._ActionBar-group_151w5_29:last-of-type {
173
- padding-right: 0;
184
+ ._ActionBar-group_1lbm7_38:first-of-type {
185
+ border-inline-start: 0;
174
186
  }
175
- ._ActionBar-group_151w5_29:empty {
187
+ ._ActionBar-group_1lbm7_38:empty {
176
188
  display: none;
177
189
  }
178
- ._ActionBar-action_151w5_16 {
190
+ ._ActionBar-action_1lbm7_30 {
179
191
  background: transparent;
180
192
  border: none;
181
193
  color: var(--puck-color-grey-08);
182
194
  cursor: pointer;
183
195
  padding: 6px 8px;
196
+ margin-left: 4px;
197
+ margin-right: 4px;
184
198
  border-radius: 4px;
185
199
  overflow: hidden;
186
200
  display: flex;
@@ -188,20 +202,23 @@
188
202
  justify-content: center;
189
203
  transition: color 50ms ease-in;
190
204
  }
191
- ._ActionBar-action_151w5_16:focus-visible {
205
+ ._ActionBar-action_1lbm7_30:focus-visible {
192
206
  outline: 2px solid var(--puck-color-azure-05);
193
207
  outline-offset: -2px;
194
208
  }
195
209
  @media (hover: hover) and (pointer: fine) {
196
- ._ActionBar-action_151w5_16:hover {
210
+ ._ActionBar-action_1lbm7_30:hover {
197
211
  color: var(--puck-color-azure-06);
198
212
  transition: none;
199
213
  }
200
214
  }
201
- ._ActionBar-action_151w5_16:active {
215
+ ._ActionBar-action_1lbm7_30:active {
202
216
  color: var(--puck-color-azure-07);
203
217
  transition: none;
204
218
  }
219
+ ._ActionBar-group_1lbm7_38 * {
220
+ margin: 0;
221
+ }
205
222
 
206
223
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
207
224
  ._InputWrapper_1l5m8_1 {
@@ -1062,22 +1079,15 @@ textarea._Input-input_1l5m8_47 {
1062
1079
  }
1063
1080
 
1064
1081
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Drawer/styles.module.css/#css-module-data */
1065
- ._Drawer_1oa7v_1 {
1082
+ ._Drawer_1ob9x_1 {
1083
+ display: flex;
1084
+ flex-direction: column;
1066
1085
  font-family: var(--puck-font-family);
1086
+ gap: 12px;
1067
1087
  }
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 {
1088
+ ._DrawerItem-draggable_1ob9x_8 {
1080
1089
  background: var(--puck-color-white);
1090
+ cursor: grab;
1081
1091
  padding: 12px;
1082
1092
  display: flex;
1083
1093
  border: 1px var(--puck-color-grey-09) solid;
@@ -1087,64 +1097,54 @@ textarea._Input-input_1l5m8_47 {
1087
1097
  align-items: center;
1088
1098
  transition: background-color 50ms ease-in, color 50ms ease-in;
1089
1099
  }
1090
- ._DrawerItem_1oa7v_5:focus-visible {
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 {
1091
1106
  outline: 0;
1092
1107
  }
1093
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:focus-visible ._DrawerItem-draggable_1oa7v_5 {
1108
+ ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:focus-visible ._DrawerItem-draggable_1ob9x_8 {
1094
1109
  border-radius: 4px;
1095
1110
  outline: 2px solid var(--puck-color-azure-05);
1096
1111
  outline-offset: 2px;
1097
1112
  }
1098
1113
  @media (hover: hover) and (pointer: fine) {
1099
- ._Drawer_1oa7v_1:not(._Drawer--isDraggingFrom_1oa7v_36) ._DrawerItem_1oa7v_5:not(._DrawerItem--disabled_1oa7v_5) ._DrawerItem-draggable_1oa7v_5:hover {
1114
+ ._Drawer_1ob9x_1:not(._Drawer--isDraggingFrom_1ob9x_31) ._DrawerItem_1ob9x_8:not(._DrawerItem--disabled_1ob9x_21) ._DrawerItem-draggable_1ob9x_8:hover {
1100
1115
  background-color: var(--puck-color-azure-12);
1101
1116
  color: var(--puck-color-azure-04);
1102
1117
  transition: none;
1103
1118
  }
1104
1119
  }
1105
- ._DrawerItem-name_1oa7v_54 {
1120
+ ._DrawerItem-name_1ob9x_49 {
1106
1121
  overflow-x: hidden;
1107
1122
  text-overflow: ellipsis;
1108
1123
  white-space: nowrap;
1109
1124
  }
1110
1125
 
1111
1126
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1112
- ._DraggableComponent_1bhad_1 {
1113
- pointer-events: auto;
1114
- --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1115
- }
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;
1127
+ ._DraggableComponent_1uqah_1 {
1128
+ position: absolute;
1122
1129
  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;
1130
+ --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1129
1131
  }
1130
- ._DraggableComponent-overlay_1bhad_29 {
1132
+ ._DraggableComponent-overlay_1uqah_12 {
1131
1133
  cursor: pointer;
1132
1134
  height: 100%;
1133
1135
  width: 100%;
1134
1136
  top: 0;
1137
+ outline: 2px var(--puck-color-azure-09) solid;
1135
1138
  outline-offset: -2px;
1136
1139
  position: absolute;
1137
1140
  pointer-events: none;
1138
1141
  box-sizing: border-box;
1139
1142
  z-index: 1;
1140
1143
  }
1141
- ._DraggableComponent_1bhad_1:focus-visible > ._DraggableComponent-overlay_1bhad_29 {
1144
+ ._DraggableComponent_1uqah_1:focus-visible > ._DraggableComponent-overlay_1uqah_12 {
1142
1145
  outline: 1px solid var(--puck-color-azure-05);
1143
1146
  }
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 {
1147
+ ._DraggableComponent-loadingOverlay_1uqah_29 {
1148
1148
  background: var(--puck-color-white);
1149
1149
  color: var(--puck-color-grey-03);
1150
1150
  border-radius: 4px;
@@ -1159,89 +1159,125 @@ textarea._Input-input_1l5m8_47 {
1159
1159
  opacity: 0.8;
1160
1160
  z-index: 1;
1161
1161
  }
1162
- ._DraggableComponent_1bhad_1:hover:not(._DraggableComponent--isLocked_1bhad_65) > ._DraggableComponent-overlay_1bhad_29 {
1162
+ ._DraggableComponent--hover_1uqah_45:not(._DraggableComponent--isLocked_1uqah_45) > ._DraggableComponent-overlay_1uqah_12 {
1163
1163
  background: var(--overlay-background);
1164
- pointer-events: none;
1165
1164
  }
1166
- ._DraggableComponent--forceHover_1bhad_71 > ._DraggableComponent-overlay_1bhad_29 {
1167
- background: var(--overlay-background);
1168
- pointer-events: none;
1165
+ ._DraggableComponent--hover_1uqah_45 > ._DraggableComponent-overlay_1uqah_12 {
1166
+ outline: 2px var(--puck-color-azure-09) solid;
1169
1167
  }
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;
1168
+ ._DraggableComponent--isSelected_1uqah_54 > ._DraggableComponent-overlay_1uqah_12 {
1169
+ outline-color: var(--puck-color-azure-07);
1175
1170
  }
1176
- ._DraggableComponent_1bhad_1:not(._DraggableComponent--isSelected_1bhad_76):has(._DraggableComponent_1bhad_1:hover > ._DraggableComponent-overlay_1bhad_29) > ._DraggableComponent-overlay_1bhad_29 {
1171
+ ._DraggableComponent_1uqah_1:has(._DraggableComponent--hover_1uqah_45 > ._DraggableComponent-overlay_1uqah_12) > ._DraggableComponent-overlay_1uqah_12 {
1177
1172
  display: none;
1178
1173
  }
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;
1174
+ ._DraggableComponent-actionsOverlay_1uqah_66 {
1184
1175
  position: sticky;
1176
+ opacity: 0;
1177
+ pointer-events: none;
1185
1178
  z-index: 2;
1186
1179
  }
1187
- ._DraggableComponent-actions_1bhad_97 {
1180
+ ._DraggableComponent--isSelected_1uqah_54 ._DraggableComponent-actionsOverlay_1uqah_66 {
1181
+ opacity: 1;
1182
+ pointer-events: auto;
1183
+ }
1184
+ ._DraggableComponent-actions_1uqah_66 {
1188
1185
  position: absolute;
1189
1186
  width: auto;
1190
1187
  cursor: grab;
1191
- display: none;
1188
+ display: flex;
1192
1189
  pointer-events: auto;
1193
1190
  box-sizing: border-box;
1194
1191
  transform-origin: right top;
1195
1192
  }
1196
- ._DraggableComponent--isSelected_1bhad_76 > ._DraggableComponent-actionsOverlay_1bhad_97 > ._DraggableComponent-actions_1bhad_97 {
1197
- display: flex;
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;
1198
1226
  }
1199
1227
 
1200
1228
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
1201
- ._DropZone_djoti_1 {
1202
- margin-left: auto;
1203
- margin-right: auto;
1229
+ ._DropZone_74ebh_1 {
1230
+ --drop-animation-ms: 250ms;
1231
+ --resize-animation-ms: 150ms;
1204
1232
  position: relative;
1205
- min-height: 100%;
1233
+ height: 100%;
1234
+ min-height: var(--min-empty-height);
1206
1235
  outline-offset: -2px;
1207
1236
  width: 100%;
1208
1237
  }
1209
- ._DropZone-content_djoti_10 {
1210
- min-height: 128px;
1211
- height: 100%;
1238
+ ._DropZone--hasChildren_74ebh_12 {
1239
+ min-height: 0;
1212
1240
  }
1213
- ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
1214
- pointer-events: all;
1241
+ ._DropZone_74ebh_1:empty {
1242
+ min-height: var(--min-empty-height);
1215
1243
  }
1216
- ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
1217
- pointer-events: none;
1244
+ ._DropZone--hasChildren_74ebh_12:not(._DropZone--userIsDragging_74ebh_20) {
1245
+ transition: min-height var(--resize-animation-ms) var(--drop-animation-ms) ease-in;
1246
+ }
1247
+ ._DropZone_74ebh_1:empty:not(._DropZone--userIsDragging_74ebh_20) {
1248
+ transition: min-height var(--resize-animation-ms) ease-in;
1218
1249
  }
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) {
1250
+ ._DropZone--isAreaSelected_74ebh_29,
1251
+ ._DropZone--hoveringOverArea_74ebh_30:not(._DropZone--isRootZone_74ebh_30) {
1222
1252
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1223
1253
  outline: 2px dashed var(--puck-color-azure-08);
1224
1254
  }
1225
- ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
1255
+ ._DropZone_74ebh_1:empty {
1226
1256
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
1227
1257
  outline: 2px dashed var(--puck-color-azure-08);
1228
1258
  }
1229
- ._DropZone--isDestination_djoti_40 {
1259
+ ._DropZone--isDestination_74ebh_40 {
1230
1260
  outline: 2px dashed var(--puck-color-azure-04) !important;
1231
1261
  }
1232
- ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
1262
+ ._DropZone--isDestination_74ebh_40:not(._DropZone--isRootZone_74ebh_30) {
1233
1263
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
1234
1264
  }
1235
- ._DropZone-item_djoti_52 {
1265
+ ._DropZone-item_74ebh_52 {
1236
1266
  position: relative;
1237
1267
  }
1238
- ._DropZone-hitbox_djoti_56 {
1268
+ ._DropZone-hitbox_74ebh_56 {
1239
1269
  position: absolute;
1240
1270
  bottom: -12px;
1241
1271
  height: 24px;
1242
1272
  width: 100%;
1243
1273
  z-index: 1;
1244
1274
  }
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
+ }
1245
1281
 
1246
1282
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1247
1283
  ._SidebarSection_125qe_1 {
@@ -1596,12 +1632,13 @@ textarea._Input-input_1l5m8_47 {
1596
1632
  }
1597
1633
 
1598
1634
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1599
- ._PuckPreview_rxwlr_1 {
1635
+ ._PuckPreview_z2rgu_1 {
1636
+ position: relative;
1600
1637
  height: 100%;
1601
1638
  }
1602
- ._PuckPreview-frame_rxwlr_5 {
1639
+ ._PuckPreview-frame_z2rgu_6 {
1603
1640
  border: none;
1604
- min-height: 100%;
1641
+ height: 100%;
1605
1642
  width: 100%;
1606
1643
  }
1607
1644
 
@@ -1743,7 +1780,7 @@ textarea._Input-input_1l5m8_47 {
1743
1780
  }
1744
1781
 
1745
1782
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Canvas/styles.module.css/#css-module-data */
1746
- ._PuckCanvas_avf1c_1 {
1783
+ ._PuckCanvas_18jay_1 {
1747
1784
  background: var(--puck-color-grey-11);
1748
1785
  display: flex;
1749
1786
  grid-area: editor;
@@ -1752,28 +1789,26 @@ textarea._Input-input_1l5m8_47 {
1752
1789
  overflow: auto;
1753
1790
  }
1754
1791
  @media (min-width: 1198px) {
1755
- ._PuckCanvas_avf1c_1 {
1792
+ ._PuckCanvas_18jay_1 {
1756
1793
  padding: calc(var(--puck-space-px) * 1.5);
1757
1794
  padding-top: var(--puck-space-px);
1758
1795
  }
1759
- ._PuckCanvas_avf1c_1:not(._PuckCanvas_avf1c_1:has(._PuckCanvas-controls_avf1c_16)) {
1796
+ ._PuckCanvas_18jay_1:not(._PuckCanvas_18jay_1:has(._PuckCanvas-controls_18jay_16)) {
1760
1797
  padding-top: calc(var(--puck-space-px) * 1.5);
1761
1798
  }
1762
1799
  }
1763
- ._PuckCanvas-inner_avf1c_21 {
1764
- box-sizing: border-box;
1800
+ ._PuckCanvas-inner_18jay_21 {
1765
1801
  display: flex;
1766
1802
  height: 100%;
1767
1803
  justify-content: center;
1768
1804
  min-width: 358px;
1769
- overflow: hidden;
1770
1805
  position: relative;
1771
1806
  width: 100%;
1772
1807
  }
1773
- ._PuckCanvas-root_avf1c_32 {
1808
+ ._PuckCanvas-root_18jay_30 {
1774
1809
  background: white;
1775
1810
  border: 1px solid var(--puck-color-grey-09);
1776
- box-sizing: border-box;
1811
+ box-sizing: content-box;
1777
1812
  min-width: 321px;
1778
1813
  position: absolute;
1779
1814
  pointer-events: none;
@@ -1783,20 +1818,20 @@ textarea._Input-input_1l5m8_47 {
1783
1818
  opacity: 0;
1784
1819
  }
1785
1820
  @media (min-width: 1198px) {
1786
- ._PuckCanvas-root_avf1c_32 {
1821
+ ._PuckCanvas-root_18jay_30 {
1787
1822
  min-width: unset;
1788
1823
  }
1789
1824
  }
1790
1825
  @media (prefers-reduced-motion: reduce) {
1791
- ._PuckCanvas-root_avf1c_32 {
1826
+ ._PuckCanvas-root_18jay_30 {
1792
1827
  transition: none !important;
1793
1828
  }
1794
1829
  }
1795
- ._PuckCanvas--ready_avf1c_57 ._PuckCanvas-root_avf1c_32 {
1830
+ ._PuckCanvas--ready_18jay_55 ._PuckCanvas-root_18jay_30 {
1796
1831
  pointer-events: unset;
1797
1832
  opacity: 1;
1798
1833
  }
1799
- ._PuckCanvas-loader_avf1c_62 {
1834
+ ._PuckCanvas-loader_18jay_60 {
1800
1835
  align-items: center;
1801
1836
  color: var(--puck-color-grey-06);
1802
1837
  display: flex;
@@ -1805,10 +1840,10 @@ textarea._Input-input_1l5m8_47 {
1805
1840
  transition: opacity 250ms ease-out;
1806
1841
  opacity: 0;
1807
1842
  }
1808
- ._PuckCanvas--showLoader_avf1c_72 ._PuckCanvas-loader_avf1c_62 {
1843
+ ._PuckCanvas--showLoader_18jay_70 ._PuckCanvas-loader_18jay_60 {
1809
1844
  opacity: 1;
1810
1845
  }
1811
- ._PuckCanvas--showLoader_avf1c_72._PuckCanvas--ready_avf1c_57 ._PuckCanvas-loader_avf1c_62 {
1846
+ ._PuckCanvas--showLoader_18jay_70._PuckCanvas--ready_18jay_55 ._PuckCanvas-loader_18jay_60 {
1812
1847
  opacity: 0;
1813
1848
  height: 0;
1814
1849
  transition: none;
package/dist/index.d.mts CHANGED
@@ -1,9 +1,10 @@
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-Ch-Pcasj.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-Ch-Pcasj.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-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';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
- import { ReactNode, SyntheticEvent, ReactElement, CSSProperties } from 'react';
6
- import { DragStart, DragUpdate } from '@measured/dnd';
5
+ import { ReactNode, SyntheticEvent, ReactElement } from 'react';
6
+ import { UniqueIdentifier } from '@dnd-kit/abstract';
7
+ import { Draggable } from '@dnd-kit/dom';
7
8
 
8
9
  declare const ActionBar: {
9
10
  ({ label, children, }: {
@@ -15,6 +16,9 @@ declare const ActionBar: {
15
16
  label?: string;
16
17
  onClick: (e: SyntheticEvent) => void;
17
18
  }) => react_jsx_runtime.JSX.Element;
19
+ Label: ({ label }: {
20
+ label: string;
21
+ }) => react_jsx_runtime.JSX.Element;
18
22
  Group: ({ children }: {
19
23
  children: ReactNode;
20
24
  }) => react_jsx_runtime.JSX.Element;
@@ -27,6 +31,9 @@ declare const Action: ({ children, label, onClick, }: {
27
31
  declare const Group: ({ children }: {
28
32
  children: ReactNode;
29
33
  }) => react_jsx_runtime.JSX.Element;
34
+ declare const Label: ({ label }: {
35
+ label: string;
36
+ }) => react_jsx_runtime.JSX.Element;
30
37
 
31
38
  declare const FieldLabel: ({ children, icon, label, el, readOnly, className, }: {
32
39
  children?: ReactNode;
@@ -55,7 +62,7 @@ declare const Button: ({ children, href, onClick, variant, type, disabled, tabIn
55
62
  }) => react_jsx_runtime.JSX.Element;
56
63
 
57
64
  declare const Drawer: {
58
- ({ children, droppableId: _droppableId, direction, }: {
65
+ ({ children, droppableId, direction, }: {
59
66
  children: ReactNode;
60
67
  droppableId?: string;
61
68
  direction?: "vertical" | "horizontal";
@@ -68,7 +75,7 @@ declare const Drawer: {
68
75
  }) => ReactElement;
69
76
  id?: string;
70
77
  label?: string;
71
- index: number;
78
+ index?: number;
72
79
  isDragDisabled?: boolean;
73
80
  }) => react_jsx_runtime.JSX.Element;
74
81
  };
@@ -85,12 +92,9 @@ type DropZoneContext<UserConfig extends Config = Config> = {
85
92
  setItemSelector?: (newIndex: ItemSelector | null) => void;
86
93
  dispatch?: (action: PuckAction) => void;
87
94
  areaId?: string;
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;
95
+ zoneCompound?: string;
96
+ index?: number;
97
+ draggedItem?: Draggable | null;
94
98
  hoveringComponent?: string | null;
95
99
  setHoveringComponent?: (id: string | null) => void;
96
100
  registerZoneArea?: (areaId: string) => void;
@@ -101,8 +105,13 @@ type DropZoneContext<UserConfig extends Config = Config> = {
101
105
  pathData?: PathData;
102
106
  registerPath?: (selector: ItemSelector) => void;
103
107
  mode?: "edit" | "render";
104
- zoneWillDrag?: string;
105
- setZoneWillDrag?: (zone: string) => void;
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[];
106
115
  } | null;
107
116
  declare const dropZoneContext: react.Context<DropZoneContext<Config>>;
108
117
  declare const DropZoneProvider: ({ children, value, }: {
@@ -110,6 +119,12 @@ declare const DropZoneProvider: ({ children, value, }: {
110
119
  value: DropZoneContext;
111
120
  }) => react_jsx_runtime.JSX.Element;
112
121
 
122
+ type DropZoneDndData = {
123
+ areaId?: string;
124
+ depth: number;
125
+ path: UniqueIdentifier[];
126
+ isDroppableTarget: boolean;
127
+ };
113
128
  declare function DropZone(props: DropZoneProps): react_jsx_runtime.JSX.Element;
114
129
 
115
130
  declare const IconButton: ({ children, href, onClick, variant, type, disabled, tabIndex, newTab, fullWidth, title, }: {
@@ -224,4 +239,4 @@ declare const usePuck: <UserConfig extends Config = Config>() => {
224
239
  selectedItem: ComponentDataMap<ExtractPropsFromConfig<UserConfig>> | null;
225
240
  };
226
241
 
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 };
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 };