neuphlo-editor 2.1.0 → 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-MSNTVITF.js +1352 -0
- package/dist/chunk-MSNTVITF.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 -64
- 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;
|