@measured/puck 0.20.0-canary.f768aab9 → 0.20.1-canary.67b9195f

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.
package/dist/index.css CHANGED
@@ -134,7 +134,7 @@
134
134
  }
135
135
  }
136
136
 
137
- /* styles.css */
137
+ /* bundle/core.css */
138
138
  #frame-root {
139
139
  height: 1px;
140
140
  min-height: 100vh;
@@ -144,6 +144,8 @@
144
144
  z-index: 0;
145
145
  }
146
146
 
147
+ /* bundle/index.css */
148
+
147
149
  /* css-module:/home/runner/work/puck/puck/packages/core/components/ActionBar/styles.module.css/#css-module-data */
148
150
  ._ActionBar_rvadt_1 {
149
151
  align-items: center;
@@ -229,10 +231,10 @@
229
231
  }
230
232
 
231
233
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
232
- ._InputWrapper_py9hf_1 + ._InputWrapper_py9hf_1 {
234
+ ._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
233
235
  margin-top: 12px;
234
236
  }
235
- ._Input-label_py9hf_5 {
237
+ ._Input-label_bsxfo_5 {
236
238
  align-items: center;
237
239
  color: var(--puck-color-grey-04);
238
240
  display: flex;
@@ -240,17 +242,17 @@
240
242
  font-size: var(--puck-font-size-xxs);
241
243
  font-weight: 600;
242
244
  }
243
- ._Input-labelIcon_py9hf_14 {
245
+ ._Input-labelIcon_bsxfo_14 {
244
246
  color: var(--puck-color-grey-07);
245
247
  display: flex;
246
248
  margin-inline-end: 4px;
247
249
  padding-inline-start: 4px;
248
250
  }
249
- ._Input-disabledIcon_py9hf_21 {
251
+ ._Input-disabledIcon_bsxfo_21 {
250
252
  color: var(--puck-color-grey-05);
251
253
  margin-inline-start: auto;
252
254
  }
253
- ._Input-input_py9hf_26 {
255
+ ._Input-input_bsxfo_26 {
254
256
  background: var(--puck-color-white);
255
257
  border-width: 1px;
256
258
  border-style: solid;
@@ -258,13 +260,18 @@
258
260
  border-radius: 4px;
259
261
  box-sizing: border-box;
260
262
  font-family: inherit;
261
- font-size: 14px;
263
+ font-size: 16px;
262
264
  padding: 12px 15px;
263
265
  transition: border-color 50ms ease-in;
264
266
  width: 100%;
265
267
  max-width: 100%;
266
268
  }
267
- select._Input-input_py9hf_26 {
269
+ @media (min-width: 458px) {
270
+ ._Input-input_bsxfo_26 {
271
+ font-size: 14px;
272
+ }
273
+ }
274
+ select._Input-input_bsxfo_26 {
268
275
  appearance: none;
269
276
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23c3c3c3'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
270
277
  background-size: 12px;
@@ -273,29 +280,29 @@ select._Input-input_py9hf_26 {
273
280
  background-color: var(--puck-color-white);
274
281
  cursor: pointer;
275
282
  }
276
- select._Input-input_py9hf_26:dir(rtl) {
283
+ select._Input-input_bsxfo_26:dir(rtl) {
277
284
  background-position: 12px calc(50% + 3px);
278
285
  }
279
286
  @media (hover: hover) and (pointer: fine) {
280
- ._Input_py9hf_1:has(> input):hover ._Input-input_py9hf_26:not([readonly]),
281
- ._Input_py9hf_1:has(> textarea):hover ._Input-input_py9hf_26:not([readonly]) {
287
+ ._Input_bsxfo_1:has(> input):hover ._Input-input_bsxfo_26:not([readonly]),
288
+ ._Input_bsxfo_1:has(> textarea):hover ._Input-input_bsxfo_26:not([readonly]) {
282
289
  border-color: var(--puck-color-grey-05);
283
290
  transition: none;
284
291
  }
285
- ._Input_py9hf_1:has(> select):hover ._Input-input_py9hf_26:not([disabled]) {
292
+ ._Input_bsxfo_1:has(> select):hover ._Input-input_bsxfo_26:not([disabled]) {
286
293
  background-color: var(--puck-color-azure-12);
287
294
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%235a5a5a'><polygon points='0,0 100,0 50,50'/></svg>");
288
295
  border-color: var(--puck-color-grey-05);
289
296
  transition: none;
290
297
  }
291
298
  }
292
- ._Input-input_py9hf_26:focus {
299
+ ._Input-input_bsxfo_26:focus {
293
300
  border-color: var(--puck-color-grey-05);
294
301
  outline: 2px solid var(--puck-color-azure-05);
295
302
  transition: none;
296
303
  }
297
- ._Input--readOnly_py9hf_76 > ._Input-input_py9hf_26,
298
- ._Input--readOnly_py9hf_76 > select._Input-input_py9hf_26 {
304
+ ._Input--readOnly_bsxfo_82 > ._Input-input_bsxfo_26,
305
+ ._Input--readOnly_bsxfo_82 > select._Input-input_bsxfo_26 {
299
306
  background-color: var(--puck-color-grey-11);
300
307
  border-color: var(--puck-color-grey-09);
301
308
  color: var(--puck-color-grey-04);
@@ -304,34 +311,34 @@ select._Input-input_py9hf_26:dir(rtl) {
304
311
  outline: 0;
305
312
  transition: none;
306
313
  }
307
- ._Input-radioGroupItems_py9hf_87 {
314
+ ._Input-radioGroupItems_bsxfo_93 {
308
315
  display: flex;
309
316
  border: 1px solid var(--puck-color-grey-09);
310
317
  border-radius: 4px;
311
318
  flex-wrap: wrap;
312
319
  }
313
- ._Input-radio_py9hf_87 {
320
+ ._Input-radio_bsxfo_93 {
314
321
  border-inline-end: 1px solid var(--puck-color-grey-09);
315
322
  flex-grow: 1;
316
323
  }
317
- ._Input-radio_py9hf_87:first-of-type {
324
+ ._Input-radio_bsxfo_93:first-of-type {
318
325
  border-bottom-left-radius: 4px;
319
326
  border-top-left-radius: 4px;
320
327
  }
321
- ._Input-radio_py9hf_87:first-of-type ._Input-radioInner_py9hf_104 {
328
+ ._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110 {
322
329
  border-bottom-left-radius: 3px;
323
330
  border-top-left-radius: 3px;
324
331
  }
325
- ._Input-radio_py9hf_87:last-of-type {
332
+ ._Input-radio_bsxfo_93:last-of-type {
326
333
  border-bottom-right-radius: 4px;
327
334
  border-inline-end: 0;
328
335
  border-top-right-radius: 4px;
329
336
  }
330
- ._Input-radio_py9hf_87:last-of-type ._Input-radioInner_py9hf_104 {
337
+ ._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110 {
331
338
  border-bottom-right-radius: 3px;
332
339
  border-top-right-radius: 3px;
333
340
  }
334
- ._Input-radioInner_py9hf_104 {
341
+ ._Input-radioInner_bsxfo_110 {
335
342
  background-color: var(--puck-color-white);
336
343
  color: var(--puck-color-grey-04);
337
344
  cursor: pointer;
@@ -340,32 +347,32 @@ select._Input-input_py9hf_26:dir(rtl) {
340
347
  text-align: center;
341
348
  transition: background-color 50ms ease-in;
342
349
  }
343
- ._Input-radio_py9hf_87:has(:focus-visible) {
350
+ ._Input-radio_bsxfo_93:has(:focus-visible) {
344
351
  outline: 2px solid var(--puck-color-azure-05);
345
352
  outline-offset: 2px;
346
353
  position: relative;
347
354
  }
348
355
  @media (hover: hover) and (pointer: fine) {
349
- ._Input-radioInner_py9hf_104:hover {
356
+ ._Input-radioInner_bsxfo_110:hover {
350
357
  background-color: var(--puck-color-azure-12);
351
358
  transition: none;
352
359
  }
353
360
  }
354
- ._Input--readOnly_py9hf_76 ._Input-radioInner_py9hf_104 {
361
+ ._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110 {
355
362
  background-color: var(--puck-color-white);
356
363
  color: var(--puck-color-grey-04);
357
364
  cursor: default;
358
365
  }
359
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
366
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
360
367
  background-color: var(--puck-color-azure-11);
361
368
  color: var(--puck-color-azure-04);
362
369
  font-weight: 500;
363
370
  }
364
- ._Input--readOnly_py9hf_76 ._Input-radioInput_py9hf_149:checked ~ ._Input-radioInner_py9hf_104 {
371
+ ._Input--readOnly_bsxfo_82 ._Input-radioInput_bsxfo_155:checked ~ ._Input-radioInner_bsxfo_110 {
365
372
  background-color: var(--puck-color-grey-11);
366
373
  color: var(--puck-color-grey-04);
367
374
  }
368
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149 {
375
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155 {
369
376
  clip: rect(0 0 0 0);
370
377
  clip-path: inset(100%);
371
378
  height: 1px;
@@ -374,7 +381,7 @@ select._Input-input_py9hf_26:dir(rtl) {
374
381
  white-space: nowrap;
375
382
  width: 1px;
376
383
  }
377
- textarea._Input-input_py9hf_26 {
384
+ textarea._Input-input_bsxfo_26 {
378
385
  margin-bottom: -4px;
379
386
  }
380
387
 
@@ -1150,27 +1157,31 @@ textarea._Input-input_py9hf_26 {
1150
1157
  }
1151
1158
 
1152
1159
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1153
- ._DraggableComponent_qzbgx_1 {
1160
+ ._DraggableComponent_1vaqy_1 {
1154
1161
  position: absolute;
1155
1162
  pointer-events: none;
1156
1163
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1157
1164
  }
1158
- ._DraggableComponent-overlay_qzbgx_12 {
1159
- cursor: pointer;
1165
+ ._DraggableComponent-overlayWrapper_1vaqy_12 {
1160
1166
  height: 100%;
1161
1167
  width: 100%;
1162
1168
  top: 0;
1163
- outline: 2px var(--puck-color-azure-09) solid;
1164
- outline-offset: -2px;
1165
1169
  position: absolute;
1166
1170
  pointer-events: none;
1167
1171
  box-sizing: border-box;
1168
1172
  z-index: 1;
1169
1173
  }
1170
- ._DraggableComponent_qzbgx_1:focus-visible > ._DraggableComponent-overlay_qzbgx_12 {
1174
+ ._DraggableComponent-overlay_1vaqy_12 {
1175
+ cursor: pointer;
1176
+ height: 100%;
1177
+ outline: 2px var(--puck-color-azure-09) solid;
1178
+ outline-offset: -2px;
1179
+ width: 100%;
1180
+ }
1181
+ ._DraggableComponent_1vaqy_1:focus-visible > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1171
1182
  outline: 1px solid var(--puck-color-azure-05);
1172
1183
  }
1173
- ._DraggableComponent-loadingOverlay_qzbgx_29 {
1184
+ ._DraggableComponent-loadingOverlay_1vaqy_34 {
1174
1185
  background: var(--puck-color-white);
1175
1186
  color: var(--puck-color-grey-03);
1176
1187
  border-radius: 4px;
@@ -1185,29 +1196,27 @@ textarea._Input-input_py9hf_26 {
1185
1196
  opacity: 0.8;
1186
1197
  z-index: 1;
1187
1198
  }
1188
- ._DraggableComponent--hover_qzbgx_45:not(._DraggableComponent--isLocked_qzbgx_45) > ._DraggableComponent-overlay_qzbgx_12 {
1199
+ ._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1189
1200
  background: var(--overlay-background);
1190
- }
1191
- ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1192
1201
  outline: 2px var(--puck-color-azure-09) solid;
1193
1202
  }
1194
- ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1203
+ ._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1195
1204
  outline-color: var(--puck-color-azure-07);
1196
1205
  }
1197
- ._DraggableComponent_qzbgx_1:has(._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12) > ._DraggableComponent-overlay_qzbgx_12 {
1206
+ ._DraggableComponent_1vaqy_1:has(._DraggableComponent--hover_1vaqy_50 > ._DraggableComponent-overlayWrapper_1vaqy_12) > ._DraggableComponent-overlayWrapper_1vaqy_12 {
1198
1207
  display: none;
1199
1208
  }
1200
- ._DraggableComponent-actionsOverlay_qzbgx_66 {
1209
+ ._DraggableComponent-actionsOverlay_1vaqy_71 {
1201
1210
  position: sticky;
1202
1211
  opacity: 0;
1203
1212
  pointer-events: none;
1204
1213
  z-index: 2;
1205
1214
  }
1206
- ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1215
+ ._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
1207
1216
  opacity: 1;
1208
1217
  pointer-events: auto;
1209
1218
  }
1210
- ._DraggableComponent-actions_qzbgx_66 {
1219
+ ._DraggableComponent-actions_1vaqy_71 {
1211
1220
  position: absolute;
1212
1221
  width: auto;
1213
1222
  cursor: grab;
@@ -1307,6 +1316,33 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1307
1316
  opacity: 0 !important;
1308
1317
  }
1309
1318
 
1319
+ /* lib/overlay-portal/styles.css */
1320
+ [data-puck-overlay-portal],
1321
+ [data-puck-overlay-portal] * {
1322
+ pointer-events: auto !important;
1323
+ }
1324
+ [data-puck-overlay-portal]:hover {
1325
+ outline: 2px var(--puck-color-azure-09) dashed;
1326
+ outline-offset: 2px;
1327
+ }
1328
+ [data-puck-overlay-portal]:focus-within {
1329
+ outline: 2px var(--puck-color-azure-07) solid;
1330
+ outline-offset: 2px;
1331
+ }
1332
+
1333
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/InlineTextField/styles.module.css/#css-module-data */
1334
+ ._InlineTextField_ilw2a_1 {
1335
+ cursor: text;
1336
+ display: inline-block;
1337
+ }
1338
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1 {
1339
+ cursor: none;
1340
+ caret-color: transparent;
1341
+ }
1342
+ [data-dnd-dragging] ._InlineTextField_ilw2a_1::selection {
1343
+ display: none;
1344
+ }
1345
+
1310
1346
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1311
1347
  ._SidebarSection_8boj8_1 {
1312
1348
  display: flex;
@@ -1394,23 +1430,25 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1394
1430
  }
1395
1431
 
1396
1432
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1397
- ._Puck_dnlfp_19 {
1433
+ ._Puck_1yxlw_19 {
1398
1434
  --puck-space-px: 16px;
1399
1435
  font-family: var(--puck-font-family);
1400
1436
  overflow-x: hidden;
1401
1437
  }
1402
1438
  @media (min-width: 766px) {
1403
- ._Puck_dnlfp_19 {
1439
+ ._Puck_1yxlw_19 {
1404
1440
  overflow-x: auto;
1405
1441
  }
1406
1442
  }
1407
- ._Puck-portal_dnlfp_31 {
1443
+ ._Puck-portal_1yxlw_31 {
1408
1444
  position: relative;
1409
1445
  z-index: 2;
1410
1446
  }
1411
- ._PuckLayout-inner_dnlfp_38 {
1447
+ ._PuckLayout-inner_1yxlw_38 {
1412
1448
  --puck-frame-width: auto;
1413
1449
  --puck-side-bar-width: 0px;
1450
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, var(--puck-side-bar-width) );
1451
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, var(--puck-side-bar-width) );
1414
1452
  display: grid;
1415
1453
  grid-template-areas: "header header header" "left editor right";
1416
1454
  grid-template-columns: 0 var(--puck-frame-width) 0;
@@ -1419,69 +1457,53 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1419
1457
  position: relative;
1420
1458
  z-index: 0;
1421
1459
  }
1422
- ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1460
+ ._PuckLayout--mounted_1yxlw_59 ._PuckLayout-inner_1yxlw_38 {
1423
1461
  --puck-side-bar-width: 186px;
1424
1462
  }
1425
- ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1426
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) 0;
1463
+ ._PuckLayout--leftSideBarVisible_1yxlw_63 ._PuckLayout-inner_1yxlw_38 {
1464
+ grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) 0;
1427
1465
  }
1428
- ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1429
- grid-template-columns: 0 var(--puck-frame-width) var(--puck-side-bar-width);
1466
+ ._PuckLayout--rightSideBarVisible_1yxlw_69 ._PuckLayout-inner_1yxlw_38 {
1467
+ grid-template-columns: 0 var(--puck-frame-width) var(--puck-right-side-bar-width);
1430
1468
  }
1431
- ._PuckLayout--leftSideBarVisible_dnlfp_54._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1432
- grid-template-columns: var(--puck-side-bar-width) var(--puck-frame-width) var(--puck-side-bar-width);
1469
+ ._PuckLayout--leftSideBarVisible_1yxlw_63._PuckLayout--rightSideBarVisible_1yxlw_69 ._PuckLayout-inner_1yxlw_38 {
1470
+ grid-template-columns: var(--puck-left-side-bar-width) var(--puck-frame-width) var(--puck-right-side-bar-width);
1433
1471
  }
1434
1472
  @media (min-width: 458px) {
1435
- ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1473
+ ._PuckLayout-mounted_1yxlw_83 ._PuckLayout-inner_1yxlw_38 {
1436
1474
  --puck-frame-width: minmax(266px, auto);
1437
1475
  }
1438
1476
  }
1439
1477
  @media (min-width: 638px) {
1440
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1478
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1441
1479
  --puck-side-bar-width: minmax(186px, 250px);
1442
1480
  }
1443
1481
  }
1444
1482
  @media (min-width: 766px) {
1445
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1483
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1446
1484
  --puck-frame-width: auto;
1447
1485
  }
1448
1486
  }
1449
1487
  @media (min-width: 990px) {
1450
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1488
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1451
1489
  --puck-side-bar-width: 256px;
1452
1490
  }
1453
1491
  }
1454
1492
  @media (min-width: 1198px) {
1455
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1493
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1456
1494
  --puck-side-bar-width: 274px;
1457
1495
  }
1458
1496
  }
1459
1497
  @media (min-width: 1398px) {
1460
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1498
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1461
1499
  --puck-side-bar-width: 290px;
1462
1500
  }
1463
1501
  }
1464
1502
  @media (min-width: 1598px) {
1465
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1503
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1466
1504
  --puck-side-bar-width: 320px;
1467
1505
  }
1468
1506
  }
1469
- ._PuckLayout-leftSideBar_dnlfp_115 {
1470
- background: var(--puck-color-grey-12);
1471
- border-inline-end: 1px solid var(--puck-color-grey-09);
1472
- display: flex;
1473
- flex-direction: column;
1474
- grid-area: left;
1475
- overflow-y: auto;
1476
- }
1477
- ._PuckLayout-rightSideBar_dnlfp_124 {
1478
- background: var(--puck-color-white);
1479
- border-inline-start: 1px solid var(--puck-color-grey-09);
1480
- display: flex;
1481
- flex-direction: column;
1482
- grid-area: right;
1483
- overflow-y: auto;
1484
- }
1485
1507
 
1486
1508
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1487
1509
  ._PuckFields_10bh7_1 {
@@ -1893,3 +1915,66 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1893
1915
  display: none;
1894
1916
  }
1895
1917
  }
1918
+
1919
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1920
+ @media (min-width: 766px) {
1921
+ ._ResizeHandle_144bf_2 {
1922
+ position: absolute;
1923
+ width: 5px;
1924
+ height: 100%;
1925
+ cursor: col-resize;
1926
+ z-index: 10;
1927
+ background: transparent;
1928
+ top: 0;
1929
+ }
1930
+ ._ResizeHandle_144bf_2:hover {
1931
+ background: rgba(0, 0, 0, 0.1);
1932
+ }
1933
+ ._ResizeHandle--left_144bf_16 {
1934
+ right: -3px;
1935
+ }
1936
+ ._ResizeHandle--right_144bf_20 {
1937
+ left: -3px;
1938
+ }
1939
+ }
1940
+
1941
+ /* components/Puck/components/ResizeHandle/styles.css */
1942
+ [data-resize-overlay] {
1943
+ position: fixed;
1944
+ top: 0;
1945
+ left: 0;
1946
+ right: 0;
1947
+ bottom: 0;
1948
+ z-index: 9999;
1949
+ cursor: col-resize;
1950
+ }
1951
+
1952
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1953
+ ._Sidebar_1xksb_1 {
1954
+ position: relative;
1955
+ display: flex;
1956
+ flex-direction: column;
1957
+ overflow-y: auto;
1958
+ }
1959
+ ._Sidebar--left_1xksb_8 {
1960
+ background: var(--puck-color-grey-12);
1961
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1962
+ grid-area: left;
1963
+ }
1964
+ ._Sidebar--right_1xksb_14 {
1965
+ background: var(--puck-color-white);
1966
+ border-inline-start: 1px solid var(--puck-color-grey-09);
1967
+ grid-area: right;
1968
+ }
1969
+ ._Sidebar-resizeHandle_1xksb_20 {
1970
+ position: absolute;
1971
+ height: 100%;
1972
+ }
1973
+ ._Sidebar--left_1xksb_8 + ._Sidebar-resizeHandle_1xksb_20 {
1974
+ grid-area: left;
1975
+ justify-self: end;
1976
+ }
1977
+ ._Sidebar--right_1xksb_14 + ._Sidebar-resizeHandle_1xksb_20 {
1978
+ grid-area: right;
1979
+ justify-self: start;
1980
+ }
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
- import { H as History, P as Permissions, C as ComponentData, a as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-BOSl1o0G.mjs';
2
- export { _ as Adaptor, Y as ArrayField, t as ArrayState, ab as AsFieldProps, B as BaseData, K as BaseField, G as ComponentDataMap, z as ComponentDataOptionalId, J as Content, a2 as CustomField, a1 as CustomFieldRender, a8 as DefaultComponentProps, a5 as DefaultRootFieldProps, a7 as DefaultRootProps, a6 as DefaultRootRenderProps, m as Direction, n as DragAxis, a0 as ExternalField, $ as ExternalFieldWithAdaptor, ad as ExtractPropsFromConfig, ae as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, E as MappedItem, N as NumberField, Z as ObjectField, q as OverrideKey, u as PuckComponent, a4 as PuckContext, X as RadioField, v as RootConfig, y as RootData, x as RootDataWithoutProps, Q as SelectField, S as Slot, a3 as SlotField, T as TextField, L as TextareaField, o as Viewport, ac as WithChildren, a9 as WithId, aa as WithPuckProps, W as WithSlotProps, af as migrate, p as overrideKeys, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-BOSl1o0G.mjs';
1
+ import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-CiAkCQEp.mjs';
2
+ export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CiAkCQEp.mjs';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';
@@ -105,6 +105,7 @@ type AppStore<UserConfig extends Config = Config, G extends UserGenerics<UserCon
105
105
  history: HistorySlice;
106
106
  nodes: NodesSlice;
107
107
  permissions: PermissionsSlice;
108
+ fieldTransforms: FieldTransforms;
108
109
  };
109
110
 
110
111
  declare const ActionBar: {
@@ -205,8 +206,9 @@ type PuckProps<UserConfig extends Config = Config, G extends UserGenerics<UserCo
205
206
  onPublish?: (data: G["UserData"]) => void;
206
207
  onAction?: OnAction<G["UserData"]>;
207
208
  permissions?: Partial<Permissions>;
208
- plugins?: Plugin[];
209
- overrides?: Partial<Overrides>;
209
+ plugins?: Plugin<UserConfig>[];
210
+ overrides?: Partial<Overrides<UserConfig>>;
211
+ fieldTransforms?: FieldTransforms<UserConfig>;
210
212
  renderHeader?: (props: {
211
213
  children: ReactNode;
212
214
  dispatch: (action: PuckAction) => void;
@@ -249,18 +251,25 @@ declare function Render<UserConfig extends Config = Config, G extends UserGeneri
249
251
  metadata?: Metadata;
250
252
  }): react_jsx_runtime.JSX.Element;
251
253
 
252
- type WithGet<T> = T & {
253
- get: () => T;
254
- };
254
+ declare const registerOverlayPortal: (el: HTMLElement | null | undefined, opts?: {
255
+ disableDrag?: boolean;
256
+ disableDragOnFocus?: boolean;
257
+ }) => (() => void) | undefined;
258
+
259
+ /**
260
+ * Helper function to set a value based on a dot-notated path
261
+ */
262
+ declare function setDeep<T extends Record<string, any>>(node: T, path: string, newVal: any): T;
263
+
255
264
  type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = {
256
- appState: AppState;
265
+ appState: G["UserPublicAppState"];
257
266
  config: UserConfig;
258
267
  dispatch: AppStore["dispatch"];
259
268
  getPermissions: GetPermissions<UserConfig>;
260
269
  refreshPermissions: RefreshPermissions<UserConfig>;
261
270
  selectedItem: G["UserComponentData"] | null;
262
- getItemBySelector: (selector: ItemSelector) => ComponentData | undefined;
263
- getItemById: (id: string) => ComponentData | undefined;
271
+ getItemBySelector: (selector: ItemSelector) => G["UserComponentData"] | undefined;
272
+ getItemById: (id: string) => G["UserComponentData"] | undefined;
264
273
  getSelectorForId: (id: string) => Required<ItemSelector> | undefined;
265
274
  history: {
266
275
  back: HistorySlice["back"];
@@ -274,7 +283,7 @@ type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<User
274
283
  };
275
284
  };
276
285
  type PuckApi<UserConfig extends Config = Config> = UsePuckData<UserConfig>;
277
- type UsePuckStore<UserConfig extends Config = Config> = WithGet<PuckApi<UserConfig>>;
286
+ type UsePuckStore<UserConfig extends Config = Config> = PuckApi<UserConfig>;
278
287
  /**
279
288
  * createUsePuck
280
289
  *
@@ -293,4 +302,4 @@ declare function usePuck<UserConfig extends Config = Config>(): UsePuckStore<Use
293
302
  */
294
303
  declare function useGetPuck(): () => UsePuckStore<Config>;
295
304
 
296
- export { Action, ActionBar, AppState, AutoField, Button, ComponentConfig, ComponentData, Config, Data, Drawer, DropZone, Field, FieldLabel, FieldProps, Fields, Group, History, IconButton, IframeConfig, InitialHistory, Label, Metadata, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, type PuckApi, Render, ResolveDataTrigger, RootDataWithProps, UiState, type UsePuckData, UserGenerics, Viewports, createUsePuck, renderContext, useGetPuck, usePuck };
305
+ export { Action, ActionBar, AppState, AutoField, Button, ComponentConfig, ComponentData, Config, Data, Drawer, DropZone, Field, FieldLabel, FieldProps, FieldTransforms, Fields, Group, History, IconButton, IframeConfig, InitialHistory, Label, Metadata, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, type PuckApi, Render, ResolveDataTrigger, RootDataWithProps, UiState, type UsePuckData, UserGenerics, Viewports, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { H as History, P as Permissions, C as ComponentData, a as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-BOSl1o0G.js';
2
- export { _ as Adaptor, Y as ArrayField, t as ArrayState, ab as AsFieldProps, B as BaseData, K as BaseField, G as ComponentDataMap, z as ComponentDataOptionalId, J as Content, a2 as CustomField, a1 as CustomFieldRender, a8 as DefaultComponentProps, a5 as DefaultRootFieldProps, a7 as DefaultRootProps, a6 as DefaultRootRenderProps, m as Direction, n as DragAxis, a0 as ExternalField, $ as ExternalFieldWithAdaptor, ad as ExtractPropsFromConfig, ae as ExtractRootPropsFromConfig, r as FieldRenderFunctions, s as ItemWithId, E as MappedItem, N as NumberField, Z as ObjectField, q as OverrideKey, u as PuckComponent, a4 as PuckContext, X as RadioField, v as RootConfig, y as RootData, x as RootDataWithoutProps, Q as SelectField, S as Slot, a3 as SlotField, T as TextField, L as TextareaField, o as Viewport, ac as WithChildren, a9 as WithId, aa as WithPuckProps, W as WithSlotProps, af as migrate, p as overrideKeys, ah as resolveAllData, ag as transformProps, w as walkTree } from './walk-tree-BOSl1o0G.js';
1
+ import { H as History, P as Permissions, a as ComponentData, C as Config, U as UserGenerics, F as Fields, b as PuckAction, R as RootDataWithProps, c as ResolveDataTrigger, d as Plugin, O as Overrides, V as Viewports, I as IframeConfig, e as UiState, f as ComponentConfig, A as AppState, M as Metadata, g as FieldTransforms, h as Field, i as FieldProps, D as DropZoneProps, j as Data, k as OnAction, l as InitialHistory, n as ItemSelector } from './walk-tree-CiAkCQEp.js';
2
+ export { a7 as Adaptor, a5 as ArrayField, B as ArrayState, ak as AsFieldProps, N as BaseData, $ as BaseField, Z as ComponentDataMap, X as ComponentDataOptionalId, _ as Content, ab as CustomField, aa as CustomFieldRender, ah as DefaultComponentProps, K as DefaultComponents, ae as DefaultRootFieldProps, ag as DefaultRootProps, af as DefaultRootRenderProps, o as Direction, p as DragAxis, a9 as ExternalField, a8 as ExternalFieldWithAdaptor, L as ExtractConfigParams, am as ExtractField, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, Y as MappedItem, a1 as NumberField, a6 as ObjectField, x as OverrideKey, G as PuckComponent, ad as PuckContext, a4 as RadioField, J as RootConfig, T as RootData, Q as RootDataWithoutProps, a3 as SelectField, S as Slot, E as SlotComponent, ac as SlotField, a0 as TextField, a2 as TextareaField, q as Viewport, al as WithChildren, ai as WithId, aj as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-CiAkCQEp.js';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import * as react from 'react';
5
5
  import react__default, { ReactNode, SyntheticEvent, ReactElement } from 'react';
@@ -105,6 +105,7 @@ type AppStore<UserConfig extends Config = Config, G extends UserGenerics<UserCon
105
105
  history: HistorySlice;
106
106
  nodes: NodesSlice;
107
107
  permissions: PermissionsSlice;
108
+ fieldTransforms: FieldTransforms;
108
109
  };
109
110
 
110
111
  declare const ActionBar: {
@@ -205,8 +206,9 @@ type PuckProps<UserConfig extends Config = Config, G extends UserGenerics<UserCo
205
206
  onPublish?: (data: G["UserData"]) => void;
206
207
  onAction?: OnAction<G["UserData"]>;
207
208
  permissions?: Partial<Permissions>;
208
- plugins?: Plugin[];
209
- overrides?: Partial<Overrides>;
209
+ plugins?: Plugin<UserConfig>[];
210
+ overrides?: Partial<Overrides<UserConfig>>;
211
+ fieldTransforms?: FieldTransforms<UserConfig>;
210
212
  renderHeader?: (props: {
211
213
  children: ReactNode;
212
214
  dispatch: (action: PuckAction) => void;
@@ -249,18 +251,25 @@ declare function Render<UserConfig extends Config = Config, G extends UserGeneri
249
251
  metadata?: Metadata;
250
252
  }): react_jsx_runtime.JSX.Element;
251
253
 
252
- type WithGet<T> = T & {
253
- get: () => T;
254
- };
254
+ declare const registerOverlayPortal: (el: HTMLElement | null | undefined, opts?: {
255
+ disableDrag?: boolean;
256
+ disableDragOnFocus?: boolean;
257
+ }) => (() => void) | undefined;
258
+
259
+ /**
260
+ * Helper function to set a value based on a dot-notated path
261
+ */
262
+ declare function setDeep<T extends Record<string, any>>(node: T, path: string, newVal: any): T;
263
+
255
264
  type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = {
256
- appState: AppState;
265
+ appState: G["UserPublicAppState"];
257
266
  config: UserConfig;
258
267
  dispatch: AppStore["dispatch"];
259
268
  getPermissions: GetPermissions<UserConfig>;
260
269
  refreshPermissions: RefreshPermissions<UserConfig>;
261
270
  selectedItem: G["UserComponentData"] | null;
262
- getItemBySelector: (selector: ItemSelector) => ComponentData | undefined;
263
- getItemById: (id: string) => ComponentData | undefined;
271
+ getItemBySelector: (selector: ItemSelector) => G["UserComponentData"] | undefined;
272
+ getItemById: (id: string) => G["UserComponentData"] | undefined;
264
273
  getSelectorForId: (id: string) => Required<ItemSelector> | undefined;
265
274
  history: {
266
275
  back: HistorySlice["back"];
@@ -274,7 +283,7 @@ type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<User
274
283
  };
275
284
  };
276
285
  type PuckApi<UserConfig extends Config = Config> = UsePuckData<UserConfig>;
277
- type UsePuckStore<UserConfig extends Config = Config> = WithGet<PuckApi<UserConfig>>;
286
+ type UsePuckStore<UserConfig extends Config = Config> = PuckApi<UserConfig>;
278
287
  /**
279
288
  * createUsePuck
280
289
  *
@@ -293,4 +302,4 @@ declare function usePuck<UserConfig extends Config = Config>(): UsePuckStore<Use
293
302
  */
294
303
  declare function useGetPuck(): () => UsePuckStore<Config>;
295
304
 
296
- export { Action, ActionBar, AppState, AutoField, Button, ComponentConfig, ComponentData, Config, Data, Drawer, DropZone, Field, FieldLabel, FieldProps, Fields, Group, History, IconButton, IframeConfig, InitialHistory, Label, Metadata, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, type PuckApi, Render, ResolveDataTrigger, RootDataWithProps, UiState, type UsePuckData, UserGenerics, Viewports, createUsePuck, renderContext, useGetPuck, usePuck };
305
+ export { Action, ActionBar, AppState, AutoField, Button, ComponentConfig, ComponentData, Config, Data, Drawer, DropZone, Field, FieldLabel, FieldProps, FieldTransforms, Fields, Group, History, IconButton, IframeConfig, InitialHistory, Label, Metadata, OnAction, Overrides, Permissions, Plugin, Puck, PuckAction, type PuckApi, Render, ResolveDataTrigger, RootDataWithProps, UiState, type UsePuckData, UserGenerics, Viewports, createUsePuck, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck };