@nascentdigital/funnel-editor 4.5.6 → 4.6.0

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 (136) hide show
  1. package/dist/collection/hooks/CollectionController.d.ts +1 -1
  2. package/dist/core/components/ColorModeToggle.js +6 -4
  3. package/dist/core/components/Header.js +3 -2
  4. package/dist/core/components/UserEditor.d.ts +2 -2
  5. package/dist/core/components/feedback/Badge.d.ts +2 -1
  6. package/dist/core/components/feedback/Badge.js +4 -3
  7. package/dist/core/components/fields/DynamicPagesEditor.js +7 -6
  8. package/dist/core/components/fields/EmptyFieldCard.js +4 -4
  9. package/dist/core/components/fields/FieldCardLayout.js +5 -5
  10. package/dist/core/components/fields/FieldHeader.js +3 -2
  11. package/dist/core/components/fields/FieldsPanel.js +4 -4
  12. package/dist/core/components/fields/FormEditor.js +5 -4
  13. package/dist/core/components/fields/asset/AssetEditor.d.ts +3 -2
  14. package/dist/core/components/fields/asset/AssetEditor.js +1 -1
  15. package/dist/core/components/fields/asset/AssetUploader.d.ts +3 -2
  16. package/dist/core/components/fields/asset/AssetUploader.js +1 -1
  17. package/dist/core/components/fields/collection/CollectionCard.js +1 -11
  18. package/dist/core/components/fields/collection/CollectionPicker.js +3 -2
  19. package/dist/core/components/fields/collection/previews/index.d.ts +0 -1
  20. package/dist/core/components/fields/collection/previews/index.js +0 -1
  21. package/dist/core/components/fields/embed/EmbeddedVideoEditor.d.ts +2 -2
  22. package/dist/core/components/fields/factories/AssetFactory.d.ts +1 -1
  23. package/dist/core/components/fields/factories/CollectionFactory.d.ts +1 -1
  24. package/dist/core/components/fields/factories/EmbeddedVideoFactory.d.ts +2 -2
  25. package/dist/core/components/fields/factories/FieldValueFactory.d.ts +1 -1
  26. package/dist/core/components/fields/factories/FieldValueFactory.js +1 -1
  27. package/dist/core/components/fields/factories/LinkFactory.d.ts +2 -2
  28. package/dist/core/components/fields/factories/TextFactory.d.ts +2 -2
  29. package/dist/core/components/fields/form/FormFieldEditor.d.ts +3 -2
  30. package/dist/core/components/fields/index.d.ts +1 -0
  31. package/dist/core/components/fields/index.js +1 -0
  32. package/dist/core/components/fields/link/LinkEditor.d.ts +2 -2
  33. package/dist/core/components/fields/link/LinkEditor.js +4 -0
  34. package/dist/core/components/fields/list/CreateFieldButton.d.ts +1 -1
  35. package/dist/core/components/fields/list/CreateFieldButton.js +4 -5
  36. package/dist/core/components/fields/list/CreateFieldCard.js +4 -4
  37. package/dist/core/components/fields/page/PagePicker.js +4 -2
  38. package/dist/core/components/fields/richtext/FloatingToolbarPlugin.js +3 -2
  39. package/dist/core/components/fields/richtext/LinkEditor.js +17 -4
  40. package/dist/core/components/fields/richtext/LinkPopup.js +11 -7
  41. package/dist/core/components/interaction/AvatarButton.d.ts +2 -1
  42. package/dist/core/components/interaction/AvatarButton.js +3 -2
  43. package/dist/core/components/interaction/Button.d.ts +2 -0
  44. package/dist/core/components/interaction/Button.js +3 -2
  45. package/dist/core/components/interaction/Combobox.js +2 -2
  46. package/dist/core/components/interaction/IconButton.d.ts +2 -0
  47. package/dist/core/components/interaction/IconButton.js +3 -2
  48. package/dist/core/components/interaction/IconLink.d.ts +1 -1
  49. package/dist/core/components/interaction/MiniEditor.d.ts +3 -2
  50. package/dist/core/components/interaction/MiniEditor.js +7 -5
  51. package/dist/core/components/interaction/Popup.d.ts +20 -15
  52. package/dist/core/components/interaction/Popup.js +63 -66
  53. package/dist/core/components/interaction/QuickInput.js +2 -0
  54. package/dist/core/components/interaction/QuickPicker.d.ts +1 -0
  55. package/dist/core/components/interaction/QuickPicker.js +5 -5
  56. package/dist/core/components/interaction/Tabs.d.ts +5 -1
  57. package/dist/core/components/interaction/Tabs.js +18 -8
  58. package/dist/core/components/interaction/menu/useMenuController.d.ts +2 -2
  59. package/dist/core/components/interaction/table/TableItem.d.ts +2 -1
  60. package/dist/core/components/interaction/table/TableItem.js +5 -3
  61. package/dist/core/components/layout/InfoPanel.js +4 -2
  62. package/dist/core/components/visuals/Icon.d.ts +1 -1
  63. package/dist/core/components/visuals/Icon.js +6 -0
  64. package/dist/core/components/visuals/index.d.ts +0 -1
  65. package/dist/core/components/visuals/index.js +0 -1
  66. package/dist/core/domain/Block.d.ts +4 -0
  67. package/dist/core/domain/Block.js +7 -0
  68. package/dist/core/domain/BlockConfiguration.d.ts +11 -3
  69. package/dist/core/domain/BlockConfiguration.js +77 -14
  70. package/dist/core/domain/CollectionBrowser.d.ts +2 -2
  71. package/dist/core/domain/CollectionFieldProxy.d.ts +7 -2
  72. package/dist/core/domain/CollectionFieldProxy.js +55 -66
  73. package/dist/core/domain/SectionBlock.d.ts +5 -0
  74. package/dist/core/domain/SectionBlock.js +15 -0
  75. package/dist/core/hooks/useBlockConfiguration.d.ts +7 -1
  76. package/dist/core/hooks/useBlockConfiguration.js +8 -1
  77. package/dist/core/hooks/usePage.d.ts +2 -2
  78. package/dist/core/hooks/usePage.js +5 -4
  79. package/dist/core/repository/CollectionRepository.js +1 -1
  80. package/dist/core/repository/CollectionSerializer.d.ts +3 -2
  81. package/dist/core/repository/CollectionSerializer.js +12 -7
  82. package/dist/core/repository/PageRepository.js +2 -2
  83. package/dist/core/repository/PageSerializer.d.ts +5 -3
  84. package/dist/core/repository/PageSerializer.js +10 -11
  85. package/dist/explore/components/CreateCollectionDialog.d.ts +2 -3
  86. package/dist/explore/components/CreateCollectionDialog.js +1 -1
  87. package/dist/explore/components/CreatePageDialog.d.ts +3 -3
  88. package/dist/explore/components/CreatePageDialog.js +2 -2
  89. package/dist/explore/screens/CollectionExplorer.js +4 -4
  90. package/dist/explore/screens/PageExplorer.js +4 -4
  91. package/dist/page/components/BlockEditor.js +10 -2
  92. package/dist/page/components/config/BlockConfigButton.d.ts +8 -0
  93. package/dist/page/components/config/BlockConfigButton.js +320 -0
  94. package/dist/page/components/config/BlockConfigurationProvider.d.ts +8 -0
  95. package/dist/page/components/config/BlockConfigurationProvider.js +17 -0
  96. package/dist/page/components/config/LegacyBlockPreview.d.ts +8 -0
  97. package/dist/page/components/config/{BlockPreview.js → LegacyBlockPreview.js} +30 -40
  98. package/dist/page/components/config/index.d.ts +3 -1
  99. package/dist/page/components/config/index.js +3 -1
  100. package/dist/page/components/index.d.ts +1 -1
  101. package/dist/page/components/index.js +1 -1
  102. package/dist/page/components/nav/NavSection.js +4 -3
  103. package/dist/page/components/panels/BlockConfigPanel.d.ts +1 -0
  104. package/dist/page/components/panels/BlockConfigPanel.js +25 -0
  105. package/dist/page/components/{PageStatus.d.ts → panels/PageStatus.d.ts} +3 -3
  106. package/dist/page/components/{PageStatus.js → panels/PageStatus.js} +10 -14
  107. package/dist/page/components/panels/index.d.ts +2 -0
  108. package/dist/page/components/{status → panels}/index.js +2 -1
  109. package/dist/page/hooks/PageController.d.ts +2 -2
  110. package/dist/page/screens/PageEditor.js +8 -1
  111. package/dist/styles/index.css +174 -56
  112. package/dist/styles/tailwind.js +7 -3
  113. package/dist/users/screens/UserExplorer.js +7 -6
  114. package/package.json +3 -2
  115. package/dist/core/components/fields/collection/previews/ClientPreview.d.ts +0 -10
  116. package/dist/core/components/fields/collection/previews/ClientPreview.js +0 -29
  117. package/dist/core/components/visuals/SkeletonLayout.d.ts +0 -9
  118. package/dist/core/components/visuals/SkeletonLayout.js +0 -429
  119. package/dist/page/components/config/BlockConfig.d.ts +0 -8
  120. package/dist/page/components/config/BlockConfig.js +0 -28
  121. package/dist/page/components/config/BlockConfigEditor.d.ts +0 -9
  122. package/dist/page/components/config/BlockConfigEditor.js +0 -114
  123. package/dist/page/components/config/BlockPreview.d.ts +0 -10
  124. package/dist/page/components/config/BlockView.d.ts +0 -4
  125. package/dist/page/components/config/BlockView.js +0 -9
  126. package/dist/page/components/config/LegacyBlockConfigEditor.d.ts +0 -9
  127. package/dist/page/components/config/LegacyBlockConfigEditor.js +0 -27
  128. package/dist/page/components/config/ListPanelEditor.d.ts +0 -8
  129. package/dist/page/components/config/ListPanelEditor.js +0 -89
  130. package/dist/page/components/config/MessagePanelEditor.d.ts +0 -8
  131. package/dist/page/components/config/MessagePanelEditor.js +0 -17
  132. package/dist/page/components/config/VisualPanelEditor.d.ts +0 -8
  133. package/dist/page/components/config/VisualPanelEditor.js +0 -76
  134. package/dist/page/components/status/index.d.ts +0 -1
  135. /package/dist/page/components/{status → panels}/AutoSave.d.ts +0 -0
  136. /package/dist/page/components/{status → panels}/AutoSave.js +0 -0
@@ -499,6 +499,13 @@ video {
499
499
  [hidden]:where(:not([hidden="until-found"])) {
500
500
  display: none;
501
501
  }
502
+
503
+ [popover]{
504
+ inset: var(--toolwind-toggle-nEDo9QfADx, 0px);
505
+ background-color: var(--toolwind-toggle-d4U08Ws6b8, canvas);
506
+ color: var(--toolwind-toggle-00SqTQfWhn, canvastext);
507
+ margin: var(--toolwind-toggle-sxV90D1uFT, auto);
508
+ }
502
509
  html, body, #__next, .Editor-wrap{
503
510
  position: relative;
504
511
  height: 100lvh;
@@ -2730,6 +2737,18 @@ video {
2730
2737
  --tw-border-opacity: 1;
2731
2738
  border-color: rgb(var(--color-ix-primary) / var(--tw-border-opacity, 1));
2732
2739
  }
2740
+ .FieldCard-hover.FieldCard{
2741
+ --tw-border-opacity: 1;
2742
+ border-color: rgb(var(--color-ix-primary) / var(--tw-border-opacity, 1));
2743
+ }
2744
+ .FieldCard-press.FieldCard{
2745
+ --tw-scale-x: .97;
2746
+ --tw-scale-y: .97;
2747
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2748
+ transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
2749
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
2750
+ transition-duration: 200ms;
2751
+ }
2733
2752
  .iconbutton{
2734
2753
  flex-shrink: 0;
2735
2754
  cursor: pointer;
@@ -4229,30 +4248,26 @@ video {
4229
4248
  :root {
4230
4249
  --nd-visual-width: unset;
4231
4250
  --nd-visual-height: unset;
4251
+ --nd-visual-max-width: unset;
4252
+ --nd-visual-max-height: unset;
4232
4253
  --nd-visual-anchor: center;
4233
- }
4234
- .nd-Visual-image{
4235
- -o-object-fit: cover;
4236
- object-fit: cover;
4237
- -o-object-position: var(--nd-visual-anchor);
4238
- object-position: var(--nd-visual-anchor);
4239
- }
4240
- .nd-Visual-image img{
4241
- -o-object-fit: cover;
4242
- object-fit: cover;
4243
- -o-object-position: var(--nd-visual-anchor);
4244
- object-position: var(--nd-visual-anchor);
4245
- }
4246
- .nd-Visual-video{
4247
- -o-object-fit: cover;
4248
- object-fit: cover;
4249
- aspect-ratio: var(--nd-visual-width) / var(--nd-visual-height);
4250
- -o-object-position: var(--nd-visual-anchor);
4251
- object-position: var(--nd-visual-anchor);
4252
- }
4253
- .nd-Visual-video video{
4254
- -o-object-fit: cover;
4255
- object-fit: cover;
4254
+ --nd-visual-aspect: unset;
4255
+ --nd-visual-object-fit: unset;
4256
+ }
4257
+ .nd-Visual-image,
4258
+ .nd-Visual-video
4259
+ {
4260
+ aspect-ratio: var(--nd-visual-aspect, var(--_nd-visual-native-width) / var(--_nd-visual-native-height));
4261
+ max-width: var(--nd-visual-max-width, 100%);
4262
+ max-height: var(--nd-visual-max-height, 100%);
4263
+ width: var(--nd-visual-width, calc(var(--_nd-visual-native-width) * 1px));
4264
+ height: var(--nd-visual-height, calc(var(--_nd-visual-native-height) * 1px));
4265
+ }
4266
+ .nd-Visual-image img, .nd-Visual-image video, .nd-Visual-video img, .nd-Visual-video video{
4267
+ width: 100%;
4268
+ height: 100%;
4269
+ -o-object-fit: var(--nd-visual-object-fit, cover);
4270
+ object-fit: var(--nd-visual-object-fit, cover);
4256
4271
  -o-object-position: var(--nd-visual-anchor);
4257
4272
  object-position: var(--nd-visual-anchor);
4258
4273
  }
@@ -4274,6 +4289,9 @@ video {
4274
4289
  .static{
4275
4290
  position: static;
4276
4291
  }
4292
+ .\!fixed{
4293
+ position: fixed !important;
4294
+ }
4277
4295
  .fixed{
4278
4296
  position: fixed;
4279
4297
  }
@@ -4367,9 +4385,6 @@ video {
4367
4385
  .col-span-10{
4368
4386
  grid-column: span 10 / span 10;
4369
4387
  }
4370
- .col-span-2{
4371
- grid-column: span 2 / span 2;
4372
- }
4373
4388
  .col-span-4{
4374
4389
  grid-column: span 4 / span 4;
4375
4390
  }
@@ -4409,6 +4424,12 @@ video {
4409
4424
  .row-start-2{
4410
4425
  grid-row-start: 2;
4411
4426
  }
4427
+ .row-start-3{
4428
+ grid-row-start: 3;
4429
+ }
4430
+ .m-l2{
4431
+ margin: 4px;
4432
+ }
4412
4433
  .m-l6{
4413
4434
  margin: 16px;
4414
4435
  }
@@ -4566,6 +4587,9 @@ video {
4566
4587
  .h-10{
4567
4588
  height: 10px;
4568
4589
  }
4590
+ .h-12{
4591
+ height: 12px;
4592
+ }
4569
4593
  .h-14{
4570
4594
  height: 14px;
4571
4595
  }
@@ -4635,9 +4659,6 @@ video {
4635
4659
  .h-\[55px\]{
4636
4660
  height: 55px;
4637
4661
  }
4638
- .h-\[60\%\]{
4639
- height: 60%;
4640
- }
4641
4662
  .h-\[80px\]{
4642
4663
  height: 80px;
4643
4664
  }
@@ -4725,6 +4746,9 @@ video {
4725
4746
  .w-11\/12{
4726
4747
  width: 91.666667%;
4727
4748
  }
4749
+ .w-12{
4750
+ width: 12px;
4751
+ }
4728
4752
  .w-14{
4729
4753
  width: 14px;
4730
4754
  }
@@ -4764,15 +4788,12 @@ video {
4764
4788
  .w-6{
4765
4789
  width: 6px;
4766
4790
  }
4767
- .w-7\/12{
4768
- width: 58.333333%;
4791
+ .w-8{
4792
+ width: 8px;
4769
4793
  }
4770
4794
  .w-8\/12{
4771
4795
  width: 66.666667%;
4772
4796
  }
4773
- .w-\[100px\]{
4774
- width: 100px;
4775
- }
4776
4797
  .w-\[120px\]{
4777
4798
  width: 120px;
4778
4799
  }
@@ -5140,9 +5161,6 @@ video {
5140
5161
  .rounded-\[2px\]{
5141
5162
  border-radius: 2px;
5142
5163
  }
5143
- .rounded-\[3px\]{
5144
- border-radius: 3px;
5145
- }
5146
5164
  .rounded-full{
5147
5165
  border-radius: 9999px;
5148
5166
  }
@@ -5167,6 +5185,14 @@ video {
5167
5185
  .rounded-xxs{
5168
5186
  border-radius: 2px;
5169
5187
  }
5188
+ .rounded-l-\[2px\]{
5189
+ border-top-left-radius: 2px;
5190
+ border-bottom-left-radius: 2px;
5191
+ }
5192
+ .rounded-r-\[2px\]{
5193
+ border-top-right-radius: 2px;
5194
+ border-bottom-right-radius: 2px;
5195
+ }
5170
5196
  .rounded-t-lg{
5171
5197
  border-top-left-radius: 18px;
5172
5198
  border-top-right-radius: 18px;
@@ -5500,6 +5526,9 @@ video {
5500
5526
  .p-3{
5501
5527
  padding: 3px;
5502
5528
  }
5529
+ .p-l1{
5530
+ padding: 2px;
5531
+ }
5503
5532
  .p-l2{
5504
5533
  padding: 4px;
5505
5534
  }
@@ -5601,6 +5630,12 @@ video {
5601
5630
  padding-top: 24px;
5602
5631
  padding-bottom: 24px;
5603
5632
  }
5633
+ .pb-l10{
5634
+ padding-bottom: 40px;
5635
+ }
5636
+ .pb-l3{
5637
+ padding-bottom: 6px;
5638
+ }
5604
5639
  .pb-l4{
5605
5640
  padding-bottom: 8px;
5606
5641
  }
@@ -5640,6 +5675,9 @@ video {
5640
5675
  .pt-10{
5641
5676
  padding-top: 10px;
5642
5677
  }
5678
+ .pt-l10{
5679
+ padding-top: 40px;
5680
+ }
5643
5681
  .pt-l12{
5644
5682
  padding-top: 56px;
5645
5683
  }
@@ -5686,9 +5724,6 @@ video {
5686
5724
  --tw-ordinal: ordinal;
5687
5725
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
5688
5726
  }
5689
- .leading-\[100\%\]{
5690
- line-height: 100%;
5691
- }
5692
5727
  .leading-\[20px\]{
5693
5728
  line-height: 20px;
5694
5729
  }
@@ -5699,10 +5734,6 @@ video {
5699
5734
  --tw-text-opacity: 1;
5700
5735
  color: rgb(var(--color-background) / var(--tw-text-opacity, 1));
5701
5736
  }
5702
- .text-border-l1{
5703
- --tw-text-opacity: 1;
5704
- color: rgb(var(--color-border-l1) / var(--tw-text-opacity, 1));
5705
- }
5706
5737
  .text-content-button{
5707
5738
  --tw-text-opacity: 1;
5708
5739
  color: rgb(var(--color-content-button) / var(--tw-text-opacity, 1));
@@ -5888,6 +5919,44 @@ video {
5888
5919
  .\@container{
5889
5920
  container-type: inline-size;
5890
5921
  }
5922
+ .\!anchor{
5923
+ }
5924
+ .anchor{
5925
+ }
5926
+ .anchor\/\[--nd-popup-anchor\]{
5927
+ anchor-name: var(--nd-popup-anchor);
5928
+ }
5929
+ .anchored{
5930
+ }
5931
+ .anchored-bottom{
5932
+ position-area: bottom;
5933
+ }
5934
+ .anchored-bottom-span-left{
5935
+ position-area: bottom span-left;
5936
+ }
5937
+ .anchored-left{
5938
+ position-area: left;
5939
+ }
5940
+ .anchored-right{
5941
+ position-area: right;
5942
+ }
5943
+ .anchored-top{
5944
+ position-area: top;
5945
+ }
5946
+ .anchored-top-span-right{
5947
+ position-area: top span-right;
5948
+ }
5949
+ .anchored\/\[--nd-popup-anchor\]{
5950
+ position-anchor: var(--nd-popup-anchor);
5951
+ }
5952
+ .anchored\/\[--nd-popup-anchor\]:where(.anchored\/\[--nd-popup-anchor\]){
5953
+ position: absolute;
5954
+ view-transition-name: --tw-anchor-view-transition-2j1919322s193433343934192p322r2w33362l;
5955
+ --toolwind-toggle-nEDo9QfADx: auto;
5956
+ --toolwind-toggle-d4U08Ws6b8: transparent;
5957
+ --toolwind-toggle-00SqTQfWhn: inherit;
5958
+ --toolwind-toggle-sxV90D1uFT: 0px;
5959
+ }
5891
5960
  .counter-l1{
5892
5961
  counter-reset: l1;
5893
5962
  }
@@ -5976,6 +6045,43 @@ video {
5976
6045
  pointer-events: auto;
5977
6046
  }
5978
6047
  }
6048
+ .scroller-edge{
6049
+ border-top-width: 1px;
6050
+ border-style: solid;
6051
+ border-color: transparent;
6052
+
6053
+ animation: scroller-edge linear both;
6054
+ animation-timeline: scroll(self);
6055
+ animation-range: 0px 20px;
6056
+ }
6057
+ /* animation */
6058
+ @keyframes scroller-edge {
6059
+ from {
6060
+ border-top-color: transparent;
6061
+ }
6062
+ to {
6063
+ border-top-color: #3b82f6;
6064
+ }
6065
+ }
6066
+ .scroller-fade-top{
6067
+ position: relative;
6068
+ }
6069
+ /* overlay */
6070
+ .scroller-fade-top::before{
6071
+ position: sticky;
6072
+ left: 0px;
6073
+ right: 0px;
6074
+ top: 0px;
6075
+ z-index: 2;
6076
+ display: block;
6077
+ height: 16px;
6078
+ width: 100%;
6079
+ background-color: inherit;
6080
+ --tw-content: "\00a0";
6081
+ content: var(--tw-content);
6082
+ -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
6083
+ mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
6084
+ }
5979
6085
  .stacked{
5980
6086
  display: grid;
5981
6087
  grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -6010,13 +6116,22 @@ video {
6010
6116
  inherits: false;
6011
6117
  initial-value: #000;
6012
6118
  }
6013
- .\[--nd-icon-color\:theme\(colors\.content-primary\)\]{
6014
- --nd-icon-color: rgb(var(--color-content-primary) / 1);
6015
- }
6016
6119
  .focus-within\:field-focused:focus-within.field {
6017
6120
  }
6018
6121
  .focus-visible\:field-focused:focus-visible.field {
6019
6122
  }
6123
+ .group:hover .group-hover\:FieldCard-hover.FieldCard{
6124
+ --tw-border-opacity: 1;
6125
+ border-color: rgb(var(--color-ix-primary) / var(--tw-border-opacity, 1));
6126
+ }
6127
+ .group:active .group-active\:FieldCard-press.FieldCard{
6128
+ --tw-scale-x: .97;
6129
+ --tw-scale-y: .97;
6130
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
6131
+ transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
6132
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
6133
+ transition-duration: 200ms;
6134
+ }
6020
6135
  @media (min-width: 768px){
6021
6136
  .md\:display-md{
6022
6137
  font-family: var(--font-display), sans-serif;
@@ -6185,9 +6300,6 @@ video {
6185
6300
  .hover\:underline:hover{
6186
6301
  text-decoration-line: underline;
6187
6302
  }
6188
- .hover\:opacity-full:hover{
6189
- opacity: 1;
6190
- }
6191
6303
  .hover\:outline-ix-primary\/\[\.35\]:hover{
6192
6304
  outline-color: rgb(var(--color-ix-primary) / .35);
6193
6305
  }
@@ -6296,9 +6408,6 @@ video {
6296
6408
  --tw-bg-opacity: 1;
6297
6409
  background-color: rgb(var(--color-ix-primary-hover) / var(--tw-bg-opacity, 1));
6298
6410
  }
6299
- .group:hover .group-hover\:bg-ix-primary\/tint1{
6300
- background-color: rgb(var(--color-ix-primary) / .1);
6301
- }
6302
6411
  .group:hover .group-hover\:bg-ix-util-hover\/tint1{
6303
6412
  background-color: rgb(var(--color-ix-util-hover) / .1);
6304
6413
  }
@@ -6306,6 +6415,10 @@ video {
6306
6415
  --tw-text-opacity: 1;
6307
6416
  color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
6308
6417
  }
6418
+ .group:hover .group-hover\:text-content-secondary{
6419
+ --tw-text-opacity: 1;
6420
+ color: rgb(var(--color-content-secondary) / var(--tw-text-opacity, 1));
6421
+ }
6309
6422
  .group:focus-visible .group-focus-visible\:outline-ix-primary{
6310
6423
  outline-color: rgb(var(--color-ix-primary) / 1);
6311
6424
  }
@@ -6322,12 +6435,13 @@ video {
6322
6435
  --tw-bg-opacity: 1;
6323
6436
  background-color: rgb(var(--color-ix-primary-press) / var(--tw-bg-opacity, 1));
6324
6437
  }
6325
- .group:active .group-active\:bg-ix-primary\/tint3{
6326
- background-color: rgb(var(--color-ix-primary) / .3);
6327
- }
6328
6438
  .group:active .group-active\:bg-ix-util-press\/tint2{
6329
6439
  background-color: rgb(var(--color-ix-util-press) / .2);
6330
6440
  }
6441
+ .group:active .group-active\:text-content-primary{
6442
+ --tw-text-opacity: 1;
6443
+ color: rgb(var(--color-content-primary) / var(--tw-text-opacity, 1));
6444
+ }
6331
6445
  .group:active .group-active\:text-content-tertiary{
6332
6446
  --tw-text-opacity: 1;
6333
6447
  color: rgb(var(--color-content-tertiary) / var(--tw-text-opacity, 1));
@@ -6481,6 +6595,10 @@ video {
6481
6595
  display: block;
6482
6596
  }
6483
6597
 
6598
+ .lg\:flex{
6599
+ display: flex;
6600
+ }
6601
+
6484
6602
  .lg\:w-\[240px\]{
6485
6603
  width: 240px;
6486
6604
  }
@@ -9,6 +9,7 @@ const plugin_1 = __importDefault(require("tailwindcss/plugin"));
9
9
  const Tailwind_1 = require("@nascentdigital/funnel-ui/Tailwind");
10
10
  const aspect_ratio_1 = __importDefault(require("@tailwindcss/aspect-ratio"));
11
11
  const container_queries_1 = __importDefault(require("@tailwindcss/container-queries"));
12
+ const anchors_1 = __importDefault(require("@toolwind/anchors"));
12
13
  // tailwind
13
14
  exports.EditorTailwindConfig = {
14
15
  content: [
@@ -258,15 +259,16 @@ exports.EditorTailwindConfig = {
258
259
  'quad-in-out': 'cubic-bezier(0.45, 0, 0.55, 1)',
259
260
  'cube-in': 'cubic-bezier(0.32, 0, 0.67, 0)',
260
261
  'cube-out': 'cubic-bezier(0.33, 1, 0.68, 1)',
261
- 'cube-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
262
+ 'cube-in-out': 'cubic-bezier(0.65, 0, 0.35, 1)'
262
263
  }
263
264
  }
264
265
  },
265
266
  plugins: [
266
267
  aspect_ratio_1.default,
267
268
  container_queries_1.default,
269
+ anchors_1.default,
270
+ // counter: provides custom counting control via tailwind
268
271
  (0, plugin_1.default)(function ({ matchUtilities, matchVariant, theme }) {
269
- // counter: provides custom counting control via tailwind
270
272
  matchUtilities({
271
273
  'counter': (value) => ({
272
274
  counterReset: value
@@ -280,7 +282,9 @@ exports.EditorTailwindConfig = {
280
282
  }, {
281
283
  values: theme('counterName')
282
284
  });
283
- // avoid: avoids child component (pass in selector to thing you want to not match)
285
+ }),
286
+ // avoid: avoids child component (pass in selector to thing you want to not match)
287
+ (0, plugin_1.default)(function ({ matchUtilities, matchVariant, theme }) {
284
288
  matchVariant('avoid', child => `&:not(:has(${child}:hover, ${child}:focus-visible, ${child}:active))`);
285
289
  })
286
290
  ]
@@ -12,6 +12,7 @@ const core_1 = require("../../core");
12
12
  // component
13
13
  function UserExplorer() {
14
14
  // bind hooks
15
+ const anchorId = (0, react_1.useId)();
15
16
  const userEditorRef = (0, react_1.useRef)(null);
16
17
  const { user } = (0, core_1.useAuthenticator)();
17
18
  const browser = (0, core_1.useUserBrowser)();
@@ -118,7 +119,7 @@ function renderUsers({ user: currentUser, router, browser, menu, userEditorRef,
118
119
  await browser.sync();
119
120
  }
120
121
  };
121
- const onMenuOpen = async (e, user) => {
122
+ const onMenuOpen = async (e, user, anchor) => {
122
123
  // consume event
123
124
  e.preventDefault();
124
125
  e.stopPropagation();
@@ -145,7 +146,7 @@ function renderUsers({ user: currentUser, router, browser, menu, userEditorRef,
145
146
  // open menu
146
147
  menu.items = menuItems;
147
148
  menu.selectedItem = undefined;
148
- menu.open(e.currentTarget, user);
149
+ menu.open(anchor, user);
149
150
  };
150
151
  const onMenuSelect = async (item) => {
151
152
  var _a;
@@ -173,21 +174,21 @@ function renderUsers({ user: currentUser, router, browser, menu, userEditorRef,
173
174
  const { users } = browser;
174
175
  const canManageUsers = currentUser.hasAny('user.update', 'user.delete', 'user.passwordReset');
175
176
  return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center gap-l8", children: [(0, jsx_runtime_1.jsx)("h2", { className: "heading-lg text-content-primary", children: "Users" }), currentUser.has('user.create') &&
176
- (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "primary", iconLeft: "Plus", onClick: e => onCreateUser(e.currentTarget), children: "New user" })] }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", children: users.map(user => {
177
+ (0, jsx_runtime_1.jsx)(core_1.Button, { anchorId: "user-create", variant: "primary", iconLeft: "Plus", onClick: e => onCreateUser('user-create'), children: "New user" })] }), (0, jsx_runtime_1.jsx)(core_1.Table, { className: "flex-1", children: users.map(user => {
177
178
  // bond props
178
179
  const isCurrentUser = currentUser.id === user.id;
179
180
  const isInferior = currentUser.role.compareTo(user.role) > 0;
180
181
  // render
181
- return ((0, jsx_runtime_1.jsx)(core_1.TableItem, { details: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [user.blocked &&
182
+ return ((0, jsx_runtime_1.jsx)(core_1.TableItem, { anchorId: `user-edit-${user.id}`, details: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [user.blocked &&
182
183
  (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "error", label: "Blocked" }), isCurrentUser &&
183
184
  (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: "You" }), user.isAdmin
184
185
  ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "success", label: user.role.name })
185
186
  : user.isEditor
186
187
  ? (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "default", label: user.role.name })
187
188
  : (0, jsx_runtime_1.jsx)(core_1.StatusBadge, { variant: "warn", label: user.role.name }), canManageUsers &&
188
- (0, jsx_runtime_1.jsx)(core_1.IconButton, { className: (0, classnames_1.default)('interactive-child ml-l5', {
189
+ (0, jsx_runtime_1.jsx)(core_1.IconButton, { anchorId: `user-menu-${user.id}`, className: (0, classnames_1.default)('interactive-child ml-l5', {
189
190
  'opacity-none': isInferior
190
- }), variant: "util", size: "sm", icon: "EllipsisVertical", onClick: e => onMenuOpen(e, user), disabled: isInferior })] }), onClick: e => onEditUser(user, e.currentTarget), disabled: isInferior, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-md label-strong text-content-primary", children: user.username }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-secondary", children: user.email })] }) }, user.id));
191
+ }), variant: "util", size: "sm", icon: "EllipsisVertical", onClick: e => onMenuOpen(e, user, `user-menu-${user.id}`), disabled: isInferior })] }), onClick: e => onEditUser(user, `user-edit-${user.id}`), disabled: isInferior, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-md label-strong text-content-primary", children: user.username }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-secondary", children: user.email })] }) }, user.id));
191
192
  }) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuSelect })] }, "changes"));
192
193
  }
193
194
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nascentdigital/funnel-editor",
3
- "version": "4.5.6",
3
+ "version": "4.6.0",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org/",
6
6
  "access": "restricted"
@@ -77,6 +77,7 @@
77
77
  "devDependencies": {
78
78
  "@tailwindcss/aspect-ratio": "^0",
79
79
  "@tailwindcss/container-queries": "^0",
80
+ "@toolwind/anchors": "^1",
80
81
  "@types/node": "^22",
81
82
  "@types/url-regex-safe": "^1",
82
83
  "autoprefixer": "^10",
@@ -89,5 +90,5 @@
89
90
  "ts-jest": "^29",
90
91
  "type-fest": "^4"
91
92
  },
92
- "gitHead": "e5899ba807b2c7241f493c850a98c1607df6771b"
93
+ "gitHead": "7fba18243bc79f94b3bd665db21f37bc7f3afd4c"
93
94
  }
@@ -1,10 +0,0 @@
1
- import { Schema } from '@nascentdigital/funnel-core';
2
- import { Client } from '@nascentdigital/funnel-ui';
3
- export declare function ClientPreview({ className, client }: ClientPreview.Props): import("react/jsx-runtime").JSX.Element;
4
- export declare namespace ClientPreview {
5
- type Props = {
6
- className?: string;
7
- schema: Schema.CollectionField;
8
- client: Client.Value;
9
- };
10
- }
@@ -1,29 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ClientPreview = ClientPreview;
7
- const jsx_runtime_1 = require("react/jsx-runtime");
8
- const funnel_ui_1 = require("@nascentdigital/funnel-ui");
9
- const classnames_1 = __importDefault(require("classnames"));
10
- // components
11
- function ClientPreview({ className, client }) {
12
- // bind props
13
- const { name, fields } = client;
14
- const { logo: logoRaw, division: divisionRaw, location: locationRaw } = fields !== null && fields !== void 0 ? fields : {};
15
- const logo = logoRaw === null || logoRaw === void 0 ? void 0 : logoRaw.value;
16
- const division = divisionRaw === null || divisionRaw === void 0 ? void 0 : divisionRaw.value;
17
- const location = locationRaw === null || locationRaw === void 0 ? void 0 : locationRaw.value;
18
- // render
19
- return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'h-full flex flex-col justify-center items-center gap-l8 p-l8', '[--nd-icon-color:theme(colors.content-primary)]', '[--nd-icon-color:theme(colors.content-primary)]'), children: [logo
20
- ?
21
- (0, jsx_runtime_1.jsx)(funnel_ui_1.Icon, { className: "w-[100px] h-40", icon: logo })
22
- :
23
- (0, jsx_runtime_1.jsx)("div", { className: "text-border-l1 border border-dashed border-border-l1 rounded-xs p-l6", children: "Logo" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center text-center", children: [(0, jsx_runtime_1.jsx)("h4", { className: "body-xs body-strong text-content-secondary", children: name }), division && location &&
24
- (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary", children: division
25
- ? location
26
- ? `${division}, ${location}`
27
- : division
28
- : location })] })] }));
29
- }
@@ -1,9 +0,0 @@
1
- import { BlockLayout } from '@nascentdigital/funnel-core';
2
- export declare function SkeletonLayout({ variant, layout }: SkeletonLayout.Props): import("react/jsx-runtime").JSX.Element;
3
- export declare namespace SkeletonLayout {
4
- type Variant = 'mobile' | 'desktop';
5
- type Props = {
6
- variant: Variant;
7
- layout?: Readonly<BlockLayout>;
8
- };
9
- }