neuphlo-editor 2.1.1 → 2.3.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 +120 -70
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.css +215 -4
- package/dist/react/index.css.map +1 -1
- package/dist/react/index.js +109 -57
- package/dist/react/index.js.map +1 -1
- package/dist/styles.css +254 -4
- 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;
|
|
@@ -1031,10 +1196,11 @@
|
|
|
1031
1196
|
|
|
1032
1197
|
.nph-video-input__field {
|
|
1033
1198
|
flex: 1;
|
|
1034
|
-
padding:
|
|
1199
|
+
padding: 10px 14px;
|
|
1035
1200
|
font-size: 14px;
|
|
1201
|
+
line-height: 1.4;
|
|
1036
1202
|
border: 1px solid var(--border, #e5e7eb);
|
|
1037
|
-
border-radius:
|
|
1203
|
+
border-radius: 8px;
|
|
1038
1204
|
outline: none;
|
|
1039
1205
|
background: transparent;
|
|
1040
1206
|
color: inherit;
|
|
@@ -1046,11 +1212,12 @@
|
|
|
1046
1212
|
}
|
|
1047
1213
|
|
|
1048
1214
|
.nph-video-input__button {
|
|
1049
|
-
padding:
|
|
1215
|
+
padding: 10px 20px;
|
|
1050
1216
|
font-size: 14px;
|
|
1051
1217
|
font-weight: 500;
|
|
1218
|
+
line-height: 1.4;
|
|
1052
1219
|
border: 1px solid var(--border, #e5e7eb);
|
|
1053
|
-
border-radius:
|
|
1220
|
+
border-radius: 8px;
|
|
1054
1221
|
background: var(--primary, #111827);
|
|
1055
1222
|
color: var(--primary-foreground, #fff);
|
|
1056
1223
|
cursor: pointer;
|
|
@@ -1062,6 +1229,66 @@
|
|
|
1062
1229
|
cursor: not-allowed;
|
|
1063
1230
|
}
|
|
1064
1231
|
|
|
1232
|
+
/* Video Placeholder */
|
|
1233
|
+
.nph-video-placeholder {
|
|
1234
|
+
display: flex;
|
|
1235
|
+
flex-direction: column;
|
|
1236
|
+
align-items: center;
|
|
1237
|
+
justify-content: center;
|
|
1238
|
+
aspect-ratio: 16 / 9;
|
|
1239
|
+
border-radius: 12px;
|
|
1240
|
+
border: 2px dashed var(--border, #e5e7eb);
|
|
1241
|
+
background: var(--muted, rgba(0, 0, 0, 0.02));
|
|
1242
|
+
cursor: pointer;
|
|
1243
|
+
transition: border-color 0.2s ease, background 0.2s ease;
|
|
1244
|
+
gap: 12px;
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
.nph-video-placeholder:hover {
|
|
1248
|
+
border-color: var(--muted-foreground, #9ca3af);
|
|
1249
|
+
background: var(--muted, rgba(0, 0, 0, 0.04));
|
|
1250
|
+
}
|
|
1251
|
+
|
|
1252
|
+
.nph-video-placeholder__icon {
|
|
1253
|
+
display: flex;
|
|
1254
|
+
align-items: center;
|
|
1255
|
+
justify-content: center;
|
|
1256
|
+
width: 56px;
|
|
1257
|
+
height: 56px;
|
|
1258
|
+
border-radius: 12px;
|
|
1259
|
+
background: var(--muted, rgba(0, 0, 0, 0.06));
|
|
1260
|
+
color: var(--muted-foreground, #6b7280);
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
.nph-video-placeholder__text {
|
|
1264
|
+
display: flex;
|
|
1265
|
+
flex-direction: column;
|
|
1266
|
+
align-items: center;
|
|
1267
|
+
gap: 2px;
|
|
1268
|
+
}
|
|
1269
|
+
|
|
1270
|
+
.nph-video-placeholder__title {
|
|
1271
|
+
display: block;
|
|
1272
|
+
font-size: 14px;
|
|
1273
|
+
font-weight: 600;
|
|
1274
|
+
color: var(--foreground, #111827);
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
.nph-video-placeholder__subtitle {
|
|
1278
|
+
display: block;
|
|
1279
|
+
font-size: 13px;
|
|
1280
|
+
color: var(--muted-foreground, #6b7280);
|
|
1281
|
+
}
|
|
1282
|
+
|
|
1283
|
+
.nph-video-placeholder__input {
|
|
1284
|
+
display: flex;
|
|
1285
|
+
align-items: center;
|
|
1286
|
+
gap: 8px;
|
|
1287
|
+
width: 100%;
|
|
1288
|
+
max-width: 420px;
|
|
1289
|
+
margin-top: 4px;
|
|
1290
|
+
}
|
|
1291
|
+
|
|
1065
1292
|
/* Video Block Dark Mode */
|
|
1066
1293
|
@media (prefers-color-scheme: dark) {
|
|
1067
1294
|
.nph-video-block {
|
|
@@ -1107,6 +1334,29 @@
|
|
|
1107
1334
|
border-color: var(--border, #374151);
|
|
1108
1335
|
}
|
|
1109
1336
|
|
|
1337
|
+
.dark .nph-video-placeholder {
|
|
1338
|
+
border-color: var(--border, #374151);
|
|
1339
|
+
background: var(--muted, rgba(255, 255, 255, 0.03));
|
|
1340
|
+
}
|
|
1341
|
+
|
|
1342
|
+
.dark .nph-video-placeholder:hover {
|
|
1343
|
+
border-color: var(--muted-foreground, #6b7280);
|
|
1344
|
+
background: var(--muted, rgba(255, 255, 255, 0.05));
|
|
1345
|
+
}
|
|
1346
|
+
|
|
1347
|
+
.dark .nph-video-placeholder__icon {
|
|
1348
|
+
background: var(--muted, rgba(255, 255, 255, 0.06));
|
|
1349
|
+
color: var(--muted-foreground, #9ca3af);
|
|
1350
|
+
}
|
|
1351
|
+
|
|
1352
|
+
.dark .nph-video-placeholder__title {
|
|
1353
|
+
color: var(--foreground, #f9fafb);
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1356
|
+
.dark .nph-video-placeholder__subtitle {
|
|
1357
|
+
color: var(--muted-foreground, #9ca3af);
|
|
1358
|
+
}
|
|
1359
|
+
|
|
1110
1360
|
/* Drag Handle */
|
|
1111
1361
|
.nph-drag-handle {
|
|
1112
1362
|
display: flex;
|