@measured/puck 0.20.0-canary.755737e8 → 0.20.0-canary.77cef35d

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/Puck/components/Fields/styles.module.css/#css-module-data */
1311
1347
  ._PuckFields_10bh7_1 {
1312
1348
  position: relative;
@@ -1398,6 +1434,11 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1398
1434
  margin-inline-start: auto;
1399
1435
  }
1400
1436
 
1437
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Components/styles.module.css/#css-module-data */
1438
+ ._Components_uwdh8_1 {
1439
+ padding: 16px;
1440
+ }
1441
+
1401
1442
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1402
1443
  ._PuckPreview_z2rgu_1 {
1403
1444
  position: relative;
@@ -1512,24 +1553,30 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1512
1553
  margin-top: 4px;
1513
1554
  }
1514
1555
 
1556
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Outline/styles.module.css/#css-module-data */
1557
+ ._Outline_1rrni_1 {
1558
+ padding: 16px;
1559
+ }
1560
+
1515
1561
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Layout/styles.module.css/#css-module-data */
1516
- ._Puck_n6ob8_19 {
1562
+ ._Puck_1q3wx_19 {
1517
1563
  --puck-space-px: 16px;
1518
1564
  font-family: var(--puck-font-family);
1519
1565
  overflow-x: hidden;
1520
1566
  }
1521
1567
  @media (min-width: 766px) {
1522
- ._Puck_n6ob8_19 {
1568
+ ._Puck_1q3wx_19 {
1523
1569
  overflow-x: auto;
1524
1570
  }
1525
1571
  }
1526
- ._Puck-portal_n6ob8_31 {
1572
+ ._Puck-portal_1q3wx_31 {
1527
1573
  position: relative;
1528
1574
  z-index: 2;
1529
1575
  }
1530
- ._PuckLayout-inner_n6ob8_36 {
1576
+ ._PuckLayout-inner_1q3wx_36 {
1531
1577
  --puck-frame-width: auto;
1532
1578
  --puck-side-bar-width: 0px;
1579
+ --puck-side-nav-width: 68px;
1533
1580
  display: grid;
1534
1581
  grid-template-areas: "header header header header" "sidenav left editor right";
1535
1582
  grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) 0;
@@ -1538,75 +1585,65 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1538
1585
  position: relative;
1539
1586
  z-index: 0;
1540
1587
  }
1541
- ._PuckLayout--mounted_n6ob8_48 ._PuckLayout-inner_n6ob8_36 {
1588
+ ._PuckLayout--mounted_1q3wx_49 ._PuckLayout-inner_1q3wx_36 {
1542
1589
  --puck-side-bar-width: 186px;
1543
- --puck-side-nav-width: 68px;
1590
+ --puck-left-side-bar-width: var( --puck-user-left-side-bar-width, --puck-side-bar-width );
1591
+ --puck-right-side-bar-width: var( --puck-user-right-side-bar-width, --puck-side-bar-width );
1544
1592
  }
1545
- ._PuckLayout--leftSideBarVisible_n6ob8_53 ._PuckLayout-inner_n6ob8_36 {
1546
- grid-template-columns: var(--puck-side-nav-width) var(--puck-side-bar-width) var( --puck-frame-width ) 0;
1593
+ ._PuckLayout--leftSideBarVisible_1q3wx_61 ._PuckLayout-inner_1q3wx_36 {
1594
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) 0;
1547
1595
  }
1548
- ._PuckLayout--rightSideBarVisible_n6ob8_61 ._PuckLayout-inner_n6ob8_36 {
1596
+ ._PuckLayout--rightSideBarVisible_1q3wx_69 ._PuckLayout-inner_1q3wx_36 {
1549
1597
  grid-template-columns: var(--puck-side-nav-width) 0 var(--puck-frame-width) var(--puck-side-bar-width);
1550
1598
  }
1551
- ._PuckLayout--leftSideBarVisible_n6ob8_53._PuckLayout--rightSideBarVisible_n6ob8_61 ._PuckLayout-inner_n6ob8_36 {
1552
- grid-template-columns: var(--puck-side-nav-width) var(--puck-side-bar-width) var( --puck-frame-width ) var(--puck-side-bar-width);
1599
+ ._PuckLayout--leftSideBarVisible_1q3wx_61._PuckLayout--rightSideBarVisible_1q3wx_69 ._PuckLayout-inner_1q3wx_36 {
1600
+ grid-template-columns: var(--puck-side-nav-width) var(--puck-left-side-bar-width) var( --puck-frame-width ) var(--puck-right-side-bar-width);
1553
1601
  }
1554
1602
  @media (min-width: 458px) {
1555
- ._PuckLayout-mounted_n6ob8_77 ._PuckLayout-inner_n6ob8_36 {
1603
+ ._PuckLayout-mounted_1q3wx_85 ._PuckLayout-inner_1q3wx_36 {
1556
1604
  --puck-frame-width: minmax(266px, auto);
1557
1605
  }
1558
1606
  }
1559
1607
  @media (min-width: 638px) {
1560
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1608
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1561
1609
  --puck-side-bar-width: minmax(186px, 250px);
1562
1610
  }
1563
1611
  }
1564
1612
  @media (min-width: 766px) {
1565
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1613
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1566
1614
  --puck-frame-width: auto;
1567
1615
  }
1568
1616
  }
1569
1617
  @media (min-width: 990px) {
1570
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1618
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1571
1619
  --puck-side-bar-width: 256px;
1572
1620
  }
1573
1621
  }
1574
1622
  @media (min-width: 1198px) {
1575
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1623
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1576
1624
  --puck-side-bar-width: 274px;
1577
1625
  }
1578
1626
  }
1579
1627
  @media (min-width: 1398px) {
1580
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1628
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1581
1629
  --puck-side-bar-width: 290px;
1582
1630
  }
1583
1631
  }
1584
1632
  @media (min-width: 1598px) {
1585
- ._PuckLayout_n6ob8_36 ._PuckLayout-inner_n6ob8_36 {
1633
+ ._PuckLayout_1q3wx_36 ._PuckLayout-inner_1q3wx_36 {
1586
1634
  --puck-side-bar-width: 320px;
1587
1635
  }
1588
1636
  }
1589
- ._PuckLayout-leftSideBar_n6ob8_118 {
1590
- background: var(--puck-color-grey-12);
1591
- border-inline-end: 1px solid var(--puck-color-grey-09);
1592
- display: flex;
1593
- flex-direction: column;
1594
- grid-area: left;
1595
- padding: 16px;
1596
- overflow-y: auto;
1597
- }
1598
- ._PuckLayout-rightSideBar_n6ob8_128 {
1599
- background: var(--puck-color-white);
1600
- border-inline-start: 1px solid var(--puck-color-grey-09);
1601
- display: flex;
1602
- flex-direction: column;
1603
- grid-area: right;
1604
- overflow-y: auto;
1605
- }
1606
- ._PuckLayout-nav_n6ob8_137 {
1637
+ ._PuckLayout-nav_1q3wx_126 {
1607
1638
  border-right: 1px solid var(--puck-color-grey-09);
1608
1639
  background-color: var(--puck-color-grey-12);
1609
1640
  }
1641
+ ._PuckPluginTab_1q3wx_131 {
1642
+ display: none;
1643
+ }
1644
+ ._PuckPluginTab--visible_1q3wx_135 {
1645
+ display: block;
1646
+ }
1610
1647
 
1611
1648
  /* css-module:/home/runner/work/puck/puck/packages/core/components/MenuBar/styles.module.css/#css-module-data */
1612
1649
  ._MenuBar_8pf8c_1 {
@@ -1653,7 +1690,7 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1653
1690
  }
1654
1691
 
1655
1692
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Header/styles.module.css/#css-module-data */
1656
- ._PuckHeader_dlc6d_1 {
1693
+ ._PuckHeader_1ehbp_1 {
1657
1694
  background: var(--puck-color-white);
1658
1695
  border-bottom: 1px solid var(--puck-color-grey-09);
1659
1696
  color: var(--puck-color-black);
@@ -1662,58 +1699,58 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1662
1699
  max-width: 100vw;
1663
1700
  }
1664
1701
  @media (min-width: 638px) {
1665
- ._PuckHeader_dlc6d_1 {
1702
+ ._PuckHeader_1ehbp_1 {
1666
1703
  padding-left: 67px;
1667
1704
  }
1668
1705
  }
1669
- ._PuckHeader-inner_dlc6d_16 {
1706
+ ._PuckHeader-inner_1ehbp_16 {
1670
1707
  align-items: end;
1708
+ border-left: 1px solid var(--puck-color-grey-09);
1671
1709
  display: grid;
1672
1710
  gap: var(--puck-space-px);
1673
1711
  grid-template-areas: "left middle right";
1674
1712
  grid-template-columns: 1fr auto 1fr;
1675
1713
  grid-template-rows: auto;
1676
- border-left: 1px solid var(--puck-color-grey-09);
1677
1714
  padding: var(--puck-space-px);
1678
1715
  }
1679
1716
  @media (min-width: 638px) {
1680
- ._PuckHeader-inner_dlc6d_16 {
1717
+ ._PuckHeader-inner_1ehbp_16 {
1681
1718
  border-left: 1px solid var(--puck-color-grey-09);
1682
1719
  }
1683
1720
  }
1684
- ._PuckHeader-toggle_dlc6d_33 {
1721
+ ._PuckHeader-toggle_1ehbp_33 {
1685
1722
  color: var(--puck-color-grey-05);
1686
1723
  display: flex;
1687
1724
  margin-inline-start: -4px;
1688
1725
  padding-top: 2px;
1689
1726
  }
1690
- ._PuckHeader--rightSideBarVisible_dlc6d_40 ._PuckHeader-rightSideBarToggle_dlc6d_40,
1691
- ._PuckHeader--leftSideBarVisible_dlc6d_41 ._PuckHeader-leftSideBarToggle_dlc6d_41 {
1727
+ ._PuckHeader--rightSideBarVisible_1ehbp_40 ._PuckHeader-rightSideBarToggle_1ehbp_40,
1728
+ ._PuckHeader--leftSideBarVisible_1ehbp_41 ._PuckHeader-leftSideBarToggle_1ehbp_41 {
1692
1729
  color: var(--puck-color-black);
1693
1730
  }
1694
- ._PuckHeader-title_dlc6d_45 {
1731
+ ._PuckHeader-title_1ehbp_45 {
1695
1732
  align-self: center;
1696
1733
  }
1697
- ._PuckHeader-path_dlc6d_49 {
1734
+ ._PuckHeader-path_1ehbp_49 {
1698
1735
  font-family: var(--puck-font-family-monospaced);
1699
1736
  font-size: var(--puck-font-size-xxs);
1700
1737
  font-weight: normal;
1701
1738
  word-break: break-all;
1702
1739
  }
1703
- ._PuckHeader-tools_dlc6d_56 {
1740
+ ._PuckHeader-tools_1ehbp_56 {
1704
1741
  display: flex;
1705
1742
  gap: 16px;
1706
1743
  justify-content: flex-end;
1707
1744
  }
1708
- ._PuckHeader-menuButton_dlc6d_62 {
1745
+ ._PuckHeader-menuButton_1ehbp_62 {
1709
1746
  color: var(--puck-color-grey-05);
1710
1747
  margin-inline-start: -4px;
1711
1748
  }
1712
- ._PuckHeader--menuOpen_dlc6d_67 ._PuckHeader-menuButton_dlc6d_62 {
1749
+ ._PuckHeader--menuOpen_1ehbp_67 ._PuckHeader-menuButton_1ehbp_62 {
1713
1750
  color: var(--puck-color-black);
1714
1751
  }
1715
1752
  @media (min-width: 638px) {
1716
- ._PuckHeader-menuButton_dlc6d_62 {
1753
+ ._PuckHeader-menuButton_1ehbp_62 {
1717
1754
  display: none;
1718
1755
  }
1719
1756
  }
@@ -1911,6 +1948,69 @@ body:has(._DropZone--isAnimating_1i2sv_68:empty) [data-puck-overlay] {
1911
1948
  transition: none;
1912
1949
  }
1913
1950
 
1951
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/ResizeHandle/styles.module.css/#css-module-data */
1952
+ @media (min-width: 766px) {
1953
+ ._ResizeHandle_144bf_2 {
1954
+ position: absolute;
1955
+ width: 5px;
1956
+ height: 100%;
1957
+ cursor: col-resize;
1958
+ z-index: 10;
1959
+ background: transparent;
1960
+ top: 0;
1961
+ }
1962
+ ._ResizeHandle_144bf_2:hover {
1963
+ background: rgba(0, 0, 0, 0.1);
1964
+ }
1965
+ ._ResizeHandle--left_144bf_16 {
1966
+ right: -3px;
1967
+ }
1968
+ ._ResizeHandle--right_144bf_20 {
1969
+ left: -3px;
1970
+ }
1971
+ }
1972
+
1973
+ /* components/Puck/components/ResizeHandle/styles.css */
1974
+ [data-resize-overlay] {
1975
+ position: fixed;
1976
+ top: 0;
1977
+ left: 0;
1978
+ right: 0;
1979
+ bottom: 0;
1980
+ z-index: 9999;
1981
+ cursor: col-resize;
1982
+ }
1983
+
1984
+ /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Sidebar/styles.module.css/#css-module-data */
1985
+ ._Sidebar_1xksb_1 {
1986
+ position: relative;
1987
+ display: flex;
1988
+ flex-direction: column;
1989
+ overflow-y: auto;
1990
+ }
1991
+ ._Sidebar--left_1xksb_8 {
1992
+ background: var(--puck-color-grey-12);
1993
+ border-inline-end: 1px solid var(--puck-color-grey-09);
1994
+ grid-area: left;
1995
+ }
1996
+ ._Sidebar--right_1xksb_14 {
1997
+ background: var(--puck-color-white);
1998
+ border-inline-start: 1px solid var(--puck-color-grey-09);
1999
+ grid-area: right;
2000
+ }
2001
+ ._Sidebar-resizeHandle_1xksb_20 {
2002
+ position: absolute;
2003
+ height: 100%;
2004
+ }
2005
+ ._Sidebar--left_1xksb_8 + ._Sidebar-resizeHandle_1xksb_20 {
2006
+ grid-area: left;
2007
+ justify-self: end;
2008
+ }
2009
+ ._Sidebar--right_1xksb_14 + ._Sidebar-resizeHandle_1xksb_20 {
2010
+ grid-area: right;
2011
+ justify-self: start;
2012
+ }
2013
+
1914
2014
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Nav/styles.module.css/#css-module-data */
1915
2015
  ._Nav-list_b6txo_1 {
1916
2016
  list-style: none;
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-6PP75PCU.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-6PP75PCU.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-yh0Fsxem.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-yh0Fsxem.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,11 +251,18 @@ 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>;
@@ -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,7 @@ 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
+ declare const blocksPlugin: () => Plugin;
306
+ declare const outlinePlugin: () => Plugin;
307
+
308
+ 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, blocksPlugin, createUsePuck, outlinePlugin, registerOverlayPortal, renderContext, setDeep, useGetPuck, usePuck };