neuphlo-editor 2.1.1 → 2.2.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.
- package/dist/chunk-G5E32MLB.js +1352 -0
- package/dist/chunk-G5E32MLB.js.map +1 -0
- package/dist/chunk-N4RDYJ5Z.js +1351 -0
- package/dist/chunk-N4RDYJ5Z.js.map +1 -0
- package/dist/chunk-SJQQVB3M.js +1353 -0
- package/dist/chunk-SJQQVB3M.js.map +1 -0
- package/dist/chunk-VPI26I4P.js +1350 -0
- package/dist/chunk-VPI26I4P.js.map +1 -0
- package/dist/headless/index.js +1 -1
- package/dist/react/index.cjs +107 -65
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.css +139 -0
- package/dist/react/index.css.map +1 -1
- package/dist/react/index.js +95 -51
- package/dist/react/index.js.map +1 -1
- package/dist/styles.css +165 -0
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -886,6 +886,91 @@
|
|
|
886
886
|
position: absolute;
|
|
887
887
|
}
|
|
888
888
|
|
|
889
|
+
/* Image block error state */
|
|
890
|
+
.nph-image-block-error {
|
|
891
|
+
display: flex;
|
|
892
|
+
flex-direction: column;
|
|
893
|
+
align-items: center;
|
|
894
|
+
justify-content: center;
|
|
895
|
+
gap: 8px;
|
|
896
|
+
padding: 32px;
|
|
897
|
+
border-radius: 12px;
|
|
898
|
+
border: 1.5px dashed var(--border, #e5e7eb);
|
|
899
|
+
background: var(--muted, rgba(0, 0, 0, 0.02));
|
|
900
|
+
color: var(--muted-foreground, #6b7280);
|
|
901
|
+
font-size: 13px;
|
|
902
|
+
cursor: pointer;
|
|
903
|
+
aspect-ratio: 16 / 9;
|
|
904
|
+
}
|
|
905
|
+
|
|
906
|
+
.dark .nph-image-block-error {
|
|
907
|
+
border-color: var(--border, #374151);
|
|
908
|
+
background: var(--muted, rgba(255, 255, 255, 0.03));
|
|
909
|
+
color: var(--muted-foreground, #9ca3af);
|
|
910
|
+
}
|
|
911
|
+
|
|
912
|
+
/* Browse-only variant — clean, clickable CTA */
|
|
913
|
+
.nph-image-uploader--browse-only {
|
|
914
|
+
padding: 0;
|
|
915
|
+
border: 1.5px dashed var(--border, #e5e7eb);
|
|
916
|
+
border-radius: 12px;
|
|
917
|
+
background: var(--muted, rgba(0, 0, 0, 0.02));
|
|
918
|
+
transition: all 0.2s ease;
|
|
919
|
+
aspect-ratio: 16 / 9;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
.nph-image-uploader--browse-only:hover {
|
|
923
|
+
border-color: var(--muted-foreground, #9ca3af);
|
|
924
|
+
background: var(--muted, rgba(0, 0, 0, 0.04));
|
|
925
|
+
}
|
|
926
|
+
|
|
927
|
+
.nph-image-uploader__browse-cta {
|
|
928
|
+
display: flex;
|
|
929
|
+
flex-direction: column;
|
|
930
|
+
align-items: center;
|
|
931
|
+
gap: 12px;
|
|
932
|
+
}
|
|
933
|
+
|
|
934
|
+
.nph-image-uploader__browse-icon-wrapper {
|
|
935
|
+
display: flex;
|
|
936
|
+
align-items: center;
|
|
937
|
+
justify-content: center;
|
|
938
|
+
width: 48px;
|
|
939
|
+
height: 48px;
|
|
940
|
+
border-radius: 10px;
|
|
941
|
+
background: var(--muted, rgba(0, 0, 0, 0.06));
|
|
942
|
+
color: var(--muted-foreground, #6b7280);
|
|
943
|
+
flex-shrink: 0;
|
|
944
|
+
transition: all 0.2s ease;
|
|
945
|
+
}
|
|
946
|
+
|
|
947
|
+
.nph-image-uploader--browse-only:hover .nph-image-uploader__browse-icon-wrapper {
|
|
948
|
+
background: var(--muted, rgba(0, 0, 0, 0.1));
|
|
949
|
+
color: var(--foreground, #374151);
|
|
950
|
+
}
|
|
951
|
+
|
|
952
|
+
.nph-image-uploader__browse-text {
|
|
953
|
+
display: flex;
|
|
954
|
+
flex-direction: column;
|
|
955
|
+
align-items: center;
|
|
956
|
+
gap: 4px;
|
|
957
|
+
}
|
|
958
|
+
|
|
959
|
+
.nph-image-uploader__browse-title {
|
|
960
|
+
display: block;
|
|
961
|
+
font-size: 14px;
|
|
962
|
+
font-weight: 600;
|
|
963
|
+
color: var(--foreground, #111827);
|
|
964
|
+
line-height: 1.4;
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
.nph-image-uploader__browse-subtitle {
|
|
968
|
+
display: block;
|
|
969
|
+
font-size: 12px;
|
|
970
|
+
color: var(--muted-foreground, #6b7280);
|
|
971
|
+
line-height: 1.4;
|
|
972
|
+
}
|
|
973
|
+
|
|
889
974
|
/* Dark mode - supports both media query and class-based approaches */
|
|
890
975
|
@media (prefers-color-scheme: dark) {
|
|
891
976
|
.nph-image-block {
|
|
@@ -928,6 +1013,30 @@
|
|
|
928
1013
|
.nph-image-uploader__text {
|
|
929
1014
|
color: var(--muted-foreground, #9ca3af);
|
|
930
1015
|
}
|
|
1016
|
+
|
|
1017
|
+
.nph-image-uploader--browse-only {
|
|
1018
|
+
border-color: var(--border, #374151);
|
|
1019
|
+
background: var(--muted, rgba(255, 255, 255, 0.03));
|
|
1020
|
+
}
|
|
1021
|
+
|
|
1022
|
+
.nph-image-uploader--browse-only:hover {
|
|
1023
|
+
border-color: var(--muted-foreground, #6b7280);
|
|
1024
|
+
background: var(--muted, rgba(255, 255, 255, 0.05));
|
|
1025
|
+
}
|
|
1026
|
+
|
|
1027
|
+
.nph-image-uploader__browse-icon-wrapper {
|
|
1028
|
+
background: var(--muted, rgba(255, 255, 255, 0.08));
|
|
1029
|
+
color: var(--muted-foreground, #9ca3af);
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
.nph-image-uploader--browse-only:hover .nph-image-uploader__browse-icon-wrapper {
|
|
1033
|
+
background: var(--muted, rgba(255, 255, 255, 0.12));
|
|
1034
|
+
color: var(--foreground, #e5e7eb);
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
.nph-image-uploader__browse-title {
|
|
1038
|
+
color: var(--foreground, #f3f4f6);
|
|
1039
|
+
}
|
|
931
1040
|
}
|
|
932
1041
|
|
|
933
1042
|
/* Class-based dark mode (for frameworks like Next.js with next-themes) */
|
|
@@ -972,6 +1081,30 @@
|
|
|
972
1081
|
color: var(--muted-foreground, #9ca3af);
|
|
973
1082
|
}
|
|
974
1083
|
|
|
1084
|
+
.dark .nph-image-uploader--browse-only {
|
|
1085
|
+
border-color: var(--border, #374151);
|
|
1086
|
+
background: var(--muted, rgba(255, 255, 255, 0.03));
|
|
1087
|
+
}
|
|
1088
|
+
|
|
1089
|
+
.dark .nph-image-uploader--browse-only:hover {
|
|
1090
|
+
border-color: var(--muted-foreground, #6b7280);
|
|
1091
|
+
background: var(--muted, rgba(255, 255, 255, 0.05));
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
.dark .nph-image-uploader__browse-icon-wrapper {
|
|
1095
|
+
background: var(--muted, rgba(255, 255, 255, 0.08));
|
|
1096
|
+
color: var(--muted-foreground, #9ca3af);
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
.dark .nph-image-uploader--browse-only:hover .nph-image-uploader__browse-icon-wrapper {
|
|
1100
|
+
background: var(--muted, rgba(255, 255, 255, 0.12));
|
|
1101
|
+
color: var(--foreground, #e5e7eb);
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
.dark .nph-image-uploader__browse-title {
|
|
1105
|
+
color: var(--foreground, #f3f4f6);
|
|
1106
|
+
}
|
|
1107
|
+
|
|
975
1108
|
/* Video Block */
|
|
976
1109
|
.nph-video-block {
|
|
977
1110
|
position: relative;
|
|
@@ -1004,6 +1137,38 @@
|
|
|
1004
1137
|
cursor: pointer;
|
|
1005
1138
|
}
|
|
1006
1139
|
|
|
1140
|
+
/* Video block error state */
|
|
1141
|
+
.nph-video-block-error {
|
|
1142
|
+
display: flex;
|
|
1143
|
+
flex-direction: column;
|
|
1144
|
+
align-items: center;
|
|
1145
|
+
justify-content: center;
|
|
1146
|
+
gap: 8px;
|
|
1147
|
+
padding: 32px;
|
|
1148
|
+
border-radius: 12px;
|
|
1149
|
+
border: 1.5px dashed var(--border, #e5e7eb);
|
|
1150
|
+
background: var(--muted, rgba(0, 0, 0, 0.02));
|
|
1151
|
+
color: var(--muted-foreground, #6b7280);
|
|
1152
|
+
font-size: 13px;
|
|
1153
|
+
cursor: pointer;
|
|
1154
|
+
aspect-ratio: 16 / 9;
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
.nph-video-block-error__url {
|
|
1158
|
+
font-size: 11px;
|
|
1159
|
+
opacity: 0.6;
|
|
1160
|
+
max-width: 300px;
|
|
1161
|
+
overflow: hidden;
|
|
1162
|
+
text-overflow: ellipsis;
|
|
1163
|
+
white-space: nowrap;
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
.dark .nph-video-block-error {
|
|
1167
|
+
border-color: var(--border, #374151);
|
|
1168
|
+
background: var(--muted, rgba(255, 255, 255, 0.03));
|
|
1169
|
+
color: var(--muted-foreground, #9ca3af);
|
|
1170
|
+
}
|
|
1171
|
+
|
|
1007
1172
|
/* Video URL Input */
|
|
1008
1173
|
.nph-video-input {
|
|
1009
1174
|
display: flex;
|