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

Sign up to get free protection for your applications and to get access to all the features.
@@ -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 };