@measured/puck 0.14.2-canary.3f7fc52 → 0.14.2-canary.4a479b1

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.
Files changed (3) hide show
  1. package/dist/index.css +44 -41
  2. package/dist/index.js +10 -8
  3. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -135,6 +135,9 @@
135
135
  }
136
136
 
137
137
  /* styles.css */
138
+ .Puck {
139
+ min-height: 100%;
140
+ }
138
141
 
139
142
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Button/Button.module.css/#css-module-data */
140
143
  ._Button_1t64k_1 {
@@ -283,25 +286,25 @@
283
286
  }
284
287
 
285
288
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css/#css-module-data */
286
- ._DraggableComponent_1542z_1 {
289
+ ._DraggableComponent_59z7f_1 {
287
290
  pointer-events: auto;
288
291
  --overlay-background: color-mix( in srgb, var(--puck-color-azure-08) 30%, transparent );
289
292
  }
290
- ._DraggableComponent--isDragging_1542z_11 {
293
+ ._DraggableComponent--isDragging_59z7f_11 {
291
294
  background: color-mix(in srgb, var(--puck-color-azure-08) 10%, transparent);
292
295
  overflow: hidden;
293
296
  }
294
- ._DraggableComponent-contents_1542z_16 {
297
+ ._DraggableComponent-contents_59z7f_16 {
295
298
  position: relative;
296
299
  pointer-events: none;
297
300
  z-index: 0;
298
301
  }
299
- ._DraggableComponent-contents_1542z_16::before,
300
- ._DraggableComponent-contents_1542z_16::after {
302
+ ._DraggableComponent-contents_59z7f_16::before,
303
+ ._DraggableComponent-contents_59z7f_16::after {
301
304
  content: " ";
302
305
  display: table;
303
306
  }
304
- ._DraggableComponent-overlay_1542z_29 {
307
+ ._DraggableComponent-overlay_59z7f_29 {
305
308
  cursor: pointer;
306
309
  height: 100%;
307
310
  width: 100%;
@@ -312,13 +315,13 @@
312
315
  box-sizing: border-box;
313
316
  z-index: 1;
314
317
  }
315
- ._DraggableComponent_1542z_1:focus-visible > ._DraggableComponent-overlay_1542z_29 {
318
+ ._DraggableComponent_59z7f_1:focus-visible > ._DraggableComponent-overlay_59z7f_29 {
316
319
  outline: 1px solid var(--puck-color-azure-05);
317
320
  }
318
- ._DraggableComponent--isDragging_1542z_11 > ._DraggableComponent-overlay_1542z_29 {
319
- outline: 1px var(--puck-color-azure-09) solid !important;
321
+ ._DraggableComponent--isDragging_59z7f_11 > ._DraggableComponent-overlay_59z7f_29 {
322
+ outline: 2px var(--puck-color-azure-09) solid !important;
320
323
  }
321
- ._DraggableComponent-loadingOverlay_1542z_49 {
324
+ ._DraggableComponent-loadingOverlay_59z7f_49 {
322
325
  background: var(--puck-color-white);
323
326
  color: var(--puck-color-grey-03);
324
327
  border-radius: 4px;
@@ -333,32 +336,32 @@
333
336
  opacity: 0.8;
334
337
  z-index: 1;
335
338
  }
336
- ._DraggableComponent_1542z_1:hover:not(._DraggableComponent--isLocked_1542z_65) > ._DraggableComponent-overlay_1542z_29 {
339
+ ._DraggableComponent_59z7f_1:hover:not(._DraggableComponent--isLocked_59z7f_65) > ._DraggableComponent-overlay_59z7f_29 {
337
340
  background: var(--overlay-background);
338
341
  pointer-events: none;
339
342
  }
340
- ._DraggableComponent--forceHover_1542z_71 > ._DraggableComponent-overlay_1542z_29 {
343
+ ._DraggableComponent--forceHover_59z7f_71 > ._DraggableComponent-overlay_59z7f_29 {
341
344
  background: var(--overlay-background);
342
345
  pointer-events: none;
343
346
  }
344
- ._DraggableComponent_1542z_1:not(._DraggableComponent--isSelected_1542z_76):hover > ._DraggableComponent-overlay_1542z_29 {
347
+ ._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):hover > ._DraggableComponent-overlay_59z7f_29 {
345
348
  outline: 2px var(--puck-color-azure-09) solid !important;
346
349
  }
347
- ._DraggableComponent--indicativeHover_1542z_81 > ._DraggableComponent-overlay_1542z_29 {
350
+ ._DraggableComponent--indicativeHover_59z7f_81 > ._DraggableComponent-overlay_59z7f_29 {
348
351
  pointer-events: none;
349
352
  }
350
- ._DraggableComponent_1542z_1:not(._DraggableComponent--isSelected_1542z_76):has(._DraggableComponent_1542z_1:hover > ._DraggableComponent-overlay_1542z_29) > ._DraggableComponent-overlay_1542z_29 {
353
+ ._DraggableComponent_59z7f_1:not(._DraggableComponent--isSelected_59z7f_76):has(._DraggableComponent_59z7f_1:hover > ._DraggableComponent-overlay_59z7f_29) > ._DraggableComponent-overlay_59z7f_29 {
351
354
  display: none;
352
355
  }
353
- ._DraggableComponent--isSelected_1542z_76 > ._DraggableComponent-overlay_1542z_29 {
356
+ ._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-overlay_59z7f_29 {
354
357
  outline: 2px var(--puck-color-azure-07) solid !important;
355
358
  }
356
- ._DraggableComponent--isSelected_1542z_76 > ._DraggableComponent-actionsOverlay_1542z_97 {
359
+ ._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 {
357
360
  display: block;
358
361
  position: sticky;
359
362
  z-index: 2;
360
363
  }
361
- ._DraggableComponent-actions_1542z_97 {
364
+ ._DraggableComponent-actions_59z7f_97 {
362
365
  position: absolute;
363
366
  width: auto;
364
367
  padding: 4px;
@@ -375,10 +378,10 @@
375
378
  box-sizing: border-box;
376
379
  transform-origin: right top;
377
380
  }
378
- ._DraggableComponent--isSelected_1542z_76 > ._DraggableComponent-actionsOverlay_1542z_97 > ._DraggableComponent-actions_1542z_97 {
381
+ ._DraggableComponent--isSelected_59z7f_76 > ._DraggableComponent-actionsOverlay_59z7f_97 > ._DraggableComponent-actions_59z7f_97 {
379
382
  display: flex;
380
383
  }
381
- ._DraggableComponent-actionsLabel_1542z_127 {
384
+ ._DraggableComponent-actionsLabel_59z7f_127 {
382
385
  color: var(--puck-color-grey-08);
383
386
  display: flex;
384
387
  font-size: var(--puck-font-size-xxxs);
@@ -392,7 +395,7 @@
392
395
  text-overflow: ellipsis;
393
396
  white-space: nowrap;
394
397
  }
395
- ._DraggableComponent-action_1542z_97 {
398
+ ._DraggableComponent-action_59z7f_97 {
396
399
  background: transparent;
397
400
  border: none;
398
401
  color: var(--puck-color-grey-08);
@@ -405,60 +408,60 @@
405
408
  justify-content: center;
406
409
  transition: color 50ms ease-in;
407
410
  }
408
- ._DraggableComponent-action_1542z_97:focus-visible {
411
+ ._DraggableComponent-action_59z7f_97:focus-visible {
409
412
  outline: 2px solid var(--puck-color-azure-05);
410
413
  outline-offset: -2px;
411
414
  }
412
415
  @media (hover: hover) and (pointer: fine) {
413
- ._DraggableComponent-action_1542z_97:hover {
416
+ ._DraggableComponent-action_59z7f_97:hover {
414
417
  color: var(--puck-color-azure-06);
415
418
  transition: none;
416
419
  }
417
420
  }
418
- ._DraggableComponent-action_1542z_97:active {
421
+ ._DraggableComponent-action_59z7f_97:active {
419
422
  color: var(--puck-color-azure-07);
420
423
  transition: none;
421
424
  }
422
425
 
423
426
  /* css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css/#css-module-data */
424
- ._DropZone_w4btq_1 {
427
+ ._DropZone_djoti_1 {
425
428
  margin-left: auto;
426
429
  margin-right: auto;
427
430
  position: relative;
428
- height: 100%;
429
- outline-offset: -1px;
431
+ min-height: 100%;
432
+ outline-offset: -2px;
430
433
  width: 100%;
431
434
  }
432
- ._DropZone-content_w4btq_10 {
435
+ ._DropZone-content_djoti_10 {
433
436
  min-height: 128px;
434
437
  height: 100%;
435
438
  }
436
- ._DropZone--userIsDragging_w4btq_15 ._DropZone-content_w4btq_10 {
439
+ ._DropZone--userIsDragging_djoti_15 ._DropZone-content_djoti_10 {
437
440
  pointer-events: all;
438
441
  }
439
- ._DropZone--userIsDragging_w4btq_15:not(._DropZone--draggingOverArea_w4btq_19):not(._DropZone--draggingNewComponent_w4btq_20) > ._DropZone-content_w4btq_10 {
442
+ ._DropZone--userIsDragging_djoti_15:not(._DropZone--draggingOverArea_djoti_19):not(._DropZone--draggingNewComponent_djoti_20) > ._DropZone-content_djoti_10 {
440
443
  pointer-events: none;
441
444
  }
442
- ._DropZone--isAreaSelected_w4btq_26,
443
- ._DropZone--draggingOverArea_w4btq_19:not(:has(._DropZone--hoveringOverArea_w4btq_27)),
444
- ._DropZone--hoveringOverArea_w4btq_27:not(._DropZone--isDisabled_w4btq_28):not(._DropZone--isRootZone_w4btq_29):not(._DropZone--hasChildren_w4btq_30) {
445
+ ._DropZone--isAreaSelected_djoti_26,
446
+ ._DropZone--draggingOverArea_djoti_19:not(:has(._DropZone--hoveringOverArea_djoti_27)),
447
+ ._DropZone--hoveringOverArea_djoti_27:not(._DropZone--isDisabled_djoti_28):not(._DropZone--isRootZone_djoti_29):not(._DropZone--hasChildren_djoti_30) {
445
448
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
446
449
  outline: 2px dashed var(--puck-color-azure-08);
447
450
  }
448
- ._DropZone_w4btq_1:not(._DropZone--hasChildren_w4btq_30) {
451
+ ._DropZone_djoti_1:not(._DropZone--hasChildren_djoti_30) {
449
452
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent);
450
453
  outline: 2px dashed var(--puck-color-azure-08);
451
454
  }
452
- ._DropZone--isDestination_w4btq_40 {
455
+ ._DropZone--isDestination_djoti_40 {
453
456
  outline: 2px dashed var(--puck-color-azure-04) !important;
454
457
  }
455
- ._DropZone--isDestination_w4btq_40:not(._DropZone--isRootZone_w4btq_29) {
458
+ ._DropZone--isDestination_djoti_40:not(._DropZone--isRootZone_djoti_29) {
456
459
  background: color-mix(in srgb, var(--puck-color-azure-09) 30%, transparent) !important;
457
460
  }
458
- ._DropZone-item_w4btq_52 {
461
+ ._DropZone-item_djoti_52 {
459
462
  position: relative;
460
463
  }
461
- ._DropZone-hitbox_w4btq_56 {
464
+ ._DropZone-hitbox_djoti_56 {
462
465
  position: absolute;
463
466
  bottom: -12px;
464
467
  height: 24px;
@@ -1531,12 +1534,12 @@ textarea._Input-input_1qi5b_46 {
1531
1534
  }
1532
1535
 
1533
1536
  /* css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css/#css-module-data */
1534
- ._PuckPreview_1mia0_1 {
1537
+ ._PuckPreview_rxwlr_1 {
1535
1538
  height: 100%;
1536
1539
  }
1537
- ._PuckPreview-frame_1mia0_5 {
1540
+ ._PuckPreview-frame_rxwlr_5 {
1538
1541
  border: none;
1539
- height: 100%;
1542
+ min-height: 100%;
1540
1543
  width: 100%;
1541
1544
  }
1542
1545
 
package/dist/index.js CHANGED
@@ -29296,10 +29296,10 @@ var setupZone = (data, zoneKey) => {
29296
29296
  var getItem = (selector, data, dynamicProps = {}) => {
29297
29297
  if (!selector.zone || selector.zone === rootDroppableId) {
29298
29298
  const item2 = data.content[selector.index];
29299
- return __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props });
29299
+ return (item2 == null ? void 0 : item2.props) ? __spreadProps(__spreadValues({}, item2), { props: dynamicProps[item2.props.id] || item2.props }) : void 0;
29300
29300
  }
29301
29301
  const item = setupZone(data, selector.zone).zones[selector.zone][selector.index];
29302
- return __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props });
29302
+ return (item == null ? void 0 : item.props) ? __spreadProps(__spreadValues({}, item), { props: dynamicProps[item.props.id] || item.props }) : void 0;
29303
29303
  };
29304
29304
 
29305
29305
  // components/ViewportControls/default-viewports.ts
@@ -29589,7 +29589,7 @@ var import_dnd3 = require("@measured/dnd");
29589
29589
 
29590
29590
  // css-module:/home/runner/work/puck/puck/packages/core/components/DraggableComponent/styles.module.css#css-module
29591
29591
  init_react_import();
29592
- var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_1542z_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_1542z_11", "DraggableComponent-contents": "_DraggableComponent-contents_1542z_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_1542z_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_1542z_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_1542z_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_1542z_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_1542z_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_1542z_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_1542z_97", "DraggableComponent-actions": "_DraggableComponent-actions_1542z_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_1542z_127", "DraggableComponent-action": "_DraggableComponent-action_1542z_97" };
29592
+ var styles_module_default3 = { "DraggableComponent": "_DraggableComponent_59z7f_1", "DraggableComponent--isDragging": "_DraggableComponent--isDragging_59z7f_11", "DraggableComponent-contents": "_DraggableComponent-contents_59z7f_16", "DraggableComponent-overlay": "_DraggableComponent-overlay_59z7f_29", "DraggableComponent-loadingOverlay": "_DraggableComponent-loadingOverlay_59z7f_49", "DraggableComponent--isLocked": "_DraggableComponent--isLocked_59z7f_65", "DraggableComponent--forceHover": "_DraggableComponent--forceHover_59z7f_71", "DraggableComponent--isSelected": "_DraggableComponent--isSelected_59z7f_76", "DraggableComponent--indicativeHover": "_DraggableComponent--indicativeHover_59z7f_81", "DraggableComponent-actionsOverlay": "_DraggableComponent-actionsOverlay_59z7f_97", "DraggableComponent-actions": "_DraggableComponent-actions_59z7f_97", "DraggableComponent-actionsLabel": "_DraggableComponent-actionsLabel_59z7f_127", "DraggableComponent-action": "_DraggableComponent-action_59z7f_97" };
29593
29593
 
29594
29594
  // ../../node_modules/lucide-react/dist/esm/lucide-react.js
29595
29595
  init_react_import();
@@ -30000,7 +30000,7 @@ var DraggableComponent = ({
30000
30000
 
30001
30001
  // css-module:/home/runner/work/puck/puck/packages/core/components/DropZone/styles.module.css#css-module
30002
30002
  init_react_import();
30003
- var styles_module_default4 = { "DropZone": "_DropZone_w4btq_1", "DropZone-content": "_DropZone-content_w4btq_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_w4btq_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_w4btq_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_w4btq_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_w4btq_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_w4btq_27", "DropZone--isDisabled": "_DropZone--isDisabled_w4btq_28", "DropZone--isRootZone": "_DropZone--isRootZone_w4btq_29", "DropZone--hasChildren": "_DropZone--hasChildren_w4btq_30", "DropZone--isDestination": "_DropZone--isDestination_w4btq_40", "DropZone-item": "_DropZone-item_w4btq_52", "DropZone-hitbox": "_DropZone-hitbox_w4btq_56" };
30003
+ var styles_module_default4 = { "DropZone": "_DropZone_djoti_1", "DropZone-content": "_DropZone-content_djoti_10", "DropZone--userIsDragging": "_DropZone--userIsDragging_djoti_15", "DropZone--draggingOverArea": "_DropZone--draggingOverArea_djoti_19", "DropZone--draggingNewComponent": "_DropZone--draggingNewComponent_djoti_20", "DropZone--isAreaSelected": "_DropZone--isAreaSelected_djoti_26", "DropZone--hoveringOverArea": "_DropZone--hoveringOverArea_djoti_27", "DropZone--isDisabled": "_DropZone--isDisabled_djoti_28", "DropZone--isRootZone": "_DropZone--isRootZone_djoti_29", "DropZone--hasChildren": "_DropZone--hasChildren_djoti_30", "DropZone--isDestination": "_DropZone--isDestination_djoti_40", "DropZone-item": "_DropZone-item_djoti_52", "DropZone-hitbox": "_DropZone-hitbox_djoti_56" };
30004
30004
 
30005
30005
  // components/DropZone/context.tsx
30006
30006
  init_react_import();
@@ -32535,10 +32535,11 @@ var useComponentList = (config, ui) => {
32535
32535
  children: category.components.map((componentName, i) => {
32536
32536
  var _a2;
32537
32537
  matchedComponents.push(componentName);
32538
+ const componentConf = config.components[componentName] || {};
32538
32539
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
32539
32540
  ComponentList.Item,
32540
32541
  {
32541
- label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
32542
+ label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
32542
32543
  name: componentName,
32543
32544
  index: i
32544
32545
  },
@@ -32562,11 +32563,12 @@ var useComponentList = (config, ui) => {
32562
32563
  title: ((_c = ui.componentList.other) == null ? void 0 : _c.title) || "Other",
32563
32564
  children: remainingComponents.map((componentName, i) => {
32564
32565
  var _a2;
32566
+ const componentConf = config.components[componentName] || {};
32565
32567
  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
32566
32568
  ComponentList.Item,
32567
32569
  {
32568
32570
  name: componentName,
32569
- label: (_a2 = config.components[componentName]["label"]) != null ? _a2 : componentName,
32571
+ label: (_a2 = componentConf["label"]) != null ? _a2 : componentName,
32570
32572
  index: i
32571
32573
  },
32572
32574
  componentName
@@ -32600,7 +32602,7 @@ var import_auto_frame_component = __toESM(require("@measured/auto-frame-componen
32600
32602
 
32601
32603
  // css-module:/home/runner/work/puck/puck/packages/core/components/Puck/components/Preview/styles.module.css#css-module
32602
32604
  init_react_import();
32603
- var styles_module_default16 = { "PuckPreview": "_PuckPreview_1mia0_1", "PuckPreview-frame": "_PuckPreview-frame_1mia0_5" };
32605
+ var styles_module_default16 = { "PuckPreview": "_PuckPreview_rxwlr_1", "PuckPreview-frame": "_PuckPreview-frame_rxwlr_5" };
32604
32606
 
32605
32607
  // components/Puck/components/Preview/index.tsx
32606
32608
  var import_jsx_runtime29 = require("react/jsx-runtime");
@@ -33380,7 +33382,7 @@ var Canvas = () => {
33380
33382
  {
33381
33383
  className: getClassName24("root"),
33382
33384
  style: {
33383
- width: iframe.enabled ? ui.viewports.current.width : void 0,
33385
+ width: iframe.enabled ? ui.viewports.current.width : "100%",
33384
33386
  height: zoomConfig.rootHeight,
33385
33387
  transform: iframe.enabled ? `scale(${zoomConfig.zoom})` : void 0,
33386
33388
  transition: showTransition ? "width 150ms ease-out, height 150ms ease-out, transform 150ms ease-out" : "",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@measured/puck",
3
- "version": "0.14.2-canary.3f7fc52",
3
+ "version": "0.14.2-canary.4a479b1",
4
4
  "author": "Measured Corporation Ltd <hello@measured.co>",
5
5
  "repository": "measuredco/puck",
6
6
  "bugs": "https://github.com/measuredco/puck/issues",
@@ -60,7 +60,7 @@
60
60
  },
61
61
  "dependencies": {
62
62
  "@measured/auto-frame-component": "0.1.1",
63
- "@measured/dnd": "16.6.0-canary.c7c88e8",
63
+ "@measured/dnd": "16.6.0-canary.f472135",
64
64
  "deep-diff": "^1.0.2",
65
65
  "react-hotkeys-hook": "^4.4.1",
66
66
  "react-spinners": "^0.13.8",