@measured/puck 0.20.0-canary.d405985b → 0.20.0-canary.ddc0aa31

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
@@ -231,10 +231,10 @@
231
231
  }
232
232
 
233
233
  /* css-module:/home/runner/work/puck/puck/packages/core/components/AutoField/styles.module.css/#css-module-data */
234
- ._InputWrapper_py9hf_1 + ._InputWrapper_py9hf_1 {
234
+ ._InputWrapper_bsxfo_1 + ._InputWrapper_bsxfo_1 {
235
235
  margin-top: 12px;
236
236
  }
237
- ._Input-label_py9hf_5 {
237
+ ._Input-label_bsxfo_5 {
238
238
  align-items: center;
239
239
  color: var(--puck-color-grey-04);
240
240
  display: flex;
@@ -242,17 +242,17 @@
242
242
  font-size: var(--puck-font-size-xxs);
243
243
  font-weight: 600;
244
244
  }
245
- ._Input-labelIcon_py9hf_14 {
245
+ ._Input-labelIcon_bsxfo_14 {
246
246
  color: var(--puck-color-grey-07);
247
247
  display: flex;
248
248
  margin-inline-end: 4px;
249
249
  padding-inline-start: 4px;
250
250
  }
251
- ._Input-disabledIcon_py9hf_21 {
251
+ ._Input-disabledIcon_bsxfo_21 {
252
252
  color: var(--puck-color-grey-05);
253
253
  margin-inline-start: auto;
254
254
  }
255
- ._Input-input_py9hf_26 {
255
+ ._Input-input_bsxfo_26 {
256
256
  background: var(--puck-color-white);
257
257
  border-width: 1px;
258
258
  border-style: solid;
@@ -260,13 +260,18 @@
260
260
  border-radius: 4px;
261
261
  box-sizing: border-box;
262
262
  font-family: inherit;
263
- font-size: 14px;
263
+ font-size: 16px;
264
264
  padding: 12px 15px;
265
265
  transition: border-color 50ms ease-in;
266
266
  width: 100%;
267
267
  max-width: 100%;
268
268
  }
269
- 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 {
270
275
  appearance: none;
271
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;
272
277
  background-size: 12px;
@@ -275,29 +280,29 @@ select._Input-input_py9hf_26 {
275
280
  background-color: var(--puck-color-white);
276
281
  cursor: pointer;
277
282
  }
278
- select._Input-input_py9hf_26:dir(rtl) {
283
+ select._Input-input_bsxfo_26:dir(rtl) {
279
284
  background-position: 12px calc(50% + 3px);
280
285
  }
281
286
  @media (hover: hover) and (pointer: fine) {
282
- ._Input_py9hf_1:has(> input):hover ._Input-input_py9hf_26:not([readonly]),
283
- ._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]) {
284
289
  border-color: var(--puck-color-grey-05);
285
290
  transition: none;
286
291
  }
287
- ._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]) {
288
293
  background-color: var(--puck-color-azure-12);
289
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>");
290
295
  border-color: var(--puck-color-grey-05);
291
296
  transition: none;
292
297
  }
293
298
  }
294
- ._Input-input_py9hf_26:focus {
299
+ ._Input-input_bsxfo_26:focus {
295
300
  border-color: var(--puck-color-grey-05);
296
301
  outline: 2px solid var(--puck-color-azure-05);
297
302
  transition: none;
298
303
  }
299
- ._Input--readOnly_py9hf_76 > ._Input-input_py9hf_26,
300
- ._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 {
301
306
  background-color: var(--puck-color-grey-11);
302
307
  border-color: var(--puck-color-grey-09);
303
308
  color: var(--puck-color-grey-04);
@@ -306,34 +311,34 @@ select._Input-input_py9hf_26:dir(rtl) {
306
311
  outline: 0;
307
312
  transition: none;
308
313
  }
309
- ._Input-radioGroupItems_py9hf_87 {
314
+ ._Input-radioGroupItems_bsxfo_93 {
310
315
  display: flex;
311
316
  border: 1px solid var(--puck-color-grey-09);
312
317
  border-radius: 4px;
313
318
  flex-wrap: wrap;
314
319
  }
315
- ._Input-radio_py9hf_87 {
320
+ ._Input-radio_bsxfo_93 {
316
321
  border-inline-end: 1px solid var(--puck-color-grey-09);
317
322
  flex-grow: 1;
318
323
  }
319
- ._Input-radio_py9hf_87:first-of-type {
324
+ ._Input-radio_bsxfo_93:first-of-type {
320
325
  border-bottom-left-radius: 4px;
321
326
  border-top-left-radius: 4px;
322
327
  }
323
- ._Input-radio_py9hf_87:first-of-type ._Input-radioInner_py9hf_104 {
328
+ ._Input-radio_bsxfo_93:first-of-type ._Input-radioInner_bsxfo_110 {
324
329
  border-bottom-left-radius: 3px;
325
330
  border-top-left-radius: 3px;
326
331
  }
327
- ._Input-radio_py9hf_87:last-of-type {
332
+ ._Input-radio_bsxfo_93:last-of-type {
328
333
  border-bottom-right-radius: 4px;
329
334
  border-inline-end: 0;
330
335
  border-top-right-radius: 4px;
331
336
  }
332
- ._Input-radio_py9hf_87:last-of-type ._Input-radioInner_py9hf_104 {
337
+ ._Input-radio_bsxfo_93:last-of-type ._Input-radioInner_bsxfo_110 {
333
338
  border-bottom-right-radius: 3px;
334
339
  border-top-right-radius: 3px;
335
340
  }
336
- ._Input-radioInner_py9hf_104 {
341
+ ._Input-radioInner_bsxfo_110 {
337
342
  background-color: var(--puck-color-white);
338
343
  color: var(--puck-color-grey-04);
339
344
  cursor: pointer;
@@ -342,32 +347,32 @@ select._Input-input_py9hf_26:dir(rtl) {
342
347
  text-align: center;
343
348
  transition: background-color 50ms ease-in;
344
349
  }
345
- ._Input-radio_py9hf_87:has(:focus-visible) {
350
+ ._Input-radio_bsxfo_93:has(:focus-visible) {
346
351
  outline: 2px solid var(--puck-color-azure-05);
347
352
  outline-offset: 2px;
348
353
  position: relative;
349
354
  }
350
355
  @media (hover: hover) and (pointer: fine) {
351
- ._Input-radioInner_py9hf_104:hover {
356
+ ._Input-radioInner_bsxfo_110:hover {
352
357
  background-color: var(--puck-color-azure-12);
353
358
  transition: none;
354
359
  }
355
360
  }
356
- ._Input--readOnly_py9hf_76 ._Input-radioInner_py9hf_104 {
361
+ ._Input--readOnly_bsxfo_82 ._Input-radioInner_bsxfo_110 {
357
362
  background-color: var(--puck-color-white);
358
363
  color: var(--puck-color-grey-04);
359
364
  cursor: default;
360
365
  }
361
- ._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 {
362
367
  background-color: var(--puck-color-azure-11);
363
368
  color: var(--puck-color-azure-04);
364
369
  font-weight: 500;
365
370
  }
366
- ._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 {
367
372
  background-color: var(--puck-color-grey-11);
368
373
  color: var(--puck-color-grey-04);
369
374
  }
370
- ._Input-radio_py9hf_87 ._Input-radioInput_py9hf_149 {
375
+ ._Input-radio_bsxfo_93 ._Input-radioInput_bsxfo_155 {
371
376
  clip: rect(0 0 0 0);
372
377
  clip-path: inset(100%);
373
378
  height: 1px;
@@ -376,7 +381,7 @@ select._Input-input_py9hf_26:dir(rtl) {
376
381
  white-space: nowrap;
377
382
  width: 1px;
378
383
  }
379
- textarea._Input-input_py9hf_26 {
384
+ textarea._Input-input_bsxfo_26 {
380
385
  margin-bottom: -4px;
381
386
  }
382
387
 
@@ -1152,27 +1157,31 @@ textarea._Input-input_py9hf_26 {
1152
1157
  }
1153
1158
 
1154
1159
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
1155
- ._DraggableComponent_qzbgx_1 {
1160
+ ._DraggableComponent_1vaqy_1 {
1156
1161
  position: absolute;
1157
1162
  pointer-events: none;
1158
1163
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
1159
1164
  }
1160
- ._DraggableComponent-overlay_qzbgx_12 {
1161
- cursor: pointer;
1165
+ ._DraggableComponent-overlayWrapper_1vaqy_12 {
1162
1166
  height: 100%;
1163
1167
  width: 100%;
1164
1168
  top: 0;
1165
- outline: 2px var(--puck-color-azure-09) solid;
1166
- outline-offset: -2px;
1167
1169
  position: absolute;
1168
1170
  pointer-events: none;
1169
1171
  box-sizing: border-box;
1170
1172
  z-index: 1;
1171
1173
  }
1172
- ._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 {
1173
1182
  outline: 1px solid var(--puck-color-azure-05);
1174
1183
  }
1175
- ._DraggableComponent-loadingOverlay_qzbgx_29 {
1184
+ ._DraggableComponent-loadingOverlay_1vaqy_34 {
1176
1185
  background: var(--puck-color-white);
1177
1186
  color: var(--puck-color-grey-03);
1178
1187
  border-radius: 4px;
@@ -1187,29 +1196,27 @@ textarea._Input-input_py9hf_26 {
1187
1196
  opacity: 0.8;
1188
1197
  z-index: 1;
1189
1198
  }
1190
- ._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 {
1191
1200
  background: var(--overlay-background);
1192
- }
1193
- ._DraggableComponent--hover_qzbgx_45 > ._DraggableComponent-overlay_qzbgx_12 {
1194
1201
  outline: 2px var(--puck-color-azure-09) solid;
1195
1202
  }
1196
- ._DraggableComponent--isSelected_qzbgx_54 > ._DraggableComponent-overlay_qzbgx_12 {
1203
+ ._DraggableComponent--isSelected_1vaqy_57 > ._DraggableComponent-overlayWrapper_1vaqy_12 > ._DraggableComponent-overlay_1vaqy_12 {
1197
1204
  outline-color: var(--puck-color-azure-07);
1198
1205
  }
1199
- ._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 {
1200
1207
  display: none;
1201
1208
  }
1202
- ._DraggableComponent-actionsOverlay_qzbgx_66 {
1209
+ ._DraggableComponent-actionsOverlay_1vaqy_71 {
1203
1210
  position: sticky;
1204
1211
  opacity: 0;
1205
1212
  pointer-events: none;
1206
1213
  z-index: 2;
1207
1214
  }
1208
- ._DraggableComponent--isSelected_qzbgx_54 ._DraggableComponent-actionsOverlay_qzbgx_66 {
1215
+ ._DraggableComponent--isSelected_1vaqy_57 ._DraggableComponent-actionsOverlay_1vaqy_71 {
1209
1216
  opacity: 1;
1210
1217
  pointer-events: auto;
1211
1218
  }
1212
- ._DraggableComponent-actions_qzbgx_66 {
1219
+ ._DraggableComponent-actions_1vaqy_71 {
1213
1220
  position: absolute;
1214
1221
  width: auto;
1215
1222
  cursor: grab;
@@ -1309,6 +1316,33 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1309
1316
  opacity: 0 !important;
1310
1317
  }
1311
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
+
1312
1346
  /* css-module:/home/runner/work/puck/puck/packages/core/components/SidebarSection/styles.module.css/#css-module-data */
1313
1347
  ._SidebarSection_8boj8_1 {
1314
1348
  display: flex;
@@ -1396,23 +1430,25 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1396
1430
  }
1397
1431
 
1398
1432
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/styles.module.css/#css-module-data */
1399
- ._Puck_dnlfp_19 {
1433
+ ._Puck_1yxlw_19 {
1400
1434
  --puck-space-px: 16px;
1401
1435
  font-family: var(--puck-font-family);
1402
1436
  overflow-x: hidden;
1403
1437
  }
1404
1438
  @media (min-width: 766px) {
1405
- ._Puck_dnlfp_19 {
1439
+ ._Puck_1yxlw_19 {
1406
1440
  overflow-x: auto;
1407
1441
  }
1408
1442
  }
1409
- ._Puck-portal_dnlfp_31 {
1443
+ ._Puck-portal_1yxlw_31 {
1410
1444
  position: relative;
1411
1445
  z-index: 2;
1412
1446
  }
1413
- ._PuckLayout-inner_dnlfp_38 {
1447
+ ._PuckLayout-inner_1yxlw_38 {
1414
1448
  --puck-frame-width: auto;
1415
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) );
1416
1452
  display: grid;
1417
1453
  grid-template-areas: "header header header" "left editor right";
1418
1454
  grid-template-columns: 0 var(--puck-frame-width) 0;
@@ -1421,69 +1457,53 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1421
1457
  position: relative;
1422
1458
  z-index: 0;
1423
1459
  }
1424
- ._PuckLayout--mounted_dnlfp_50 ._PuckLayout-inner_dnlfp_38 {
1460
+ ._PuckLayout--mounted_1yxlw_59 ._PuckLayout-inner_1yxlw_38 {
1425
1461
  --puck-side-bar-width: 186px;
1426
1462
  }
1427
- ._PuckLayout--leftSideBarVisible_dnlfp_54 ._PuckLayout-inner_dnlfp_38 {
1428
- 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;
1429
1465
  }
1430
- ._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1431
- 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);
1432
1468
  }
1433
- ._PuckLayout--leftSideBarVisible_dnlfp_54._PuckLayout--rightSideBarVisible_dnlfp_60 ._PuckLayout-inner_dnlfp_38 {
1434
- 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);
1435
1471
  }
1436
1472
  @media (min-width: 458px) {
1437
- ._PuckLayout-mounted_dnlfp_74 ._PuckLayout-inner_dnlfp_38 {
1473
+ ._PuckLayout-mounted_1yxlw_83 ._PuckLayout-inner_1yxlw_38 {
1438
1474
  --puck-frame-width: minmax(266px, auto);
1439
1475
  }
1440
1476
  }
1441
1477
  @media (min-width: 638px) {
1442
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1478
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1443
1479
  --puck-side-bar-width: minmax(186px, 250px);
1444
1480
  }
1445
1481
  }
1446
1482
  @media (min-width: 766px) {
1447
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1483
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1448
1484
  --puck-frame-width: auto;
1449
1485
  }
1450
1486
  }
1451
1487
  @media (min-width: 990px) {
1452
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1488
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1453
1489
  --puck-side-bar-width: 256px;
1454
1490
  }
1455
1491
  }
1456
1492
  @media (min-width: 1198px) {
1457
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1493
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1458
1494
  --puck-side-bar-width: 274px;
1459
1495
  }
1460
1496
  }
1461
1497
  @media (min-width: 1398px) {
1462
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1498
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1463
1499
  --puck-side-bar-width: 290px;
1464
1500
  }
1465
1501
  }
1466
1502
  @media (min-width: 1598px) {
1467
- ._PuckLayout_dnlfp_38 ._PuckLayout-inner_dnlfp_38 {
1503
+ ._PuckLayout_1yxlw_38 ._PuckLayout-inner_1yxlw_38 {
1468
1504
  --puck-side-bar-width: 320px;
1469
1505
  }
1470
1506
  }
1471
- ._PuckLayout-leftSideBar_dnlfp_115 {
1472
- background: var(--puck-color-grey-12);
1473
- border-inline-end: 1px solid var(--puck-color-grey-09);
1474
- display: flex;
1475
- flex-direction: column;
1476
- grid-area: left;
1477
- overflow-y: auto;
1478
- }
1479
- ._PuckLayout-rightSideBar_dnlfp_124 {
1480
- background: var(--puck-color-white);
1481
- border-inline-start: 1px solid var(--puck-color-grey-09);
1482
- display: flex;
1483
- flex-direction: column;
1484
- grid-area: right;
1485
- overflow-y: auto;
1486
- }
1487
1507
 
1488
1508
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Fields/styles.module.css/#css-module-data */
1489
1509
  ._PuckFields_10bh7_1 {
@@ -1895,3 +1915,66 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1895
1915
  display: none;
1896
1916
  }
1897
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, 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 Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-Bp8tnkJS.mjs';
2
- export { a2 as Adaptor, a0 as ArrayField, x as ArrayState, af as AsFieldProps, E as BaseData, T as BaseField, N as ComponentDataMap, K as ComponentDataOptionalId, Q as Content, a6 as CustomField, a5 as CustomFieldRender, ac as DefaultComponentProps, a9 as DefaultRootFieldProps, ab as DefaultRootProps, aa as DefaultRootRenderProps, n as Direction, o as DragAxis, a4 as ExternalField, a3 as ExternalFieldWithAdaptor, ah as ExtractPropsFromConfig, ai as ExtractRootPropsFromConfig, u as FieldRenderFunctions, v as ItemWithId, L as MappedItem, Y as NumberField, a1 as ObjectField, s as OverrideKey, z as PuckComponent, a8 as PuckContext, $ as RadioField, B as RootConfig, J as RootData, G as RootDataWithoutProps, _ as SelectField, S as Slot, y as SlotComponent, a7 as SlotField, X as TextField, Z as TextareaField, p as Viewport, ag as WithChildren, ad as WithId, ae as WithPuckProps, W as WithSlotProps, m as migrate, q as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Bp8tnkJS.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-B57SgEEc.mjs';
2
+ export { a5 as Adaptor, a3 as ArrayField, B as ArrayState, ai as AsFieldProps, K as BaseData, Z as BaseField, X as ComponentDataMap, Q as ComponentDataOptionalId, Y as Content, a9 as CustomField, a8 as CustomFieldRender, af as DefaultComponentProps, ac as DefaultRootFieldProps, ae as DefaultRootProps, ad as DefaultRootRenderProps, o as Direction, p as DragAxis, a7 as ExternalField, a6 as ExternalFieldWithAdaptor, am as ExtractField, ak as ExtractPropsFromConfig, al as ExtractRootPropsFromConfig, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, T as MappedItem, $ as NumberField, a4 as ObjectField, x as OverrideKey, G as PuckComponent, ab as PuckContext, a2 as RadioField, J as RootConfig, N as RootData, L as RootDataWithoutProps, a1 as SelectField, S as Slot, E as SlotComponent, aa as SlotField, _ as TextField, a0 as TextareaField, q as Viewport, aj as WithChildren, ag as WithId, ah as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-B57SgEEc.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: {
@@ -207,6 +208,7 @@ type PuckProps<UserConfig extends Config = Config, G extends UserGenerics<UserCo
207
208
  permissions?: Partial<Permissions>;
208
209
  plugins?: Plugin[];
209
210
  overrides?: Partial<Overrides>;
211
+ fieldTransforms?: FieldTransforms;
210
212
  renderHeader?: (props: {
211
213
  children: ReactNode;
212
214
  dispatch: (action: PuckAction) => void;
@@ -249,6 +251,16 @@ declare function Render<UserConfig extends Config = Config, G extends UserGeneri
249
251
  metadata?: Metadata;
250
252
  }): react_jsx_runtime.JSX.Element;
251
253
 
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
+
252
264
  type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = {
253
265
  appState: G["UserPublicAppState"];
254
266
  config: UserConfig;
@@ -290,4 +302,4 @@ declare function usePuck<UserConfig extends Config = Config>(): UsePuckStore<Use
290
302
  */
291
303
  declare function useGetPuck(): () => UsePuckStore<Config>;
292
304
 
293
- 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, 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 Field, h as FieldProps, D as DropZoneProps, i as Data, j as OnAction, k as InitialHistory, l as ItemSelector } from './walk-tree-Bp8tnkJS.js';
2
- export { a2 as Adaptor, a0 as ArrayField, x as ArrayState, af as AsFieldProps, E as BaseData, T as BaseField, N as ComponentDataMap, K as ComponentDataOptionalId, Q as Content, a6 as CustomField, a5 as CustomFieldRender, ac as DefaultComponentProps, a9 as DefaultRootFieldProps, ab as DefaultRootProps, aa as DefaultRootRenderProps, n as Direction, o as DragAxis, a4 as ExternalField, a3 as ExternalFieldWithAdaptor, ah as ExtractPropsFromConfig, ai as ExtractRootPropsFromConfig, u as FieldRenderFunctions, v as ItemWithId, L as MappedItem, Y as NumberField, a1 as ObjectField, s as OverrideKey, z as PuckComponent, a8 as PuckContext, $ as RadioField, B as RootConfig, J as RootData, G as RootDataWithoutProps, _ as SelectField, S as Slot, y as SlotComponent, a7 as SlotField, X as TextField, Z as TextareaField, p as Viewport, ag as WithChildren, ad as WithId, ae as WithPuckProps, W as WithSlotProps, m as migrate, q as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-Bp8tnkJS.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-B57SgEEc.js';
2
+ export { a5 as Adaptor, a3 as ArrayField, B as ArrayState, ai as AsFieldProps, K as BaseData, Z as BaseField, X as ComponentDataMap, Q as ComponentDataOptionalId, Y as Content, a9 as CustomField, a8 as CustomFieldRender, af as DefaultComponentProps, ac as DefaultRootFieldProps, ae as DefaultRootProps, ad as DefaultRootRenderProps, o as Direction, p as DragAxis, a7 as ExternalField, a6 as ExternalFieldWithAdaptor, am as ExtractField, ak as ExtractPropsFromConfig, al as ExtractRootPropsFromConfig, y as FieldRenderFunctions, u as FieldTransformFn, s as FieldTransformFnParams, z as ItemWithId, T as MappedItem, $ as NumberField, a4 as ObjectField, x as OverrideKey, G as PuckComponent, ab as PuckContext, a2 as RadioField, J as RootConfig, N as RootData, L as RootDataWithoutProps, a1 as SelectField, S as Slot, E as SlotComponent, aa as SlotField, _ as TextField, a0 as TextareaField, q as Viewport, aj as WithChildren, ag as WithId, ah as WithPuckProps, W as WithSlotProps, m as migrate, v as overrideKeys, r as resolveAllData, t as transformProps, w as walkTree } from './walk-tree-B57SgEEc.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: {
@@ -207,6 +208,7 @@ type PuckProps<UserConfig extends Config = Config, G extends UserGenerics<UserCo
207
208
  permissions?: Partial<Permissions>;
208
209
  plugins?: Plugin[];
209
210
  overrides?: Partial<Overrides>;
211
+ fieldTransforms?: FieldTransforms;
210
212
  renderHeader?: (props: {
211
213
  children: ReactNode;
212
214
  dispatch: (action: PuckAction) => void;
@@ -249,6 +251,16 @@ declare function Render<UserConfig extends Config = Config, G extends UserGeneri
249
251
  metadata?: Metadata;
250
252
  }): react_jsx_runtime.JSX.Element;
251
253
 
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
+
252
264
  type UsePuckData<UserConfig extends Config = Config, G extends UserGenerics<UserConfig> = UserGenerics<UserConfig>> = {
253
265
  appState: G["UserPublicAppState"];
254
266
  config: UserConfig;
@@ -290,4 +302,4 @@ declare function usePuck<UserConfig extends Config = Config>(): UsePuckStore<Use
290
302
  */
291
303
  declare function useGetPuck(): () => UsePuckStore<Config>;
292
304
 
293
- 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 };